From 53e54d0018bc18e0e87635144611e83c0b055fad Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 17 Sep 2022 10:41:46 +0530
Subject: [PATCH] feat(nc-gui): Now show PKFK button is disabled when
 showColumns option is unchecked and title of mm junction table is shown on
 the edges if its option is set

---
 packages/nc-gui/components/erd/SimpleView.vue | 13 ++++++++++---
 packages/nc-gui/components/erd/View.vue       |  4 ++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/erd/SimpleView.vue b/packages/nc-gui/components/erd/SimpleView.vue
index 3a5a01365f..2e291810f9 100644
--- a/packages/nc-gui/components/erd/SimpleView.vue
+++ b/packages/nc-gui/components/erd/SimpleView.vue
@@ -83,6 +83,14 @@ const populateEdges = () => {
     return acc
   }, [] as ColumnType[])
 
+  const edgeMMTableLabel = (modelId: string) => {
+    const mmModel = metasWithIdAsKey.value[modelId]
+    if (mmModel.title !== mmModel.table_name) {
+      return `${mmModel.title} (${mmModel.table_name})`
+    }
+    return mmModel.title
+  }
+
   edges.value = ltarColumns.map((column) => {
     const source = column.fk_model_id!
     const target = (column.colOptions as LinkToAnotherRecordType).fk_related_model_id!
@@ -98,8 +106,7 @@ const populateEdges = () => {
       sourceColumnId = (column.colOptions as LinkToAnotherRecordType).fk_parent_column_id
       targetColumnId = (column.colOptions as LinkToAnotherRecordType).fk_child_column_id
       edgeLabel =
-        config.showJunctionTableNames &&
-        metasWithIdAsKey.value[(column.colOptions as LinkToAnotherRecordType).fk_mm_model_id!].table_name
+        config.showJunctionTableNames && edgeMMTableLabel((column.colOptions as LinkToAnotherRecordType).fk_mm_model_id!)
     }
 
     if (source !== target) dagreGraph.setEdge(source, target)
@@ -109,7 +116,7 @@ const populateEdges = () => {
       // rerender after 200ms
       setTimeout(() => {
         vueFlowKey.value = 1
-      }, 200)
+      }, 350)
     }
 
     return {
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index c3e6ed75cb..94d27053f9 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -104,7 +104,7 @@ watch(
           }}</span>
         </div>
         <div class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showPkAndFk" v-e="['c:erd:showPkAndFk']" />
+          <a-checkbox v-model:checked="config.showPkAndFk" v-e="['c:erd:showPkAndFk']" :disabled="!config.showAllColumns" />
           <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showPkAndFk') }}</span>
         </div>
         <div v-if="!table" class="flex flex-row items-center">
@@ -115,7 +115,7 @@ watch(
           <a-checkbox v-model:checked="config.showMMTables" v-e="['c:erd:showMMTables']" />
           <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showMMTables') }}</span>
         </div>
-        <div v-if="!table && showAdvancedOptions" class="flex flex-row items-center">
+        <div v-if="showAdvancedOptions" class="flex flex-row items-center">
           <a-checkbox v-model:checked="config.showJunctionTableNames" v-e="['c:erd:showJunctionTableNames']" />
           <span class="ml-2 select-none" style="font-size: 0.65rem">{{ $t('activity.erd.showJunctionTableNames') }}</span>
         </div>