Merge pull request #2680 from nocodb/fix/grouped-filter

Fix - Grouped filter unexpected behaviour

packages/nc-gui/assets/style/style.css

@@ -365,7 +365,7 @@ html {
 
 
 /* sorting and filter */
-.menu-filter-dropdown {
+.menu-filter-dropdown:not(.nested) {
   max-height: 500px;
   overflow-y: auto;
 }

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

@@ -1,21 +1,28 @@
 <template>
-  <div class="backgroundColor pa-2 menu-filter-dropdown" :style="{ width: nested ? '100%' : '530px' }">
+  <div
+    class="backgroundColor pa-2 menu-filter-dropdown"
+    :class="{ nested }"
+    :style="{ width: nested ? '100%' : '630px' }"
+  >
     <div class="grid" @click.stop>
       <template v-for="(filter, i) in filters" dense>
         <template v-if="filter.status !== 'delete'">
-          <div v-if="filter.is_group" :key="i" style="grid-column: span 5; padding: 6px" class="elevation-4">
+          <template v-if="filter.is_group">
-            <div class="d-flex" style="gap: 6px; padding: 0 6px">
             <v-icon
               v-if="!filter.readOnly"
               small
               class="nc-filter-item-remove-btn"
               @click.stop="deleteFilter(filter, i)"
+              :key="i + '_1'"
             >
               mdi-close-box
             </v-icon>
-              <span v-if="!i" class="caption d-flex align-center">{{ $t('labels.where') }}</span>
+            <span v-else :key="i + '_1'" />
+
+            <span :key="i + '_2'" v-if="!i" class="caption d-flex align-center">{{ $t('labels.where') }}</span>
             <v-select
               v-else
+              :key="i + '_2'"
               v-model="filter.logical_op"
               class="flex-shrink-1 flex-grow-0 elevation-0 caption"
               :items="['and', 'or']"
@@ -31,7 +38,10 @@
                 <span class="caption font-weight-regular">{{ item }}</span>
               </template>
             </v-select>
-            </div>
+            <span :key="i + '_3'" style="grid-column: span 3"></span>
+          </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"
               ref="nestedFilter"
@@ -50,19 +60,19 @@
           <template v-else>
             <v-icon
               v-if="!filter.readOnly"
-              :key="i + '_1'"
+              :key="i + '_5'"
               small
               class="nc-filter-item-remove-btn"
               @click.stop="deleteFilter(filter, i)"
             >
               mdi-close-box
             </v-icon>
-            <span v-else :key="i + '_1'" />
+            <span v-else :key="i + '_5'" />
-            <span v-if="!i" :key="i + '_2'" class="caption d-flex align-center">{{ $t('labels.where') }}</span>
+            <span v-if="!i" :key="i + '_6'" class="caption d-flex align-center">{{ $t('labels.where') }}</span>
 
             <v-select
               v-else
-              :key="i + '_2'"
+              :key="i + '_6'"
               v-model="filter.logical_op"
               class="flex-shrink-1 flex-grow-0 elevation-0 caption"
               :items="['and', 'or']"
@@ -80,7 +90,7 @@
             </v-select>
 
             <field-list-auto-complete-dropdown
-              :key="i + '_3'"
+              :key="i + '_7'"
               v-model="filter.fk_column_id"
               class="caption nc-filter-field-select"
               :columns="columns"
@@ -90,7 +100,7 @@
             />
 
             <v-select
-              :key="i + '_4'"
+              :key="i + '_8'"
               v-model="filter.comparison_op"
               class="flex-shrink-1 flex-grow-0 caption nc-filter-operation-select"
               :items="filterComparisonOp(filter)"
@@ -110,11 +120,11 @@
                 <span class="caption font-weight-regular">{{ item.text }}</span>
               </template>
             </v-select>
-            <span v-else :key="i + '_4'"></span>
+            <span v-else :key="i + '_8'"></span>
             <span v-if="['null', 'notnull', 'empty', 'notempty'].includes(filter.comparison_op)" :key="i + '_5'" />
             <v-checkbox
               v-else-if="types[filter.field] === 'boolean'"
-              :key="i + '_5'"
+              :key="i + '_9'"
               v-model="filter.value"
               dense
               :disabled="filter.readOnly"
@@ -122,7 +132,7 @@
             />
             <v-text-field
               v-else-if="filter && filter.fk_column_id"
-              :key="i + '_5'"
+              :key="i + '_9'"
               v-model="filter.value"
               solo
               flat
@@ -133,7 +143,7 @@
               @click.stop
               @input="saveOrUpdate(filter, i)"
             />
-            <span v-else :key="i + '_5'"></span>
+            <span v-else :key="i + '_9'"></span>
           </template>
         </template>
       </template>
@@ -407,6 +417,7 @@ export default {
         parentId: this.parentId,
         is_group: true,
         status: 'update',
+        logical_op: 'and',
       });
       this.filters = this.filters.slice();
       const index = this.filters.length - 1;
@@ -474,4 +485,8 @@ export default {
   column-gap: 6px;
   row-gap: 6px;
 }
+
+.nc-filter-value-select {
+  min-width: 100px;
+}
 </style>

packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/conditionV2.ts

@@ -261,16 +261,17 @@ const parseConditionV2 = async (
         filter.comparison_op === 'notempty'
       )
         filter.value = '';
-      let field = sanitize(
+      const _field = sanitize(
         customWhereClause
           ? filter.value
           : alias
           ? `${alias}.${column.column_name}`
           : column.column_name
       );
-      let val = customWhereClause ? customWhereClause : filter.value;
+      const _val = customWhereClause ? customWhereClause : filter.value;
 
       return (qb) => {
+        let [field, val] = [_field, _val];
         switch (filter.comparison_op) {
           case 'eq':
             qb = qb.where(field, val);

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

@@ -421,7 +421,7 @@ export default class Filter {
       });
       await NocoCache.setList(CacheScope.FILTER_EXP, [viewId], filterObjs);
     }
-    return filterObjs?.map((f) => new Filter(f));
+    return filterObjs?.filter(f => !f.fk_parent_id)?.map((f) => new Filter(f));
   }
 
   static async rootFilterListByHook(