fix filters date

Author: tacxou

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

@@ -30,6 +30,7 @@ q-card.transparent(style='min-width: 40vw; max-width: 80vw')
         v-model='filter.operator'
         label='Opérateur'
         :options='availableComparators'
+        :readonly='!filter.key'
         option-value='value'
         option-label='label'
         dense
@@ -54,7 +55,8 @@ q-card.transparent(style='min-width: 40vw; max-width: 80vw')
         label='Valeur'
         :prefix="comparator?.prefix"
         :suffix="comparator?.suffix"
-        :type='searchInputType'
+        :readonly='!filter.operator'
+        :type='searchInputType === "date" ? "datetime-local" : searchInputType'
         @keydown.enter.prevent="writeFilter(filter)"
         dense
         outlined
@@ -67,9 +69,11 @@ q-card.transparent(style='min-width: 40vw; max-width: 80vw')
         :prefix="comparator?.prefix"
         :suffix="comparator?.suffix"
         :type='searchInputType'
+        :readonly='!filter.operator'
         @keydown.enter.prevent="writeFilter(filter)"
         :options="optionsMapping"
         emit-value
+        use-chips
         map-options
         dense
         outlined
@@ -79,6 +83,7 @@ q-card.transparent(style='min-width: 40vw; max-width: 80vw')
         v-show="comparator?.multiplefields && comparator?.querySign === '<<'"
         v-model="filter.min"
         :type='searchInputType'
+        :readonly='!filter.operator'
         label="Minimum"
         clearable
         dense
@@ -89,6 +94,7 @@ q-card.transparent(style='min-width: 40vw; max-width: 80vw')
         v-show="comparator?.multiplefields && comparator?.querySign === '<<'"
         v-model="filter.max"
         :type='searchInputType'
+        :readonly='!filter.operator'
         label="Maximum"
         clearable
         dense
@@ -103,6 +109,7 @@ q-card.transparent(style='min-width: 40vw; max-width: 80vw')
         :suffix="comparator?.suffix"
         :type='searchInputType'
         :options="optionsMapping"
+        :readonly='!filter.operator'
         input-debounce="100"
         new-value-mode="add-unique"
         emit-value
@@ -129,11 +136,12 @@ q-card.transparent(style='min-width: 40vw; max-width: 80vw')
 
 <script lang="ts">
 import type { QTableProps } from 'quasar'
+import dayjs from 'dayjs'
 
 type Filter = {
   key: string
   operator: string
-  value: string
+  value: string | number | undefined
 
   min?: string
   max?: string
@@ -180,10 +188,14 @@ export default defineNuxtComponent({
     },
     'filter.operator': {
       handler() {
-        this.filter.value = ''
-        this.filter.min = ''
-        this.filter.max = ''
-        this.filter.items = []
+        if (this.comparator?.multiplefields) {
+          this.filter.value = undefined
+        } else if (this.filter.items && this.filter.items.length > 0) {
+          this.filter.items = []
+        } else {
+          this.filter.min = ''
+          this.filter.max = ''
+        }
       },
     },
   },
@@ -260,11 +272,22 @@ export default defineNuxtComponent({
       }
     }
 
+    let initialValue = ref<string | number | undefined>(undefined)
+    const operator = detectInitialOperator()
+    const comp = comparatorTypes.value.find((comp) => comp.value === operator)
+
+    if (comp?.type.includes('date') && initialFilter.value) {
+      const dateValue = dayjs(initialFilter.value).format('YYYY-MM-DDTHH:mm')
+      initialValue.value = dateValue
+    } else {
+      initialValue.value = stripPrefixSuffix(initialFilter?.value) || undefined
+    }
+
     const fieldType = ref<string>()
     const filter = ref<Filter>({
+      operator,
       key: initialFilter?.field?.replace('[]', '') || '',
-      operator: detectInitialOperator(),
-      value: stripPrefixSuffix(initialFilter?.value) || '',
+      value: initialValue.value,
 
       min: '',
       max: '',
@@ -300,7 +323,7 @@ export default defineNuxtComponent({
       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 })
+            mapping.push({ label: val + ' (' + key + ')', value: key })
           })
         }
       })
@@ -309,9 +332,9 @@ export default defineNuxtComponent({
     },
   },
   mounted() {
-    console.log('comparator', this.comparator)
-    console.log('optionsMapping', this.optionsMapping)
-    console.log('this.columnsType', this.columnsType)
+    // 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'
   },
 })

apps/web/src/components/layouts/default/drawer.vue

@@ -11,9 +11,9 @@ q-drawer.flex(v-model="drawer" side="left" :mini="true" :breakpoint="0" bordered
         div(v-for="menu in getMenuByPart(part)")
           q-item(v-if="menu.hideInMenuBar !== true"
             :key="part" clickable v-ripple
-            :href="menu.path" :active="menu.path === $route.fullPath" active-class="q-item--active"
+            :href="encodePath(menu.path)" :active="encodePath(menu.path) === $route.fullPath" active-class="q-item--active"
           )
-            q-separator(v-if='menu.path === $route.fullPath' vertical color='primary' size="5px" style='position: absolute; left: 0; height: 100%; margin-top: -8px;')
+            q-separator(v-if='encodePath(menu.path) === $route.fullPath' vertical color='primary' size="5px" style='position: absolute; left: 0; height: 100%; margin-top: -8px;')
             q-item-section(avatar)
               q-icon(:name="menu.icon" :color="menu.color")
             q-badge(
@@ -46,12 +46,14 @@ export default defineNuxtComponent({
   async setup() {
     const identityStateStore = useIdentityStateStore()
     const { menuParts, getMenuByPart, initialize } = useMenu(identityStateStore)
+    const { encodePath } = useFiltersQuery(ref([]))
 
     await initialize()
 
     return {
       menuParts,
       getMenuByPart,
+      encodePath,
     }
   },
 })

apps/web/src/composables/useColumnsIdentities.ts

@@ -118,7 +118,14 @@ export function useColumnsIdentites(): useColumnsIdentitesReturnType {
   ])
 
   const columnsType = ref<ColumnType[]>([
-    ...config?.identitiesColumns?.entries.map((col: any) => ({ name: col.name, type: col.type || 'text' })) || [],
+    ...config?.identitiesColumns?.entries.map((col: any) => {
+      // console.log('Processing column config', col)
+      return {
+        name: col.name,
+        type: col.type || 'text',
+        valueMapping: col.valueMapping || [],
+      }
+    }) || [],
     { name: 'state', type: 'number', valueMapping: IdentityStateLabels },
     { name: 'metadata.lastUpdatedAt', type: 'date' },
     { name: 'metadata.createdAt', type: 'date' },

apps/web/src/composables/useFiltersQuery.ts

@@ -78,10 +78,20 @@ const comparatorTypes = ref<ComparatorType[]>([
   },
   {
     label: 'Supérieur ou égal à',
-    querySign: '>=',
-    value: '>=',
+    querySign: '>|#',
+    value: '>|#',
     icon: 'mdi-greater-than-or-equal',
-    type: ['number', 'date'],
+    type: ['number'],
+    multiplefields: false,
+    prefix: '',
+    suffix: '',
+  },
+  {
+    label: 'Supérieur ou égal à',
+    querySign: '>|',
+    value: '>|',
+    icon: 'mdi-greater-than-or-equal',
+    type: ['date'],
     multiplefields: false,
     prefix: '',
     suffix: '',
@@ -98,10 +108,20 @@ const comparatorTypes = ref<ComparatorType[]>([
   },
   {
     label: 'Inférieur ou égal à',
-    querySign: '<=',
-    value: '<=',
+    querySign: '<|#',
+    value: '<|#',
     icon: 'mdi-less-than-or-equal',
-    type: ['number', 'date'],
+    type: ['number'],
+    multiplefields: false,
+    prefix: '',
+    suffix: '',
+  },
+  {
+    label: 'Inférieur ou égal à',
+    querySign: '<|',
+    value: '<|',
+    icon: 'mdi-less-than-or-equal',
+    type: ['date'],
     multiplefields: false,
     prefix: '',
     suffix: '',
@@ -195,10 +215,11 @@ 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(/^(\:|\?|\#|\!|\>|\<|\^|\@)+/)
+  const match = key.match(/^(\:|\?|\||\#|\!|\>|\<|\^|\@)+/m)
 
   if (!match) return null
 
+  // console.log('Extracted comparator', match, 'from key', key)
   const comparator = match[0]
   const field = key.replace(comparator, '')
 
@@ -253,7 +274,7 @@ const getSearchString = (
   // }
 
   if (fieldType === 'date') {
-    return dayjs(search!.toString()).format('DD/MM/YYYY')
+    return dayjs(search!.toString()).format('DD/MM/YYYY HH:mm')
   }
 
   if (['number', 'array', 'text'].includes(fieldType) && columnType?.valueMapping) {
@@ -340,6 +361,7 @@ export function useFiltersQuery(columns: Ref<QTableProps['columns'] & { type: st
           console.warn(`Invalid search for filter key: ${key} ${filteredKey}`, {
             label,
             search,
+            extract,
           })
           continue
         }
@@ -403,7 +425,12 @@ export function useFiltersQuery(columns: Ref<QTableProps['columns'] & { type: st
         break
 
       default:
-        query[filterKey] = `${comparator?.prefix || ''}${value}${comparator?.suffix || ''}`
+        if (comparator?.type.includes('date') && value) {
+          const dateValue = dayjs(value as string).toISOString()
+          query[filterKey] = `${comparator?.prefix || ''}${dateValue}${comparator?.suffix || ''}`
+        } else if (value) {
+          query[filterKey] = `${comparator?.prefix || ''}${value}${comparator?.suffix || ''}`
+        }
         break
     }
 
@@ -412,6 +439,26 @@ export function useFiltersQuery(columns: Ref<QTableProps['columns'] & { type: st
     })
   }
 
+  const encodePath = (path: string) => {
+    const [base, query] = path.split('?')
+    if (!query) return path
+    const encodedQuery = query
+      .split('&')
+      .map((param) => {
+        const [key, value] = param.split('=')
+        if (key.includes('filters')) {
+          const finalKey = encodeURIComponent(key)
+            .replace(/%5B/g, '[')
+            .replace(/%5D/g, ']')
+            .replace(/%25/g, '%')
+          return `${finalKey}=${encodeURIComponent(value)}`
+        }
+        return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
+      })
+      .join('&')
+    return `${base}?${encodedQuery}`
+  }
+
   return {
     countFilters,
     hasFilters,
@@ -420,5 +467,6 @@ export function useFiltersQuery(columns: Ref<QTableProps['columns'] & { type: st
     writeFilter,
     comparatorTypes,
     fieldTypes,
+    encodePath,
   }
 }

apps/web/src/composables/useIdentityStates.ts

@@ -49,6 +49,7 @@ export function useIdentityStates(): useIdentityStateReturnType {
   }
 
   function getStateBadge(state: number): { color: string, name: string, icon: string, textColor?: string } {
+    // console.log('Getting badge for state', state, getStateInfos(state))
     return omit(getStateInfos(state), ['value'])
   }