lookup distinct values

packages/web/src/datagrid/DataFilterControl.svelte

@@ -15,6 +15,7 @@
   import InlineButton from '../elements/InlineButton.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
   import DictionaryLookupModal from '../modals/DictionaryLookupModal.svelte';
+  import ValueLookupModal from '../modals/ValueLookupModal.svelte';
 
   export let isReadOnly = false;
   export let filterType;
@@ -28,6 +29,10 @@
   export let database = null;
   export let driver = null;
 
+  export let pureName = null;
+  export let schemaName = null;
+  export let columnName = null;
+
   let value;
   let isError;
   let isOk;
@@ -209,6 +214,19 @@
     });
   }
 
+  function handleShowValuesModal() {
+    showModal(ValueLookupModal, {
+      conid,
+      database,
+      driver,
+      multiselect: true,
+      schemaName,
+      pureName,
+      columnName,
+      onConfirm: keys => setFilter(keys.map(x => `'${x}'`).join(',')),
+    });
+  }
+
   $: value = filter;
 
   $: {
@@ -247,10 +265,16 @@
     class:isOk
     placeholder="Filter"
   />
-  {#if foreignKey && conid && database}
+  {#if conid && database}
+    {#if foreignKey}
       <InlineButton on:click={handleShowDictionary} narrow square>
         <FontIcon icon="icon dots-horizontal" />
       </InlineButton>
+    {:else if pureName && columnName}
+      <InlineButton on:click={handleShowValuesModal} narrow square>
+        <FontIcon icon="icon dots-vertical" />
+      </InlineButton>
+    {/if}
   {/if}
   <DropDownButton icon="icon filter" menu={createMenu} narrow />
   {#if showResizeSplitter}

packages/web/src/datagrid/DataGridCore.svelte

@@ -1254,6 +1254,9 @@
                 <DataFilterControl
                   onGetReference={value => (domFilterControlsRef.get()[col.uniqueName] = value)}
                   foreignKey={col.foreignKey}
+                  columnName={col.uniquePath.length == 1 ? col.uniquePath[0] : null}
+                  pureName={col.pureName}
+                  schemaName={col.schemaName}
                   {conid}
                   {database}
                   driver={display?.driver}

packages/web/src/modals/DictionaryLookupModal.svelte

@@ -179,8 +179,11 @@
             checked={checkedKeys.includes(row[tableInfo.primaryKey.columns[0].columnName])}
             on:change={e => {
               const value = row[tableInfo.primaryKey.columns[0].columnName];
-              if (e.target.checked) checkedKeys = [...checkedKeys, value];
+              if (e.target.checked) {
-              else checkedKeys = checkedKeys.filter(x => x != value);
+                if (!checkedKeys.includes(value)) checkedKeys = [...checkedKeys, value];
+              } else {
+                if (checkedKeys.includes(value)) checkedKeys = checkedKeys.filter(x => x != value);
+              }
               e.stopPropagation();
             }}
           />

packages/web/src/modals/ValueLookupModal.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+  import FormProvider from '../forms/FormProvider.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import FormStyledButton from '../elements/FormStyledButton.svelte';
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal, showModal } from './modalTools';
+  import DefineDictionaryDescriptionModal from './DefineDictionaryDescriptionModal.svelte';
+  import ScrollableTableControl from '../elements/ScrollableTableControl.svelte';
+  import axiosInstance from '../utility/axiosInstance';
+  import { getTableInfo } from '../utility/metadataLoaders';
+  import { getDictionaryDescription } from '../utility/dictionaryDescriptionTools';
+  import { onMount } from 'svelte';
+  import { dumpSqlSelect } from 'dbgate-sqltree';
+  import LoadingInfo from '../elements/LoadingInfo.svelte';
+  import SearchInput from '../elements/SearchInput.svelte';
+  import FormTextField from '../forms/FormTextField.svelte';
+  import _ from 'lodash';
+
+  export let onConfirm;
+  export let conid;
+  export let database;
+  export let pureName;
+  export let schemaName;
+  export let columnName;
+  export let driver;
+  export let multiselect = false;
+
+  let rows = null;
+  let tableInfo;
+  let isLoading = false;
+
+  let search = '';
+
+  let checkedKeys = [];
+
+  async function reload() {
+    tableInfo = await getTableInfo({ conid, database, schemaName, pureName });
+
+    if (!tableInfo) return;
+
+    const dmp = driver.createDumper();
+    const select = {
+      commandType: 'select',
+      distinct: true,
+      topRecords: 100,
+
+      from: {
+        name: {
+          schemaName,
+          pureName,
+        },
+      },
+      columns: [
+        {
+          exprType: 'column',
+          columnName,
+        },
+      ],
+      orderBy: [
+        {
+          exprType: 'column',
+          columnName,
+        },
+      ],
+    };
+
+    if (search) {
+      const tokens = _.compact(search.split(' ').map(x => x.trim()));
+      if (tokens.length > 0) {
+        // @ts-ignore
+        select.where = {
+          conditionType: 'and',
+          conditions: tokens.map(token => ({
+            conditionType: 'like',
+            left: {
+              exprType: 'column',
+              columnName,
+            },
+            right: {
+              exprType: 'value',
+              value: `%${token}%`,
+            },
+          })),
+        };
+      }
+    }
+
+    // @ts-ignore
+    dumpSqlSelect(dmp, select);
+
+    isLoading = true;
+    const response = await axiosInstance.request({
+      url: 'database-connections/query-data',
+      method: 'post',
+      params: {
+        conid,
+        database,
+      },
+      data: { sql: dmp.s },
+    });
+
+    rows = response.data.rows;
+    isLoading = false;
+  }
+
+  $: {
+    search;
+    reload();
+  }
+
+  onMount(() => {
+    reload();
+  });
+</script>
+
+<FormProvider>
+  <ModalBase {...$$restProps}>
+    <svelte:fragment slot="header">Choose value from {columnName}</svelte:fragment>
+
+    <!-- <FormTextField name="search" label='Search' placeholder="Search" bind:value={search} /> -->
+    <div class="largeFormMarker">
+      <SearchInput placeholder="Search" bind:value={search} isDebounced />
+    </div>
+
+    {#if isLoading}
+      <LoadingInfo message="Loading data" />
+    {/if}
+
+    {#if !isLoading && tableInfo && rows}
+      <div class="tableWrapper">
+        <ScrollableTableControl
+          {rows}
+          clickable
+          on:clickrow={e => {
+            const value = e.detail[columnName];
+            if (multiselect) {
+              if (checkedKeys.includes(value)) checkedKeys = checkedKeys.filter(x => x != value);
+              else checkedKeys = [...checkedKeys, value];
+            } else {
+              closeCurrentModal();
+              onConfirm(value);
+            }
+          }}
+          columns={[
+            multiselect && {
+              fieldName: 'checked',
+              header: '',
+              width: '30px',
+              slot: 1,
+            },
+            {
+              fieldName: 'value',
+              header: 'Value',
+              formatter: row => row[columnName],
+            },
+          ]}
+        >
+          <input
+            type="checkbox"
+            let:row
+            slot="1"
+            checked={checkedKeys.includes(row[columnName])}
+            on:change={e => {
+              const value = row[columnName];
+              if (e.target.checked) {
+                if (!checkedKeys.includes(value)) checkedKeys = [...checkedKeys, value];
+              } else {
+                if (checkedKeys.includes(value)) checkedKeys = checkedKeys.filter(x => x != value);
+              }
+              e.stopPropagation();
+            }}
+          />
+        </ScrollableTableControl>
+      </div>
+    {/if}
+
+    <svelte:fragment slot="footer">
+      {#if multiselect}
+        <FormSubmit
+          value="OK"
+          on:click={() => {
+            closeCurrentModal();
+            onConfirm(checkedKeys);
+          }}
+        />
+      {/if}
+      <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
+    </svelte:fragment>
+  </ModalBase>
+</FormProvider>
+
+<style>
+  .tableWrapper {
+    position: relative;
+    max-height: 300px;
+    height: 300px;
+  }
+</style>