From 02abb4f512debda8f4536ea26915b235852aa224 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 1 Sep 2022 14:22:54 +0200
Subject: [PATCH] add fk reference from designer

---
 packages/web/src/designer/ColumnLine.svelte   | 22 ++++++++++++++++---
 .../perspectives/PerspectiveDesigner.svelte   | 11 ++++++++++
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/designer/ColumnLine.svelte b/packages/web/src/designer/ColumnLine.svelte
index 7c5d37cf0..b63caa7cb 100644
--- a/packages/web/src/designer/ColumnLine.svelte
+++ b/packages/web/src/designer/ColumnLine.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
   import { findForeignKeyForColumn } from 'dbgate-tools';
+  import InlineButton from '../buttons/InlineButton.svelte';
+  import ToolbarButton from '../buttons/ToolbarButton.svelte';
 
   import ColumnLabel from '../elements/ColumnLabel.svelte';
 
@@ -23,10 +25,9 @@
   $: designerColumn = (designer.columns || []).find(
     x => x.designerId == designerId && x.columnName == column.columnName
   );
+  $: foreignKey = findForeignKeyForColumn(table, column);
 
   function createMenu() {
-    const foreignKey = findForeignKeyForColumn(table, column);
-
     if (settings?.columnMenu) {
       return settings?.columnMenu({
         designer,
@@ -143,7 +144,7 @@
       }}
     />
   {/if}
-  <ColumnLabel {...column} foreignKey={findForeignKeyForColumn(table, column)} forceIcon />
+  <ColumnLabel {...column} {foreignKey} forceIcon />
   {#if designerColumn?.filter}
     <FontIcon icon="img filter" />
   {/if}
@@ -178,6 +179,12 @@
       </div>
     {/if}
   {/if}
+
+  {#if foreignKey && settings?.addDesignerForeignKey && settings?.canAddDesignerForeignKey && settings?.canAddDesignerForeignKey(designerId, column.columnName)}
+    <span class="icon-button" on:mousedown={() => settings?.addDesignerForeignKey(designerId, column.columnName)}>
+      <FontIcon icon="icon arrow-right" />
+    </span>
+  {/if}
 </div>
 
 <style>
@@ -196,4 +203,13 @@
   .space {
     flex-grow: 1;
   }
+
+  .icon-button {
+    margin-left: 4px;
+    cursor: pointer;
+  }
+  .icon-button:hover {
+    background: var(--theme-bg-2);
+    color: var(--theme-icon-blue);
+  }
 </style>
diff --git a/packages/web/src/perspectives/PerspectiveDesigner.svelte b/packages/web/src/perspectives/PerspectiveDesigner.svelte
index a0f0f5028..a84f52f2d 100644
--- a/packages/web/src/perspectives/PerspectiveDesigner.svelte
+++ b/packages/web/src/perspectives/PerspectiveDesigner.svelte
@@ -154,6 +154,7 @@
         database,
         root,
         node: child,
+        designerId,
       });
     },
     tableMenu: ({ designer, designerId, onRemoveTable }) => {
@@ -237,6 +238,16 @@
       buswi: 10,
       extwi: 10,
     },
+    canAddDesignerForeignKey: (designerId, columnName) => {
+      const node = root?.findNodeByDesignerId(designerId);
+      const child = node?.childNodes?.find(x => x.columnName == columnName);
+      return child?.isExpandable && !child?.designerId && !child?.isCircular;
+    },
+    addDesignerForeignKey: (designerId, columnName) => {
+      const node = root?.findNodeByDesignerId(designerId);
+      const child = node?.childNodes?.find(x => x.columnName == columnName);
+      child?.toggleCheckedNode(true);
+    },
   }}
   referenceComponent={QueryDesignerReference}
   value={createDesignerModel(config, dbInfos)}