macro parameters

packages/web/src/freetable/FreeTableGrid.svelte

@@ -16,10 +16,35 @@
   import ColumnManager from '../datagrid/ColumnManager.svelte';
   import ReferenceManager from '../datagrid/ReferenceManager.svelte';
   import FreeTableGridCore from './FreeTableGridCore.svelte';
-import FreeTableColumnEditor from './FreeTableColumnEditor.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 selectedMacro;
+
+  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,
+      [] // selectedCells
+    );
+    dispatchModel({ type: 'set', value: newModel });
+    $selectedMacro = null;
+  };
 </script>
 
 <HorizontalSplitter initialValue="300px" bind:size={managerSize}>
@@ -29,13 +54,13 @@ import FreeTableColumnEditor from './FreeTableColumnEditor.svelte';
         <FreeTableColumnEditor {...$$props} {managerSize} />
       </WidgetColumnBarItem>
 
-      <!-- <WidgetColumnBarItem title="Macros" name="macros">
+      <WidgetColumnBarItem title="Macros" name="macros">
         <MacroManager {...$$props} {managerSize} />
-      </WidgetColumnBarItem> -->
+      </WidgetColumnBarItem>
     </WidgetColumnBar>
   </div>
   <div class="grid" slot="2">
-    <VerticalSplitter initialValue="70%">
+    <VerticalSplitter initialValue="70%" isSplitter={!!$selectedMacro}>
       <svelte:fragment slot="1">
         <FreeTableGridCore {...$$props} />
       </svelte:fragment>
@@ -45,15 +70,11 @@ import FreeTableColumnEditor from './FreeTableColumnEditor.svelte';
       onSelectionChanged={setSelectedCells}
       {setSelectedMacro} -->
 
-      <!-- {#if selectedMacro}
-        <MacroDetail
-          {selectedMacro}
-          {setSelectedMacro}
-          onChangeValues={setMacroValues}
-          {macroValues}
-          onExecute={handleExecuteMacro}
-        />
-      {/if} -->
+      <svelte:fragment slot="2">
+        {#if $selectedMacro}
+          <MacroDetail onExecute={handleExecuteMacro} />
+        {/if}
+      </svelte:fragment>
     </VerticalSplitter>
   </div>
 </HorizontalSplitter>

packages/web/src/freetable/MacroDetail.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+
+  import TabControl from '../elements/TabControl.svelte';
+  import AceEditor from '../query/AceEditor.svelte';
+
+  import MacroHeader from './MacroHeader.svelte';
+  import MacroInfoTab from './MacroInfoTab.svelte';
+
+  const selectedMacro = getContext('selectedMacro') as any;
+
+  export let onExecute;
+</script>
+
+<div class="container">
+  <MacroHeader {onExecute} />
+  <TabControl
+    tabs={[
+      {
+        label: 'Macro detail',
+        component: MacroInfoTab,
+      },
+      {
+        label: 'JavaScript',
+        component: AceEditor,
+        props: {
+          readOnly: true,
+          value: $selectedMacro?.code,
+          mode: 'javascript',
+        },
+      },
+    ]}
+  />
+</div>
+
+<style>
+  .container {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+</style>

packages/web/src/freetable/MacroHeader.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import ToolbarButton from '../widgets/ToolbarButton.svelte';
+
+  export let onExecute;
+
+  const selectedMacro = getContext('selectedMacro') as any;
+</script>
+
+<div class="container">
+  <div class="header">
+    <FontIcon icon="img macro" />
+    <div class="ml-2">
+      {$selectedMacro?.title}
+    </div>
+  </div>
+  <div class="buttons">
+    <ToolbarButton icon="icon run" on:click={onExecute}>Execute</ToolbarButton>
+    <ToolbarButton icon="icon close" on:click={() => ($selectedMacro = null)}>Close</ToolbarButton>
+  </div>
+</div>
+
+<style>
+  .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    background: var(--theme-bg-modalheader);
+    height: var(--dim-toolbar-height);
+    min-height: var(--dim-toolbar-height);
+    overflow: hidden;
+    border-top: 1px solid var(--theme-border);
+    border-bottom: 1px solid var(--theme-border);
+  }
+
+  .header {
+    font-weight: bold;
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+  }
+
+  .buttons {
+    display: flex;
+    align-items: stretch;
+  }
+</style>

packages/web/src/freetable/MacroInfoTab.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+
+  import FormStyledButton from '../elements/FormStyledButton.svelte';
+
+  import WidgetTitle from '../widgets/WidgetTitle.svelte';
+  import MacroParameters from './MacroParameters.svelte';
+
+  const selectedMacro = getContext('selectedMacro') as any;
+
+  export let onExecute;
+</script>
+
+<div class="wrapper">
+  <div class="section">
+    <WidgetTitle>Execute</WidgetTitle>
+    <FormStyledButton value="Execute" on:click={onExecute} />
+  </div>
+
+  <div class="section">
+    <WidgetTitle>Parameters</WidgetTitle>
+    {#if $selectedMacro?.args && $selectedMacro?.args?.length > 0}
+      {#key $selectedMacro?.name}
+        <MacroParameters args={$selectedMacro?.args||[]} namePrefix={`${$selectedMacro?.name}#`} />
+      {/key}
+    {:else}
+      <div class="m-1">This macro has no parameters</div>
+    {/if}
+  </div>
+
+  <div class="section">
+    <WidgetTitle>Description</WidgetTitle>
+    <div class="m-1">{$selectedMacro?.description}</div>
+  </div>
+</div>
+
+<style>
+  .wrapper {
+    display: flex;
+    overflow-y: auto;
+  }
+  .section {
+    margin: 5px;
+  }
+</style>

packages/web/src/freetable/MacroManager.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import AppObjectList from '../appobj/AppObjectList.svelte';
+  import * as macroAppObject from '../appobj/MacroAppObject.svelte';
+
+  import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
+  import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
+  import SearchInput from '../elements/SearchInput.svelte';
+  import macros from './macros';
+
+  let filter = '';
+  export let managerSize;
+</script>
+
+<ManagerInnerContainer width={managerSize}>
+  <SearchBoxWrapper>
+    <SearchInput placeholder="Search macros" bind:value={filter} />
+  </SearchBoxWrapper>
+  <AppObjectList list={_.sortBy(macros, 'title')} module={macroAppObject} {filter} groupFunc={data => data.group} />
+</ManagerInnerContainer>

packages/web/src/freetable/MacroParameters.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import _ from 'lodash';
+  import { getContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import FormArgumentList from '../forms/FormArgumentList.svelte';
+  import FormProviderCore from '../forms/FormProviderCore.svelte';
+  import FormFieldTemplateRow from '../modals/FormFieldTemplateRow.svelte';
+
+  export let args = [];
+  const macroValues = getContext('macroValues');
+  export let namePrefix;
+  // export let onChangeValues;
+
+  //   const initialValues = {
+  //     ..._.fromPairs(args.filter(x => x.default != null).map(x => [`${namePrefix}${x.name}`, x.default])),
+  //     ...macroValues,
+  //   };
+
+  // const values = writable(initialValues);
+
+  // $: if (onChangeValues) onChangeValues($values);
+</script>
+
+<FormProviderCore values={macroValues} template={FormFieldTemplateRow}>
+  <FormArgumentList {args} {namePrefix} />
+</FormProviderCore>