fk editor

packages/tools/src/diffTools.ts

@@ -10,6 +10,18 @@ export function generateTablePairingId(table: TableInfo): TableInfo {
         ...col,
         pairingId: col.pairingId || uuidv1(),
       })),
+      foreignKeys: table.foreignKeys.map(cnt => ({
+        ...cnt,
+        pairingId: cnt.pairingId || uuidv1(),
+      })),
+      checks: table.checks.map(cnt => ({
+        ...cnt,
+        pairingId: cnt.pairingId || uuidv1(),
+      })),
+      indexes: table.indexes.map(cnt => ({
+        ...cnt,
+        pairingId: cnt.pairingId || uuidv1(),
+      })),
       pairingId: table.pairingId || uuidv1(),
     };
   }

packages/tools/src/nameTools.ts

@@ -21,6 +21,13 @@ export function fullNameToString({ schemaName, pureName }) {
   return pureName;
 }
 
+export function fullNameToLabel({ schemaName, pureName }) {
+  if (schemaName) {
+    return `${schemaName}.${pureName}`;
+  }
+  return pureName;
+}
+
 export function quoteFullName(dialect, { schemaName, pureName }) {
   if (schemaName) return `${dialect.quoteIdentifier(schemaName)}.${dialect.quoteIdentifier(pureName)}`;
   return `${dialect.quoteIdentifier(pureName)}`;

packages/web/src/forms/SelectField.svelte

@@ -9,6 +9,7 @@
   export let value;
   export let isNative = false;
   export let isMulti = false;
+  export let notSelected = null;
 
   let listOpen = false;
   let isFocused = false;
@@ -25,6 +26,11 @@
       dispatch('change', e.target['value']);
     }}
   >
+    {#if notSelected}
+      <option value="" selected={!value}>
+        {_.isString(notSelected) ? notSelected : '(not selected)'}
+      </option>
+    {/if}
     {#each _.compact(options) as x (x.value)}
       <option value={x.value} selected={value == x.value}>
         {x.label}

packages/web/src/tableeditor/ForeignKeyEditorModal.svelte

@@ -13,7 +13,14 @@
   import ElectronFilesInput from '../impexp/ElectronFilesInput.svelte';
   import DropDownButton from '../elements/DropDownButton.svelte';
   import DataTypeEditor from './DataTypeEditor.svelte';
-  import { editorAddConstraint, editorDeleteConstraint, editorModifyConstraint } from 'dbgate-tools';
+  import {
+    editorAddConstraint,
+    editorDeleteConstraint,
+    editorModifyConstraint,
+    fullNameFromString,
+    fullNameToLabel,
+    fullNameToString,
+  } from 'dbgate-tools';
   import TextField from '../forms/TextField.svelte';
   import SelectField from '../forms/SelectField.svelte';
 
@@ -55,12 +62,34 @@
       </div>
     </div>
 
+    <div class="row">
+      <div class="label col-3">Referenced table</div>
+      <div class="col-9">
+        <SelectField
+          value={fullNameToString({ pureName: refTableName, schemaName: refSchemaName })}
+          isNative
+          notSelected
+          options={(dbInfo?.tables || []).map(tbl => ({
+            label: fullNameToLabel(tbl),
+            value: fullNameToString(tbl),
+          }))}
+          on:change={e => {
+            if (e.detail) {
+              const name = fullNameFromString(e.detail);
+              refTableName = name.pureName;
+              refSchemaName = name.schemaName;
+            }
+          }}
+        />
+      </div>
+    </div>
+
     <div class="row">
       <div class="col-5 mr-1">
         Base column - {tableInfo.pureName}
       </div>
       <div class="col-5 ml-1">
-        Ref column - {refTableName}
+        Ref column - {refTableName || '(table not set)'}
       </div>
     </div>
 
@@ -71,13 +100,11 @@
             <SelectField
               value={column.columnName}
               isNative
-              options={[
+              notSelected
-                { label: '(Not selected)', value: '' },
+              options={tableInfo.columns.map(col => ({
-                ...tableInfo.columns.map(col => ({
+                label: col.columnName,
-                  label: col.columnName,
+                value: col.columnName,
-                  value: col.columnName,
+              }))}
-                })),
-              ]}
               on:change={e => {
                 if (e.detail) {
                   columns = columns.map((col, i) => (i == index ? { ...col, columnName: e.detail } : col));
@@ -91,13 +118,11 @@
             <SelectField
               value={column.refColumnName}
               isNative
-              options={[
+              notSelected
-                { label: '(Not selected)', value: '' },
+              options={(refTableInfo?.columns || []).map(col => ({
-                ...(refTableInfo?.columns || []).map(col => ({
+                label: col.columnName,
-                  label: col.columnName,
+                value: col.columnName,
-                  value: col.columnName,
+              }))}
-                })),
-              ]}
               on:change={e => {
                 if (e.detail) {
                   columns = columns.map((col, i) => (i == index ? { ...col, refColumnName: e.detail } : col));

packages/web/src/tableeditor/TableEditor.svelte

@@ -22,6 +22,17 @@
     testEnabled: () => getCurrentEditor()?.allowAddPrimaryKey(),
     onClick: () => getCurrentEditor().addPrimaryKey(),
   });
+
+  registerCommand({
+    id: 'tableEditor.addForeignKey',
+    category: 'Table editor',
+    name: 'Add foreign key',
+    icon: 'icon add-key',
+    toolbar: true,
+    isRelatedToTab: true,
+    testEnabled: () => getCurrentEditor()?.writable(),
+    onClick: () => getCurrentEditor().addForeignKey(),
+  });
 </script>
 
 <script lang="ts">
@@ -76,6 +87,14 @@
     });
   }
 
+  export function addForeignKey() {
+    showModal(ForeignKeyEditorModal, {
+      setTableInfo,
+      tableInfo,
+      dbInfo,
+    });
+  }
+
   $: columns = tableInfo?.columns;
   $: primaryKey = tableInfo?.primaryKey;
   $: foreignKeys = tableInfo?.foreignKeys;