fixs filters

Author: RICHARD-Quentin

app/src/components/searchfilters/RightSelect.vue

@@ -1,22 +1,16 @@
 <template lang="pug">
 q-select(
   :options="options"
-  multiple
-  emit-value
-  map-options
+  multiple hide-selected
+  emit-value use-chips
+  options-dense map-options 
   :model-value="filters"
   :option-value="(item) => item"
   :label="`Etats: ${filters.length} filtre(s) appliqué(s)`"
-  options-dense
-  use-chips
-  hide-selected
-  @add="addFilter($event)"
-  @remove="removeFilter($event)"
 )
   template(v-slot:option="{ index, itemProps, opt, selected, toggleOption }")
     q-item-label(v-bind="itemProps" v-if="opt.header" header) {{ opt.label }}
-    //@click.capture='addFilter({index, value: opt})'
-    q-item(v-bind="itemProps" v-else)
+    q-item(v-bind="itemProps" v-else @click.capture='addFilter({index, value: opt})')
       q-item-section(side)
         q-icon(:name="opt.icon" :color="opt.color" size="xs")
       q-item-section
@@ -60,26 +54,44 @@ watch(() => route.query, () => {
   getFilters()
 })
 
+// const getFilters = () => {
+//   const query = { ...route.query }
+//   for (const key in query) {
+//     if (key.startsWith('filters[@') && query[key] !== null) {
+//       const values = query[key]
+//       if (Array.isArray(values)) {
+//         for (const value of values) {
+//           const option = options.value.find(option => option.value === value)
+//           if (option) {
+//             filters.value.push(option)
+//           }
+//         }
+//       } else {
+//         const option = options.value.find(option => option.value === values)
+//         if (option) {
+//           filters.value.push(option)
+//         }
+//       }
+//     }
+//   }
+// }
+
 const getFilters = () => {
-  const query = { ...route.query }
-  for (const key in query) {
-    if (key.startsWith('filters[@') && query[key] !== null) {
-      const values = query[key]
-      if (Array.isArray(values)) {
-        for (const value of values) {
-          const option = options.value.find(option => option.value === value)
-          if (option) {
-            filters.value.push(option)
-          }
-        }
-      } else {
-        const option = options.value.find(option => option.value === values)
-        if (option) {
-          filters.value.push(option)
-        }
-      }
-    }
-  }
+  // Use destructuring assignment to clone the route.query object
+  const query = { ...route.query };
+
+  // Use a functional approach with filter and map for better readability
+  let group: string
+  const filteredOptions = Object.entries(query)
+    .filter(([key, value]) => key.startsWith('filters[@') && value !== null)
+    .map(([key, value]) => {
+      group = key.replace('filters[@', '').replace(']', '').replace('[]', '')
+      return Array.isArray(value) ? value : [value]
+    })
+    .flat()
+    .map(value => options.value.find(option => option.value?.toString() === value?.toString() && option.group === group))
+    .filter(option => option !== undefined);
+  filters.value = filteredOptions;
 }
 
 
@@ -112,8 +124,8 @@ const options = computed(() => {
       color: state.color ?? ''
     }
   }) ?? []
-  states.unshift({ label: 'États', header: true })
-  lifeSteps.unshift({ label: 'Étapes de vie', header: true })
+  if (!states.find(state => state.header)) states.unshift({ label: 'États', header: true })
+  if (!lifeSteps.find(lifestepstep => lifestepstep.header)) lifeSteps.unshift({ label: 'Étapes de vie', header: true })
   return [
     ...lifeSteps,
     ...ticketTypeOptions,
@@ -170,7 +182,6 @@ const regroupFilters = async () => {
 
 const pushQueries = async () => {
   const regroupedFilters = await regroupFilters();
-
   for (const key in regroupedFilters) {
     const values = regroupedFilters[key];
     for (const value of values) {
@@ -180,13 +191,12 @@ const pushQueries = async () => {
 };
 
 const addFilter = (option: { index: number, value: Option }) => {
-  filters.value.push(option.value)
-  pushQueries()
-}
-
-
-const removeFilter = (option: { index: number, value: Option }) => {
-  filters.value.splice(option.index, 1)
+  const index = filters.value.findIndex(filter => filter.value?.toString() === option.value.toString() && filter.group === option.value.group)
+  if (index === -1) {
+    filters.value.push(option.value)
+  } else {
+    filters.value.splice(index, 1)
+  }
   pushQueries()
 }
 

app/src/components/searchfilters/index.vue

@@ -1,12 +1,12 @@
 <template lang="pug" @keypress.enter="addFilter">
 .q-ma-sm
-    tk-SearchfiltersMain(ref="mainData")
-    //Filters chips
-    .row.q-gutter-sm.items-center.q-mt-sm
-      q-chip(
-        v-for="filter in filterArray" :key="filter.field"
-        removable @remove="removeFilter(filter)"
-      ) {{ filter.label }} {{ filter.comparator }} {{ filter.search }}
+  tk-SearchfiltersMain(ref="mainData")
+  //Filters chips
+  .row.q-gutter-sm.items-center.q-mt-sm
+    q-chip(
+      v-for="filter in filterArray" :key="filter.field"
+      removable @remove="removeFilter(filter)"
+    ) {{ filter.label }} {{ filter.comparator }} {{ filter.search }}
 </template>
 
 <script lang="ts" setup>
@@ -98,6 +98,7 @@ const getLabelByName = (name: string) => {
   return field.name.replace('[]', '')
 }
 
+// Return the label for a comparator based on the comparator's query sign
 const getComparatorLabel = (comparator: string) => {
   const comparatorObj = mainData.value?.comparatorTypes.find(comparatorObj => comparatorObj.querySign === comparator)
   if (!comparatorObj) return comparator
@@ -124,6 +125,9 @@ const getSearchString = (search: LocationQueryValue | LocationQueryValue[], fiel
   return sanitizeSearchString(search!.toString())
 }
 
+// This function sanitizes a search string by removing all prefixes and suffixes from the search string.
+
+// The function takes a search string and returns a sanitized search string.
 const sanitizeSearchString = (search: string) => {
   const allPrefixAndSuffixPattern = getAllPrefixAndSuffixPattern.value
   for (const pattern of allPrefixAndSuffixPattern) {
@@ -132,7 +136,13 @@ const sanitizeSearchString = (search: string) => {
   return search
 }
 
-const exctractComparator = (key: string): {
+/**
+ * This function extracts the comparator and field from a key.
+ * @param {string} key - The key to extract the comparator and field from.
+ * @returns {object} The extracted comparator and field, or null if the key does not start with a comparator.
+ */
+
+const extractComparator = (key: string): {
   comparator: string
   field: string
 } | null => {
@@ -146,21 +156,21 @@ const exctractComparator = (key: string): {
   }
 }
 
+// This code extracts the filters from the route query and returns them as a computed object
+
 const filterArray = computed(() => {
   const queries = { ...route.query }
   const filters: Record<string, { label: string, field: string, comparator: string, querySign: string, search: string }> = {};
-
-  // Iterate through the keys and values in the input object
   for (const key in queries) {
     if (queries.hasOwnProperty(key) && key.includes("filter")) {
-
-      // Extract the key without the "filter[" and "]" parts
       const filteredKey = key.replace("filters[", "").replace("]", "");
-      const exctract = exctractComparator(filteredKey)
-      if (!exctract) continue
-      const { comparator, field } = exctract
+      const extract = extractComparator(filteredKey)
+      if (!extract) continue
+      const { comparator, field } = extract
+      const label = getLabelByName(field)
+      const search = getSearchString(queries[key], field)
+      if (!label || !search || search === '') continue
 
-      // Assign the value to the extracted key in the filter array
       filters[key] = {
         label: getLabelByName(field),
         field,

app/src/components/ticket/mainPanel.vue

@@ -26,10 +26,21 @@ q-card(style="height: 100%").column
               div(v-for='raw in message.fragments.raw' v-html="raw.message")
   tk-SearchfiltersThreads
   q-editor(
-    v-model="message" placeholder="Votre message ..." v-model:fullscreen="isFullscreen"
+    v-model="message" placeholder="Votre message ..."
     :definitions="editorDefinitions" ref="dropZoneRef"
-    :toolbar="[['left','center','right','justify'],['bold','italic','underline','strike'],['undo','redo'],['attach','send'],['fullscreen']]"
+    :toolbar="[['left','center','right','justify'],['bold','italic','underline','strike'],['undo','redo'],['send'],['fullscreen']]"
   ).col
+  q-dialog(v-model="isFullscreen")
+    q-card
+      q-card-section
+        q-editor(
+          min-height="50vh" min-width="50vw"
+          v-model="message" placeholder="Votre message ..."
+          :definitions="editorDefinitions" ref="dropZoneRef"
+          :toolbar="[['left','center','right','justify'],['bold','italic','underline','strike'],['undo','redo'],['send'],['fullscreen']]" class="q-pa-none"
+          :disable="disabled"
+        )
+
   //- .col-1(ref="dropZoneRef").bg-grey-3.items-center.justify-center.q-pa-md
   //-   q-icon(name="mdi-paperclip" size="md" :class="isOverDropZone ? 'text-primary' : 'text-grey-5'")
   //-   span.q-ml-md(:class="isOverDropZone ? 'text-primary' : 'text-grey-5'") Déposer un fichier
@@ -45,7 +56,7 @@ import { generateMongoId } from '~/utils';
 import type { Fragments, Threads } from '~/types';
 import type { components } from '#build/types/service-api'
 import { ThreadType, threadTypes } from '~/utils';
-import { useDropZone } from '@vueuse/core'
+import { useDropZone, useResizeObserver } from '@vueuse/core'
 
 type ThreadDto = components['schemas']['ThreadDto']
 type FragmentPartDto = components["schemas"]["FragmentPartDto"]
@@ -63,6 +74,10 @@ const props = defineProps({
   subject: {
     type: String,
     required: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -80,6 +95,7 @@ const baseQuery = ref({
 const isFullscreen = ref(false)
 const message = ref('')
 const dropZoneRef = ref<HTMLDivElement>()
+const editorDialog = ref()
 const { data: threads } = await useHttpApi(`tickets/thread`, {
   method: 'get',
   query: computed(() => {
@@ -97,6 +113,11 @@ const onDrop = (files: File[] | null) => {
 }
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
+// useResizeObserver(editorDialog, (entries) => {
+//   const entry = entries[0]
+//   const { width, height } = entry.contentRect
+// })
+
 const getTimeFrom = (time: string) => {
   return dayjs().to(dayjs(time))
 }
@@ -146,30 +167,31 @@ const sendMessage = async () => {
   scroll()
 }
 
-const editorDefinitions = ref({
-  send: {
-    tip: 'Envoyer',
-    icon: 'mdi-send',
-    label: 'Envoyer',
-    handler: sendMessage
-  },
-  attach: {
-    tip: 'Joindre un fichier',
-    icon: 'mdi-paperclip',
-    label: 'Joindre un fichier',
-    handler: () => {
-      console.log('joindre')
-    }
-  },
-  fullscreen: {
-    tip: 'Plein écran',
-    icon: 'mdi-fullscreen',
-    label: 'Plein écran',
-    handler: () => {
-      isFullscreen.value = !isFullscreen.value
+const editorDefinitions = computed(() => (
+  {
+    send: {
+      tip: 'Envoyer',
+      icon: 'mdi-send',
+      label: 'Envoyer',
+      handler: sendMessage
+    },
+    attach: {
+      tip: 'Joindre un fichier',
+      icon: 'mdi-paperclip',
+      label: 'Joindre un fichier',
+      handler: () => {
+        console.log('joindre')
+      }
+    },
+    fullscreen: {
+      tip: 'Plein écran',
+      icon: isFullscreen.value ? 'mdi-fullscreen-exit' : 'mdi-fullscreen',
+      label: isFullscreen.value ? 'Quitter le plein écran' : 'Plein écran',
+      handler: () => {
+        isFullscreen.value = !isFullscreen.value
+      }
     }
-  }
-})
+  }))
 
 const getMessageByDay = computed((): Threads => {
   return threads.value?.data.reduce((acc: Threads, thread: ThreadDto) => {