refactor: joined FreeTableGrid and DataGrid into one component

packages/web/src/datagrid/DataGrid.svelte

@@ -1,3 +1,14 @@
+<script lang="ts" context="module">
+  function extractMacroValuesForMacro(macroValues, macro) {
+    // return {};
+    if (!macro) return {};
+    return {
+      ..._.fromPairs((macro.args || []).filter(x => x.default != null).map(x => [x.name, x.default])),
+      ..._.mapKeys(macroValues, (v, k) => k.replace(/^.*#/, '')),
+    };
+  }
+</script>
+
 <script lang="ts">
   import { setContext } from 'svelte';
   import { writable } from 'svelte/store';
@@ -6,7 +17,6 @@
   import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
   import VerticalSplitter from '../elements/VerticalSplitter.svelte';
   import FormViewFilters from '../formview/FormViewFilters.svelte';
-  import { extractMacroValuesForMacro } from '../freetable/FreeTableGrid.svelte';
   import MacroDetail from '../freetable/MacroDetail.svelte';
   import MacroManager from '../freetable/MacroManager.svelte';
   import createRef from '../utility/createRef';
@@ -14,6 +24,7 @@
   import WidgetColumnBarItem from '../widgets/WidgetColumnBarItem.svelte';
   import ColumnManager from './ColumnManager.svelte';
   import ReferenceManager from './ReferenceManager.svelte';
+  import FreeTableColumnEditor from '../freetable/FreeTableColumnEditor.svelte';
 
   export let config;
   export let gridCoreComponent;
@@ -26,6 +37,9 @@
   export let isDetailView = false;
   export let showReferences = false;
   export let showMacros;
+  export let freeTableColumn = false;
+  export let macroCondition;
+  export let onRunMacro;
 
   export let loadedRows;
 
@@ -41,27 +55,39 @@
   $: isFormView = !!(formDisplay && formDisplay.config && formDisplay.config.isFormView);
 
   const handleExecuteMacro = () => {
-    const newChangeSet = runMacroOnChangeSet(
+    onRunMacro($selectedMacro, extractMacroValuesForMacro($macroValues, $selectedMacro), selectedCellsPublished);
-      $selectedMacro,
-      extractMacroValuesForMacro($macroValues, $selectedMacro),
-      selectedCellsPublished,
-      changeSetState?.value,
-      display
-    );
-    if (newChangeSet) {
-      dispatchChangeSet({ type: 'set', value: newChangeSet });
-    }
     $selectedMacro = null;
+
+    // const newChangeSet = runMacroOnChangeSet(
+    //   $selectedMacro,
+    //   extractMacroValuesForMacro($macroValues, $selectedMacro),
+    //   selectedCellsPublished,
+    //   changeSetState?.value,
+    //   display
+    // );
+    // if (newChangeSet) {
+    //   dispatchChangeSet({ type: 'set', value: newChangeSet });
+    // }
+    // $selectedMacro = null;
   };
 </script>
 
 <HorizontalSplitter initialValue="300px" bind:size={managerSize}>
   <div class="left" slot="1">
     <WidgetColumnBar>
-      <WidgetColumnBarItem title="Columns" name="columns" height={showReferences ? '40%' : '60%'} skip={isFormView}>
+      <WidgetColumnBarItem
+        title="Columns"
+        name="columns"
+        height={showReferences ? '40%' : '60%'}
+        skip={freeTableColumn || isFormView}
+      >
         <ColumnManager {...$$props} {managerSize} />
       </WidgetColumnBarItem>
 
+      <WidgetColumnBarItem title="Columns" name="freeColumns" height="40%" skip={!freeTableColumn}>
+        <FreeTableColumnEditor {...$$props} {managerSize} />
+      </WidgetColumnBarItem>
+
       <WidgetColumnBarItem title="Filters" name="filters" height="30%" skip={!isFormView}>
         <FormViewFilters {...$$props} {managerSize} />
       </WidgetColumnBarItem>
@@ -77,7 +103,7 @@
       </WidgetColumnBarItem>
 
       <WidgetColumnBarItem title="Macros" name="macros" skip={!showMacros} collapsed={isDetailView}>
-        <MacroManager {...$$props} {managerSize} macroCondition={macro => macro.type == 'transformValue'} />
+        <MacroManager {...$$props} {managerSize} />
       </WidgetColumnBarItem>
     </WidgetColumnBar>
   </div>

packages/web/src/datagrid/TableDataGrid.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-  import { createGridCache, createGridConfig, TableFormViewDisplay, TableGridDisplay } from 'dbgate-datalib';
+  import {
+    createGridCache,
+    createGridConfig,
+    runMacroOnChangeSet,
+    TableFormViewDisplay,
+    TableGridDisplay,
+  } from 'dbgate-datalib';
   import { getFilterValueExpression } from 'dbgate-filterparser';
   import { findEngineDriver } from 'dbgate-tools';
   import _ from 'lodash';
@@ -20,6 +26,9 @@
   export let schemaName;
   export let pureName;
 
+  export let changeSetState;
+  export let dispatchChangeSet;
+
   export let config;
   export let setConfig;
 
@@ -106,6 +115,13 @@
     setChildConfig(null, null);
   };
 
+  function handleRunMacro(macro, params, cells) {
+    const newChangeSet = runMacroOnChangeSet(macro, params, cells, changeSetState?.value, display);
+    if (newChangeSet) {
+      dispatchChangeSet({ type: 'set', value: newChangeSet });
+    }
+  }
+
   $: reference = config.reference;
   $: childConfig = config.childConfig;
 </script>
@@ -120,6 +136,8 @@
       {formDisplay}
       showReferences
       showMacros
+      onRunMacro={handleRunMacro}
+      macroCondition={macro => macro.type == 'transformValue'}
       onReferenceSourceChanged={reference ? handleReferenceSourceChanged : null}
       onReferenceClick={value => {
         if (value && value.referenceId && reference && reference.referenceId == value.referenceId) {

packages/web/src/freetable/FreeTableGrid.svelte

@@ -1,101 +0,0 @@
-<script lang="ts" context="module">
-  export function extractMacroValuesForMacro(macroValues, macro) {
-    // return {};
-    if (!macro) return {};
-    return {
-      ..._.fromPairs((macro.args || []).filter(x => x.default != null).map(x => [x.name, x.default])),
-      ..._.mapKeys(macroValues, (v, k) => k.replace(/^.*#/, '')),
-    };
-  }
-</script>
-
-<script lang="ts">
-  import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
-  import VerticalSplitter from '../elements/VerticalSplitter.svelte';
-  import WidgetColumnBar from '../widgets/WidgetColumnBar.svelte';
-  import WidgetColumnBarItem from '../widgets/WidgetColumnBarItem.svelte';
-  import ColumnManager from '../datagrid/ColumnManager.svelte';
-  import ReferenceManager from '../datagrid/ReferenceManager.svelte';
-  import FreeTableGridCore from './FreeTableGridCore.svelte';
-  import FreeTableColumnEditor from './FreeTableColumnEditor.svelte';
-  import MacroManager from './MacroManager.svelte';
-  import { setContext } from 'svelte';
-  import { writable } from 'svelte/store';
-  import MacroDetail from './MacroDetail.svelte';
-  import { runMacro } from 'dbgate-datalib';
-  import _ from 'lodash';
-
-  export let modelState;
-  export let dispatchModel;
-
-  let managerSize;
-  let selectedCellsPublished = [];
-
-  const selectedMacro = writable(null);
-  setContext('selectedMacro', selectedMacro);
-  const macroValues = writable({});
-  setContext('macroValues', macroValues);
-
-  const handleExecuteMacro = () => {
-    const newModel = runMacro(
-      $selectedMacro,
-      extractMacroValuesForMacro($macroValues, $selectedMacro),
-      modelState.value,
-      false,
-      selectedCellsPublished
-    );
-    dispatchModel({ type: 'set', value: newModel });
-    $selectedMacro = null;
-  };
-</script>
-
-<HorizontalSplitter initialValue="300px" bind:size={managerSize}>
-  <div class="left" slot="1">
-    <WidgetColumnBar>
-      <WidgetColumnBarItem title="Columns" name="columns" height="40%">
-        <FreeTableColumnEditor {...$$props} {managerSize} />
-      </WidgetColumnBarItem>
-
-      <WidgetColumnBarItem title="Macros" name="macros">
-        <MacroManager {...$$props} {managerSize} />
-      </WidgetColumnBarItem>
-    </WidgetColumnBar>
-  </div>
-  <div class="grid" slot="2">
-    <VerticalSplitter initialValue="70%" isSplitter={!!$selectedMacro}>
-      <svelte:fragment slot="1">
-        <FreeTableGridCore
-          {...$$props}
-          onSelectionChanged={value => (selectedCellsPublished = value)}
-          macroValues={extractMacroValuesForMacro($macroValues, $selectedMacro)}
-          {selectedCellsPublished}
-          macroPreview={$selectedMacro}
-        />
-      </svelte:fragment>
-
-      <!-- macroPreview={selectedMacro}
-      macroValues={extractMacroValuesForMacro(macroValues, selectedMacro)}
-      onSelectionChanged={setSelectedCells}
-      {setSelectedMacro} -->
-
-      <svelte:fragment slot="2">
-        {#if $selectedMacro}
-          <MacroDetail onExecute={handleExecuteMacro} />
-        {/if}
-      </svelte:fragment>
-    </VerticalSplitter>
-  </div>
-</HorizontalSplitter>
-
-<style>
-  .left {
-    display: flex;
-    flex: 1;
-    background-color: var(--theme-bg-0);
-  }
-
-  .grid {
-    position: relative;
-    flex-grow: 1;
-  }
-</style>

packages/web/src/tabs/FreeTableTab.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-  import { createFreeTableModel } from 'dbgate-datalib';
+  import { createFreeTableModel, runMacro } from 'dbgate-datalib';
+  import DataGrid from '../datagrid/DataGrid.svelte';
   import ErrorInfo from '../elements/ErrorInfo.svelte';
   import LoadingInfo from '../elements/LoadingInfo.svelte';
 
   import FreeTableGrid from '../freetable/FreeTableGrid.svelte';
+  import FreeTableGridCore from '../freetable/FreeTableGridCore.svelte';
   import { showModal } from '../modals/modalTools';
   import SaveArchiveModal from '../modals/SaveArchiveModal.svelte';
   import useEditorData from '../query/useEditorData';
@@ -52,6 +54,11 @@
       props: { archiveFile: file, archiveFolder: folder },
     }));
   };
+
+  function handleRunMacro(macro, params, cells) {
+    const newModel = runMacro(macro, params, $modelState.value, false, cells);
+    dispatchModel({ type: 'set', value: newModel });
+  }
 </script>
 
 {#if isLoading}
@@ -59,12 +66,16 @@
 {:else if errorMessage}
   <ErrorInfo message={errorMessage} />
 {:else}
-  <FreeTableGrid
+  <DataGrid
     config={$config}
     setConfig={config.update}
     modelState={$modelState}
     {dispatchModel}
     onSave={handleSave}
     focusOnVisible
+    gridCoreComponent={FreeTableGridCore}
+    freeTableColumn
+    showMacros
+    onRunMacro={handleRunMacro}
   />
 {/if}