refactor/gui-v2-Share view added group filter

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

@@ -8,12 +8,14 @@ import { comparisonOpList } from '~/utils/filterUtils'
 import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/close-box'
 import MdiAddIcon from '~icons/mdi/plus'
+import type { Filter } from '~/lib/types'
 
 const {
   nested = false,
   parentId,
   autoSave = true,
   hookId = null,
+  modelValue: Filter[]
 } = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean; hookId?: string }>()
 
 const emit = defineEmits(['update:filtersLength'])
@@ -25,7 +27,6 @@ const activeView = inject(ActiveViewInj)
 const reloadDataHook = inject(ReloadViewDataHookInj)
 
 // todo: replace with inject or get from state
-const shared = ref(false)
 
 const { $e } = useNuxtApp()
 
@@ -36,6 +37,7 @@ const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGr
   () => {
     reloadDataHook?.trigger()
   },
+  modelValue,
 )
 
 const filterUpdateCondition = (filter: FilterType, i: number) => {
@@ -152,7 +154,7 @@ defineExpose({
             <span class="col-span-3" />
             <div class="col-span-5">
               <SmartsheetToolbarColumnFilter
-                v-if="filter.id || shared"
+                v-if="filter.id || filter.children"
                 ref="nestedFilters"
                 v-model="filter.children"
                 :parent-id="filter.id"

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

@@ -1,7 +1,7 @@
 import type { ColumnType, FilterType, PaginatedType, SortType, TableType, ViewType } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 
-const filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
+const nestedFilters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
 const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
 const sharedView = ref<ViewType>()
 const sorts = ref<SortType[]>([])
@@ -32,12 +32,12 @@ export function useSharedView() {
 
     const { data } = await $api.public.dataList(sharedView?.value?.uuid, {
       offset: (page - 1) * pageSize,
-      filterArrJson: JSON.stringify(filters.value),
+      filterArrJson: JSON.stringify(nestedFilters.value),
       sortArrJson: JSON.stringify(sorts.value),
     } as any)
 
     return data
   }
 
-  return { sharedView, loadSharedView, meta, columns, filters, fetchSharedViewData, paginationData, sorts }
+  return { sharedView, loadSharedView, meta, columns, nestedFilters, fetchSharedViewData, paginationData, sorts }
 }

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

@@ -1,20 +1,22 @@
-import type { FilterType, ViewType } from 'nocodb-sdk'
+import type { ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp, useUIPermission } from '#imports'
 import { useMetas } from '~/composables/useMetas'
 import { IsPublicInj, ReloadViewDataHookInj } from '~/context'
+import type { Filter } from '~/lib'
 
 export function useViewFilters(
   view: Ref<ViewType> | undefined,
   parentId?: string,
   autoApply?: ComputedRef<boolean>,
   reloadData?: () => void,
+  siblingFilters?: Filter[],
 ) {
-  const { filters: sharedViewFilter } = useSharedView()
+  const { nestedFilters } = useSharedView()
 
   const reloadHook = inject(ReloadViewDataHookInj)
 
-  const _filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
+  const _filters = ref<Filter[]>([])
 
   const isPublic = inject(IsPublicInj, ref(false))
   const { $api } = useNuxtApp()
@@ -22,10 +24,15 @@ export function useViewFilters(
   const { metas } = useMetas()
 
   const filters = computed({
-    get: () => (isPublic.value ? sharedViewFilter.value : _filters.value),
+    get: () => (isPublic.value ? siblingFilters || nestedFilters.value : _filters.value),
     set: (value) => {
       if (isPublic.value) {
-        sharedViewFilter.value = value
+        if (siblingFilters) {
+          siblingFilters = value
+        } else {
+          nestedFilters.value = value
+        }
+        nestedFilters.value = [...nestedFilters.value]
         reloadHook?.trigger()
       } else {
         _filters.value = value
@@ -33,6 +40,13 @@ export function useViewFilters(
     },
   })
 
+  const placeholderFilter: Filter = {
+    comparison_op: 'eq',
+    value: '',
+    status: 'create',
+    logical_op: 'and',
+  }
+
   const loadFilters = async (hookId?: string) => {
     if (isPublic.value) return
 
@@ -78,7 +92,7 @@ export function useViewFilters(
     reloadData?.()
   }
 
-  const deleteFilter = async (filter: FilterType & { status: string }, i: number) => {
+  const deleteFilter = async (filter: Filter, i: number) => {
     // if shared or sync permission not allowed simply remove it from array
     if (isPublic.value || !isUIAllowed('filterSync')) {
       filters.value.splice(i, 1)
@@ -101,9 +115,14 @@ export function useViewFilters(
     }
   }
 
-  const saveOrUpdate = async (filter: FilterType & { status?: string }, i: number, force = false) => {
+  const saveOrUpdate = async (filter: Filter, i: number, force = false) => {
+    if (isPublic.value) {
+      filters.value[i] = { ...filter } as any
+      filters.value = [...filters.value]
+      return
+    }
     if (!view?.value) return
-    if (isPublic.value || !isUIAllowed('filterSync')) {
+    if (!isUIAllowed('filterSync')) {
       // skip
     } else if (!autoApply?.value && !force) {
       filter.status = filter.id ? 'update' : 'create'
@@ -123,21 +142,19 @@ export function useViewFilters(
   }
 
   const addFilter = () => {
-    filters.value.push({
-      comparison_op: 'eq',
-      value: '',
-      status: 'create',
-      logical_op: 'and',
-    })
+    filters.value.push(placeholderFilter)
   }
 
   const addFilterGroup = async () => {
-    filters.value.push({
-      parentId,
+    const child = placeholderFilter
+    const placeHolderGroupFilter: Filter = {
       is_group: true,
       status: 'create',
       logical_op: 'and',
-    })
+    }
+    if (isPublic.value) placeHolderGroupFilter.children = [child]
+
+    filters.value.push(placeHolderGroupFilter)
     const index = filters.value.length - 1
     await saveOrUpdate(filters.value[index], index, true)
   }

packages/nc-gui-v2/lib/types.ts

@@ -1,5 +1,5 @@
+import type { FilterType } from 'nocodb-sdk'
 import type { Role } from './enums'
-
 export interface User {
   id: string
   email: string
@@ -22,3 +22,5 @@ export interface ProjectMetaInfo {
 }
 
 export type Roles = Record<Role, boolean>
+
+export type Filter = FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string; readOnly?: boolean }