lookup filters

packages/web/src/datagrid/DataFilterControl.svelte

@@ -26,6 +26,7 @@
   export let foreignKey = null;
   export let conid = null;
   export let database = null;
+  export let driver = null;
 
   let value;
   let isError;
@@ -200,8 +201,10 @@
     showModal(DictionaryLookupModal, {
       conid,
       database,
+      driver,
       pureName: foreignKey.refTableName,
       schemaName: foreignKey.refSchemaName,
+      onConfirm: setFilter,
     });
   }
 

packages/web/src/datagrid/DataGridCore.svelte

@@ -1237,6 +1237,7 @@
                   foreignKey={col.foreignKey}
                   {conid}
                   {database}
+                  driver={display?.driver}
                   filterType={col.filterType || getFilterType(col.dataType)}
                   filter={display.getFilter(col.uniqueName)}
                   setFilter={value => display.setFilter(col.uniqueName, value)}

packages/web/src/modals/DefineDictionaryDescriptionModal.svelte

@@ -59,6 +59,7 @@
           let:row
           type="checkbox"
           slot="1"
+          disabled={$tableInfo?.primaryKey?.columns?.find(x => x.columnName == row.columnName)}
           checked={parseDelimitedColumnList($values.columns).includes(row.columnName)}
           on:change={e => {
             $values = {

packages/web/src/modals/DictionaryLookupModal.svelte

@@ -5,12 +5,25 @@
   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';
 
   export let onConfirm;
   export let conid;
   export let database;
   export let pureName;
   export let schemaName;
+  export let driver;
+
+  let rows = null;
+  let tableInfo;
+  let description;
+
+  let checkedKeys = [];
 
   function defineDescription() {
     showModal(DefineDictionaryDescriptionModal, {
@@ -22,21 +35,105 @@
     });
   }
 
-  function reload() {}
+  async function reload() {
+    tableInfo = await getTableInfo({ conid, database, schemaName, pureName });
+    description = getDictionaryDescription(tableInfo, conid, database);
+
+    if (!tableInfo || !description) return;
+    if (tableInfo?.primaryKey?.columns?.length != 1) return;
+
+    const dmp = driver.createDumper();
+    const select = {
+      commandType: 'select',
+      topRecords: 100,
+      from: {
+        name: {
+          schemaName,
+          pureName,
+        },
+      },
+      columns: [
+        ...tableInfo.primaryKey.columns.map(col => ({
+          exprType: 'column',
+          columnName: col.columnName,
+        })),
+        ...description.columns.map(columnName => ({
+          exprType: 'column',
+          columnName,
+        })),
+      ],
+    };
+    // @ts-ignore
+
+    dumpSqlSelect(dmp, select);
+
+    const response = await axiosInstance.request({
+      url: 'database-connections/query-data',
+      method: 'post',
+      params: {
+        conid,
+        database,
+      },
+      data: { sql: dmp.s },
+    });
+
+    rows = response.data.rows;
+  }
+
+  onMount(() => {
+    reload();
+  });
 </script>
 
 <FormProvider>
   <ModalBase {...$$restProps}>
     <svelte:fragment slot="header">Lookup from {pureName}</svelte:fragment>
 
-    {pureName}
+    {#if tableInfo && description && rows && tableInfo?.primaryKey?.columns?.length == 1}
+      <div class="tableWrapper">
+        <ScrollableTableControl
+          {rows}
+          columns={[
+            {
+              fieldName: 'checked',
+              header: '',
+              width: '30px',
+              slot: 1,
+            },
+            {
+              fieldName: 'value',
+              header: 'Value',
+              formatter: row => row[tableInfo.primaryKey.columns[0].columnName],
+              width: '100px',
+            },
+            {
+              fieldName: 'description',
+              header: 'Description',
+              formatter: row => description.columns.map(col => row[col]).join(description.delimiter || ' '),
+            },
+          ]}
+        >
+          <input
+            type="checkbox"
+            let:row
+            slot="1"
+            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];
+              else checkedKeys = checkedKeys.filter(x => x != value);
+            }}
+          />
+        </ScrollableTableControl>
+      </div>
+    {/if}
 
     <svelte:fragment slot="footer">
       <FormSubmit
         value="OK"
         on:click={() => {
           closeCurrentModal();
-          onConfirm();
+          onConfirm(checkedKeys.join(','));
         }}
       />
       <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
@@ -44,3 +141,11 @@
     </svelte:fragment>
   </ModalBase>
 </FormProvider>
+
+<style>
+  .tableWrapper {
+    position: relative;
+    max-height: 300px;
+    height: 300px;
+  }
+</style>

packages/web/src/utility/dictionaryDescriptionTools.ts

@@ -4,7 +4,10 @@ import _ from 'lodash';
 import { getLocalStorage, setLocalStorage, removeLocalStorage } from './storageCache';
 
 function checkDescriptionColumns(columns: string[], table: TableInfo) {
-  return columns.length > 0 && columns.every(x => table.columns.find(y => y.columnName == x));
+  if (!columns?.length) return false;
+  if (!columns.every(x => table.columns.find(y => y.columnName == x))) return false;
+  if (table.primaryKey?.columns?.find(x => columns.includes(x.columnName))) return false;
+  return true;
 }
 
 export function getDictionaryDescription(