fk editor

packages/web/public/global.css

@@ -55,6 +55,10 @@ body {
   position: relative;
 }
 
+.col-10 {
+  flex-basis: 83.3333%;
+  max-width: 83.3333%;
+}
 .col-9 {
   flex-basis: 75%;
   max-width: 75%;
@@ -63,10 +67,18 @@ body {
   flex-basis: 66.6667%;
   max-width: 66.6667%;
 }
+.col-7 {
+  flex-basis: 58.3333%;
+  max-width: 58.3333%;
+}
 .col-6 {
   flex-basis: 50%;
   max-width: 50%;
 }
+.col-5 {
+  flex-basis: 41.6667%;
+  max-width: 41.6667%;
+}
 .col-4 {
   flex-basis: 33.3333%;
   max-width: 33.3333%;
@@ -75,6 +87,10 @@ body {
   flex-basis: 25%;
   max-width: 25%;
 }
+.col-2 {
+  flex-basis: 16.6666%;
+  max-width: 16.6666%;
+}
 
 .largeFormMarker input[type='text'] {
   width: 100%;

packages/web/src/elements/ForeignKeyObjectListControl.svelte

@@ -7,11 +7,14 @@
 
   export let collection;
   export let title;
+  export let clickable;
 </script>
 
 <ObjectListControl
   {collection}
   {title}
+  {clickable}
+  on:clickrow
   columns={[
     {
       fieldName: 'baseColumns',

packages/web/src/tableeditor/ForeignKeyEditorModal.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+  import FormStyledButton from '../elements/FormStyledButton.svelte';
+  import uuidv1 from 'uuid/v1';
+
+  import FormSelectField from '../forms/FormSelectField.svelte';
+  import FormTextField from '../forms/FormTextField.svelte';
+  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
+
+  import FormProvider from '../forms/FormProvider.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import ModalBase from '../modals/ModalBase.svelte';
+  import { closeCurrentModal } from '../modals/modalTools';
+  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 TextField from '../forms/TextField.svelte';
+  import SelectField from '../forms/SelectField.svelte';
+
+  export let constraintInfo;
+  export let setTableInfo;
+  export let tableInfo;
+  export let dbInfo;
+
+  let constraintName = constraintInfo?.constraintName;
+  let columns = constraintInfo?.columns || [];
+  let refTableName = constraintInfo?.refTableName;
+  let refSchemaName = constraintInfo?.refSchemaName;
+
+  $: refTableInfo = dbInfo?.tables?.find(x => x.pureName == refTableName && x.schemaName == refSchemaName);
+
+  function getConstraint() {
+    return {
+      pairingId: uuidv1(),
+      ...constraintInfo,
+      columns,
+      pureName: tableInfo.pureName,
+      schemaName: tableInfo.schemaName,
+      constraintName,
+      constraintType: 'foreignKey',
+      refTableName,
+      refSchemaName,
+    };
+  }
+</script>
+
+<ModalBase {...$$restProps}>
+  <svelte:fragment slot="header">{constraintInfo ? `Edit foreign key` : `Add foreign key`}</svelte:fragment>
+
+  <div class="largeFormMarker">
+    <div class="row">
+      <div class="label col-3">Constraint name</div>
+      <div class="col-9">
+        <TextField value={constraintName} on:input={e => (constraintName = e.target['value'])} focused />
+      </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}
+      </div>
+    </div>
+
+    {#each columns as column, index}
+      <div class="row">
+        <div class="col-5 mr-1">
+          {#key column.columnName}
+            <SelectField
+              value={column.columnName}
+              isNative
+              options={tableInfo.columns.map(col => ({
+                label: col.columnName,
+                value: col.columnName,
+              }))}
+              on:change={e => {
+                if (e.detail) {
+                  columns = columns.map((col, i) => (i == index ? { ...col, columnName: e.detail } : col));
+                }
+              }}
+            />
+          {/key}
+        </div>
+        <div class="col-5 ml-1">
+          {#key column.refColumnName}
+            <SelectField
+              value={column.refColumnName}
+              isNative
+              options={(refTableInfo?.columns || []).map(col => ({
+                label: col.columnName,
+                value: col.columnName,
+              }))}
+              on:change={e => {
+                if (e.detail) {
+                  columns = columns.map((col, i) => (i == index ? { ...col, refColumnName: e.detail } : col));
+                }
+              }}
+            />
+          {/key}
+        </div>
+        <div class="col-2 button">
+          <FormStyledButton
+            value="Delete"
+            on:click={e => {
+              const x = [...columns];
+              x.splice(index, 1);
+              columns = x;
+            }}
+          />
+        </div>
+      </div>
+    {/each}
+
+    <FormStyledButton
+      type="button"
+      value="Add column"
+      on:click={() => {
+        columns = [...columns, {}];
+      }}
+    />
+  </div>
+
+  <svelte:fragment slot="footer">
+    <FormStyledButton
+      value={'Save'}
+      on:click={() => {
+        closeCurrentModal();
+        if (constraintInfo) {
+          setTableInfo(tbl => editorModifyConstraint(tbl, getConstraint()));
+        } else {
+          setTableInfo(tbl => editorAddConstraint(tbl, getConstraint()));
+        }
+      }}
+    />
+
+    <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
+    {#if constraintInfo}
+      <FormStyledButton
+        type="button"
+        value="Remove"
+        on:click={() => {
+          closeCurrentModal();
+          setTableInfo(tbl => editorDeleteConstraint(tbl, constraintInfo));
+        }}
+      />
+    {/if}
+  </svelte:fragment>
+</ModalBase>
+
+<style>
+  .row {
+    margin: var(--dim-large-form-margin);
+    display: flex;
+  }
+
+  .row .label {
+    white-space: nowrap;
+    align-self: center;
+  }
+
+  .button {
+    align-self: center;
+    text-align: right;
+  }
+</style>

packages/web/src/tableeditor/TableEditor.svelte

@@ -22,7 +22,6 @@
     testEnabled: () => getCurrentEditor()?.allowAddPrimaryKey(),
     onClick: () => getCurrentEditor().addPrimaryKey(),
   });
-
 </script>
 
 <script lang="ts">
@@ -42,12 +41,14 @@
 
   import { useDbCore } from '../utility/metadataLoaders';
   import ColumnEditorModal from './ColumnEditorModal.svelte';
+  import ForeignKeyEditorModal from './ForeignKeyEditorModal.svelte';
   import PrimaryKeyEditorModal from './PrimaryKeyEditorModal.svelte';
 
   export const activator = createActivator('TableEditor', true);
 
   export let tableInfo;
   export let setTableInfo;
+  export let dbInfo;
 
   export function writable() {
     return !!setTableInfo;
@@ -86,7 +87,6 @@
   }
 
   $: console.log('tableInfo', tableInfo);
-
 </script>
 
 <div class="wrapper">
@@ -154,7 +154,12 @@
     <svelte:fragment slot="0" let:row>{row?.columns.map(x => x.columnName).join(', ')}</svelte:fragment>
   </ObjectListControl>
 
-  <ForeignKeyObjectListControl collection={foreignKeys} title="Foreign keys" />
+  <ForeignKeyObjectListControl
+    collection={foreignKeys}
+    title="Foreign keys"
+    clickable={writable()}
+    on:clickrow={e => showModal(ForeignKeyEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo, dbInfo })}
+  />
   <ForeignKeyObjectListControl collection={dependencies} title="Dependencies" />
 </div>
 
@@ -168,5 +173,4 @@
     background-color: var(--theme-bg-0);
     overflow: auto;
   }
-
 </style>

packages/web/src/tabs/TableStructureTab.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" context="module">
   export const matchingProps = ['conid', 'database', 'schemaName', 'pureName'];
   export const allowAddToFavorites = props => true;
-
 </script>
 
 <script lang="ts">
@@ -17,7 +16,7 @@
   import useEditorData from '../query/useEditorData';
   import TableEditor from '../tableeditor/TableEditor.svelte';
 
-  import { useDbCore } from '../utility/metadataLoaders';
+  import { useDatabaseInfo, useDbCore } from '../utility/metadataLoaders';
 
   export let tabid;
   export let conid;
@@ -27,16 +26,17 @@
   export let objectTypeField = 'tables';
 
   $: tableInfo = useDbCore({ conid, database, schemaName, pureName, objectTypeField });
+  $: dbInfo = useDatabaseInfo({ conid, database });
   $: tableInfoWithPairingId = $tableInfo ? generateTablePairingId($tableInfo) : null;
 
   const { editorState, editorValue, setEditorData } = useEditorData({ tabid });
 
   $: showTable = $editorValue || tableInfoWithPairingId;
-
 </script>
 
 <TableEditor
   tableInfo={showTable}
+  dbInfo={$dbInfo}
   setTableInfo={objectTypeField == 'tables'
     ? tableInfoUpdater =>
         setEditorData(tbl => {