feat(gui): hide unnecessary options from filter comparison dropdown based on type

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

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { ColumnType, FilterType } from 'nocodb-sdk'
-import { UITypes } from 'nocodb-sdk'
+import type { FilterType } from 'nocodb-sdk'
 import {
   ActiveViewInj,
   MetaInj,
@@ -70,15 +69,7 @@ const types = computed(() => {
   }
 
   return meta.value?.columns?.reduce((obj: any, col: any) => {
-    switch (col.uidt) {
-      case UITypes.Number:
-      case UITypes.Decimal:
-        obj[col.title] = obj[col.column_name] = 'number'
-        break
-      case UITypes.Checkbox:
-        obj[col.title] = obj[col.column_name] = 'boolean'
-        break
-    }
+    obj[col.id] = col.uidt
     return obj
   }, {})
 })
@@ -112,6 +103,21 @@ const applyChanges = async (hookId?: string, _nested = false) => {
   }
 }
 
+const isComparisonOpAllowed = (filter: FilterType, compOp: typeof comparisonOpList[number]) => {
+  // show current selected value in list even if not allowed
+  if (filter.comparison_op === compOp.value) return true
+
+  // include allowed values only if selected column type matches
+  if (compOp.includedTypes) {
+    return filter.fk_column_id && compOp.includedTypes.includes(types.value[filter.fk_column_id])
+  }
+  // include not allowed values only if selected column type not matches
+  else if (compOp.excludedTypes) {
+    return filter.fk_column_id && !compOp.excludedTypes.includes(types.value[filter.fk_column_id])
+  }
+  return true
+}
+
 defineExpose({
   applyChanges,
   parentId,
@@ -214,25 +220,20 @@ defineExpose({
               @change="filterUpdateCondition(filter, i)"
             >
               <template v-for="compOp in comparisonOpList" :key="compOp.value">
-              <a-select-option  :value="compOp.value" v-if=" !compOp.allowedTypes || (filter.fk_column_id && compOp.allowedTypes.includes(types[filter.fk_column_id]))" >
-                {{ compOp.text }}
-              </a-select-option>
+                <a-select-option v-if="isComparisonOpAllowed(filter, compOp)" :value="compOp.value">
+                  {{ compOp.text }}
+                </a-select-option>
               </template>
             </a-select>
 
             <span
-              v-if="filter.comparison_op && ['null', 'notnull','checked', 'notchecked', 'empty', 'notempty'].includes(filter.comparison_op)"
+              v-if="
+                filter.comparison_op &&
+                ['null', 'notnull', 'checked', 'notchecked', 'empty', 'notempty'].includes(filter.comparison_op)
+              "
               :key="`span${i}`"
             />
 
-            <a-checkbox
-              v-else-if="filter.field && types[filter.field] === 'boolean'"
-              v-model:checked="filter.value"
-              dense
-              :disabled="filter.readOnly"
-              @change="saveOrUpdate(filter, i)"
-            />
-
             <a-input
               v-else
               :key="`${i}_7`"

packages/nc-gui/utils/filterUtils.ts

@@ -4,8 +4,21 @@ export const comparisonOpList: {
   text: string
   value: string
   ignoreVal?: boolean
-  allowedTypes?: string[]
+  includedTypes?: UITypes[]
+  excludedTypes?: UITypes[]
 }[] = [
+  {
+    text: 'is checked',
+    value: 'checked',
+    ignoreVal: true,
+    includedTypes: [UITypes.Checkbox],
+  },
+  {
+    text: 'is not checked',
+    value: 'notchecked',
+    ignoreVal: true,
+    includedTypes: [UITypes.Checkbox],
+  },
   {
     text: 'is equal',
     value: 'eq',
@@ -17,20 +30,24 @@ export const comparisonOpList: {
   {
     text: 'is like',
     value: 'like',
+    excludedTypes: [UITypes.Checkbox],
   },
   {
     text: 'is not like',
     value: 'nlike',
+    excludedTypes: [UITypes.Checkbox],
   },
   {
     text: 'is empty',
     value: 'empty',
     ignoreVal: true,
+    excludedTypes: [UITypes.Checkbox],
   },
   {
     text: 'is not empty',
     value: 'notempty',
     ignoreVal: true,
+    excludedTypes: [UITypes.Checkbox],
   },
   {
     text: 'is null',
@@ -42,52 +59,44 @@ export const comparisonOpList: {
     value: 'notnull',
     ignoreVal: true,
   },
-  {
-    text: 'is checked',
-    value: 'checked',
-    ignoreVal: true,
-    allowedTypes: ['boolean'],
-  },
-  {
-    text: 'is not checked',
-    value: 'notchecked',
-    ignoreVal: true,
-    allowedTypes: ['boolean'],
-  },
   {
     text: 'contains all of',
     value: 'allof',
-    types: ['MultiSelect'],
+    includedTypes: [UITypes.MultiSelect],
   },
   {
     text: 'contains any of',
     value: 'anyof',
-    types: ['MultiSelect'],
+    includedTypes: [UITypes.MultiSelect],
   },
   {
     text: 'does not contain all of',
     value: 'nallof',
-    types: ['MultiSelect'],
+    includedTypes: [UITypes.MultiSelect],
   },
   {
     text: 'does not contain any of',
     value: 'nanyof',
-    types: ['MultiSelect'],
+    includedTypes: [UITypes.MultiSelect],
   },
   {
     text: '>',
     value: 'gt',
+    excludedTypes: [UITypes.Checkbox],
   },
   {
     text: '<',
     value: 'lt',
+    excludedTypes: [UITypes.Checkbox],
   },
   {
     text: '>=',
     value: 'gte',
+    excludedTypes: [UITypes.Checkbox],
   },
   {
     text: '<=',
     value: 'lte',
+    excludedTypes: [UITypes.Checkbox],
   },
 ]