refactor/gui-v2-added filter to Share view

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

@@ -10,7 +10,7 @@ const isPublic = inject(IsPublicInj, ref(false))
   <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 && !isPublic) || isGallery" :show-system-fields="false" class="ml-1" />
 
-    <SmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery" />
+    <SmartsheetToolbarColumnFilterMenu v-if="(isGrid && !isPublic) || isGallery" />
 
     <SmartsheetToolbarSortListMenu v-if="(isGrid && !isPublic) || isGallery" />
 

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

@@ -1,19 +1,23 @@
-import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
+import type { ColumnType, FilterType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 
-export function useSharedView(viewId: string) {
-  const sharedView = ref<ViewType>()
-  const meta = ref<TableType>(() => sharedView.value.model)
+const filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
+const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
+const sharedView = ref<ViewType>()
+
+export function useSharedView() {
+  const meta = ref<TableType>(() => sharedView.value?.model)
   const columns = ref<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
 
   const { $api } = useNuxtApp()
   const { setMeta } = useMetas()
 
-  const loadSharedView = async () => {
+  const loadSharedView = async (viewId: string) => {
     const viewMeta = await $api.public.sharedViewMetaGet(viewId)
     sharedView.value = viewMeta
-    meta.value = sharedView.value.model
-    columns.value = sharedView.value.model.columns
+
+    meta.value = viewMeta.model
+    columns.value = viewMeta.model.columns
 
     setMeta(viewMeta.model)
 
@@ -21,5 +25,17 @@ export function useSharedView(viewId: string) {
     Object.keys(relatedMetas).forEach((key) => setMeta(relatedMetas[key]))
   }
 
-  return { sharedView, loadSharedView, meta, columns }
+  const fetchSharedViewData = async () => {
+    const page = paginationData.value.page || 1
+    const pageSize = paginationData.value.pageSize || 25
+
+    const { data } = await $api.public.dataList(sharedView?.value?.uuid, {
+      offset: (page - 1) * pageSize,
+      filterArrJson: JSON.stringify(filters.value),
+    } as any)
+
+    return data
+  }
+
+  return { sharedView, loadSharedView, meta, columns, filters, fetchSharedViewData, paginationData }
 }

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

@@ -19,6 +19,7 @@ export interface Row {
     commentCount?: number
   }
 }
+const formattedData = ref<Row[]>([])
 
 export function useViewData(
   meta: Ref<TableType> | ComputedRef<TableType> | undefined,
@@ -29,7 +30,6 @@ export function useViewData(
     throw new Error('Table meta is not available')
   }
 
-  const formattedData = ref<Row[]>([])
   const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
   const aggCommentCount = ref<{ row_id: string; count: number }[]>([])
   const galleryData = ref<GalleryType>()
@@ -38,8 +38,9 @@ export function useViewData(
   const formViewData = ref<FormType & { success_msg?: string; show_blank_form?: boolean }>()
 
   const { project } = useProject()
+  const { fetchSharedViewData, paginationData: sharedPaginationData } = useSharedView()
   const { $api } = useNuxtApp()
-  const isPublic = inject(IsPublicInj, ref(false))
+  let isPublic = inject(IsPublicInj, ref(false))
 
   const selectedAllRecords = computed({
     get() {
@@ -60,14 +61,6 @@ 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,
@@ -77,9 +70,7 @@ export function useViewData(
   /** load row comments count */
   const loadAggCommentsCount = async () => {
     // todo: handle in public api
-    // if (this.isPublicView) {
-    //   return;
-    // }
+    if (isPublic.value) return
 
     const ids = formattedData.value
       ?.filter(({ rowMeta: { new: isNew } }) => !isNew)
@@ -100,18 +91,16 @@ 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 loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}, isPublicMode = false) => {
+    isPublic = isPublic ?? ref(isPublicMode)
+    if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
 
-    const response = await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, {
-      ...params,
-      where: where?.value,
-    })
+    const response = !isPublic.value
+      ? await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, {
+          ...params,
+          where: where?.value,
+        })
+      : await fetchSharedViewData()
     formattedData.value = formatData(response.list)
     paginationData.value = response.pageInfo
 
@@ -333,6 +322,15 @@ export function useViewData(
     }
   }
 
+  watch(
+    () => paginationData.value,
+    () => {
+      if (!isPublic.value) return
+
+      sharedPaginationData.value = paginationData.value
+    },
+  )
+
   return {
     loadData,
     paginationData,

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

@@ -2,21 +2,28 @@ import type { FilterType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp, useUIPermission } from '#imports'
 import { useMetas } from '~/composables/useMetas'
+import { IsPublicInj, MetaInj } from '~/context'
 
 export function useViewFilters(
   view: Ref<ViewType> | undefined,
   parentId?: string,
   autoApply?: ComputedRef<boolean>,
   reloadData?: () => void,
-  shared = false,
 ) {
+  const { filters: sharedViewFilter } = useSharedView()
+  const meta = inject(MetaInj)
+  const { loadData } = useViewData(meta, view)
+
   const filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
 
+  const isPublic = inject(IsPublicInj, ref(false))
   const { $api } = useNuxtApp()
   const { isUIAllowed } = useUIPermission()
   const { metas } = useMetas()
 
   const loadFilters = async (hookId?: string) => {
+    if (isPublic.value) return
+
     if (hookId) {
       if (parentId) {
         filters.value = await $api.dbTableFilter.childrenRead(parentId)
@@ -55,12 +62,13 @@ export function useViewFilters(
         }
       }
     }
+    }
     reloadData?.()
   }
 
   const deleteFilter = async (filter: FilterType & { status: string }, i: number) => {
     // if shared or sync permission not allowed simply remove it from array
-    if (shared || !isUIAllowed('filterSync')) {
+    if (isPublic.value || !isUIAllowed('filterSync')) {
       filters.value.splice(i, 1)
       reloadData?.()
     } else {
@@ -83,7 +91,7 @@ export function useViewFilters(
 
   const saveOrUpdate = async (filter: FilterType & { status?: string }, i: number, force = false) => {
     if (!view?.value) return
-    if (shared || !isUIAllowed('filterSync')) {
+    if (isPublic.value || !isUIAllowed('filterSync')) {
       // skip
     } else if (!autoApply?.value && !force) {
       filter.status = filter.id ? 'update' : 'create'
@@ -103,21 +111,27 @@ export function useViewFilters(
   }
 
   const addFilter = () => {
-    filters.value.push({
-      comparison_op: 'eq',
-      value: '',
-      status: 'create',
-      logical_op: 'and',
-    })
+    filters.value = [
+      ...filters.value,
+      {
+        comparison_op: 'eq',
+        value: '',
+        status: 'create',
+        logical_op: 'and',
+      },
+    ]
   }
 
-  const addFilterGroup = async (parentId?: string) => {
-    filters.value.push({
-      parentId,
-      is_group: true,
-      status: 'create',
-      logical_op: 'and',
-    })
+  const addFilterGroup = async () => {
+    filters.value = [
+      ...filters.value,
+      {
+        parentId,
+        is_group: true,
+        status: 'create',
+        logical_op: 'and',
+      },
+    ]
     const index = filters.value.length - 1
     await saveOrUpdate(filters.value[index], index, true)
   }
@@ -138,5 +152,15 @@ export function useViewFilters(
     },
   )
 
+  watch(
+    () => filters.value,
+    () => {
+      if (!isPublic.value) return
+
+      sharedViewFilter.value = filters.value
+      loadData()
+    },
+  )
+
   return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup }
 }

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

@@ -10,9 +10,9 @@ definePageMeta({
 const route = useRoute()
 
 const reloadEventHook = createEventHook<void>()
-const { sharedView, loadSharedView, meta, columns } = useSharedView(route.params.viewId as string)
+const { sharedView, loadSharedView, meta, columns } = useSharedView()
 
-await loadSharedView()
+await loadSharedView(route.params.viewId as string)
 
 provide(ReloadViewDataHookInj, reloadEventHook)
 provide(MetaInj, meta)