chore: Update search filter fields after adding a filter

Author: tacxou

src/components/searchfilters/Main.vue

@@ -23,7 +23,7 @@
   .col-6.col-md-2(v-show="comparator?.multiplefields")
     q-input(v-model="searchMax" label="Max" clearable :type="searchInputType" :disable="isFieldDisabled.search" )
   .col-12.col-md-1
-    q-btn(color="primary" @click="addFilter" :disable="isFieldDisabled.addButton") Ajouter
+    q-btn(color="primary" @click="addFilter" :disable="isFieldDisabled.addButton") Filtrer
   q-space
   .col-12.col-md-2
     slot(name="rightSelect")
@@ -85,13 +85,36 @@ const onFieldChange = (value: Field) => {
 }
 
 const clearFields = (fields: string[]) => {
-  if (fields.includes('field')) field = ref()
-  if (fields.includes('comparator')) comparator = ref()
+  if (fields.includes('field')) field.value = undefined
+  if (fields.includes('comparator')) comparator.value = undefined
   search.value = ''
   searchMin.value = ''
   searchMax.value = ''
 }
 
+const editFilter = (filter: Filter) => {
+  // console.log(filter)
+  if (filter.querySign === '@') {
+    clearFields(['field', 'comparator'])
+    return
+  }
+  if (comparator.value?.multiplefields) {
+    clearFields(['field', 'comparator'])
+    return
+  }
+
+  field.value = fields?.find((field) => field.name === filter.field)
+  comparator.value = comparatorTypes.value.find((comparator) => comparator.value === filter.querySign)
+  fieldType.value = fields?.find((field) => field.name === filter.field)?.type
+
+  if (fieldType.value === 'date') {
+    if (comparator.value.querySign === '<' || comparator.value.querySign === '>=') search.value = dayjs(filter.search).format('YYYY-MM-DD')
+    if (comparator.value.querySign === '>' || comparator.value.querySign === '<=') search.value = dayjs(filter.search).format('YYYY-MM-DD')
+  } else {
+    search.value = filter.search
+  }
+}
+
 const addFilter = async () => {
   const searchFilter = getSearchFilter.value
   if (!searchFilter) return
@@ -179,12 +202,13 @@ const isFieldDisabled = computed(() => {
     field: false,
     comparator: !field.value,
     search: !field.value || !comparator.value,
-    addButton: !field.value || !comparator.value || !search.value,
+    addButton: !field.value || !comparator.value || (!search.value && !searchMin.value && !searchMax.value),
   }
 })
 
 defineExpose({
   comparatorTypes,
   rightSelect,
+  editFilter,
 })
 </script>

src/components/searchfilters/index.vue

@@ -7,7 +7,7 @@
   .row.q-gutter-sm.items-center.q-mt-sm
     q-chip(
       v-for="filter in filterArray" :key="filter.field"
-      removable @remove="removeFilter(filter)"
+      removable @remove="removeFilter(filter)" @click="editFilter(filter)" clickable
     )
       | {{ filter.label }}
       q-separator.q-mx-xs(vertical)
@@ -27,6 +27,7 @@ type MainData = {
   rightSelect: {
     options: Option[]
   }
+  editFilter: (filter: Filter) => void
 }
 
 defineOptions({
@@ -57,6 +58,10 @@ const parseSimpleFilter = (searchFilter: SearchFilter) => {
   }
 }
 
+const editFilter = (filter: Filter) => {
+  mainData.value?.editFilter(filter)
+}
+
 const removeFilter = (filter: Filter) => {
   let key = `filters[${filter.querySign}${filter.field.replace('[]', '')}]`
   if (filter.field.endsWith('[]')) key += '[]'

src/composables/useColumnsIdentities.ts

@@ -3,8 +3,14 @@ import type { components } from '#build/types/service-api'
 
 type Identity = components['schemas']['IdentitiesDto']
 
+type ColumnType = {
+  name: string
+  type: string
+}
+
 interface ColumnConfig {
   name: string;
+  type: 'text' | 'number' | 'date';
   label: string;
   field: string | ((row: any) => any);
   required?: boolean;
@@ -37,7 +43,13 @@ function processFormat(value: any, format: any) {
   return value;
 }
 
-export function useColumnsIdentites() {
+type useColumnsIdentitesReturnType = {
+  columns: Ref<QTableProps['columns']>,
+  visibleColumns: Ref<QTableProps['visibleColumns']>,
+  columnsType: Ref<ColumnType[]>,
+}
+
+export function useColumnsIdentites(): useColumnsIdentitesReturnType {
   const columns = ref<QTableProps['columns']>(
     [
       {
@@ -136,7 +148,39 @@ export function useColumnsIdentites() {
   //   },
   // ])
 
+  const visibleColumns = ref<QTableProps['visibleColumns']>([
+    // 'inetOrgPerson.uid',
+    // 'inetOrgPerson.employeeNumber',
+    // 'additionalFields.attributes.supannPerson.supannTypeEntiteAffectation',
+    // 'envelope.observers.name',
+    // 'envelope.assigned.name',
+    // 'inetOrgPerson.cn',
+    // 'inetOrgPerson.givenName',
+    ...config?.identitiesColumns?.entries.map((col: any) => col.name) || [],
+    'metadata.lastUpdatedAt',
+    'metadata.createdAt',
+    'actions',
+    'states',
+  ])
+  const columnsType = ref<ColumnType[]>([
+    // { name: 'inetOrgPerson.uid', type: 'text' },
+    // { name: 'inetOrgPerson.employeeNumber', type: 'text' },
+    // { name: 'additionalFields.attributes.supannPerson.supannTypeEntiteAffectation', type: 'text' },
+    // { name: 'envelope.observers.name', type: 'text' },
+    // { name: 'envelope.assigned.name', type: 'text' },
+    // { name: 'inetOrgPerson.cn', type: 'text' },
+    // { name: 'inetOrgPerson.givenName', type: 'text' },
+    ...config?.identitiesColumns?.entries.map((col: any) => ({ name: col.name, type: col.type || 'text' })) || [],
+    { name: 'metadata.lastUpdatedAt', type: 'date' },
+    { name: 'metadata.createdAt', type: 'date' },
+    // { name: 'actions', type: 'text' },
+    // { name: 'actions', type: 'text' },
+    // { name: 'actions', type: 'text' },
+  ])
+
   return {
     columns,
+    visibleColumns,
+    columnsType,
   }
 }

src/pages/identities/index.vue

@@ -97,34 +97,7 @@ if (error.value) {
   })
 }
 
-const { columns } = useColumnsIdentites()
-const visibleColumns = ref<QTableProps['visibleColumns']>([
-  'inetOrgPerson.uid',
-  'inetOrgPerson.employeeNumber',
-  'additionalFields.attributes.supannPerson.supannTypeEntiteAffectation',
-  'envelope.observers.name',
-  'envelope.assigned.name',
-  'inetOrgPerson.cn',
-  'inetOrgPerson.givenName',
-  'metadata.lastUpdatedAt',
-  'metadata.createdAt',
-  'actions',
-  'states',
-])
-const columnsType = ref([
-  { name: 'inetOrgPerson.uid', type: 'text' },
-  { name: 'inetOrgPerson.employeeNumber', type: 'text' },
-  { name: 'additionalFields.attributes.supannPerson.supannTypeEntiteAffectation', type: 'text' },
-  { name: 'envelope.observers.name', type: 'text' },
-  { name: 'envelope.assigned.name', type: 'text' },
-  { name: 'inetOrgPerson.cn', type: 'text' },
-  { name: 'inetOrgPerson.givenName', type: 'text' },
-  { name: 'metadata.lastUpdatedAt', type: 'date' },
-  { name: 'metadata.createdAt', type: 'date' },
-  { name: 'actions', type: 'text' },
-  { name: 'actions', type: 'text' },
-  { name: 'actions', type: 'text' },
-])
+const { columns, visibleColumns, columnsType } = useColumnsIdentites()
 
 const selected = ref([])