feat: update useFiltersQuery to accept columnTypes and enhance filter functionality

Author: tacxou

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

@@ -149,8 +149,8 @@ export default defineNuxtComponent({
       },
     },
   },
-  setup({ columns, initialFilter }) {
-    const { fieldTypes, comparatorTypes, writeFilter } = useFiltersQuery(ref(columns))
+  setup({ columns, initialFilter, columnsType }) {
+    const { fieldTypes, comparatorTypes, writeFilter } = useFiltersQuery(ref(columns), ref(columnsType))
 
     const detectInitialOperator = () => {
       if (!initialFilter || !initialFilter.querySign) return ''

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

@@ -98,8 +98,8 @@ export default defineComponent({
       default: () => [],
     },
   },
-  setup({ columns }) {
-    const { countFilters, hasFilters, getFilters, removeFilter } = useFiltersQuery(ref(columns))
+  setup({ columns, columnsType }) {
+    const { countFilters, hasFilters, getFilters, removeFilter } = useFiltersQuery(ref(columns), ref(columnsType))
 
     return {
       countFilters,

apps/web/src/composables/useFiltersQuery.ts

@@ -1,5 +1,6 @@
 import type { QTableProps } from "quasar"
 import type { LocationQueryValue } from "vue-router"
+import dayjs from "dayjs"
 
 const fieldTypes = ref<
   {
@@ -27,6 +28,11 @@ export type ComparatorType = {
   suffix: string
 }
 
+export type ColumnType = {
+  name: string
+  type: string
+}
+
 const comparatorTypes = ref<ComparatorType[]>([
   {
     label: 'Égal à',
@@ -220,10 +226,15 @@ const sanitizeSearchString = (search: string) => {
   return search
 }
 
-const getSearchString = (columns: Ref<QTableProps['columns'] & { type: string }[]>, search: LocationQueryValue | LocationQueryValue[], fieldLabel: string) => {
+const getSearchString = (
+  columns: Ref<QTableProps['columns'] & { type: string }[]>,
+  search: LocationQueryValue | LocationQueryValue[],
+  fieldLabel: string,
+  columnTypes?: Ref<ColumnType[]>
+) => {
   const field = columns.value?.find((f) => f.name === fieldLabel.replace('[]', ''))
-  console.log('field', fieldLabel, field)
   if (!field) return ''
+  const fieldType = columnTypes?.value.find((col) => col.name === fieldLabel.replace('[]', ''))?.type || 'text'
   // if (field.type === 'multiple') {
   //   const searchArray = Array.isArray(search) ? search : [search]
   //   return searchArray
@@ -237,9 +248,10 @@ const getSearchString = (columns: Ref<QTableProps['columns'] & { type: string }[
   // if (Array.isArray(search)) {
   //   return search.join(' ou ')
   // }
-  // if (field?.type === 'date') {
-  //   return dayjs(search).format('DD/MM/YYYY')
-  // }
+  console.log('fieldType', fieldType, fieldLabel, search, columnTypes)
+  if (fieldType === 'date') {
+    return dayjs(search!.toString()).format('DD/MM/YYYY')
+  }
   return sanitizeSearchString(search!.toString())
 }
 
@@ -279,7 +291,7 @@ const getComparatorObject = (comparatorSign: string, search?: string) => {
   return candidates[0]
 }
 
-export function useFiltersQuery(columns: Ref<QTableProps['columns'] & { type: string }[]>) {
+export function useFiltersQuery(columns: Ref<QTableProps['columns'] & { type: string }[]>, columnTypes?: Ref<ColumnType[]>) {
   const $route = useRoute()
 
   const countFilters = computed(() => {
@@ -304,7 +316,7 @@ export function useFiltersQuery(columns: Ref<QTableProps['columns'] & { type: st
 
         const label = getLabelByName(columns, extract.field) || extract.field
         const rawValue = `${$route.query[key]}`
-        const search = getSearchString(columns, $route.query[key], extract.field)
+        const search = getSearchString(columns, $route.query[key], extract.field, columnTypes)
 
         if (!search || search === '') {
           console.warn(`Invalid search for filter key: ${key} ${filteredKey}`, {