Merge pull request #2692 from nocodb/fix/2690-grouped-filter-local-state

fix: handle nested group save in filter manual sync

packages/nc-gui/components/project/spreadsheet/components/ColumnFilter.vue

@@ -10,16 +10,16 @@
           <template v-if="filter.is_group">
             <v-icon
               v-if="!filter.readOnly"
+              :key="i + '_1'"
               small
               class="nc-filter-item-remove-btn"
               @click.stop="deleteFilter(filter, i)"
-              :key="i + '_1'"
             >
               mdi-close-box
             </v-icon>
             <span v-else :key="i + '_1'" />
 
-            <span :key="i + '_2'" v-if="!i" class="caption d-flex align-center">{{ $t('labels.where') }}</span>
+            <span v-if="!i" :key="i + '_2'" class="caption d-flex align-center">{{ $t('labels.where') }}</span>
             <v-select
               v-else
               :key="i + '_2'"
@@ -38,12 +38,12 @@
                 <span class="caption font-weight-regular">{{ item }}</span>
               </template>
             </v-select>
-            <span :key="i + '_3'" style="grid-column: span 3"></span>
+            <span :key="i + '_3'" style="grid-column: span 3" />
           </template>
 
           <div v-if="filter.is_group" :key="i + '_4'" style="grid-column: span 5; padding: 6px" class="elevation-4">
             <column-filter
-              v-if="filter.id || shared"
+              v-if="filter.id || shared || !autoApply"
               ref="nestedFilter"
               v-model="filter.children"
               :parent-id="filter.id"
@@ -100,12 +100,12 @@
             />
 
             <v-select
+              v-if="filter && filter.fk_column_id"
               :key="i + '_8'"
               v-model="filter.comparison_op"
               class="flex-shrink-1 flex-grow-0 caption nc-filter-operation-select"
               :items="filterComparisonOp(filter)"
               :placeholder="$t('labels.operation')"
-              v-if="filter && filter.fk_column_id"
               solo
               flat
               style="max-width: 120px"
@@ -120,7 +120,7 @@
                 <span class="caption font-weight-regular">{{ item.text }}</span>
               </template>
             </v-select>
-            <span v-else :key="i + '_8'"></span>
+            <span v-else :key="i + '_8'" />
             <span v-if="['null', 'notnull', 'empty', 'notempty'].includes(filter.comparison_op)" :key="i + '_5'" />
             <v-checkbox
               v-else-if="types[filter.field] === 'boolean'"
@@ -143,19 +143,19 @@
               @click.stop
               @input="saveOrUpdate(filter, i)"
             />
-            <span v-else :key="i + '_9'"></span>
+            <span v-else :key="i + '_9'" />
           </template>
         </template>
       </template>
     </div>
 
     <v-btn small class="elevation-0 grey--text my-3" @click.stop="addFilter">
-      <v-icon small color="grey"> mdi-plus</v-icon>
+      <v-icon small color="grey"> mdi-plus </v-icon>
       <!-- Add Filter -->
       {{ $t('activity.addFilter') }}
     </v-btn>
     <v-btn v-if="!webHook" small class="elevation-0 grey--text my-3" @click.stop="addFilterGroup">
-      <v-icon small color="grey"> mdi-plus</v-icon>
+      <v-icon small color="grey"> mdi-plus </v-icon>
       Add Filter Group
       <!--     todo: add i18n {{ $t('activity.addFilterGroup') }}-->
     </v-btn>
@@ -297,10 +297,21 @@ export default {
     },
   },
   watch: {
-    async viewId(v) {
-      if (v) {
-        await this.loadFilter();
-      }
+    viewId: {
+      async handler(v) {
+        if (v) {
+          await this.loadFilter();
+        }
+      },
+      immediate: true,
+    },
+    hookId: {
+      async handler(v) {
+        if (v) {
+          await this.loadFilter();
+        }
+      },
+      immediate: true,
     },
     filters: {
       handler(v) {
@@ -309,9 +320,6 @@ export default {
       deep: true,
     },
   },
-  created() {
-    this.loadFilter();
-  },
   methods: {
     filterComparisonOp(f) {
       return this.comparisonOp.filter(op => {
@@ -348,11 +356,15 @@ export default {
               await this.$api.dbTableFilter.update(filter.id, {
                 ...filter,
                 fk_parent_id: this.parentId,
+                children: undefined,
+                status: undefined,
               });
             } else {
               await this.$api.dbTableFilter.update(filter.id, {
                 ...filter,
                 fk_parent_id: this.parentId,
+                children: undefined,
+                status: undefined,
               });
             }
           } else if (this.hookId || hookId) {
@@ -362,6 +374,7 @@ export default {
               await this.$api.dbTableWebhookFilter.create(this.hookId || hookId, {
                 ...filter,
                 fk_parent_id: this.parentId,
+                status: undefined,
               })
             );
           } else {
@@ -371,6 +384,7 @@ export default {
               await this.$api.dbTableFilter.create(this.viewId, {
                 ...filter,
                 fk_parent_id: this.parentId,
+                status: undefined,
               })
             );
           }
@@ -378,7 +392,9 @@ export default {
       }
       if (this.$refs.nestedFilter) {
         for (const nestedFilter of this.$refs.nestedFilter) {
-          await nestedFilter.applyChanges(true);
+          if (nestedFilter.parentId) {
+            await nestedFilter.applyChanges(true);
+          }
         }
       }
       this.loadFilter();
@@ -389,12 +405,12 @@ export default {
     async loadFilter() {
       let filters = [];
       if (this.viewId && this._isUIAllowed('filterSync')) {
-        filters = this.parentId
+        filters = this.nested
           ? await this.$api.dbTableFilter.childrenRead(this.parentId)
           : await this.$api.dbTableFilter.read(this.viewId);
       }
       if (this.hookId && this._isUIAllowed('filterSync')) {
-        filters = this.parentId
+        filters = this.nested
           ? await this.$api.dbTableFilter.childrenRead(this.parentId)
           : await this.$api.dbTableWebhookFilter.read(this.hookId);
       }

packages/nocodb/src/lib/models/Filter.ts

@@ -104,7 +104,15 @@ export default class Filter {
     if (filter?.children?.length) {
       await Promise.all(
         filter.children.map((f) =>
-          this.insert({ ...f, fk_parent_id: row.id }, ncMeta)
+          this.insert(
+            {
+              ...f,
+              fk_parent_id: row.id,
+              [filter.fk_hook_id ? 'fk_hook_id' : 'fk_view_id']:
+                filter.fk_hook_id ? filter.fk_hook_id : filter.fk_view_id,
+            },
+            ncMeta
+          )
         )
       );
     }
@@ -373,6 +381,7 @@ export default class Filter {
     };
     await deleteRecursively(filter);
   }
+
   static async deleteAllByHook(hookId: string, ncMeta = Noco.ncMeta) {
     const filter = await this.getFilterObject({ hookId }, ncMeta);
 
@@ -421,7 +430,9 @@ export default class Filter {
       });
       await NocoCache.setList(CacheScope.FILTER_EXP, [viewId], filterObjs);
     }
-    return filterObjs?.filter(f => !f.fk_parent_id)?.map((f) => new Filter(f));
+    return filterObjs
+      ?.filter((f) => !f.fk_parent_id)
+      ?.map((f) => new Filter(f));
   }
 
   static async rootFilterListByHook(
@@ -464,6 +475,7 @@ export default class Filter {
     }
     return filterObjs?.map((f) => new Filter(f));
   }
+
   static async parentFilterListByHook(
     {
       hookId,