query design columns

packages/web/src/elements/QueryDesignColumns.svelte

@@ -0,0 +1,136 @@
+<script lang="ts" context="module">
+  function getTableDisplayName(column, tables) {
+    const table = (tables || []).find(x => x.designerId == column.designerId);
+    if (table) return table.alias || table.pureName;
+    return '';
+  }
+</script>
+
+<script lang="ts">
+  import { map } from 'lodash';
+  import DataFilterControl from '../datagrid/DataFilterControl.svelte';
+  import { findDesignerFilterType } from '../designer/designerTools';
+  import CheckboxField from '../forms/CheckboxField.svelte';
+  import SelectField from '../forms/SelectField.svelte';
+  import TextField from '../forms/TextField.svelte';
+  import InlineButton from './InlineButton.svelte';
+
+  import TableControl from './TableControl.svelte';
+
+  export let value;
+  export let onChange;
+
+  const changeColumn = col => {
+    onChange(current => ({
+      ...current,
+      columns: (current.columns || []).map(x =>
+        x.designerId == col.designerId && x.columnName == col.columnName ? col : x
+      ),
+    }));
+  };
+
+  const removeColumn = col => {
+    onChange(current => ({
+      ...current,
+      columns: (current.columns || []).filter(x => x.designerId != col.designerId || x.columnName != col.columnName),
+    }));
+  };
+
+  $: columns = value?.columns;
+  $: tables = value?.tables;
+  $: hasGroupedColumn = !!(columns || []).find(x => x.isGrouped);
+</script>
+
+<TableControl
+  rows={columns || []}
+  columns={[
+    { fieldName: 'columnName', header: 'Column/Expression' },
+    { fieldName: 'tableDisplayName', header: 'Table', formatter: row => getTableDisplayName(row, tables) },
+    { fieldName: 'isOutput', header: 'Output', slot: 0 },
+    { fieldName: 'alias', header: 'Alias', slot: 1 },
+    { fieldName: 'isGrouped', header: 'Group by', slot: 2 },
+    { fieldName: 'aggregate', header: 'Aggregate', slot: 3 },
+    { fieldName: 'sortOrder', header: 'Sort order', slot: 4 },
+    { fieldName: 'filter', header: 'Filter', slot: 5 },
+    hasGroupedColumn && { fieldName: 'groupFilter', header: 'Group filter', slot: 6 },
+    { fieldName: 'actions', header: '', slot: 7 },
+  ]}
+>
+  <svelte:fragment slot="0" let:row>
+    <CheckboxField
+      checked={row.isOutput}
+      onChange={e => {
+        if (e.target.checked) changeColumn({ ...row, isOutput: true });
+        else changeColumn({ ...row, isOutput: false });
+      }}
+    />
+  </svelte:fragment>
+  <svelte:fragment slot="1" let:row>
+    <TextField
+      value={row.alias}
+      on:input={e => {
+        changeColumn({ ...row, alias: e.target.value });
+      }}
+    />
+  </svelte:fragment>
+  <svelte:fragment slot="2" let:row>
+    <CheckboxField
+      checked={row.isGrouped}
+      on:change={e => {
+        if (e.target.checked) changeColumn({ ...row, isGrouped: true });
+        else changeColumn({ ...row, isGrouped: false });
+      }}
+    />
+  </svelte:fragment>
+  <svelte:fragment slot="3" let:row>
+    {#if !row.isGrouped}
+      <SelectField
+        isNative
+        value={row.aggregate}
+        on:change={e => {
+          changeColumn({ ...row, aggregate: e.detail });
+        }}
+        options={['---', 'MIN', 'MAX', 'COUNT', 'COUNT DISTINCT', 'SUM', 'AVG'].map(x => ({ label: x, value: x }))}
+      />
+    {/if}
+  </svelte:fragment>
+  <svelte:fragment slot="4" let:row>
+    <SelectField
+      isNative
+      value={row.sortOrder}
+      on:change={e => {
+        changeColumn({ ...row, sortOrder: parseInt(e.detail) });
+      }}
+      options={[
+        { label: '---', value: '0' },
+        { label: '1st, ascending', value: '1' },
+        { label: '1st, descending', value: '-1' },
+        { label: '2nd, ascending', value: '2' },
+        { label: '2nd, descending', value: '-2' },
+        { label: '3rd, ascending', value: '3' },
+        { label: '3rd, descending', value: '-3' },
+      ]}
+    />
+  </svelte:fragment>
+  <svelte:fragment slot="5" let:row>
+    <DataFilterControl
+      filterType={findDesignerFilterType(row, value)}
+      filter={row.filter}
+      setFilter={filter => {
+        changeColumn({ ...row, filter });
+      }}
+    />
+  </svelte:fragment>
+  <svelte:fragment slot="6" let:row>
+    <DataFilterControl
+      filterType={findDesignerFilterType(row, value)}
+      filter={row.groupFilter}
+      setFilter={groupFilter => {
+        changeColumn({ ...row, groupFilter });
+      }}
+    />
+  </svelte:fragment>
+  <svelte:fragment slot="7" let:row>
+    <InlineButton on:click={() => removeColumn(row)}>Remove</InlineButton>
+  </svelte:fragment>
+</TableControl>