Browse Source

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

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4861/head
Pranav C 2 years ago
parent
commit
1d11ba2861
  1. 43
      packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
  2. 43
      packages/nc-gui/utils/filterUtils.ts

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

@ -1,6 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ColumnType, FilterType } from 'nocodb-sdk' import type { FilterType } from 'nocodb-sdk'
import { UITypes } from 'nocodb-sdk'
import { import {
ActiveViewInj, ActiveViewInj,
MetaInj, MetaInj,
@ -70,15 +69,7 @@ const types = computed(() => {
} }
return meta.value?.columns?.reduce((obj: any, col: any) => { return meta.value?.columns?.reduce((obj: any, col: any) => {
switch (col.uidt) { obj[col.id] = 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
}
return obj 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({ defineExpose({
applyChanges, applyChanges,
parentId, parentId,
@ -214,25 +220,20 @@ defineExpose({
@change="filterUpdateCondition(filter, i)" @change="filterUpdateCondition(filter, i)"
> >
<template v-for="compOp in comparisonOpList" :key="compOp.value"> <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]))" > <a-select-option v-if="isComparisonOpAllowed(filter, compOp)" :value="compOp.value">
{{ compOp.text }} {{ compOp.text }}
</a-select-option> </a-select-option>
</template> </template>
</a-select> </a-select>
<span <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}`" :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 <a-input
v-else v-else
:key="`${i}_7`" :key="`${i}_7`"

43
packages/nc-gui/utils/filterUtils.ts

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

Loading…
Cancel
Save