From 8ad8d3f8cdc73dda17d976cc32cafc49354dc4eb Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 20 Jan 2022 15:03:30 +0100
Subject: [PATCH] feat(diagram): show data type and nullability

---
 packages/web/src/designer/ColumnLine.svelte   | 20 +++++++++++
 packages/web/src/designer/Designer.svelte     | 36 ++++++++++++++++++-
 .../web/src/designer/DiagramDesigner.svelte   |  1 +
 .../web/src/designer/QueryDesigner.svelte     |  1 +
 4 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/designer/ColumnLine.svelte b/packages/web/src/designer/ColumnLine.svelte
index 11d86fc90..a722a358c 100644
--- a/packages/web/src/designer/ColumnLine.svelte
+++ b/packages/web/src/designer/ColumnLine.svelte
@@ -137,6 +137,20 @@
   {#if designerColumn?.isGrouped}
     <FontIcon icon="img group" />
   {/if}
+
+  {#if designer?.style?.showNullability || designer?.style?.showDataType}
+    <div class="space" />
+    {#if designer?.style?.showDataType && column?.dataType}
+      <div class="ml-2">
+        {column?.dataType.toLowerCase()}
+      </div>
+    {/if}
+    {#if designer?.style?.showNullability}
+      <div class="ml-2">
+        {column?.notNull ? 'NOT NULL' : 'NULL'}
+      </div>
+    {/if}
+  {/if}
 </div>
 
 <style>
@@ -149,4 +163,10 @@
   :global(.dbgate-screen) .line.isDragTarget {
     background: var(--theme-bg-gold);
   }
+  .line {
+    display: flex;
+  }
+  .space {
+    flex-grow: 1;
+  }
 </style>
diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte
index cbe0a9b2b..535a47f9c 100644
--- a/packages/web/src/designer/Designer.svelte
+++ b/packages/web/src/designer/Designer.svelte
@@ -701,9 +701,43 @@
       });
     });
   }
+
+  const changeStyleFunc = (name, value) => () => {
+    callChange(current => {
+      return {
+        ...current,
+        style: {
+          ...current?.style,
+          [name]: value,
+        },
+      };
+    });
+  };
+
+  function createMenu() {
+    return [
+      menu,
+      settings?.chooseColumnProperties && [
+        { divider: true },
+        {
+          text: 'Column properties',
+          submenu: [
+            {
+              text: `Nullability: ${value?.style?.showNullability ? 'YES' : 'NO'}`,
+              onClick: changeStyleFunc('showNullability', !value?.style?.showNullability),
+            },
+            {
+              text: `Data type: ${value?.style?.showDataType ? 'YES' : 'NO'}`,
+              onClick: changeStyleFunc('showDataType', !value?.style?.showDataType),
+            },
+          ],
+        },
+      ],
+    ];
+  }
 </script>
 
-<div class="wrapper noselect" use:contextMenu={menu}>
+<div class="wrapper noselect" use:contextMenu={createMenu}>
   {#if !(tables?.length > 0)}
     <div class="empty">Drag &amp; drop tables or views from left panel here</div>
   {/if}
diff --git a/packages/web/src/designer/DiagramDesigner.svelte b/packages/web/src/designer/DiagramDesigner.svelte
index 81a411c41..bcc8d8bf7 100644
--- a/packages/web/src/designer/DiagramDesigner.svelte
+++ b/packages/web/src/designer/DiagramDesigner.svelte
@@ -20,6 +20,7 @@
     canSelectTables: true,
     allowChangeColor: true,
     appendTableSystemMenu: true,
+    chooseColumnProperties: true,
   }}
   referenceComponent={DiagramDesignerReference}
 />
diff --git a/packages/web/src/designer/QueryDesigner.svelte b/packages/web/src/designer/QueryDesigner.svelte
index 612cbe897..a38b631c7 100644
--- a/packages/web/src/designer/QueryDesigner.svelte
+++ b/packages/web/src/designer/QueryDesigner.svelte
@@ -20,6 +20,7 @@
     canSelectTables: false,
     allowChangeColor: false,
     appendTableSystemMenu: false,
+    chooseColumnProperties: false,
   }}
   referenceComponent={QueryDesignerReference}
 />