refactor/gui-v2-added hiding column to Share view

packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

@@ -21,7 +21,7 @@ const {
   showAll,
   hideAll,
   saveOrUpdate,
-} = useViewColumns(activeView, meta, false, () => reloadDataHook.trigger())
+} = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
 
 watch(
   () => (activeView.value as any)?.id,

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -100,8 +100,10 @@ provide(ChangePageInj, changePage)
 provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
 reloadViewDataHook?.on(async () => {
+  if (!isPublicView) {
+    loadAggCommentsCount()
+  }
   await loadData()
-  loadAggCommentsCount()
 })
 
 const selectCell = (row: number, col: number) => {

packages/nc-gui-v2/components/smartsheet/Toolbar.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
 import { useSmartsheetStoreOrThrow } from '~/composables'
+import { IsPublicInj } from '~/context'
 
 const { isGrid, isForm, isGallery } = useSmartsheetStoreOrThrow()
+const isPublic = inject(IsPublicInj, ref(false))
 </script>
 
 <template>
   <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[48px] px-2 border-b" style="z-index: 7">
-    <SmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" class="ml-1" />
+    <SmartsheetToolbarFieldsMenu v-if="(isGrid && !isPublic) || isGallery" :show-system-fields="false" class="ml-1" />
 
     <SmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery" />
 
-    <SmartsheetToolbarSortListMenu v-if="isGrid || isGallery" />
+    <SmartsheetToolbarSortListMenu v-if="(isGrid && !isPublic) || isGallery" />
 
-    <SmartsheetToolbarShareView v-if="isForm || isGrid" />
+    <SmartsheetToolbarShareView v-if="(isForm || isGrid) && !isPublic" />
 
     <SmartsheetToolbarMoreActions v-if="isGrid" />
     <div class="flex-1" />

packages/nc-gui-v2/composables/useSharedView.ts

@@ -3,8 +3,8 @@ import { useNuxtApp } from '#app'
 
 export function useSharedView(viewId: string) {
   const sharedView = ref<ViewType>()
-  const meta = computed<TableType>(() => sharedView.value.model)
+  const meta = ref<TableType>(() => sharedView.value.model)
-  const columns = computed<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
+  const columns = ref<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
 
   const { $api } = useNuxtApp()
   const { setMeta } = useMetas()
@@ -12,6 +12,9 @@ export function useSharedView(viewId: string) {
   const loadSharedView = async () => {
     const viewMeta = await $api.public.sharedViewMetaGet(viewId)
     sharedView.value = viewMeta
+    meta.value = sharedView.value.model
+    columns.value = sharedView.value.model.columns
+
     setMeta(viewMeta.model)
 
     const relatedMetas = { ...viewMeta.relatedMetas }

packages/nc-gui-v2/composables/useViewColumns.ts

@@ -3,13 +3,10 @@ import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import { watch } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp } from '#app'
+import { IsPublicInj } from '~/context'
 
-export function useViewColumns(
+export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRef<TableType>, reloadData?: () => void) {
-  view: Ref<ViewType> | undefined,
+  const isPublic = inject(IsPublicInj, ref(false))
-  meta: ComputedRef<TableType>,
-  isPublic = false,
-  reloadData?: () => void,
-) {
   const fields = ref<
     {
       order: number
@@ -31,7 +28,7 @@ export function useViewColumns(
 
     let order = 1
     if (view.value?.id) {
-      const data = (await $api.dbViewColumn.list(view.value.id)) as any[]
+      const data = (isPublic.value ? meta.value?.columns : await $api.dbViewColumn.list(view.value.id)) as any[]
 
       const fieldById = data.reduce<Record<string, any>>((acc, curr) => {
         curr.show = !!curr.show
@@ -54,8 +51,6 @@ export function useViewColumns(
           }
         })
         .sort((a, b) => a.order - b.order)
-    } else if (isPublic) {
-      fields.value = meta.value.columns as any
     }
   }
 
@@ -89,6 +84,22 @@ export function useViewColumns(
   }
 
   const saveOrUpdate = async (field: any, index: number) => {
+    if (isPublic && fields.value) {
+      fields.value[index] = field
+      meta.value.columns = meta.value?.columns?.map((column) => {
+        if (column.id === field.fk_column_id) {
+          return {
+            ...column,
+            ...field,
+          }
+        }
+        return column
+      })
+
+      reloadData?.()
+      return
+    }
+
     if (isUIAllowed('fieldsSync')) {
       if (field.id && view?.value?.id) {
         await $api.dbViewColumn.update(view.value.id, field.id, field)
@@ -118,11 +129,13 @@ export function useViewColumns(
     },
     set(v: boolean) {
       if (view?.value?.id) {
-        $api.dbView
+        if (!isPublic.value) {
-          .update(view.value.id, {
+          $api.dbView
-            show_system_fields: v,
+            .update(view.value.id, {
-          })
+              show_system_fields: v,
-          .finally(() => reloadData?.())
+            })
+            .finally(() => reloadData?.())
+        }
         ;(view.value as any).show_system_fields = v
       }
     },

packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue

@@ -17,7 +17,7 @@ await loadSharedView()
 provide(ReloadViewDataHookInj, reloadEventHook)
 provide(MetaInj, meta)
 provide(ActiveViewInj, sharedView)
-provide(FieldsInj, ref(columns))
+provide(FieldsInj, columns)
 provide(IsPublicInj, ref(true))
 
 const { isGrid } = useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
@@ -25,6 +25,7 @@ const { isGrid } = useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
 
 <template>
   <NuxtLayout id="content" class="flex">
+    <SmartsheetToolbar />
     <SmartsheetGrid :is-public-view="true" />
   </NuxtLayout>
 </template>