Update filter query handling to support multiple v

tacxou · tacxou · commit a0ec8d8ff671 · 2026-02-11T12:24:34.000+01:00
alues for the same filter key

Modified files:
- apps/web/src/components/core/edit-filters.vue
- apps/web/src/composables/useColumnsIdentities.ts
- apps/web/src/composables/useFiltersQuery.ts
- apps/web/src/pages/identities/table.vue
diff --git a/apps/web/src/components/core/edit-filters.vue b/apps/web/src/components/core/edit-filters.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-q-card(style='min-width: 40vw;')
+q-card.transparent(style='min-width: 40vw; max-width: 80vw')
   q-toolbar.bg-primary.text-white(dense flat style='height: 32px;')
     q-toolbar-title(v-text='title')
     q-btn(
@@ -49,7 +49,7 @@ q-card(style='min-width: 40vw;')
                 span {{ scope.opt.label }}
       q-input.col(
         style='min-width: 300px'
-        v-show="!comparator?.multiplefields"
+        v-show="!comparator?.multiplefields && optionsMapping.length === 0"
         v-model='filter.value'
         label='Valeur'
         :prefix="comparator?.prefix"
@@ -59,9 +59,24 @@ q-card(style='min-width: 40vw;')
         dense
         outlined
       )
+      q-select.col(
+        style='min-width: 300px'
+        v-show="!comparator?.multiplefields && optionsMapping.length > 0"
+        v-model='filter.value'
+        label='Valeur'
+        :prefix="comparator?.prefix"
+        :suffix="comparator?.suffix"
+        :type='searchInputType'
+        @keydown.enter.prevent="writeFilter(filter)"
+        :options="optionsMapping"
+        emit-value
+        map-options
+        dense
+        outlined
+      )
       q-input.col(
         style='min-width: 200px'
-        v-show="comparator?.multiplefields"
+        v-show="comparator?.multiplefields && comparator?.querySign === '<<'"
         v-model="filter.min"
         :type='searchInputType'
         label="Minimum"
@@ -71,19 +86,39 @@ q-card(style='min-width: 40vw;')
       )
       q-input.col(
         style='min-width: 200px'
-        v-show="comparator?.multiplefields"
+        v-show="comparator?.multiplefields && comparator?.querySign === '<<'"
         v-model="filter.max"
         :type='searchInputType'
         label="Maximum"
         clearable
         dense
         outlined
       )
+      q-select.col(
+        style='min-width: 300px'
+        v-show="comparator?.multiplefields && comparator?.querySign === '@'"
+        v-model="filter.items"
+        label="Valeur"
+        :prefix="comparator?.prefix"
+        :suffix="comparator?.suffix"
+        :type='searchInputType'
+        :options="optionsMapping"
+        input-debounce="100"
+        new-value-mode="add-unique"
+        emit-value
+        map-options
+        fill-input
+        use-input
+        use-chips
+        multiple
+        dense
+        outlined
+      )
   q-card-actions
     q-space
     q-btn(
       @click='writeFilter(filter)'
-      :disabled='!filter.key || !filter.operator || !filter.value'
+      :disabled='!filter.key || !filter.operator || (!filter.value && !filter.items?.length)'
       label='Valider'
       color='positive'
       icon-right='mdi-check'
@@ -100,8 +135,10 @@ type Filter = {
   operator: string
   value: string
 
-  min: string
-  max: string
+  min?: string
+  max?: string
+
+  items?: (string | number)[]
 }
 
 type InitialFilter = {
@@ -125,7 +162,7 @@ export default defineNuxtComponent({
       default: () => [],
     },
     columnsType: {
-      type: Array as PropType<{ name: string; type: string }[]>,
+      type: Array as PropType<{ name: string; type: string; valueMapping?: Record<string, string> }[]>,
       required: false,
       default: () => [],
     },
@@ -146,10 +183,12 @@ export default defineNuxtComponent({
         this.filter.value = ''
         this.filter.min = ''
         this.filter.max = ''
+        this.filter.items = []
       },
     },
   },
   setup({ columns, initialFilter, columnsType }) {
+    console.log('initialFilter', initialFilter)
     const { fieldTypes, comparatorTypes, writeFilter } = useFiltersQuery(ref(columns), ref(columnsType))
 
     const detectInitialOperator = () => {
@@ -206,14 +245,31 @@ export default defineNuxtComponent({
       return val
     }
 
+    const items = ref<(string | number)[]>([])
+
+    if (initialFilter && initialFilter.querySign === '@' && initialFilter.value) {
+      if (Array.isArray(initialFilter.value) || initialFilter.value.includes(',')) {
+        items.value = Array.isArray(initialFilter.value)
+          ? initialFilter.value
+          : initialFilter.value
+              .split(',')
+              .map((s) => s.trim())
+              .filter((s) => s.length > 0)
+      } else {
+        items.value = [initialFilter.value]
+      }
+    }
+
     const fieldType = ref<string>()
     const filter = ref<Filter>({
-      key: initialFilter?.field || '',
+      key: initialFilter?.field?.replace('[]', '') || '',
       operator: detectInitialOperator(),
       value: stripPrefixSuffix(initialFilter?.value) || '',
 
       min: '',
       max: '',
+
+      items: items.value,
     })
 
     return {
@@ -238,8 +294,24 @@ export default defineNuxtComponent({
         return comparator.type.includes(this.fieldType!)
       })
     },
+    optionsMapping(): { label: string; value: string }[] {
+      const mapping: { label: string; value: string }[] = []
+
+      this.columnsType.forEach((col) => {
+        if (col.name === this.filter.key && col.valueMapping) {
+          Object.entries(col.valueMapping).forEach(([key, val]) => {
+            mapping.push({ label: val, value: key })
+          })
+        }
+      })
+
+      return mapping
+    },
   },
   mounted() {
+    console.log('comparator', this.comparator)
+    console.log('optionsMapping', this.optionsMapping)
+    console.log('this.columnsType', this.columnsType)
     this.fieldType = this.columnsType.find((col) => col.name === this.filter.key)?.type || 'text'
   },
 })
diff --git a/apps/web/src/composables/useColumnsIdentities.ts b/apps/web/src/composables/useColumnsIdentities.ts
@@ -4,6 +4,30 @@ import Sandbox from '@nyariv/sandboxjs'
 type ColumnType = {
   name: string
   type: string
+
+  valueMapping?: Record<string | number | symbol, string>
+}
+
+enum IdentityState {
+  SYNCED = 99,
+  PROCESSING = 50,
+  TO_SYNC = 2,
+  TO_VALIDATE = 1,
+  TO_CREATE = -1,
+  TO_COMPLETE = -2,
+  ON_ERROR = -3,
+  DONT_SYNC = -99,
+}
+
+const IdentityStateLabels: Record<IdentityState, string> = {
+  [IdentityState.SYNCED]: 'Synchronisé',
+  [IdentityState.PROCESSING]: 'En cours de traitement',
+  [IdentityState.TO_SYNC]: 'À synchroniser',
+  [IdentityState.TO_VALIDATE]: 'À valider',
+  [IdentityState.TO_CREATE]: 'À créer',
+  [IdentityState.TO_COMPLETE]: 'À compléter',
+  [IdentityState.ON_ERROR]: 'En erreur',
+  [IdentityState.DONT_SYNC]: 'Ne pas synchroniser',
 }
 
 interface ColumnConfig {
@@ -58,27 +82,12 @@ export function useColumnsIdentites(): useColumnsIdentitesReturnType {
 
   const columns = ref<QTableProps['columns'] & { type: string }[]>([
     {
-      name: 'states',
+      name: 'state',
       label: 'États',
-      field: 'states',
+      field: 'state',
       align: 'left',
     },
     ...config?.identitiesColumns?.entries || [],
-    // {
-    //   name: 'state',
-    //   label: 'Status',
-    //   hidden: true,
-    // },
-    // {
-    //   name: 'initState',
-    //   label: 'Etat initial',
-    //   hidden: true,
-    // },
-    // {
-    //   name: 'lifecycle',
-    //   label: 'Cycle de vie',
-    //   hidden: true,
-    // },
     {
       name: 'metadata.lastUpdatedAt',
       label: 'Date de modification',
@@ -105,11 +114,12 @@ export function useColumnsIdentites(): useColumnsIdentitesReturnType {
     ...config?.identitiesColumns?.entries.map((col: any) => col.name) || [],
     'metadata.lastUpdatedAt',
     'metadata.createdAt',
-    'states',
+    'state',
   ])
 
   const columnsType = ref<ColumnType[]>([
     ...config?.identitiesColumns?.entries.map((col: any) => ({ name: col.name, type: col.type || 'text' })) || [],
+    { name: 'state', type: 'number', valueMapping: IdentityStateLabels },
     { name: 'metadata.lastUpdatedAt', type: 'date' },
     { name: 'metadata.createdAt', type: 'date' },
   ])
diff --git a/apps/web/src/composables/useFiltersQuery.ts b/apps/web/src/composables/useFiltersQuery.ts
@@ -31,6 +31,8 @@ export type ComparatorType = {
 export type ColumnType = {
   name: string
   type: string
+
+  valueMapping?: Record<string | number | symbol, string>
 }
 
 const comparatorTypes = ref<ComparatorType[]>([
@@ -149,7 +151,7 @@ const comparatorTypes = ref<ComparatorType[]>([
     querySign: '@',
     value: '@',
     icon: 'mdi-format-letter-matches',
-    type: ['array'],
+    type: ['array', 'number', 'text'],
     multiplefields: true,
     prefix: '',
     suffix: '',
@@ -235,6 +237,7 @@ const getSearchString = (
   const field = columns.value?.find((f) => f.name === fieldLabel.replace('[]', ''))
   if (!field) return ''
   const fieldType = columnTypes?.value.find((col) => col.name === fieldLabel.replace('[]', ''))?.type || 'text'
+  const columnType = columnTypes?.value.find((col) => col.name === fieldLabel.replace('[]', ''))
   // if (field.type === 'multiple') {
   //   const searchArray = Array.isArray(search) ? search : [search]
   //   return searchArray
@@ -248,10 +251,25 @@ const getSearchString = (
   // if (Array.isArray(search)) {
   //   return search.join(' ou ')
   // }
-  console.log('fieldType', fieldType, fieldLabel, search, columnTypes)
+
   if (fieldType === 'date') {
     return dayjs(search!.toString()).format('DD/MM/YYYY')
   }
+
+  if (['number', 'array', 'text'].includes(fieldType) && columnType?.valueMapping) {
+    if (Array.isArray(search)) {
+      return search
+        .map((s) => {
+          if (columnType.valueMapping) {
+            return columnType.valueMapping[s!.toString()] || sanitizeSearchString(s!.toString())
+          }
+          return sanitizeSearchString(s!.toString())
+        })
+        .join(', ')
+    }
+    return columnType.valueMapping[search!.toString()] || sanitizeSearchString(search!.toString())
+  }
+
   return sanitizeSearchString(search!.toString())
 }
 
@@ -348,13 +366,14 @@ export function useFiltersQuery(columns: Ref<QTableProps['columns'] & { type: st
     const filterKey = `${FILTER_PREFIX}${filter.querySign}${filter.field}${FILTER_SUFFIX}`
 
     delete query[filterKey]
+    delete query[filterKey + '[]'] // In case of multiple values
 
     router.replace({
       query,
     })
   }
 
-  const writeFilter = (filter: { key: string; operator: string; value: string, min?: string, max?: string }) => {
+  const writeFilter = (filter: { key: string; operator: string; value: string, min?: string, max?: string, items?: (string | number)[] }) => {
     const router = useRouter()
     const query = { ...$route.query }
     const comparator = comparatorTypes.value.find((comp) => comp.value === filter.operator)
@@ -367,13 +386,26 @@ export function useFiltersQuery(columns: Ref<QTableProps['columns'] & { type: st
         const filteredKey = key.replace(FILTER_PREFIX, '').replace(FILTER_SUFFIX, '')
         const extract = extractComparator(filteredKey)
 
-        if (extract && extract.field === filter.key) {
+        // console.log('query key', query)
+        if (extract && extract.field.replace('[]', '') === filter.key) {
           delete query[`${FILTER_PREFIX}${extract.comparator}${extract.field}${FILTER_SUFFIX}`]
+          delete query[`${FILTER_PREFIX}${extract.comparator}${extract.field.replace('[]', '')}${FILTER_SUFFIX}[]`] // In case of multiple values
+          // console.log('deleted key', `${FILTER_PREFIX}${extract.comparator}${extract.field}${FILTER_SUFFIX}`)
         }
       }
     }
 
-    query[filterKey] = `${comparator?.prefix || ''}${value}${comparator?.suffix || ''}`
+    switch (filter.operator) {
+      case '@':
+        if (filter.items && filter.items.length > 0) {
+          query[filterKey] = filter.items.map((item) => `${comparator?.prefix || ''}${item}${comparator?.suffix || ''}`)
+        }
+        break
+
+      default:
+        query[filterKey] = `${comparator?.prefix || ''}${value}${comparator?.suffix || ''}`
+        break
+    }
 
     router.replace({
       query,
diff --git a/apps/web/src/pages/identities/table.vue b/apps/web/src/pages/identities/table.vue
@@ -36,7 +36,7 @@ q-page.grid
         q-separator(vertical v-if="selected.length !== 0")
         q-btn(flat icon="mdi-cancel" color="warning" rounded @click="clearSelection" size="md" v-show="selected.length !== 0" dense)
           q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Nettoyer la selection
-    template(#body-cell-states="props")
+    template(#body-cell-state="props")
       q-td
         sesame-pages-identities-states-info(:identity='props.row')
     template(v-slot:row-actions='{ row }')
