choose dictionary value editor

packages/web/src/datagrid/DataFilterControl.svelte

@@ -204,7 +204,8 @@
       driver,
       pureName: foreignKey.refTableName,
       schemaName: foreignKey.refSchemaName,
-      onConfirm: setFilter,
+      multiselect: true,
+      onConfirm: keys => setFilter(keys.join(',')),
     });
   }
 

packages/web/src/datagrid/DataGridCell.svelte

@@ -38,6 +38,8 @@
   import ShowFormButton from '../formview/ShowFormButton.svelte';
   import { getBoolSettingsValue } from '../settings/settingsTools';
   import { arrayToHexString } from 'dbgate-tools';
+  import { showModal } from '../modals/modalTools';
+  import DictionaryLookupModal from '../modals/DictionaryLookupModal.svelte';
 
   export let rowIndex;
   export let col;
@@ -58,6 +60,8 @@
   export let onSetFormView;
   export let isDynamicStructure = false;
   export let isAutoFillMarker = false;
+  export let isCurrentCell = false;
+  export let onDictionaryLookup = null;
 
   $: value = col.isStructured ? _.get(rowData || {}, col.uniquePath) : (rowData || {})[col.uniqueName];
 </script>
@@ -119,9 +123,13 @@
       >
     {/if}
 
-    {#if col.foreignKey && rowData && rowData[col.uniqueName]}
+    {#if col.foreignKey && rowData && rowData[col.uniqueName] && !isCurrentCell}
       <ShowFormButton on:click={() => onSetFormView(rowData, col)} />
     {/if}
+
+    {#if col.foreignKey && isCurrentCell}
+      <ShowFormButton icon="icon dots-horizontal" on:click={onDictionaryLookup} />
+    {/if}
   {/if}
 
   {#if isAutoFillMarker}

packages/web/src/datagrid/DataGridCore.svelte

@@ -191,7 +191,6 @@
     if (allRowCount == null) return 'Loading row count...';
     return `Rows: ${allRowCount.toLocaleString()}`;
   }
-
 </script>
 
 <script lang="ts">
@@ -223,7 +222,7 @@
   import keycodes from '../utility/keycodes';
   import { selectedCellsCallback } from '../stores';
   import axiosInstance from '../utility/axiosInstance';
-  import { copyTextToClipboard ,extractRowCopiedValue} from '../utility/clipboard';
+  import { copyTextToClipboard, extractRowCopiedValue } from '../utility/clipboard';
   import invalidateCommands from '../commands/invalidateCommands';
   import createRef from '../utility/createRef';
   import openReferenceForm, { openPrimaryKeyForm } from '../formview/openReferenceForm';
@@ -716,6 +715,7 @@
     if (event.target.closest('.buttonLike')) return;
     if (event.target.closest('.resizeHandleControl')) return;
     if (event.target.closest('.collapseButtonMarker')) return;
+    if (event.target.closest('.showFormButtonMarker')) return;
     if (event.target.closest('input')) return;
 
     shiftDragStartCell = null;
@@ -1260,6 +1260,9 @@
           <DataGridRow
             {rowIndex}
             {grider}
+            {conid}
+            {database}
+            driver={display?.driver}
             {visibleRealColumns}
             {rowHeight}
             {autofillSelectedCells}
@@ -1268,6 +1271,7 @@
             autofillMarkerCell={filterCellForRow(autofillMarkerCell, rowIndex)}
             focusedColumn={display.focusedColumn}
             inplaceEditorState={$inplaceEditorState}
+            currentCellColumn={currentCell && currentCell[0] == rowIndex ? currentCell[1] : null}
             {dispatchInsplaceEditor}
             {frameSelection}
             onSetFormView={formViewAvailable && display?.baseTable?.primaryKey ? handleSetFormView : null}

packages/web/src/datagrid/DataGridRow.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import openReferenceForm from '../formview/openReferenceForm';
+  import DictionaryLookupModal from '../modals/DictionaryLookupModal.svelte';
+  import { showModal } from '../modals/modalTools';
 
   import DataGridCell from './DataGridCell.svelte';
   import { cellIsSelected } from './gridutil';
@@ -20,6 +22,10 @@
   export let dispatchInsplaceEditor;
   export let onSetFormView;
   export let isDynamicStructure = false;
+  export let currentCellColumn;
+  export let conid;
+  export let database;
+  export let driver;
 
   $: rowData = grider.getRowData(rowIndex);
   $: rowStatus = grider.getRowStatus(rowIndex);
@@ -31,6 +37,17 @@
       return true;
     })
     .map(col => col.uniqueName);
+
+  function handleLookup(col) {
+    showModal(DictionaryLookupModal, {
+      conid,
+      database,
+      driver,
+      pureName: col.foreignKey.refTableName,
+      schemaName: col.foreignKey.refSchemaName,
+      onConfirm: value => grider.setCellValue(rowIndex, col.uniqueName, value),
+    });
+  }
 </script>
 
 <tr style={`height: ${rowHeight}px`}>
@@ -51,8 +68,11 @@
         {rowIndex}
         {rowData}
         {col}
+        {conid}
+        {database}
         allowHintField={hintFieldsAllowed?.includes(col.uniqueName)}
         isSelected={frameSelection ? false : cellIsSelected(rowIndex, col.colIndex, selectedCells)}
+        isCurrentCell={col.colIndex == currentCellColumn}
         isFrameSelected={frameSelection ? cellIsSelected(rowIndex, col.colIndex, selectedCells) : false}
         isAutofillSelected={cellIsSelected(rowIndex, col.colIndex, autofillSelectedCells)}
         isFocusedColumn={col.uniqueName == focusedColumn}
@@ -68,6 +88,7 @@
           autofillMarkerCell[1] == col.colIndex &&
           autofillMarkerCell[0] == rowIndex &&
           grider.editable}
+        onDictionaryLookup={() => handleLookup(col)}
       />
     {/if}
   {/each}

packages/web/src/formview/ShowFormButton.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
   import FontIcon from '../icons/FontIcon.svelte';
+
+  export let icon = 'icon form';
 </script>
 
-<div on:click|stopPropagation>
+<div on:click|stopPropagation class='showFormButtonMarker'>
-  <FontIcon icon="icon form" />
+  <FontIcon {icon} />
 </div>
 
 <style>

packages/web/src/modals/DictionaryLookupModal.svelte

@@ -22,6 +22,7 @@
   export let pureName;
   export let schemaName;
   export let driver;
+  export let multiselect = false;
 
   let rows = null;
   let tableInfo;
@@ -143,11 +144,16 @@
           clickable
           on:clickrow={e => {
             const value = e.detail[tableInfo.primaryKey.columns[0].columnName];
-            if (checkedKeys.includes(value)) checkedKeys = checkedKeys.filter(x => x != value);
+            if (multiselect) {
-            else checkedKeys = [...checkedKeys, value];
+              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',
@@ -183,13 +189,15 @@
     {/if}
 
     <svelte:fragment slot="footer">
-      <FormSubmit
+      {#if multiselect}
-        value="OK"
+        <FormSubmit
-        on:click={() => {
+          value="OK"
-          closeCurrentModal();
+          on:click={() => {
-          onConfirm(checkedKeys.join(','));
+            closeCurrentModal();
-        }}
+            onConfirm(checkedKeys);
-      />
+          }}
+        />
+      {/if}
       <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
       <FormStyledButton type="button" value="Customize" on:click={defineDescription} />
     </svelte:fragment>