diff --git a/packages/web/src/datagrid/DataFilterControl.svelte b/packages/web/src/datagrid/DataFilterControl.svelte index c6f970759..cd7269500 100644 --- a/packages/web/src/datagrid/DataFilterControl.svelte +++ b/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} + + + + {:else if pureName && columnName} + + + + {/if} {/if} {#if showResizeSplitter} diff --git a/packages/web/src/datagrid/DataGridCore.svelte b/packages/web/src/datagrid/DataGridCore.svelte index c3dfe26cc..fcd93f346 100644 --- a/packages/web/src/datagrid/DataGridCore.svelte +++ b/packages/web/src/datagrid/DataGridCore.svelte @@ -1254,6 +1254,9 @@ (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} diff --git a/packages/web/src/modals/DictionaryLookupModal.svelte b/packages/web/src/modals/DictionaryLookupModal.svelte index 5f6e6ffe0..19fdfbf97 100644 --- a/packages/web/src/modals/DictionaryLookupModal.svelte +++ b/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]; - else checkedKeys = checkedKeys.filter(x => x != value); + if (e.target.checked) { + if (!checkedKeys.includes(value)) checkedKeys = [...checkedKeys, value]; + } else { + if (checkedKeys.includes(value)) checkedKeys = checkedKeys.filter(x => x != value); + } e.stopPropagation(); }} /> diff --git a/packages/web/src/modals/ValueLookupModal.svelte b/packages/web/src/modals/ValueLookupModal.svelte new file mode 100644 index 000000000..6d34d842b --- /dev/null +++ b/packages/web/src/modals/ValueLookupModal.svelte @@ -0,0 +1,198 @@ + + + + + Choose value from {columnName} + + +
+ +
+ + {#if isLoading} + + {/if} + + {#if !isLoading && tableInfo && rows} +
+ { + 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], + }, + ]} + > + { + 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(); + }} + /> + +
+ {/if} + + + {#if multiselect} + { + closeCurrentModal(); + onConfirm(checkedKeys); + }} + /> + {/if} + + +
+
+ +