Merge pull request #3251 from nocodb/fix/gui-v2-added-filter-sort-for-viewer-user

fix/Added filter sorting for user with viewer role

packages/nc-gui-v2/components/shared-view/Grid.vue

@@ -4,7 +4,7 @@ import type { TableType } from 'nocodb-sdk'
 
 import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
 
-const { sharedView, meta } = useSharedView()
+const { sharedView, meta, sorts, nestedFilters } = useSharedView()
 
 const reloadEventHook = createEventHook<void>()
 provide(ReloadViewDataHookInj, reloadEventHook)
@@ -14,7 +14,7 @@ provide(ActiveViewInj, sharedView)
 provide(FieldsInj, ref(meta.value.columns as any[]))
 provide(IsPublicInj, ref(true))
 
-useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+useProvideSmartsheetStore(sharedView as Ref<TableType>, meta, true, sorts, nestedFilters)
 </script>
 
 <template>

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

@@ -41,6 +41,7 @@ const reloadDataHook = inject(ReloadViewDataHookInj)!
 
 const { $e } = useNuxtApp()
 
+const { nestedFilters } = useSmartsheetStoreOrThrow()
 const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGroup, sync } = useViewFilters(
   activeView,
   parentId,
@@ -48,10 +49,11 @@ const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGr
   () => {
     reloadDataHook.trigger()
   },
-  modelValue,
+  modelValue || nestedFilters.value,
+  !modelValue,
 )
 
-const nestedFilters = ref()
+const localNestedFilters = ref()
 
 const filterUpdateCondition = (filter: FilterType, i: number) => {
   saveOrUpdate(filter, i)
@@ -115,9 +117,9 @@ watch(
 const applyChanges = async (hookId?: string) => {
   await sync(hookId)
 
-  if (!nestedFilters.value?.length) return
+  if (!localNestedFilters.value?.length) return
 
-  for (const nestedFilter of nestedFilters.value) {
+  for (const nestedFilter of localNestedFilters.value) {
     if (nestedFilter.parentId) {
       await nestedFilter.applyChanges(hookId, true)
     }
@@ -166,7 +168,7 @@ defineExpose({
             <div class="col-span-5">
               <SmartsheetToolbarColumnFilter
                 v-if="filter.id || filter.children"
-                ref="nestedFilters"
+                ref="localNestedFilters"
                 v-model="filter.children"
                 :parent-id="filter.id"
                 nested

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

@@ -12,11 +12,15 @@ const { filterAutoSave } = useGlobal()
 
 const filterComp = ref<typeof ColumnFilter>()
 
+const { nestedFilters } = useSmartsheetStoreOrThrow()
 // todo: avoid duplicate api call by keeping a filter store
 const { filters, loadFilters } = useViewFilters(
   activeView,
   undefined,
-  computed(() => false),
+  computed(() => true),
+  () => false,
+  nestedFilters.value,
+  true,
 )
 
 const filtersLength = ref(0)

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

@@ -1,10 +1,16 @@
 import { ViewTypes } from 'nocodb-sdk'
-import type { TableType, ViewType } from 'nocodb-sdk'
+import type { FilterType, SortType, TableType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { computed, reactive, useInjectionState, useNuxtApp, useProject, useTemplateRefsList } from '#imports'
 
 const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
-  (view: Ref<ViewType>, meta: Ref<TableType>, shared = false) => {
+  (
+    view: Ref<ViewType>,
+    meta: Ref<TableType>,
+    shared = false,
+    initalSorts?: Ref<SortType[]>,
+    initialFilters?: Ref<FilterType[]>,
+  ) => {
     const { $api } = useNuxtApp()
     const { sqlUi } = useProject()
 
@@ -37,6 +43,8 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
       }
       return where
     })
+    const sorts = initalSorts ?? ref<SortType[]>([])
+    const nestedFilters: Ref<FilterType[]> = initialFilters ?? ref<FilterType[]>([])
 
     return {
       view,
@@ -51,6 +59,8 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
       isGallery,
       cellRefs,
       isSharedForm,
+      sorts,
+      nestedFilters,
     }
   },
   'smartsheet-store',

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

@@ -52,7 +52,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
   }
 
   const showAll = async (ignoreIds?: any) => {
-    if (isPublic.value || isSharedBase) {
+    if (isPublic.value || isSharedBase.value) {
       fields.value = fields.value?.map((field: Field) => ({
         ...field,
         show: true,
@@ -75,7 +75,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
     reloadData?.()
   }
   const hideAll = async (ignoreIds?: any) => {
-    if (isPublic.value || isSharedBase) {
+    if (isPublic.value || isSharedBase.value) {
       fields.value = fields.value?.map((field: Field) => ({
         ...field,
         show: false,
@@ -144,7 +144,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
     },
     set(v: boolean) {
       if (view?.value?.id) {
-        if (!isPublic.value && !isSharedBase) {
+        if (!isPublic.value && !isSharedBase.value) {
           $api.dbView
             .update(view.value.id, {
               show_system_fields: v,

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

@@ -39,10 +39,10 @@ export function useViewData(
   const formattedData = ref<Row[]>([])
 
   const isPublic = inject(IsPublicInj, ref(false))
-  const { project } = useProject()
+  const { project, isSharedBase } = useProject()
   const { fetchSharedViewData, paginationData: sharedPaginationData } = useSharedView()
   const { $api } = useNuxtApp()
-  const { sorts, nestedFilters: filters } = useSharedView()
+  const { sorts, nestedFilters } = useSmartsheetStoreOrThrow()
   const { isUIAllowed } = useUIPermission()
 
   const paginationData = computed({
@@ -83,8 +83,7 @@ export function useViewData(
 
   /** load row comments count */
   const loadAggCommentsCount = async () => {
-    // todo: handle in public api
+    if (isPublic.value || isSharedBase.value) return
-    if (isPublic.value) return
 
     const ids = formattedData.value
       ?.filter(({ rowMeta: { new: isNew } }) => !isNew)
@@ -112,7 +111,7 @@ export function useViewData(
       ? await $api.dbViewRow.list('noco', project.value.id!, meta.value.id!, viewMeta!.value.id, {
           ...params,
           ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
-          ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(filters.value) }),
+          ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
           where: where?.value,
         })
       : await fetchSharedViewData()

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

@@ -1,14 +1,15 @@
 import type { ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
+import { message } from 'ant-design-vue'
 import {
   IsPublicInj,
   ReloadViewDataHookInj,
   computed,
+  extractSdkResponseErrorMsg,
   inject,
   ref,
   useMetas,
   useNuxtApp,
-  useSharedView,
   useUIPermission,
   watch,
 } from '#imports'
@@ -19,13 +20,12 @@ export function useViewFilters(
   parentId?: string,
   autoApply?: ComputedRef<boolean>,
   reloadData?: () => void,
-  siblingFilters?: Filter[],
+  currentFilters?: Filter[],
+  isNestedRoot?: boolean,
 ) {
-  const { nestedFilters } = useSharedView()
-
   const reloadHook = inject(ReloadViewDataHookInj)
 
-  const _filters = ref<Filter[]>([])
+  const { nestedFilters } = useSmartsheetStoreOrThrow()
 
   const isPublic = inject(IsPublicInj, ref(false))
 
@@ -34,21 +34,23 @@ export function useViewFilters(
   const { isUIAllowed } = useUIPermission()
 
   const { metas } = useMetas()
+  const _filters = ref<Filter[]>([])
+
+  const nestedMode = computed(() => isPublic.value || !isUIAllowed('filterSync' || !isUIAllowed('filterChildrenRead')))
+
+  const filters = computed<Filter[]>({
+    get: () => (nestedMode.value ? currentFilters! : _filters.value),
+    set: (value: Filter[]) => {
+      if (nestedMode.value) {
+        currentFilters = value
+        if (isNestedRoot) nestedFilters.value = value
 
-  const filters = computed({
-    get: () => (isPublic.value ? siblingFilters || nestedFilters.value : _filters.value) ?? [],
-    set: (value) => {
-      if (isPublic.value) {
-        if (siblingFilters) {
-          siblingFilters = value
-        } else {
-          nestedFilters.value = value
-        }
         nestedFilters.value = [...nestedFilters.value]
         reloadHook?.trigger()
-      } else {
+        return
-        _filters.value = value
       }
+
+      _filters.value = value
     },
   })
 
@@ -60,6 +62,9 @@ export function useViewFilters(
   }
 
   const loadFilters = async (hookId?: string) => {
+    if (nestedMode.value) return
+
+    try {
       if (hookId) {
         if (parentId) {
           filters.value = await $api.dbTableFilter.childrenRead(parentId)
@@ -73,9 +78,14 @@ export function useViewFilters(
           filters.value = await $api.dbTableFilter.read(view?.value?.id as string)
         }
       }
+    } catch (e: any) {
+      console.log(e)
+      message.error(await extractSdkResponseErrorMsg(e))
+    }
   }
 
   const sync = async (hookId?: string, _nested = false) => {
+    try {
       for (const [i, filter] of Object.entries(filters.value)) {
         if (filter.status === 'delete') {
           await $api.dbTableFilter.delete(filter.id as string)
@@ -100,13 +110,17 @@ export function useViewFilters(
       }
 
       reloadData?.()
+    } catch (e: any) {
+      console.log(e)
+      message.error(await extractSdkResponseErrorMsg(e))
+    }
   }
 
   const deleteFilter = async (filter: Filter, i: number) => {
     // if shared or sync permission not allowed simply remove it from array
-    if (isPublic.value || !isUIAllowed('filterSync')) {
+    if (nestedMode.value) {
       filters.value.splice(i, 1)
-
+      filters.value = [...filters.value]
       reloadData?.()
     } else {
       if (filter.id) {
@@ -115,11 +129,16 @@ export function useViewFilters(
           filter.status = 'delete'
           // if auto-apply enabled invoke delete api and remove from array
         } else {
+          try {
             await $api.dbTableFilter.delete(filter.id)
 
             reloadData?.()
 
             filters.value.splice(i, 1)
+          } catch (e: any) {
+            console.log(e)
+            message.error(await extractSdkResponseErrorMsg(e))
+          }
         }
         // if not synced yet remove it from array
       } else {
@@ -129,17 +148,12 @@ export function useViewFilters(
   }
 
   const saveOrUpdate = async (filter: Filter, i: number, force = false) => {
-    if (isPublic.value) {
-      filters.value[i] = { ...filter }
-
-      filters.value = [...filters.value]
-
-      return
-    }
     if (!view?.value) return
 
-    if (!isUIAllowed('filterSync')) {
+    try {
-      // skip
+      if (nestedMode.value) {
+        filters.value[i] = { ...filter }
+        filters.value = [...filters.value]
       } else if (!autoApply?.value && !force) {
         filter.status = filter.id ? 'update' : 'create'
       } else if (filter.id) {
@@ -154,6 +168,10 @@ export function useViewFilters(
           fk_parent_id: parentId,
         })) as any
       }
+    } catch (e: any) {
+      console.log(e)
+      message.error(await extractSdkResponseErrorMsg(e))
+    }
 
     reloadData?.()
   }
@@ -168,7 +186,7 @@ export function useViewFilters(
       logical_op: 'and',
     }
 
-    if (isPublic.value) placeHolderGroupFilter.children = [child]
+    if (nestedMode.value) placeHolderGroupFilter.children = [child]
 
     filters.value.push(placeHolderGroupFilter)
 

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

@@ -1,36 +1,23 @@
 import type { GalleryType, GridType, KanbanType, SortType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { IsPublicInj, ReloadViewDataHookInj, useNuxtApp } from '#imports'
+import { message } from 'ant-design-vue'
+import { IsPublicInj, ReloadViewDataHookInj, extractSdkResponseErrorMsg, useNuxtApp } from '#imports'
 
 export function useViewSorts(
   view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined,
   reloadData?: () => void,
 ) {
-  const _sorts = ref<SortType[]>([])
+  const { sharedView } = useSharedView()
-
+  const { sorts } = useSmartsheetStoreOrThrow()
-  const { sorts: sharedViewSorts, sharedView } = useSharedView()
 
   const reloadHook = inject(ReloadViewDataHookInj)
 
   const isPublic = inject(IsPublicInj, ref(false))
 
-  const { isSharedBase } = useProject()
-
-  const sorts = computed<SortType[]>({
-    get: () => (isPublic.value || isSharedBase.value ? sharedViewSorts.value : _sorts.value),
-    set: (value) => {
-      if (isPublic.value || isSharedBase.value) {
-        sharedViewSorts.value = value
-      } else {
-        _sorts.value = value
-      }
-      reloadHook?.trigger()
-    },
-  })
-
   const { $api } = useNuxtApp()
 
   const { isUIAllowed } = useUIPermission()
+  const { isSharedBase } = useProject()
 
   const loadSorts = async () => {
     if (isPublic.value) {
@@ -38,8 +25,14 @@ export function useViewSorts(
       sorts.value = [...sharedSorts]
       return
     }
+
+    try {
       if (!view?.value) return
       sorts.value = ((await $api.dbTableSort.list(view?.value?.id as string)) as any)?.sorts?.list
+    } catch (e: any) {
+      console.error(e)
+      message.error(await extractSdkResponseErrorMsg(e))
+    }
   }
 
   const saveOrUpdate = async (sort: SortType, i: number) => {
@@ -49,6 +42,7 @@ export function useViewSorts(
       return
     }
 
+    try {
       if (isUIAllowed('sortSync')) {
         if (sort.id) {
           await $api.dbTableSort.update(sort.id, sort)
@@ -57,6 +51,10 @@ export function useViewSorts(
         }
       }
       reloadData?.()
+    } catch (e: any) {
+      console.error(e)
+      message.error(await extractSdkResponseErrorMsg(e))
+    }
   }
   const addSort = () => {
     sorts.value = [
@@ -68,11 +66,21 @@ export function useViewSorts(
   }
 
   const deleteSort = async (sort: SortType, i: number) => {
+    try {
       if (isUIAllowed('sortSync') && sort.id && !isPublic.value && !isSharedBase.value) {
         await $api.dbTableSort.delete(sort.id)
       }
       sorts.value.splice(i, 1)
       sorts.value = [...sorts.value]
+    } catch (e: any) {
+      console.error(e)
+      message.error(await extractSdkResponseErrorMsg(e))
+    }
   }
+
+  watch(sorts, () => {
+    reloadHook?.trigger()
+  })
+
   return { sorts, loadSorts, addSort, deleteSort, saveOrUpdate }
 }