From 67be2c000f86addab53e5f1b60a3d22e2d4c7960 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 17 Aug 2022 12:07:47 +0800
Subject: [PATCH] chore(gui-v2): hide some right toolbar buttons in form view

---
 .../components/smartsheet/sidebar/index.vue   | 25 +++++++++++++++----
 .../smartsheet/sidebar/toolbar/index.vue      |  7 ++++++
 .../nc-gui-v2/components/tabs/Smartsheet.vue  | 16 +++++++++---
 3 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index 92ab9dd635..a3f5efd14e 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -3,13 +3,29 @@ import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'noc
 import MenuTop from './MenuTop.vue'
 import MenuBottom from './MenuBottom.vue'
 import Toolbar from './toolbar/index.vue'
-import { computed, inject, provide, ref, useElementHover, useRoute, useRouter, useViews, watch } from '#imports'
-import { ActiveViewInj, MetaInj, RightSidebarInj, ViewListInj } from '~/context'
+import {
+  ActiveViewInj,
+  IsFormInj,
+  MetaInj,
+  RightSidebarInj,
+  ViewListInj,
+  computed,
+  inject,
+  provide,
+  ref,
+  useElementHover,
+  useRoute,
+  useRouter,
+  useViews,
+  watch,
+} from '#imports'
 
 const meta = inject(MetaInj, ref())
 
 const activeView = inject(ActiveViewInj, ref())
 
+const isForm = inject(IsFormInj)
+
 const { views, loadViews } = useViews(meta)
 
 const { isUIAllowed } = useUIPermission()
@@ -109,8 +125,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
         </div>
       </Transition>
     </a-tooltip>
-
-    <Toolbar v-if="sidebarOpen" class="flex items-center py-3 px-3 justify-between border-b-1" />
+    <Toolbar v-if="sidebarOpen" :class="{ 'flex items-center py-3 px-3 justify-between border-b-1': !isForm }" />
 
     <Toolbar v-else class="py-3 px-2 max-w-[50px] flex !flex-col-reverse gap-4 items-center mt-[-1px]">
       <template #start>
@@ -132,7 +147,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
           </div>
         </a-tooltip>
 
-        <div class="dot" />
+        <div v-if="!isForm" class="dot" />
       </template>
     </Toolbar>
 
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
index 0086d4f89d..5418c57772 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
@@ -5,9 +5,12 @@ import Reload from './Reload.vue'
 import ExportCache from './ExportCache.vue'
 import DeleteCache from './DeleteCache.vue'
 import DebugMeta from './DebugMeta.vue'
+import { IsFormInj } from '#imports'
 
 const { isUIAllowed } = useUIPermission()
 
+const isForm = inject(IsFormInj)
+
 const debug = $ref(false)
 
 const clickCount = $ref(0)
@@ -15,6 +18,7 @@ const clickCount = $ref(0)
 
 <template>
   <div
+    v-if="!isForm"
     class="flex gap-2"
     @click="
       () => {
@@ -51,6 +55,9 @@ const clickCount = $ref(0)
 
     <slot name="end" />
   </div>
+  <div v-else>
+    <slot name="start" />
+  </div>
 </template>
 
 <style scoped>
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index 012e0a4b38..2b632042b7 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -3,7 +3,16 @@ import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import SmartsheetGrid from '../smartsheet/Grid.vue'
 import { computed, inject, provide, useMetas, useProvideSmartsheetStore, watch, watchEffect } from '#imports'
-import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, RightSidebarInj, TabMetaInj } from '~/context'
+import {
+  ActiveViewInj,
+  FieldsInj,
+  IsFormInj,
+  IsLockedInj,
+  MetaInj,
+  ReloadViewDataHookInj,
+  RightSidebarInj,
+  TabMetaInj,
+} from '~/context'
 import type { TabItem } from '~/composables'
 
 const { getMeta, metas } = useMetas()
@@ -27,6 +36,8 @@ watchEffect(async () => {
 
 const reloadEventHook = createEventHook<void>()
 
+const { isGallery, isGrid, isForm } = useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
+
 // todo: move to store
 provide(MetaInj, meta)
 provide(TabMetaInj, tabMeta)
@@ -35,8 +46,7 @@ provide(IsLockedInj, false)
 provide(ReloadViewDataHookInj, reloadEventHook)
 provide(FieldsInj, fields)
 provide(RightSidebarInj, ref(false))
-
-const { isGallery, isGrid, isForm } = useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
+provide(IsFormInj, isForm)
 
 watch(tabMeta, async (newTabMeta, oldTabMeta) => {
   if (newTabMeta !== oldTabMeta && newTabMeta?.id) await getMeta(newTabMeta.id)