fix(gui-v2): correction in manual filter save implementation

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

@@ -17,6 +17,9 @@ const meta = inject(MetaInj)
 const activeView = inject(ActiveViewInj)
 const reloadDataHook = inject(ReloadViewDataHookInj)
 
+// todo: replace with inject or get from state
+const shared = ref(false)
+
 const { $e } = useNuxtApp()
 
 const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGroup, sync } = useViewFilters(
@@ -93,10 +96,7 @@ watch(
 )
 
 const applyChanges = async () => {
-  console.log('hello')
-  // sync()
-  // $e('a:filter:apply')
-
+  await sync()
   for (const nestedFilter of nestedFilters?.value || []) {
     if (nestedFilter.parentId) {
       await nestedFilter.applyChanges(true)
@@ -151,6 +151,7 @@ defineExpose({
                 v-model="filter.children"
                 :parent-id="filter.id"
                 nested
+                :auto-save="autoSave"
               />
             </div>
           </template>

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

@@ -1,17 +1,21 @@
-import type { FilterType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
-import type { ComputedRef, Ref } from 'vue'
-import { useNuxtApp } from '#imports'
+import type {FilterType, GalleryType, GridType, KanbanType} from 'nocodb-sdk'
+import type {ComputedRef, Ref} from 'vue'
+import {useNuxtApp} from '#imports'
+import useUIPermission from '~/composables/useUIPermission'
 
 export function useViewFilters(
   view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined,
   parentId?: string,
   autoApply?: ComputedRef<boolean>,
   reloadData?: () => void,
+  shared = false
 ) {
+
   // todo: update swagger
-  const filters = ref<(FilterType & { status?: 'update' | 'delete'; parentId?: string })[]>([])
+  const filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
 
-  const { $api } = useNuxtApp()
+  const {$api} = useNuxtApp()
+  const {isUIAllowed} = useUIPermission()
 
   const loadFilters = async () => {
     if (parentId) {
@@ -30,7 +34,7 @@ export function useViewFilters(
           ...filter,
           fk_parent_id: parentId,
         })
-      } else {
+      } else if (filter.status === 'create') {
         filters.value[+i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
           ...filter,
           fk_parent_id: parentId,
@@ -41,54 +45,41 @@ export function useViewFilters(
   }
 
   const deleteFilter = async (filter: FilterType & { status: string }, i: number) => {
-    //   if (this.shared || !this._isUIAllowed('filterSync')) {
-    //     this.filters.splice(i, 1)
-    //     this.$emit('updated')
-    //   } else
 
-    if (filter.id) {
+    if (shared || !isUIAllowed('filterSync')) {
+      const _filters = unref(filters.value)
+      _filters.splice(i, 1)
+      filters.value = _filters
+    } else if (filter.id) {
       if (!autoApply?.value) {
         filter.status = 'delete'
       } else {
-        await $api.dbTableFilter.delete(filter.id) /**/
-        //       await this.loadFilter()
-        //       this.$emit('updated')
+        await $api.dbTableFilter.delete(filter.id)
+        const _filters = unref(filters.value)
+        _filters.splice(i, 1)
+        filters.value = _filters
+        reloadData?.()
       }
-    } else {
-      //     this.$emit('updated')
     }
-    const _filters = unref(filters.value)
-    _filters.splice(i, 1)
-    filters.value = _filters
-    //   this.$e('a:filter:delete')
-    // // },
-    reloadData?.()
   }
 
-  const saveOrUpdate = async (filter: FilterType & { status?: string }, i: number) => {
+  const saveOrUpdate = async (filter: FilterType & { status?: string }, i: number, force = false) => {
     if (!view?.value) return
-
-    // if (this.shared || !this._isUIAllowed('filterSync')) {
-    // this.$emit('input', this.filters.filter(f => f.fk_column_id && f.comparison_op))
-    // this.$emit('updated')
-    // } else
-    if (!autoApply?.value) {
-      filter.status = 'update'
+    if (shared || !isUIAllowed('filterSync')) {
+      // skip
+    } else if (!autoApply?.value && !force) {
+      filter.status = filter.id ? 'update' : 'create'
     } else if (filter.id) {
       await $api.dbTableFilter.update(filter.id, {
         ...filter,
         fk_parent_id: parentId,
       })
-
-      // this.$emit('updated')
     } else {
       // todo: return type correction
       filters.value[i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
         ...filter,
         fk_parent_id: parentId,
       })) as any
-
-      // this.$emit('updated')
     }
     reloadData?.()
   }
@@ -97,7 +88,7 @@ export function useViewFilters(
     filters.value.push({
       comparison_op: 'eq',
       value: '',
-      status: 'update',
+      status: 'create',
       logical_op: 'and',
     })
   }
@@ -106,12 +97,12 @@ export function useViewFilters(
     filters.value.push({
       parentId,
       is_group: true,
-      status: 'update',
+      status: 'create',
       logical_op: 'and',
     })
     const index = filters.value.length - 1
-    await saveOrUpdate(filters.value[index], index)
+    await saveOrUpdate(filters.value[index], index, true)
   }
 
-  return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup }
+  return {filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup}
 }