editing multiline cell value #378 #371 #359

packages/web/src/datagrid/DataGridCell.svelte

@@ -5,6 +5,8 @@
   import { openJsonDocument } from '../tabs/JsonTab.svelte';
   import openNewTab from '../utility/openNewTab';
   import CellValue from './CellValue.svelte';
+  import { showModal } from '../modals/modalTools';
+  import EditCellDataModal from '../modals/EditCellDataModal.svelte';
 
   export let rowIndex;
   export let col;
@@ -29,6 +31,7 @@
   export let isAutoFillMarker = false;
   export let isCurrentCell = false;
   export let onDictionaryLookup = null;
+  export let onSetValue;
 
   $: value = col.isStructured ? _.get(rowData || {}, col.uniquePath) : (rowData || {})[col.uniqueName];
 
@@ -52,11 +55,10 @@
   function shouldShowTextModalButton(col) {
     const m = col?.dataType?.match(/.*char.*\(([^\)]+)\)/);
     if (m && m[1]) {
-      return parseInt(m[1]) >= 30 || m[1]?.toUpperCase() == 'MAX';
+      return parseInt(m[1]) >= 200 || m[1]?.toUpperCase() == 'MAX';
     }
     return false;
   }
-
 </script>
 
 <td
@@ -123,9 +125,17 @@
     />
   {/if}
 
-  <!-- {#if shouldShowTextModalButton(col)}
+  {#if shouldShowTextModalButton(col)}
-    <ShowFormButton icon="icon edit" on:click={() => openJsonDocument(value, undefined, true)} />
+    <ShowFormButton
-  {/if} -->
+      icon="icon edit"
+      on:click={() => {
+        showModal(EditCellDataModal, {
+          value,
+          onSave: onSetValue,
+        });
+      }}
+    />
+  {/if}
 
   {#if isAutoFillMarker}
     <div class="autoFillMarker autofillHandleMarker" />

packages/web/src/datagrid/DataGridCore.svelte

@@ -247,6 +247,14 @@
     onClick: () => getCurrentDataGrid().addJsonDocument(),
   });
 
+  registerCommand({
+    id: 'dataGrid.editCellValue',
+    category: 'Data grid',
+    name: 'Edit cell value',
+    testEnabled: () => getCurrentDataGrid()?.editCellValueEnabled(),
+    onClick: () => getCurrentDataGrid().editCellValue(),
+  });
+
   function getSelectedCellsInfo(selectedCells, grider, realColumnUniqueNames, selectedRowData) {
     if (selectedCells.length > 1 && selectedCells.every(x => _.isNumber(x[0]) && _.isNumber(x[1]))) {
       let sum = _.sumBy(selectedCells, cell => {
@@ -327,6 +335,7 @@
   import { isCtrlOrCommandKey, isMac } from '../utility/common';
   import { selectionCouldBeShownOnMap } from '../elements/MapView.svelte';
   import ErrorMessageModal from '../modals/ErrorMessageModal.svelte';
+  import EditCellDataModal from '../modals/EditCellDataModal.svelte';
 
   export let onLoadNextData = undefined;
   export let grider = undefined;
@@ -706,6 +715,22 @@
     editJsonRowDocument(grider, rowIndex);
   }
 
+  export function editCellValueEnabled() {
+    return grider.editable && selectedCells.length == 1;
+  }
+
+  export function editCellValue() {
+    if (!currentCell) return false;
+    const rowData = grider.getRowData(currentCell[0]);
+    if (!rowData) return null;
+    const cellData = rowData[realColumnUniqueNames[currentCell[1]]];
+
+    showModal(EditCellDataModal, {
+      value: cellData?.toString() || '',
+      onSave: value => grider.setCellValue(currentCell[0], realColumnUniqueNames[currentCell[1]], value),
+    });
+  }
+
   export function addJsonDocumentEnabled() {
     return grider.editable;
   }
@@ -1058,7 +1083,9 @@
         dragStartCell = cell;
 
         if (isRegularCell(cell) && !_.isEqual(cell, $inplaceEditorState.cell) && _.isEqual(cell, oldCurrentCell)) {
-          dispatchInsplaceEditor({ type: 'show', cell, selectAll: true });
+          if (!showMultilineCellEditorConditional(cell)) {
+            dispatchInsplaceEditor({ type: 'show', cell, selectAll: true });
+          }
         } else if (!_.isEqual(cell, $inplaceEditorState.cell)) {
           dispatchInsplaceEditor({ type: 'close' });
         }
@@ -1068,6 +1095,21 @@
     if (display.focusedColumns) display.focusColumns(null);
   }
 
+  function showMultilineCellEditorConditional(cell) {
+    if (!cell) return false;
+    const rowData = grider.getRowData(cell[0]);
+    if (!rowData) return null;
+    const cellData = rowData[realColumnUniqueNames[cell[1]]];
+    if (_.isString(cellData) && cellData.includes('\n')) {
+      showModal(EditCellDataModal, {
+        value: cellData,
+        onSave: value => grider.setCellValue(cell[0], realColumnUniqueNames[cell[1]], value),
+      });
+      return true;
+    }
+    return false;
+  }
+
   function handleGridMouseMove(event) {
     if (autofillDragStartCell) {
       const cell = cellFromEvent(event);
@@ -1197,7 +1239,9 @@
 
     if (event.keyCode == keycodes.f2 || event.keyCode == keycodes.enter) {
       // @ts-ignore
-      dispatchInsplaceEditor({ type: 'show', cell: currentCell, selectAll: true });
+      if (!showMultilineCellEditorConditional(currentCell)) {
+        dispatchInsplaceEditor({ type: 'show', cell: currentCell, selectAll: true });
+      }
     }
 
     if (event.shiftKey) {
@@ -1516,6 +1560,8 @@
     { command: 'dataGrid.clearFilter' },
     { command: 'dataGrid.undo', hideDisabled: true },
     { command: 'dataGrid.redo', hideDisabled: true },
+    { divider: true },
+    { command: 'dataGrid.editCellValue', hideDisabled: true },
     { command: 'dataGrid.newJson', hideDisabled: true },
     { command: 'dataGrid.editJsonDocument', hideDisabled: true },
     { command: 'dataGrid.viewJsonDocument', hideDisabled: true },

packages/web/src/datagrid/DataGridRow.svelte

@@ -89,6 +89,7 @@
           autofillMarkerCell[0] == rowIndex &&
           grider.editable}
         onDictionaryLookup={() => handleLookup(col)}
+        onSetValue={value => grider.setCellValue(rowIndex, col.uniqueName, value)}
       />
     {/if}
   {/each}

packages/web/src/modals/EditCellDataModal.svelte

@@ -0,0 +1,48 @@
+<script>
+  import { onMount } from 'svelte';
+
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import FormProvider from '../forms/FormProvider.svelte';
+  import AceEditor from '../query/AceEditor.svelte';
+
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let onSave;
+  export let value;
+
+  let editor;
+
+  onMount(() => {
+    editor.getEditor().focus();
+  });
+</script>
+
+<FormProvider>
+  <ModalBase {...$$restProps}>
+    <div slot="header">Edit cell value</div>
+
+    <div class="editor">
+      <AceEditor bind:value bind:this={editor} />
+    </div>
+
+    <div slot="footer">
+      <FormStyledButton
+        value="Save"
+        on:click={() => {
+          onSave(value);
+          closeCurrentModal();
+        }}
+      />
+      <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
+    </div>
+  </ModalBase>
+</FormProvider>
+
+<style>
+  .editor {
+    position: relative;
+    height: 30vh;
+    width: 40vw;
+  }
+</style>