fix/Added share view

packages/nc-gui-v2/components.d.ts

@@ -61,6 +61,7 @@ declare module '@vue/runtime-core' {
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    ATypography: typeof import('ant-design-vue/es')['Typography']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
     CilFullscreen: typeof import('~icons/cil/fullscreen')['default']

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

@@ -23,6 +23,7 @@ import {
   IsFormInj,
   IsGridInj,
   IsLockedInj,
+  IsPublicInj,
   MetaInj,
   PaginationDataInj,
   ReloadViewDataHookInj,
@@ -34,6 +35,8 @@ const meta = inject(MetaInj)
 
 const view = inject(ActiveViewInj)
 
+const isPublicView = inject(IsPublicInj, ref(false))
+
 // keep a root fields variable and will get modified from
 // fields menu and get used in grid and gallery
 const fields = inject(FieldsInj, ref([]))
@@ -45,8 +48,6 @@ const reloadViewDataHook = inject(ReloadViewDataHookInj)
 const { isUIAllowed } = useUIPermission()
 
 // todo: get from parent ( inject or use prop )
-const isPublicView = false
-
 const isView = false
 
 const selected = reactive<{ row: number | null; col: number | null }>({ row: null, col: null })
@@ -80,8 +81,13 @@ const {
 } = useViewData(meta, view as any, xWhere)
 
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
-
-onMounted(loadGridViewColumns)
+onMounted(() => {
+  if (!isPublicView.value) {
+    loadGridViewColumns()
+  } else {
+    loadGridViewColumns(fields.value)
+  }
+})
 
 provide(IsFormInj, ref(false))
 
@@ -149,7 +155,7 @@ const clearCell = async (ctx: { row: number; col: number }) => {
 const { copy } = useClipboard()
 
 const makeEditable = (row: Row, col: ColumnType) => {
-  if (isPublicView || editEnabled || isView) {
+  if (isPublicView.value || editEnabled || isView) {
     return
   }
   if (!isPkAvail.value && !row.rowMeta.new) {

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

@@ -3,6 +3,7 @@ import type { ColumnType, GridColumnType, GridType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useMetas } from './useMetas'
 import { useUIPermission } from './useUIPermission'
+import { IsPublicInj } from '~/context'
 
 export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) | undefined>) {
   const { css, load: loadCss, unload: unloadCss } = useStyleTag('')
@@ -13,6 +14,7 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
   const gridViewCols = ref<Record<string, GridColumnType>>({})
   const resizingCol = ref('')
   const resizingColWidth = ref('200px')
+  const isPublic = inject(IsPublicInj, ref(false))
 
   const columns = computed<ColumnType[]>(() => metas?.value?.[(view?.value as any)?.fk_model_id as string]?.columns)
 
@@ -34,9 +36,9 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
     { deep: true, immediate: true },
   )
 
-  const loadGridViewColumns = async () => {
-    if (!view.value?.id) return
-    const colsData: GridColumnType[] = await $api.dbView.gridColumnsList(view.value.id)
+  const loadGridViewColumns = async (cols?: GridColumnType[] | undefined) => {
+    if (!view.value?.id && !cols) return
+    const colsData: GridColumnType[] = cols ?? (await $api.dbView.gridColumnsList(view.value.id))
     gridViewCols.value = colsData.reduce<Record<string, GridColumnType>>(
       (o, col) => ({
         ...o,
@@ -56,7 +58,7 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
     }
 
     // sync with server if allowed
-    if (isUIAllowed('gridColUpdate') && gridViewCols.value[id]?.id) {
+    if (!isPublic.value && isUIAllowed('gridColUpdate') && gridViewCols.value[id]?.id) {
       $api.dbView.gridColumnUpdate(gridViewCols.value[id].id as string, {
         width,
       })

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

@@ -12,6 +12,14 @@ export function useMetas() {
   const metas = useState<{ [idOrTitle: string]: TableType | any }>('metas', () => ({}))
   const loadingState = useState<Record<string, boolean>>('metas-loading-state', () => ({}))
 
+  const setMeta = async (model: any) => {
+    metas.value = {
+      ...metas.value,
+      [model.id!]: model,
+      [model.title]: model,
+    }
+  }
+
   const getMeta = async (tableIdOrTitle: string, force = false): Promise<TableType | TableInfoType | null> => {
     if (!tableIdOrTitle) return null
     /** wait until loading is finished if requesting same meta */
@@ -83,5 +91,5 @@ export function useMetas() {
     }
   }
 
-  return { getMeta, clearAllMeta, metas, removeMeta }
+  return { getMeta, clearAllMeta, metas, removeMeta, setMeta }
 }

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

@@ -0,0 +1,22 @@
+import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
+import { useNuxtApp } from '#app'
+
+export function useSharedView(viewId: string) {
+  const sharedView = ref<ViewType>()
+  const meta = computed<TableType>(() => sharedView.value.model)
+  const columns = computed<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
+
+  const { $api } = useNuxtApp()
+  const { setMeta } = useMetas()
+
+  const loadSharedView = async () => {
+    const viewMeta = await $api.public.sharedViewMetaGet(viewId)
+    sharedView.value = viewMeta
+    setMeta(viewMeta.model)
+
+    const relatedMetas = { ...viewMeta.relatedMetas }
+    Object.keys(relatedMetas).forEach((key) => setMeta(relatedMetas[key]))
+  }
+
+  return { sharedView, loadSharedView, meta, columns }
+}

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

@@ -1,7 +1,7 @@
 import type { Api, ColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { message } from 'ant-design-vue'
-import { NOCO, computed, extractPkFromRow, extractSdkResponseErrorMsg, ref, useNuxtApp, useProject } from '#imports'
+import { IsPublicInj, NOCO, computed, extractPkFromRow, extractSdkResponseErrorMsg, ref, useNuxtApp, useProject } from '#imports'
 
 const formatData = (list: Record<string, any>[]) =>
   list.map((row) => ({
@@ -39,6 +39,7 @@ export function useViewData(
 
   const { project } = useProject()
   const { $api } = useNuxtApp()
+  const isPublic = inject(IsPublicInj, ref(false))
 
   const selectedAllRecords = computed({
     get() {
@@ -59,6 +60,14 @@ export function useViewData(
     paginationData.value.totalRows = count
   }
 
+  const loadPublicData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
+    const { data } = await $api.public.dataList(viewMeta?.value?.uuid, {
+      ...params,
+    })
+    formattedData.value = formatData(data.list)
+    paginationData.value = data.pageInfo
+  }
+
   const queryParams = computed(() => ({
     offset: (paginationData.value?.page ?? 0) - 1,
     limit: paginationData.value?.pageSize ?? 25,
@@ -92,7 +101,13 @@ export function useViewData(
   }
 
   const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
+    if (isPublic.value) {
+      loadPublicData(params)
+      return
+    }
+
     if (!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) return
+
     const response = await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, {
       ...params,
       where: where?.value,

packages/nc-gui-v2/context/index.ts

@@ -6,6 +6,7 @@ import type { Row } from '~/composables'
 import type { TabItem } from '~/composables/useTabs'
 
 export const ActiveCellInj: InjectionKey<Ref<boolean>> = Symbol('active-cell')
+export const IsPublicInj: InjectionKey<Ref<boolean>> = Symbol('is-public')
 export const RowInj: InjectionKey<Ref<Row>> = Symbol('row')
 export const ColumnInj: InjectionKey<Ref<ColumnType & { meta: any }>> = Symbol('column-injection')
 export const MetaInj: InjectionKey<ComputedRef<TableType>> = Symbol('meta-injection')

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import type { TableType } from 'nocodb-sdk/build/main'
+import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
+
+definePageMeta({
+  requiresAuth: false,
+})
+
+const route = useRoute()
+
+const reloadEventHook = createEventHook<void>()
+const { sharedView, loadSharedView, meta, columns } = useSharedView(route.params.viewId as string)
+
+await loadSharedView()
+
+provide(ReloadViewDataHookInj, reloadEventHook)
+provide(MetaInj, meta)
+provide(ActiveViewInj, sharedView)
+provide(FieldsInj, ref(columns))
+provide(IsPublicInj, ref(true))
+
+const { isGrid } = useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+</script>
+
+<template>
+  <NuxtLayout id="content" class="flex">
+    <SmartsheetGrid :is-public-view="true" />
+  </NuxtLayout>
+</template>