feat: add support for 'not empty' filter in search functionality

- Introduced a new filter symbol '~' to check for non-empty values in the search filter schema.
- Updated the internal filtering logic to handle the new '~' symbol appropriately.
- Enhanced the UI components to support the new filter type, including a dedicated input for 'not empty' conditions.
- Adjusted the filters query logic to accommodate the new filter type in the composables.

Author: tacxou

apps/api/src/_common/restools/search-filter-schema.decorator.spec.ts

@@ -102,6 +102,14 @@ describe('search-filter-schema', () => {
     ).toStrictEqual({ age: { $ne: 18 } })
   })
 
+  it('test not empty filter', () => {
+    expect(
+      filterSchema({
+        '~patterns': 'true',
+      }),
+    ).toStrictEqual({ patterns: { $exists: true, $nin: [null, ''] } })
+  })
+
 
   it('test not equal null filter', () => {
     expect(

apps/api/src/_common/restools/search-filter-schema.decorator.ts

@@ -23,6 +23,7 @@ export const FILTER_SYMBOL_IN = '@'
 export const FILTER_SYMBOL_REGEX = '^'
 export const FILTER_SYMBOL_BOOLEAN = '?'
 export const FILTER_SYMBOL_NUMBER = '#'
+export const FILTER_SYMBOL_NOT_EMPTY = '~'
 
 export const DEFAULT_ALLOWED_FILTERS = [
   FILTER_SYMBOL_EQUAL,
@@ -33,6 +34,7 @@ export const DEFAULT_ALLOWED_FILTERS = [
   FILTER_SYMBOL_LESS,
   FILTER_SYMBOL_REGEX,
   FILTER_SYMBOL_IN,
+  FILTER_SYMBOL_NOT_EMPTY,
 ]
 
 export const DEFAULT_SCHEMA_OPTIONS = {
@@ -129,6 +131,15 @@ function internalFilterbyType(
       break
     }
 
+    case FILTER_SYMBOL_NOT_EMPTY: {
+      if (/true|on|yes|1/i.test(data)) {
+        parsed[key.slice(1)] = { $exists: true, $nin: [null, ''] }
+      } else {
+        parsed[key.slice(1)] = { $exists: true, $in: [null, ''] }
+      }
+      break
+    }
+
     case FILTER_SYMBOL_LESS:
     case FILTER_SYMBOL_GREATER: {
       let upperLowerType = key[0] === FILTER_SYMBOL_GREATER ? '$gt' : '$lt'

apps/web/src/components/core/edit-filters.vue

@@ -96,7 +96,7 @@ q-card.transparent(style='min-width: 45vw; max-width: 90vw')
                 span {{ scope.opt.label }}
       q-input.col(
         style='min-width: 300px'
-        v-if="!comparator?.multiplefields && optionsMapping.length === 0 && comparator?.querySign !== '?'"
+        v-if="!comparator?.multiplefields && optionsMapping.length === 0 && comparator?.querySign !== '?' && comparator?.querySign !== '~'"
         v-model='filter.value'
         label='Valeur'
         :prefix="comparator?.prefix"
@@ -120,7 +120,7 @@ q-card.transparent(style='min-width: 45vw; max-width: 90vw')
       )
       q-select.col(
         style='min-width: 300px'
-        v-if="!comparator?.multiplefields && optionsMapping.length > 0"
+        v-if="!comparator?.multiplefields && optionsMapping.length > 0 && comparator?.querySign !== '~'"
         v-model='filter.value'
         label='Valeur'
         :prefix="comparator?.prefix"
@@ -138,6 +138,20 @@ q-card.transparent(style='min-width: 45vw; max-width: 90vw')
         dense
         outlined
       )
+      q-select.col(
+        style='min-width: 300px'
+        v-if="comparator?.querySign === '~'"
+        v-model='filter.value'
+        label='Valeur'
+        :prefix="comparator?.prefix"
+        :suffix="comparator?.suffix"
+        :type='searchInputType'
+        :readonly='!filter.operator'
+        :options="['true', 'false']"
+        emit-value
+        dense
+        outlined
+      )
       q-input.col(
         style='min-width: 200px'
         v-if="comparator?.multiplefields && comparator?.querySign === '<<'"
@@ -342,7 +356,7 @@ export default defineNuxtComponent({
     const operator = detectInitialOperator()
     const comp = comparatorTypes.value.find((comp) => comp.value === operator)
 
-    if (comp?.type.includes('date') && initialFilter.value) {
+    if (comp?.type.includes('date') && comp?.querySign !== '~' && initialFilter.value) {
       const dateValue = dayjs(initialFilter.value).format('YYYY-MM-DDTHH:mm')
       initialValue.value = dateValue
     } else {

apps/web/src/composables/useFiltersQuery.ts

@@ -36,6 +36,16 @@ export type ColumnType = {
 }
 
 const comparatorTypes = ref<ComparatorType[]>([
+  {
+    label: "Est vide/non défini",
+    querySign: '~',
+    value: '~',
+    icon: 'mdi-tilde',
+    type: ['text', 'number', 'date', 'array'],
+    multiplefields: false,
+    prefix: '',
+    suffix: '',
+  },
   {
     label: 'Est un booléen',
     querySign: '?',
@@ -225,7 +235,7 @@ const getLabelByName = (columns: Ref<QTableProps['columns'] & { type: string }[]
  * @returns comparator and field extracted from the key
  */
 const extractComparator = (key: string): { comparator: string, field: string } | null => {
-  const match = key.match(/^(\:|\?|\||\#|\!|\>|\<|\^|\@)+/m)
+  const match = key.match(/^(\:|\?|\||\#|\!|\>|\<|\^|\@|\~)+/m)
 
   if (!match) return null
 
@@ -438,6 +448,12 @@ export function useFiltersQuery(columns: Ref<QTableProps['columns'] & { type: st
         }
         break
 
+      case '~':
+        if (value) {
+          query[filterKey] = value
+        }
+        break
+
       default:
         if (comparator?.type.includes('date') && value) {
           const dateValue = dayjs(value as string).toISOString()

apps/web/src/composables/useMenu.ts

@@ -150,7 +150,7 @@ function useMenu(identityStateStore: ReturnType<typeof useIdentityStateStore>):
     {
       icon: 'mdi-account-switch-outline',
       label: 'Fusionnées',
-      path: '/identities/table?sort[metadata.lastUpdatedAt]=desc&skip=0&filters[!:primaryEmployeeNumber]=null',
+      path: '/identities/table?sort[metadata.lastUpdatedAt]=desc&skip=0&filters[~primaryEmployeeNumber]=true',
       color: 'linear-gradient(135deg, #7C3AED 0%, #EC4899 50%, #F97316 100%)',
       textColor: 'white',
       badge: { color: 'linear-gradient(135deg, #7C3AED 0%, #EC4899 50%, #F97316 100%)', textColor: 'white' },