feat(gui-v2): filter auto-save disable/enable option

Signed-off-by: Pranav C <pranavxc@gmail.com>

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

@@ -2,7 +2,6 @@
 import type { FilterType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
-import Smartsheet from '~/components/tabs/Smartsheet.vue'
 import { useNuxtApp } from '#app'
 import { inject, useViewFilters, watchEffect } from '#imports'
 import { comparisonOpList } from '~/utils/filterUtils'
@@ -10,7 +9,7 @@ import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/close-box'
 import MdiAddIcon from '~icons/mdi/plus'
 
-const { nested = false, parentId } = defineProps<{ nested?: boolean; parentId?: string }>()
+const { nested = false, parentId, autoSave = true } = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean }>()
 
 const emit = defineEmits(['update:filters-length'])
 
@@ -20,9 +19,10 @@ const reloadDataHook = inject(ReloadViewDataHookInj)
 
 const { $e } = useNuxtApp()
 
-const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGroup } = useViewFilters(
+const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGroup, sync } = useViewFilters(
   activeView,
   parentId,
+  computed(() => autoSave),
   () => {
     reloadDataHook?.trigger()
   },
@@ -30,7 +30,6 @@ const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGr
 
 const filterUpdateCondition = (filter: FilterType, i: number) => {
   saveOrUpdate(filter, i)
-
   $e('a:filter:update', {
     logical: filter.logical_op,
     comparison: filter.comparison_op,
@@ -79,7 +78,7 @@ watch(
   { immediate: true },
 )
 
-const nestedFilter = ref()
+const nestedFilters = ref()
 
 const logicalOps = [
   { value: 'and', text: 'AND' },
@@ -92,6 +91,22 @@ watch(
     emit('update:filters-length', length ?? 0)
   },
 )
+
+const applyChanges = async () => {
+  console.log('hello')
+  // sync()
+  // $e('a:filter:apply')
+
+    for (const nestedFilter of nestedFilters?.value || []) {
+      if (nestedFilter.parentId) {
+        await nestedFilter.applyChanges(true);
+      }
+    }
+}
+
+defineExpose({
+  applyChanges, parentId
+})
 </script>
 
 <template>
@@ -128,7 +143,7 @@ watch(
             <div class="col-span-5">
               <SmartsheetToolbarColumnFilter
                 v-if="filter.id || shared"
-                ref="nestedFilter"
+                ref="nestedFilters"
                 v-model="filter.children"
                 :parent-id="filter.id"
                 nested

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

@@ -4,15 +4,22 @@ import { useState } from '#app'
 import { IsLockedInj } from '~/context'
 import MdiFilterIcon from '~icons/mdi/filter-outline'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
+import ColumnFilter from './ColumnFilter.vue'
 
 const autoApplyFilter = useState('autoApplyFilter', () => false)
 const isLocked = inject(IsLockedInj)
 
 // todo: emit from child
 const filtersLength = ref(0)
+// todo: sync with store
+const autosave = ref(true)
+
+const filterComp = ref<typeof ColumnFilter>()
 
 // todo: implement
-const applyChanges = () => {}
+const applyChanges = async () => {
+  await filterComp?.value?.applyChanges()
+}
 </script>
 
 <template>
@@ -28,7 +35,27 @@ const applyChanges = () => {}
       </a-button>
     </div>
     <template #overlay>
-      <SmartsheetToolbarColumnFilter class="nc-table-toolbar-menu" @update:filters-length="filtersLength = $event" />
+      <SmartsheetToolbarColumnFilter ref="filterComp" class="nc-table-toolbar-menu" @update:filters-length="filtersLength = $event" :auto-save="autosave" >
+        <div class="d-flex align-end mt-2 min-h-[30px]" @click.stop>
+          <a-checkbox
+            id="col-filter-checkbox"
+            v-model:checked="autosave"
+            class="col-filter-checkbox"
+            hide-details
+            dense
+          >
+            <span class="text-grey text-xs">
+              {{ $t('msg.info.filterAutoApply') }}
+              <!-- Auto apply -->
+            </span>
+          </a-checkbox>
+
+          <div class="flex-1"/>
+          <a-button v-show="!autosave" size="small" class="text-xs ml-2" @click="applyChanges">
+            Apply changes
+          </a-button>
+        </div>
+      </SmartsheetToolbarColumnFilter>
     </template>
   </a-dropdown>
 </template>

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

@@ -1,10 +1,11 @@
 import type { FilterType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
-import type { Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp } from '#imports'
 
 export function useViewFilters(
   view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined,
   parentId?: string,
+  autoApply?: ComputedRef<boolean>,
   reloadData?: () => void,
 ) {
   // todo: update swagger
@@ -39,20 +40,20 @@ export function useViewFilters(
     reloadData?.()
   }
 
-  const deleteFilter = async (filter: FilterType, i: number) => {
+  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 (!this.autoApply) {
+      if (!autoApply?.value) {
-      //       this.$set(filter, 'status', 'delete')
+        filter.status = 'delete'
-      //     } else {
+      } else {
-      await $api.dbTableFilter.delete(filter.id) /**/
+        await $api.dbTableFilter.delete(filter.id) /**/
-      //       await this.loadFilter()
+        //       await this.loadFilter()
-      //       this.$emit('updated')
+        //       this.$emit('updated')
-      //     }
+      }
     } else {
       //     this.$emit('updated')
     }
@@ -64,16 +65,16 @@ export function useViewFilters(
     reloadData?.()
   }
 
-  const saveOrUpdate = async (filter: FilterType, i: number) => {
+  const saveOrUpdate = async (filter: FilterType & { status?: string }, i: number) => {
     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 (!this.autoApply) {
-    //   filter.status = 'update'
     // } else
-    if (filter.id) {
+    if (!autoApply?.value) {
+      filter.status = 'update'
+    } else if (filter.id) {
       await $api.dbTableFilter.update(filter.id, {
         ...filter,
         fk_parent_id: parentId,