From 5613159e391a250c496e4f7ed5558341382497f0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 30 Aug 2022 23:21:17 +0530
Subject: [PATCH] fix(gui-v2): project tile correction in shared base

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../pages/[projectType]/[projectId]/index.vue | 205 +++++++++---------
 1 file changed, 100 insertions(+), 105 deletions(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 9a9b08cd9f..9424ef3acc 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -176,17 +176,7 @@ const copyAuthToken = async () => {
             <img alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
           </a>
 
-          <div v-if="isSharedBase">
-            <template v-if="isOpen">
-              <div class="text-xl font-semibold truncate">{{ project.title }}</div>
-            </template>
-
-            <template v-else>
-              <MdiFolder class="text-primary cursor-pointer transform hover:scale-105 text-2xl" />
-            </template>
-          </div>
-
-          <a-dropdown v-else class="h-full min-w-0 flex-1" :trigger="['click']" placement="bottom">
+          <a-dropdown class="h-full min-w-0 flex-1" :trigger="['click']" placement="bottom">
             <div
               :style="{ width: isOpen ? 'calc(100% - 40px) pr-2' : '100%' }"
               :class="[isOpen ? '' : 'justify-center']"
@@ -219,7 +209,7 @@ const copyAuthToken = async () => {
                       <div class="flex flex-col">
                         <div class="text-lg group-hover:(!text-primary) font-semibold truncate">{{ project.title }}</div>
 
-                        <div class="flex items-center gap-1">
+                        <div v-if="!isSharedBase" class="flex items-center gap-1">
                           <div class="group-hover:(!text-primary)">ID:</div>
 
                           <div class="text-xs group-hover:text-accent truncate font-italic">{{ project.id }}</div>
@@ -227,71 +217,55 @@ const copyAuthToken = async () => {
                       </div>
                     </div>
                   </template>
+                  <template v-if="!isSharedBase">
+                    <a-menu-item key="copy">
+                      <div class="nc-project-menu-item group" @click.stop="copyProjectInfo">
+                        <MdiContentCopy class="group-hover:text-accent" />
+                        Copy Project Info
+                      </div>
+                    </a-menu-item>
+
+                    <a-menu-divider />
+
+                    <a-menu-item key="api">
+                      <div
+                        v-if="isUIAllowed('apiDocs')"
+                        v-t="['e:api-docs']"
+                        class="nc-project-menu-item group"
+                        @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)"
+                      >
+                        <MdiApi class="group-hover:text-accent" />
+                        Swagger: Rest APIs
+                      </div>
+                    </a-menu-item>
 
-                  <a-menu-item key="copy">
-                    <div class="nc-project-menu-item group" @click.stop="copyProjectInfo">
-                      <MdiContentCopy class="group-hover:text-accent" />
-                      Copy Project Info
-                    </div>
-                  </a-menu-item>
-
-                  <a-menu-divider />
-
-                  <a-menu-item key="api">
-                    <div
-                      v-if="isUIAllowed('apiDocs')"
-                      v-t="['e:api-docs']"
-                      class="nc-project-menu-item group"
-                      @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)"
-                    >
-                      <MdiApi class="group-hover:text-accent" />
-                      Swagger: Rest APIs
-                    </div>
-                  </a-menu-item>
-
-                  <a-menu-item key="copy">
-                    <div v-t="['a:navbar:user:copy-auth-token']" class="nc-project-menu-item group" @click.stop="copyAuthToken">
-                      <MdiScriptTextKeyOutline class="group-hover:text-accent" />
-                      Copy Auth Token
-                    </div>
-                  </a-menu-item>
-
-                  <a-menu-divider />
-
-                  <a-menu-item key="teamAndSettings">
-                    <div
-                      v-if="isUIAllowed('settings')"
-                      v-t="['c:navdraw:project-settings']"
-                      class="nc-project-menu-item group"
-                      @click="toggleDialog(true, 'teamAndAuth')"
-                    >
-                      <MdiCog class="group-hover:text-accent" />
-                      Team & Settings
-                    </div>
-                  </a-menu-item>
-
-                  <template v-if="isUIAllowed('projectTheme')">
-                    <a-sub-menu key="theme">
-                      <template #title>
-                        <div class="nc-project-menu-item group">
-                          <ClarityImageLine class="group-hover:text-accent" />
-                          Project Theme
-
-                          <div class="flex-1" />
-
-                          <MaterialSymbolsChevronRightRounded
-                            class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
-                          />
-                        </div>
-                      </template>
-
-                      <template #expandIcon></template>
+                    <a-menu-item key="copy">
+                      <div v-t="['a:navbar:user:copy-auth-token']" class="nc-project-menu-item group" @click.stop="copyAuthToken">
+                        <MdiScriptTextKeyOutline class="group-hover:text-accent" />
+                        Copy Auth Token
+                      </div>
+                    </a-menu-item>
+
+                    <a-menu-divider />
+
+                    <a-menu-item key="teamAndSettings">
+                      <div
+                        v-if="isUIAllowed('settings')"
+                        v-t="['c:navdraw:project-settings']"
+                        class="nc-project-menu-item group"
+                        @click="toggleDialog(true, 'teamAndAuth')"
+                      >
+                        <MdiCog class="group-hover:text-accent" />
+                        Team & Settings
+                      </div>
+                    </a-menu-item>
 
-                      <GeneralColorPicker v-model="themePrimaryColor" :colors="enumColor.dark" :row-size="5" :advanced="false" />
-                      <a-sub-menu key="theme-2">
+                    <template v-if="isUIAllowed('projectTheme')">
+                      <a-sub-menu key="theme">
                         <template #title>
                           <div class="nc-project-menu-item group">
-                            Custom Theme
+                            <ClarityImageLine class="group-hover:text-accent" />
+                            Project Theme
 
                             <div class="flex-1" />
 
@@ -302,52 +276,73 @@ const copyAuthToken = async () => {
                         </template>
 
                         <template #expandIcon></template>
-                        <a-sub-menu key="pick-primary">
-                          <template #title>
-                            <div class="nc-project-menu-item group">
-                              <ClarityColorPickerSolid class="group-hover:text-accent" />
-                              Primary Color
-                            </div>
-                          </template>
-                          <template #expandIcon></template>
-                          <Chrome v-model="themePrimaryColor" />
-                        </a-sub-menu>
 
-                        <a-sub-menu key="pick-accent">
+                        <GeneralColorPicker
+                          v-model="themePrimaryColor"
+                          :colors="enumColor.dark"
+                          :row-size="5"
+                          :advanced="false"
+                        />
+                        <a-sub-menu key="theme-2">
                           <template #title>
                             <div class="nc-project-menu-item group">
-                              <ClarityColorPickerSolid class="group-hover:text-accent" />
-                              Accent Color
+                              Custom Theme
+
+                              <div class="flex-1" />
+
+                              <MaterialSymbolsChevronRightRounded
+                                class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                              />
                             </div>
                           </template>
+
                           <template #expandIcon></template>
-                          <Chrome v-model="themeAccentColor" />
+                          <a-sub-menu key="pick-primary">
+                            <template #title>
+                              <div class="nc-project-menu-item group">
+                                <ClarityColorPickerSolid class="group-hover:text-accent" />
+                                Primary Color
+                              </div>
+                            </template>
+                            <template #expandIcon></template>
+                            <Chrome v-model="themePrimaryColor" />
+                          </a-sub-menu>
+
+                          <a-sub-menu key="pick-accent">
+                            <template #title>
+                              <div class="nc-project-menu-item group">
+                                <ClarityColorPickerSolid class="group-hover:text-accent" />
+                                Accent Color
+                              </div>
+                            </template>
+                            <template #expandIcon></template>
+                            <Chrome v-model="themeAccentColor" />
+                          </a-sub-menu>
                         </a-sub-menu>
                       </a-sub-menu>
-                    </a-sub-menu>
-                  </template>
-
-                  <a-menu-divider />
+                    </template>
 
-                  <a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as">
-                    <template #title>
-                      <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
-                        <MdiFileEyeOutline class="group-hover:text-accent" />
-                        Preview Project As
+                    <a-menu-divider />
 
-                        <div class="flex-1" />
+                    <a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as">
+                      <template #title>
+                        <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
+                          <MdiFileEyeOutline class="group-hover:text-accent" />
+                          Preview Project As
 
-                        <MaterialSymbolsChevronRightRounded
-                          class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
-                        />
-                      </div>
-                    </template>
+                          <div class="flex-1" />
 
-                    <template #expandIcon></template>
+                          <MaterialSymbolsChevronRightRounded
+                            class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                          />
+                        </div>
+                      </template>
 
-                    <GeneralPreviewAs />
-                  </a-sub-menu>
+                      <template #expandIcon></template>
 
+                      <GeneralPreviewAs />
+                    </a-sub-menu>
+                  </template>
                   <a-sub-menu
                     key="language"
                     class="lang-menu !py-0"