From 56916a8490f45e6f8232c73f1a1886dbfc39649e Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 15 Sep 2022 21:42:56 +0530
Subject: [PATCH] feat(nc-gui): UI fixes to ERD, added prefix icons to ERD and
 added mm prop to TableType to sdk

---
 packages/nc-gui/components/erd/SimpleView.vue | 23 +++++++++++++++----
 packages/nc-gui/components/erd/TableNode.vue  | 18 +++++++++++----
 packages/nc-gui/components/erd/View.vue       | 18 +++++++--------
 packages/nocodb-sdk/src/lib/Api.ts            |  1 +
 scripts/sdk/swagger.json                      |  6 +++++
 5 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/components/erd/SimpleView.vue b/packages/nc-gui/components/erd/SimpleView.vue
index 6ee8767c68..fc3dd33d28 100644
--- a/packages/nc-gui/components/erd/SimpleView.vue
+++ b/packages/nc-gui/components/erd/SimpleView.vue
@@ -6,13 +6,15 @@ import { UITypes } from 'nocodb-sdk'
 import dagre from 'dagre'
 import TableNode from './TableNode.vue'
 import RelationEdge from './RelationEdge.vue'
+import MdiView from '~icons/mdi/eye-circle-outline'
+import MdiTableLarge from '~icons/mdi/table-large'
 
 interface Props {
   tables: any[]
   config: {
     showPkAndFk: boolean
     showViews: boolean
-    hideAllColumns: boolean
+    showAllColumns: boolean
   }
 }
 
@@ -31,15 +33,15 @@ const populateInitialNodes = () => {
   tables.forEach((table) => {
     if (!table.id) return
 
-    const columns = metasWithIdAsKey.value[table.id].columns?.filter(
-      (col) => !config.hideAllColumns || (config.hideAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
+    const columns = metasWithIdAsKey.value[table.id].columns!.filter(
+      (col) => config.showAllColumns || (!config.showAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
     )
 
     dagreGraph.setNode(table.id, { width: 250, height: 50 * columns.length })
 
     initialNodes.value.push({
       id: table.id,
-      data: { ...metasWithIdAsKey.value[table.id], showPkAndFk: config.showPkAndFk, hideAllColumns: config.hideAllColumns },
+      data: { ...metasWithIdAsKey.value[table.id], showPkAndFk: config.showPkAndFk, showAllColumns: config.showAllColumns },
       type: 'custom',
     })
   })
@@ -141,5 +143,18 @@ onBeforeMount(async () => {
       <RelationEdge v-bind="props" />
     </template>
     <Background />
+    <div
+      class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200"
+      style="font-size: 0.6rem"
+    >
+      <div class="flex flex-row items-center space-x-1 border-b-1 pb-1 border-gray-100">
+        <MdiTableLarge class="text-primary" />
+        <div>Table</div>
+      </div>
+      <div class="flex flex-row items-center space-x-1 pt-1">
+        <MdiView class="text-primary" />
+        <div>SQL View</div>
+      </div>
+    </div>
   </VueFlow>
 </template>
diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 8900fc670a..074819fbd1 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -4,9 +4,11 @@ import { Handle, Position } from '@braks/vue-flow'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
+import MdiView from '~icons/mdi/eye-circle-outline'
+import MdiTableLarge from '~icons/mdi/table-large'
 
 interface Props extends NodeProps {
-  data: TableType & { showPkAndFk: boolean; hideAllColumns: boolean }
+  data: TableType & { showPkAndFk: boolean; showAllColumns: boolean }
 }
 
 const props = defineProps<Props>()
@@ -22,14 +24,14 @@ const columns = computed(() => {
 
 const pkAndFkColumns = computed(() => {
   return columns.value
-    ?.filter(() => data.value.showPkAndFk && !data.value.hideAllColumns)
+    ?.filter(() => data.value.showPkAndFk && data.value.showAllColumns)
     .filter((col) => col.pk || col.uidt === UITypes.ForeignKey)
 })
 
 const nonPkColumns = computed(() => {
   return columns.value
     ?.filter(
-      (col: ColumnType) => !data.value.hideAllColumns || (data.value.hideAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
+      (col: ColumnType) => data.value.showAllColumns || (!data.value.showAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
     )
     .filter((col: ColumnType) => !col.pk && col.uidt !== UITypes.ForeignKey)
 })
@@ -40,8 +42,14 @@ const relatedColumnId = (col: Record<string, any>) =>
 
 <template>
   <div class="h-full flex flex-col min-w-16 bg-gray-50 rounded-lg border-1">
-    <div class="text-gray-600 text-md py-2 border-b-2 border-gray-100 w-full px-3 bg-gray-100 font-semibold">
-      {{ data.title }}
+    <div
+      class="text-gray-600 text-md py-2 border-b-1 border-gray-200 w-full pr-3 pl-2 bg-gray-100 font-semibold flex flex-row items-center"
+    >
+      <MdiTableLarge v-if="data.type === 'table'" class="text-primary" />
+      <MdiView v-else class="text-primary" />
+      <div class="flex pl-1.5">
+        {{ data.title }}
+      </div>
     </div>
     <div>
       <div class="keys mb-1">
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index 58b28323c3..2d510f1ffa 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -13,7 +13,7 @@ let isLoading = $ref(true)
 const config = ref({
   showPkAndFk: true,
   showViews: false,
-  hideAllColumns: false,
+  showAllColumns: true,
 })
 
 const tables = computed(() => {
@@ -54,11 +54,9 @@ const tablesFilteredWithConfig = computed(() =>
 )
 
 watch(
-  () => config.value.hideAllColumns,
+  () => config.value.showAllColumns,
   () => {
-    if (config.value.hideAllColumns) {
-      config.value.showPkAndFk = false
-    }
+    config.value.showPkAndFk = config.value.showAllColumns
   },
 )
 </script>
@@ -74,17 +72,17 @@ watch(
       <ErdSimpleView :key="JSON.stringify(config)" :tables="tablesFilteredWithConfig" :config="config" />
 
       <div class="absolute top-2 right-10 flex-col bg-white py-2 px-4 border-1 border-gray-100 rounded-md z-50 space-y-1">
+        <div class="flex flex-row items-center">
+          <a-checkbox v-model:checked="config.showAllColumns" v-e="['c:erd:showAllColumns']" />
+          <span class="ml-2" style="font-size: 0.65rem">Show columns</span>
+        </div>
         <div class="flex flex-row items-center">
           <a-checkbox v-model:checked="config.showPkAndFk" v-e="['c:erd:showPkAndFk']" />
           <span class="ml-2" style="font-size: 0.65rem">Show PK and FK</span>
         </div>
         <div class="flex flex-row items-center">
           <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" />
-          <span class="ml-2" style="font-size: 0.65rem">Show views</span>
-        </div>
-        <div class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.hideAllColumns" v-e="['c:erd:hideAllColumns']" />
-          <span class="ml-2" style="font-size: 0.65rem">Hide all columns</span>
+          <span class="ml-2" style="font-size: 0.65rem">Show SQL views</span>
         </div>
       </div>
     </div>
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 6fdf188825..6665a3b9eb 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -122,6 +122,7 @@ export interface TableType {
   columnsById?: object;
   slug?: string;
   project_id?: string;
+  mm?: boolean | number;
 }
 
 export interface ViewType {
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index 5d11767ceb..c0f2df3452 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -6069,6 +6069,12 @@
           },
           "project_id": {
             "type": "string"
+          },
+          "mm": {
+            "type": [
+              "boolean",
+              "number"
+            ]
           }
         },
         "required": [