From 3e1d2ee9ea26400131e46a224e0ab827705c9b5f Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 1 Nov 2022 12:45:37 +0300
Subject: [PATCH] feat: allow hiding base zero

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue  | 10 ++--
 .../dashboard/settings/DataSources.vue        | 53 +++++++++++++------
 2 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 97c14475fd..2d71d433ab 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -69,8 +69,6 @@ const filteredTables = $computed(() =>
   ),
 )
 
-const filteredBases = $computed(() => bases.value.filter((base) => base.enabled))
-
 let sortable: Sortable
 
 // todo: replace with vuedraggable
@@ -293,7 +291,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
         <div class="flex-1">
           <div
-            v-if="isUIAllowed('table-create')"
+            v-if="bases[0].enabled && isUIAllowed('table-create')"
             class="group flex items-center gap-2 pl-5 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
             @click="openTableCreateDialog(bases[0].id)"
           >
@@ -403,8 +401,8 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
           <div class="transition-height duration-200 overflow-hidden">
             <div :key="key" ref="menuRef" class="border-none sortable-list">
-              <div v-for="[index, base] of Object.entries(filteredBases)" :key="`${base.id}-index`">
-                <div v-if="index === '0'">
+              <div v-for="[index, base] of Object.entries(bases)" :key="`${base.id}-index`">
+                <div v-if="index === '0' && base.enabled">
                   <div
                     v-for="table of tables.filter((table) => table.base_id === base.id)"
                     :key="table.id"
@@ -473,7 +471,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                   </div>
                 </div>
                 <a-collapse
-                  v-else
+                  v-else-if="base.enabled"
                   v-model:activeKey="activeKey"
                   :class="[{ hidden: searchActive && !!filterQuery && !filteredTables?.find((el) => el.base_id === base.id) }]"
                   expand-icon-position="right"
diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index d3d7a4a1ca..8e34878da5 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -182,17 +182,15 @@ watch(
       <div v-if="vState === ''" class="max-h-600px min-w-1200px overflow-y-auto">
         <div class="ds-table-head">
           <div class="ds-table-row">
-            <div class="ds-table-col ds-table-enabled"></div>
             <div class="ds-table-col ds-table-name">Name</div>
             <div class="ds-table-col ds-table-actions">Actions</div>
+            <div class="ds-table-col ds-table-enabled">Show / Hide</div>
           </div>
         </div>
         <div class="ds-table-body">
           <Draggable :list="sources" item-key="id" handle=".ds-table-handle" @end="moveBase">
             <template #header>
               <div v-if="sources[0]" class="ds-table-row border-gray-200">
-                <div class="ds-table-col ds-table-enabled"></div>
-
                 <div class="ds-table-col ds-table-name">
                   <div class="flex items-center gap-1">
                     <GeneralBaseLogo :base-type="sources[0].type" />
@@ -246,33 +244,33 @@ watch(
                     </a-button>
                   </div>
                 </div>
-              </div>
-            </template>
-            <template #item="{ element: base, index }">
-              <div v-if="index !== 0" class="ds-table-row border-gray-200">
+
                 <div class="ds-table-col ds-table-enabled">
-                  <MdiDragVertical small class="ds-table-handle" />
-                  <div v-if="!base.is_meta" class="flex items-center gap-1">
+                  <div class="flex items-center gap-1 cursor-pointer">
                     <a-tooltip>
                       <template #title>
-                        <template v-if="base.enabled">Hide in UI</template>
+                        <template v-if="sources[0].enabled">Hide in UI</template>
                         <template v-else>Show in UI</template>
                       </template>
                       <MdiEyeSettings
-                        v-if="base.enabled"
+                        v-if="sources[0].enabled"
                         class="text-lg text-primary outline-0"
-                        @click="toggleBase(base, false)"
+                        @click="toggleBase(sources[0], false)"
                       ></MdiEyeSettings>
                       <MdiEyeSettingsOutline
                         v-else
                         class="text-lg text-red-500 outline-0"
-                        @click="toggleBase(base, true)"
+                        @click="toggleBase(sources[0], true)"
                       ></MdiEyeSettingsOutline>
                     </a-tooltip>
                   </div>
                 </div>
-
+              </div>
+            </template>
+            <template #item="{ element: base, index }">
+              <div v-if="index !== 0" class="ds-table-row border-gray-200">
                 <div class="ds-table-col ds-table-name">
+                  <MdiDragVertical small class="ds-table-handle" />
                   <div class="flex items-center gap-1">
                     <GeneralBaseLogo :base-type="base.type" />
                     {{ base.is_meta ? 'BASE' : base.alias }} <span class="text-gray-400 text-xs">({{ base.type }})</span>
@@ -327,6 +325,27 @@ watch(
                     </a-button>
                   </div>
                 </div>
+
+                <div class="ds-table-col ds-table-enabled">
+                  <div class="flex items-center gap-1 cursor-pointer">
+                    <a-tooltip>
+                      <template #title>
+                        <template v-if="base.enabled">Hide in UI</template>
+                        <template v-else>Show in UI</template>
+                      </template>
+                      <MdiEyeSettings
+                        v-if="base.enabled"
+                        class="text-lg text-primary outline-0"
+                        @click="toggleBase(base, false)"
+                      ></MdiEyeSettings>
+                      <MdiEyeSettingsOutline
+                        v-else
+                        class="text-lg text-red-500 outline-0"
+                        @click="toggleBase(base, true)"
+                      ></MdiEyeSettingsOutline>
+                    </a-tooltip>
+                  </div>
+                </div>
               </div>
             </template>
           </Draggable>
@@ -369,7 +388,7 @@ watch(
 }
 
 .ds-table-enabled {
-  @apply col-span-1 w-full flex gap-2;
+  @apply col-span-2 flex justify-center;
 }
 
 .ds-table-name {
@@ -377,7 +396,7 @@ watch(
 }
 
 .ds-table-actions {
-  @apply col-span-10;
+  @apply col-span-9;
 }
 
 .ds-table-col:last-child {
@@ -385,6 +404,6 @@ watch(
 }
 
 .ds-table-handle {
-  @apply cursor-pointer justify-self-start;
+  @apply cursor-pointer justify-self-start mr-2;
 }
 </style>