SYNC: table cell view refactor

packages/web/src/celldata/TableCellView.svelte

@@ -12,7 +12,7 @@
   import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
   import SearchInput from '../elements/SearchInput.svelte';
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
-  import { _t } from '../translations'
+  import { _t } from '../translations';
 
   export let selection;
 
@@ -22,7 +22,7 @@
   $: editorTypes = firstSelection?.editorTypes;
   $: displayColumns = firstSelection?.displayColumns || [];
   $: realColumnUniqueNames = firstSelection?.realColumnUniqueNames || [];
-  $: setCellValue = selection?.setCellValue;
+  $: grider = firstSelection?.grider;
 
   $: uniqueRows = _.uniqBy(selection || [], 'row');
   $: isMultipleRows = uniqueRows.length > 1;
@@ -77,7 +77,13 @@
   const isChangedRef = createRef(false);
 
   function isJsonValue(value) {
-    if (_.isPlainObject(value) && !(value?.type == 'Buffer' && _.isArray(value.data)) && !value.$oid && !value.$bigint && !value.$decimal) {
+    if (
+      _.isPlainObject(value) &&
+      !(value?.type == 'Buffer' && _.isArray(value.data)) &&
+      !value.$oid &&
+      !value.$bigint &&
+      !value.$decimal
+    ) {
       return true;
     }
     if (_.isArray(value)) return true;
@@ -94,7 +100,7 @@
   }
 
   function handleDoubleClick(field) {
-    if (!editable || !setCellValue) return;
+    if (!editable || !grider) return;
     if (isJsonValue(field.value) && !field.hasMultipleValues) {
       openEditModal(field);
       return;
@@ -103,7 +109,7 @@
   }
 
   function startEditing(field) {
-    if (!editable || !setCellValue) return;
+    if (!editable || !grider) return;
     editingColumn = field.uniqueName;
     editValue = field.hasMultipleValues ? '' : stringifyCellValue(field.value, 'inlineEditorIntent', editorTypes).value;
     isChangedRef.set(false);
@@ -168,15 +174,28 @@
     editingColumn = null;
   }
 
+  function setCellValue(fieldName, value) {
+    if (!grider) return;
+
+    if (selection.length > 0) {
+      const uniqueRowIndices = _.uniq(selection.map(x => x.row));
+      grider.beginUpdate();
+      for (const row of uniqueRowIndices) {
+        grider.setCellValue(row, fieldName, value);
+      }
+      grider.endUpdate();
+    }
+  }
+
   function saveValue(field) {
-    if (!setCellValue) return;
+    if (!grider) return;
     const parsedValue = parseCellValue(editValue, editorTypes);
     setCellValue(field.uniqueName, parsedValue);
     isChangedRef.set(false);
   }
 
   function openEditModal(field) {
-    if (!setCellValue) return;
+    if (!grider) return;
     showModal(EditCellDataModal, {
       value: field.value,
       dataEditorTypesBehaviour: editorTypes,
@@ -201,23 +220,22 @@
     {#if rowData}
       <div class="search-wrapper" on:keydown={handleSearchKeyDown}>
         <SearchBoxWrapper noMargin>
-          <SearchInput placeholder={_t('tableCell.filterColumns', { defaultMessage: "Filter columns (regex)" })} bind:value={filter} />
+          <SearchInput
+            placeholder={_t('tableCell.filterColumns', { defaultMessage: 'Filter columns (regex)' })}
+            bind:value={filter}
+          />
           <CloseSearchButton bind:filter />
         </SearchBoxWrapper>
       </div>
     {/if}
     <div class="inner">
       {#if !rowData}
-        <div class="no-data">{_t('tableCell.noDataSelected', { defaultMessage: "No data selected" })}</div>
+        <div class="no-data">{_t('tableCell.noDataSelected', { defaultMessage: 'No data selected' })}</div>
       {:else}
         {#each filteredFields as field (field.uniqueName)}
           <div class="field">
             <div class="field-name">{field.columnName}</div>
-          <div 
+            <div class="field-value" class:editable on:dblclick={() => handleDoubleClick(field)}>
-            class="field-value"
-            class:editable
-            on:dblclick={() => handleDoubleClick(field)}
-          >
               {#if editingColumn === field.uniqueName}
                 <div class="editor-wrapper">
                   <input
@@ -240,7 +258,9 @@
                   {/if}
                 </div>
               {:else if field.hasMultipleValues}
-              <span class="multiple-values">({_t('tableCell.multipleValues', { defaultMessage: "Multiple values" })})</span>
+                <span class="multiple-values"
+                  >({_t('tableCell.multipleValues', { defaultMessage: 'Multiple values' })})</span
+                >
               {:else}
                 <CellValue
                   {rowData}
@@ -249,10 +269,7 @@
                   {editorTypes}
                 />
                 {#if isJsonValue(field.value)}
-                <ShowFormButton 
+                  <ShowFormButton icon="icon open-in-new" on:click={() => openJsonInNewTab(field)} />
-                  icon="icon open-in-new" 
-                  on:click={() => openJsonInNewTab(field)} 
-                />
                 {/if}
               {/if}
             </div>

packages/web/src/datagrid/DataGridCore.svelte

@@ -1260,6 +1260,7 @@
       editorTypes: display?.driver?.dataEditorTypesBehaviour,
       displayColumns: columns,
       realColumnUniqueNames,
+      grider,
     };
 
     const rowIndexes = _.sortBy(_.uniq(regular.map(x => x[0])));
@@ -1298,17 +1299,6 @@
       })
       .filter(x => x.column);
 
-    if (res.length > 0) {
-      const uniqueRowIndices = _.uniq(res.map(x => x.row));
-      res.setCellValue = (columnName, value) => {
-        grider.beginUpdate();
-        for (const row of uniqueRowIndices) {
-          grider.setCellValue(row, columnName, value);
-        }
-        grider.endUpdate();
-      };
-    }
-
     return res;
   }