change structure generates data commands

packages/web/src/datagrid/ColumnManager.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import _, { indexOf, range } from 'lodash';
+  import _, { add, indexOf, range } from 'lodash';
   import { ChangeSet, DisplayColumn, GridDisplay } from 'dbgate-datalib';
   import { filterName } from 'dbgate-tools';
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
@@ -113,19 +113,29 @@
   $: tableInfo = display?.editableStructure;
   $: setTableInfo = updFunc => {
     const structure = updFunc(display?.editableStructure);
+    let added = [];
+    if (structure['__addDataCommands']) {
+      added = structure['__addDataCommands'];
+      delete structure['__addDataCommands'];
+    }
     dispatchChangeSet({
       type: 'set',
       value: {
         ...changeSetState?.value,
+        dataUpdateCommands: [...(changeSetState?.value?.dataUpdateCommands || []), ...added],
         structure,
       },
     });
+    tick().then(() => display.reload());
   };
 
+  $: addDataCommand = allowChangeChangeSetStructure;
+
   function handleAddColumn() {
     showModal(ColumnEditorModal, {
       setTableInfo,
       tableInfo,
+      addDataCommand,
       onAddNext: async () => {
         await tick();
         handleAddColumn();

packages/web/src/datagrid/ColumnManagerRow.svelte

@@ -6,6 +6,7 @@
   import { createEventDispatcher } from 'svelte';
   import { showModal } from '../modals/modalTools';
   import ColumnEditorModal from '../tableeditor/ColumnEditorModal.svelte';
+  import { editorDeleteColumn } from 'dbgate-tools';
 
   export let column;
   export let display;
@@ -21,9 +22,10 @@
   export let columnIndex = -1;
 
   export let allowChangeChangeSetStructure = false;
+  $: addDataCommand = allowChangeChangeSetStructure;
 
   function handleEditColumn() {
-    showModal(ColumnEditorModal, { columnInfo, tableInfo, setTableInfo });
+    showModal(ColumnEditorModal, { columnInfo, tableInfo, setTableInfo, addDataCommand });
   }
 
   function exchange(array, i1, i2) {
@@ -85,11 +87,7 @@
       <span class="icon" on:click={handleEditColumn}>
         <FontIcon icon="icon edit" />
       </span>
-      <span
-        class="icon"
-        on:click={() =>
-          setTableInfo(info => ({ ...info, columns: info.columns.filter(x => x.pairingId != columnInfo?.pairingId) }))}
-      >
+      <span class="icon" on:click={() => setTableInfo(info => editorDeleteColumn(info, columnInfo, addDataCommand))}>
         <FontIcon icon="icon delete" />
       </span>
       <span

packages/web/src/datagrid/JslDataGrid.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { createGridCache, createGridConfig, JslGridDisplay } from 'dbgate-datalib';
-  import { generateTablePairingId } from 'dbgate-tools';
+  import { generateTablePairingId, processJsonDataUpdateCommands } from 'dbgate-tools';
   import { writable } from 'svelte/store';
   import JslFormView from '../formview/JslFormView.svelte';
   import { apiOff, apiOn, useApiCall } from '../utility/api';
@@ -45,9 +45,11 @@
   }
   $: $effect;
 
+  $: infoWithPairingId = generateTablePairingId($info);
+
   $: display = new JslGridDisplay(
     jslid,
-    (allowChangeChangeSetStructure && changeSetState?.value?.structure) || generateTablePairingId($info),
+    (allowChangeChangeSetStructure && changeSetState?.value?.structure) || infoWithPairingId,
     $config,
     config.update,
     $cache,
@@ -75,5 +77,8 @@
     {changeSetStore}
     {dispatchChangeSet}
     {allowChangeChangeSetStructure}
+    preprocessLoadedRow={changeSetState?.value?.dataUpdateCommands
+      ? row => processJsonDataUpdateCommands(row, changeSetState?.value?.dataUpdateCommands)
+      : null}
   />
 {/key}

packages/web/src/datagrid/LoadingDataGridCore.svelte

@@ -15,6 +15,8 @@
   export let selectedCellsPublished;
   export let rowCountLoaded = null;
 
+  export let preprocessLoadedRow = null;
+
   // export let griderFactory;
 
   export let loadedRows = [];
@@ -65,7 +67,8 @@
       errorMessage = nextRows.errorMessage;
     } else {
       if (allRowCount == null) handleLoadRowCount();
-      loadedRows = [...loadedRows, ...nextRows];
+
+      loadedRows = [...loadedRows, ...(preprocessLoadedRow ? nextRows.map(preprocessLoadedRow) : nextRows)];
       isLoadedAll = nextRows.length === 0;
       //   const loadedInfo = {
       //     loadedRows: [...loadedRows, ...nextRows],

packages/web/src/tableeditor/ColumnEditorModal.svelte

@@ -17,6 +17,8 @@
   export let tableInfo = null;
   export let onAddNext;
   export let driver = null;
+
+  export let addDataCommand = false;
 </script>
 
 <FormProvider initialValues={fillEditorColumnInfo(columnInfo || {}, tableInfo)}>
@@ -55,9 +57,9 @@
         on:click={e => {
           closeCurrentModal();
           if (columnInfo) {
-            setTableInfo(tbl => editorModifyColumn(tbl, e.detail));
+            setTableInfo(tbl => editorModifyColumn(tbl, e.detail, addDataCommand));
           } else {
-            setTableInfo(tbl => editorAddColumn(tbl, e.detail));
+            setTableInfo(tbl => editorAddColumn(tbl, e.detail, addDataCommand));
             if (onAddNext) onAddNext();
           }
         }}
@@ -68,7 +70,7 @@
           value="Save"
           on:click={e => {
             closeCurrentModal();
-            setTableInfo(tbl => editorAddColumn(tbl, e.detail));
+            setTableInfo(tbl => editorAddColumn(tbl, e.detail, addDataCommand));
           }}
         />
       {/if}
@@ -80,7 +82,7 @@
           value="Remove"
           on:click={() => {
             closeCurrentModal();
-            setTableInfo(tbl => editorDeleteColumn(tbl, columnInfo));
+            setTableInfo(tbl => editorDeleteColumn(tbl, columnInfo, addDataCommand));
           }}
         />
       {/if}