feat: implement new filter components and refactor existing filter logic

Author: tacxou

…/components/pages/identities/filters.vue …web/src/components/core/edit-filters.vueapps/web/src/components/pages/identities/filters.vue renamed to apps/web/src/components/core/edit-filters.vue apps/web/src/components/pages/identities/filters.vue renamed to apps/web/src/components/core/edit-filters.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-q-card(style='min-width: 500px;')
+q-card(style='min-width: 40vw;')
   q-toolbar.bg-primary.text-white(dense flat style='height: 32px;')
     q-toolbar-title(v-text='title')
     q-btn(
@@ -12,6 +12,7 @@ q-card(style='min-width: 500px;')
   q-card-section.q-pb-sm
     .flex.q-col-gutter-md
       q-select.col(
+        style='min-width: 180px; max-width: 220px'
         v-model='filter.key'
         :readonly='!!initialFilter?.field'
         :options='columns'
@@ -24,10 +25,11 @@ q-card(style='min-width: 500px;')
         map-options
         emit-value
       )
-      q-select.col(
+      q-select.col-1(
+        style='min-width: 130px'
         v-model='filter.operator'
         label='Opérateur'
-        :options='comparatorTypes'
+        :options='availableComparators'
         option-value='value'
         option-label='label'
         dense
@@ -46,15 +48,37 @@ q-card(style='min-width: 500px;')
               q-item-label
                 span {{ scope.opt.label }}
       q-input.col(
+        style='min-width: 300px'
         v-show="!comparator?.multiplefields"
         v-model='filter.value'
         label='Valeur'
         :prefix="comparator?.prefix"
         :suffix="comparator?.suffix"
+        :type='searchInputType'
         @keydown.enter.prevent="writeFilter(filter)"
         dense
         outlined
       )
+      q-input.col(
+        style='min-width: 200px'
+        v-show="comparator?.multiplefields"
+        v-model="filter.min"
+        :type='searchInputType'
+        label="Minimum"
+        clearable
+        dense
+        outlined
+      )
+      q-input.col(
+        style='min-width: 200px'
+        v-show="comparator?.multiplefields"
+        v-model="filter.max"
+        :type='searchInputType'
+        label="Maximum"
+        clearable
+        dense
+        outlined
+      )
   q-card-actions
     q-space
     q-btn(
@@ -75,6 +99,9 @@ type Filter = {
   key: string
   operator: string
   value: string
+
+  min: string
+  max: string
 }
 
 type InitialFilter = {
@@ -87,7 +114,7 @@ type InitialFilter = {
 }
 
 export default defineNuxtComponent({
-  name: 'PagesIdentitiesFiltersComponent',
+  name: 'CoreEditFiltersComponent',
   props: {
     title: {
       type: String,
@@ -97,20 +124,33 @@ export default defineNuxtComponent({
       type: Array as () => QTableProps['columns'] & { type: string }[],
       default: () => [],
     },
+    columnsType: {
+      type: Array as PropType<{ name: string; type: string }[]>,
+      required: false,
+      default: () => [],
+    },
     initialFilter: {
       type: Object as () => InitialFilter,
       default: () => ({}),
     },
   },
   watch: {
+    'filter.key': {
+      handler() {
+        this.fieldType = this.columnsType.find((col) => col.name === this.filter.key)?.type || 'text'
+        this.filter.operator = ''
+      },
+    },
     'filter.operator': {
       handler() {
         this.filter.value = ''
+        this.filter.min = ''
+        this.filter.max = ''
       },
     },
   },
   setup({ columns, initialFilter }) {
-    const { comparatorTypes, writeFilter } = useFiltersQuery(ref(columns))
+    const { fieldTypes, comparatorTypes, writeFilter } = useFiltersQuery(ref(columns))
 
     const detectInitialOperator = () => {
       if (!initialFilter || !initialFilter.querySign) return ''
@@ -166,22 +206,41 @@ export default defineNuxtComponent({
       return val
     }
 
+    const fieldType = ref<string>()
     const filter = ref<Filter>({
       key: initialFilter?.field || '',
       operator: detectInitialOperator(),
       value: stripPrefixSuffix(initialFilter?.value) || '',
+
+      min: '',
+      max: '',
     })
 
     return {
       filter,
+      fieldType,
+      fieldTypes,
       comparatorTypes,
       writeFilter,
     }
   },
   computed: {
-    comparator() {
+    comparator(): { label: string; value: string; prefix?: string; suffix?: string; multiplefields?: boolean } | undefined {
       return this.comparatorTypes.find((comp) => comp.value === this.filter.operator)
     },
+    searchInputType(): string {
+      if (this.fieldType === undefined || this.fieldType === null) return 'text'
+      return this.fieldType
+    },
+    availableComparators(): { label: string; value: string; prefix?: string; suffix?: string; multiplefields?: boolean }[] {
+      if (this.fieldType === undefined || this.fieldType === null) return []
+      return this.comparatorTypes.filter((comparator) => {
+        return comparator.type.includes(this.fieldType!)
+      })
+    },
+  },
+  mounted() {
+    this.fieldType = this.columnsType.find((col) => col.name === this.filter.key)?.type || 'text'
   },
 })
 </script>

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

@@ -0,0 +1,129 @@
+<template lang="pug">
+q-toolbar(dense flat)
+  .column.fit
+    .flex.q-mt-sm
+      //- pre(v-html='JSON.stringify(columnsType)')
+      q-input.col(
+        v-if='mode === "simple" || mode === "complex"'
+        v-model='search'
+        label='Recherche'
+        :placeholder='placeholder'
+        clear-icon='mdi-close'
+        :debounce='300'
+        dense
+        outlined
+        clearable
+        autofocus
+        stacked-label
+      )
+      q-space(v-if='mode === "advanced"')
+      q-btn.q-ml-sm(
+        v-if='mode === "complex" || mode === "advanced"'
+        color='primary'
+        icon='mdi-filter-variant'
+        flat
+        dense
+      )
+        span(v-text='mode === "advanced" ? "Ajouter un nouveau filtre" : ""')
+        q-badge.text-black(
+          v-if='countFilters > 0'
+          color='warning'
+          floating
+        ) {{ countFilters }}
+        q-popup-proxy(
+          anchor='bottom left'
+          self='top middle'
+          transition-show='scale'
+          transition-hide='scale'
+        )
+          sesame-core-edit-filters(
+            title='Ajouter un filtre'
+            :columns='columns'
+            :columns-type='columnsType'
+          )
+    .flex.q-mt-sm(v-show='hasFilters')
+      template(v-for='(filter, i) in getFilters' :key='filter.field')
+        //- pre(v-html='JSON.stringify(filter)')
+        q-chip(
+          @remove="removeFilter(filter)"
+          :color="$q.dark.isActive ? 'grey-9' : 'grey-3'"
+          removable
+          clickable
+          dense
+        )
+          | {{ filter.label }}
+          q-separator.q-mx-xs(vertical)
+          | {{ filter.comparator }}
+          q-separator.q-mx-xs(vertical)
+          | "{{ filter.search }}"
+          q-popup-proxy(
+            anchor='bottom left'
+            self='top middle'
+            transition-show='scale'
+            transition-hide='scale'
+          )
+            sesame-core-edit-filters(
+              :title='"Modifier le filtre (" + (filter.label || filter.field || "") + ")"'
+              :initial-filter='filter'
+              :columns='columns'
+              :columns-type='columnsType'
+            )
+        span.content-center(v-if='i < countFilters - 1') &amp;gt;
+</template>
+
+<script lang="ts">
+import type { QTableProps } from 'quasar'
+import type { LocationQueryValue } from 'vue-router'
+
+export default defineComponent({
+  name: 'CorePanFiltersComponent',
+  props: {
+    mode: {
+      type: String as PropType<'simple' | 'complex' | 'advanced'>,
+      required: false,
+      default: 'simple',
+    },
+    placeholder: {
+      type: String,
+      required: false,
+      default: 'Rechercher par ...',
+    },
+    columns: {
+      type: Array as PropType<QTableProps['columns'] & { type: string }[]>,
+      required: true,
+    },
+    columnsType: {
+      type: Array as PropType<{ name: string; type: string }[]>,
+      required: false,
+      default: () => [],
+    },
+  },
+  setup({ columns }) {
+    const { countFilters, hasFilters, getFilters, removeFilter } = useFiltersQuery(ref(columns))
+
+    return {
+      countFilters,
+      hasFilters,
+      getFilters,
+      removeFilter,
+    }
+  },
+  computed: {
+    search: {
+      get(): LocationQueryValue[] | string {
+        const v = this.$route.query['search'] || ''
+
+        return `${v}`.replace(/^\*|\*$/g, '')
+      },
+      set(v: string): void {
+        this.$router.replace({
+          query: {
+            ...this.$route.query,
+            search: v ? `${v}` : undefined,
+          },
+        })
+      },
+    },
+  },
+})
+</script>

apps/web/src/composables/useColumnsIdentities.ts

@@ -56,7 +56,7 @@ export function useColumnsIdentites(): useColumnsIdentitesReturnType {
   const dayjs = useDayjs()
   const config = useAppConfig()
 
-  const columns = ref<QTableProps['columns']>([
+  const columns = ref<QTableProps['columns'] & { type: string }[]>([
     {
       name: 'states',
       label: 'États',

apps/web/src/composables/useFiltersQuery.ts

@@ -1,17 +1,16 @@
-import dayjs from "dayjs"
 import type { QTableProps } from "quasar"
 import type { LocationQueryValue } from "vue-router"
 
-// const fieldTypes = ref<
-//   {
-//     label: string
-//     value: string
-//   }[]
-// >([
-//   { label: 'Texte', value: 'text' },
-//   { label: 'Nombre', value: 'number' },
-//   { label: 'Date', value: 'date' },
-// ])
+const fieldTypes = ref<
+  {
+    label: string
+    value: string
+  }[]
+>([
+  { label: 'Texte', value: 'text' },
+  { label: 'Nombre', value: 'number' },
+  { label: 'Date', value: 'date' },
+])
 
 export const FILTER_BRACES = ['[', ']']
 export const FILTER_PREFIX = 'filters['
@@ -99,16 +98,16 @@ const comparatorTypes = ref<ComparatorType[]>([
     prefix: '',
     suffix: '',
   },
-  {
-    label: 'entre',
-    querySign: '<<',
-    value: 'between',
-    icon: 'mdi-arrow-expand-horizontal',
-    type: ['number', 'date'],
-    multiplefields: true,
-    prefix: '',
-    suffix: '',
-  },
+  // {
+  //   label: 'entre',
+  //   querySign: '<<',
+  //   value: 'between',
+  //   icon: 'mdi-arrow-expand-horizontal',
+  //   type: ['number', 'date'],
+  //   multiplefields: true,
+  //   prefix: '',
+  //   suffix: '',
+  // },
   {
     label: 'Contient',
     querySign: '^',
@@ -343,7 +342,7 @@ export function useFiltersQuery(columns: Ref<QTableProps['columns'] & { type: st
     })
   }
 
-  const writeFilter = (filter: { key: string; operator: string; value: string }) => {
+  const writeFilter = (filter: { key: string; operator: string; value: string, min?: string, max?: string }) => {
     const router = useRouter()
     const query = { ...$route.query }
     const comparator = comparatorTypes.value.find((comp) => comp.value === filter.operator)
@@ -376,5 +375,6 @@ export function useFiltersQuery(columns: Ref<QTableProps['columns'] & { type: st
     removeFilter,
     writeFilter,
     comparatorTypes,
+    fieldTypes,
   }
 }