changement filtres

Author: RICHARD-Quentin

app/src/components/searchfilters/Main.vue

@@ -1,38 +1,39 @@
 <template lang="pug">
 .row.q-gutter-sm.items-center.q-mt-sm
-    //- .col.col-md-2
-    //-     q-select(:options="fieldTypes" label="Type de champ" v-model="fieldType" clearable @update:model-value="clearFields(['field', 'comparator'])")
-    .col.col-md-2
-      q-select(:options="fields" label="Champs" v-model="field" clearable @update:model-value="onFieldChange($event)")
-    .col.col-md-2
-      q-select(:options="comparatorFilteredByType" label="Comparateurs" v-model="comparator" clearable @update:model-value="clearFields([])" :disable="isFieldDisabled.comparator")
-        template(v-slot:selected-item="scope")
-          q-icon(:name="scope.opt.icon" size="xs")
-        template(v-slot:option="scope")
-          q-item(v-bind="scope.itemProps")
-            q-item-section(avatar)
-              q-icon(:name="scope.opt.icon")
-            q-item-section
-              q-item-label
-                span {{ scope.opt.label }}
-
-    .col-12.col-md-2(v-show="!comparator?.multiplefields")
-      q-input(v-model="search" label="Rechercher" clearable :type="searchInputType" :disable="isFieldDisabled.search" :prefix="comparator?.prefix" :suffix="comparator?.suffix")
-    .col-6.col-md-2(v-show="comparator?.multiplefields")
-      q-input(v-model="searchMin" label="Min" clearable :type="searchInputType" :disable="isFieldDisabled.search" )
-    .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-space
-    .col-12.col-md-2
-      tk-SearchfiltersRightSelect(ref="rightSelect")
+  //- .col.col-md-2
+  //-     q-select(:options="fieldTypes" label="Type de champ" v-model="fieldType" clearable @update:model-value="clearFields(['field', 'comparator'])")
+  .col.col-md-2
+    q-select(:options="fields" label="Champs" v-model="field" clearable @update:model-value="onFieldChange($event)")
+  .col.col-md-2
+    q-select(:options="comparatorFilteredByType" label="Comparateurs" v-model="comparator" clearable @update:model-value="clearFields([])" :disable="isFieldDisabled.comparator")
+      template(v-slot:selected-item="scope")
+        q-icon(:name="scope.opt.icon" size="xs")
+      template(v-slot:option="scope")
+        q-item(v-bind="scope.itemProps")
+          q-item-section(avatar)
+            q-icon(:name="scope.opt.icon")
+          q-item-section
+            q-item-label
+              span {{ scope.opt.label }}
+
+  .col-12.col-md-2(v-show="!comparator?.multiplefields")
+    q-input(v-model="search" label="Rechercher" clearable :type="searchInputType" :disable="isFieldDisabled.search" :prefix="comparator?.prefix" :suffix="comparator?.suffix")
+  .col-6.col-md-2(v-show="comparator?.multiplefields")
+    q-input(v-model="searchMin" label="Min" clearable :type="searchInputType" :disable="isFieldDisabled.search" )
+  .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-space
+  .col-12.col-md-2
+    tk-SearchfiltersRightSelect(ref="rightSelect")
 </template>
 
 <script lang="ts" setup>
 import { ref, computed, inject } from 'vue'
 import { useRouter, useRoute } from 'nuxt/app'
 import { useDayjs } from '#imports';
+import { pushQuery } from '~/composables'
 import type { Filter, Field, Comparator, SearchFilter } from '~/types'
 const dayjs = useDayjs()
 
@@ -95,11 +96,11 @@ const addFilter = async () => {
   if (!searchFilter) return
   if (searchFilter.comparator.multiplefields) {
     for (const { key, value } of parseMultipleFilter(searchFilter)) {
-      await pushQuery(key, value)
+      await pushQuery({ key, value })
     }
   } else {
     const { key, value } = parseSimpleFilter(searchFilter)
-    await pushQuery(key, value)
+    await pushQuery({ key, value })
   }
 }
 
@@ -130,15 +131,15 @@ const parseMultipleFilter = (searchFilter: SearchFilter) => {
   return [min, max]
 }
 
-const pushQuery = async (key: string, value: string) => {
-  const query = {
-    ...route.query,
-  }
-  query[key] = value
-  await router.push({
-    query
-  })
-}
+// const pushQuery = async (key: string, value: string) => {
+//   const query = {
+//     ...route.query,
+//   }
+//   query[key] = value
+//   await router.push({
+//     query
+//   })
+// }
 
 const getSearchFilter = computed(() => {
   if (field.value === undefined || field.value === null) return null

app/src/components/searchfilters/RightSelect.vue

@@ -29,7 +29,8 @@ q-select(
 <script lang="ts" setup>
 import { ref, computed, onMounted, watch, inject } from 'vue'
 import type { Ref } from 'vue'
-import { useHttpApi } from "~/composables/useHttpApi";
+import { useHttpApi, pushQuery } from "~/composables";
+
 import type { components } from '#build/types/service-api'
 import { useRoute, useRouter } from 'nuxt/app';
 import { ticketType, lifeSteps } from "#imports";
@@ -132,51 +133,61 @@ const regroupFilters = async () => {
   }, {})
 }
 
-const pushQuery = async () => {
-  const query = { ...route.query };
+// const pushQuery = async () => {
+//   const query = { ...route.query };
+//   const regroupedFilters = await regroupFilters();
+
+//   const keysToDelete = new Set<string>();
+
+//   for (const key in query) {
+//     if (key.startsWith('filters[@')) {
+//       keysToDelete.add(key);
+//     }
+//   }
+
+//   keysToDelete.forEach((keyToDelete) => {
+//     delete query[keyToDelete];
+//   });
+
+//   for (const key in regroupedFilters) {
+//     const values = regroupedFilters[key];
+//     const length = values.length;
+//     const keyWithBrackets = `${key}[]`;
+//     if (length === 1) {
+//       query[keyWithBrackets] = values;
+//     } else {
+//       if (query[keyWithBrackets]) {
+//         delete query[keyWithBrackets];
+//       }
+//       query[key] = values;
+//     }
+//   }
+
+//   router.push({
+//     query
+//   })
+// };
+
+const pushQueries = async () => {
   const regroupedFilters = await regroupFilters();
 
-  const keysToDelete = new Set<string>();
-
-  for (const key in query) {
-    if (key.startsWith('filters[@')) {
-      keysToDelete.add(key);
-    }
-  }
-
-  keysToDelete.forEach((keyToDelete) => {
-    delete query[keyToDelete];
-  });
-
   for (const key in regroupedFilters) {
     const values = regroupedFilters[key];
-    const length = values.length;
-
-    if (length === 1) {
-      query[`${key}[]`] = values;
-    } else {
-      const keyWithBrackets = `${key}[]`;
-      if (query[keyWithBrackets]) {
-        delete query[keyWithBrackets];
-      }
-      query[key] = values;
+    for (const value of values) {
+      pushQuery({ value, key, multiple: true })
     }
   }
-
-  router.push({
-    query
-  })
 };
 
 const addFilter = (option: { index: number, value: Option }) => {
   filters.value.push(option.value)
-  pushQuery()
+  pushQueries()
 }
 
 
 const removeFilter = (option: { index: number, value: Option }) => {
   filters.value.splice(option.index, 1)
-  pushQuery()
+  pushQueries()
 }
 
 defineExpose({

app/src/components/searchfilters/Threads.vue

@@ -0,0 +1,34 @@
+<template lang="pug">
+q-toolbar(dense).flex.justify-evenly
+    q-chip(dense clickable @click="resetFilters") Tous 
+    q-chip(v-for="threadType in threadTypes" v-model:selected="filters[threadType.value]" @click="pushQuery({value: threadType.value, key:'filters[@type]', multiple: true})" :key="threadType.value" :label="threadType.label" dense clickable)
+</template>
+
+<script lang="ts" setup>
+import { ThreadType, threadTypes } from '~/utils';
+import { useRoute, useRouter } from 'nuxt/app';
+import { ref, onMounted, computed } from 'vue'
+import { pushQuery } from '~/composables';
+
+const route = useRoute()
+const router = useRouter()
+const filters = computed(() => {
+    return threadTypes.reduce((acc: any, threadType: any) => {
+        const stringValue = threadType.value.toString()
+        const isFiltred = route.query["filters[@type]"]?.includes(stringValue) || route.query["filters[@type][]"]?.includes(stringValue)
+        acc[threadType.value] = isFiltred || false
+        return acc
+    }, {})
+})
+
+const resetFilters = async () => {
+    const query = {
+        ...route.query,
+    }
+    delete query["filters[@type]"]
+    delete query["filters[@type][]"]
+    router.push({
+        query
+    })
+}
+</script>

app/src/components/ticket/mainPanel.vue

@@ -3,6 +3,8 @@ q-card(style="height: 100%").column
   q-toolbar.col-1
     q-toolbar-title {{ sequence }} | {{ subject }}
   q-scroll-area.col-8(ref="chatScroll")
+    div(v-if="threads.total === 0").flex.items-center.justify-center
+      span Aucun message
     div(v-for='(value, key) in getMessageByDay' :key='key')
       q-chat-message
         template(v-slot:label)
@@ -19,39 +21,39 @@ q-card(style="height: 100%").column
               q-tooltip.text-body2 {{ getHour(message.metadata.createdAt) }}
           template(v-slot:default)
             div
-              q-chip(v-for='file in message.fragments.file' :key='file.id' icon="mdi-paperclip" dense size='md' :label="file.message")
+              q-chip(v-for='file in message.attachement' :key='file.id' icon="mdi-paperclip" dense size='md' :label="file.message")
               q-separator.q-my-xs(v-if="message.fragments.file")
               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"
-    :definitions="{ 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')} }}"
-    :toolbar="[['left','center','right','justify'],['bold','italic','underline','strike'],['undo','redo'],['attach','send']]"
+    :definitions="editorDefinitions" ref="dropZoneRef"
+    :toolbar="[['left','center','right','justify'],['bold','italic','underline','strike'],['undo','redo'],['attach','send'],['fullscreen']]"
   ).col
-  .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
+  //- .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
 
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted, computed } from 'vue'
-import { useRoute } from 'nuxt/app';
-import { useHttpApi } from '~/composables/useHttpApi';
+import { useRoute, useRouter } from 'nuxt/app';
+import { useHttpApi } from '~/composables';
 import { useDayjs, usePinia } from "#imports";
 import { generateMongoId } from '~/utils';
 import type { Fragments, Threads } from '~/types';
 import type { components } from '#build/types/service-api'
-import { ThreadType } from '~/utils';
+import { ThreadType, threadTypes } from '~/utils';
 import { useDropZone } from '@vueuse/core'
 
 type ThreadDto = components['schemas']['ThreadDto']
 type FragmentPartDto = components["schemas"]["FragmentPartDto"]
 type ThreadCreateDto = components['schemas']['ThreadCreateDto']
 
 const dayjs = useDayjs()
-
 const store = usePinia()
+const route = useRoute()
 const user = store.state.value.auth.user
 const props = defineProps({
   sequence: {
@@ -64,25 +66,31 @@ const props = defineProps({
   }
 })
 
-const chatScroll = ref(null)
 onMounted(() => {
   scroll()
 })
 
-const route = useRoute()
-const query = ref({
+const chatScroll = ref(null)
+const baseQuery = ref({
   "filters[ticketId]": `${route.params.id}`,
   "sort[metadata.createdAt]": 'asc',
-  "limit": 100,
+  "limit": 999,
 })
 
 const isFullscreen = ref(false)
-
+const message = ref('')
 const dropZoneRef = ref<HTMLDivElement>()
 const { data: threads } = await useHttpApi(`tickets/thread`, {
   method: 'get',
-  query
+  query: computed(() => {
+    return {
+      ...baseQuery.value,
+      ...route.query
+    }
+  })
 })
+
+
 const onDrop = (files: File[] | null) => {
   console.log('drop')
   console.log(files)
@@ -138,6 +146,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 getMessageByDay = computed((): Threads => {
   return threads.value?.data.reduce((acc: Threads, thread: ThreadDto) => {
     const day = dayjs(thread.metadata.createdAt).format('DD-MM-YYYY')
@@ -151,11 +184,4 @@ const getMessageByDay = computed((): Threads => {
   }, {})
 })
 
-const message = ref('')
-</script>
-
-<style lang="css" scoped>
-.mainContent {
-  height: calc(100% - 50px);
-}
-</style>
+</script>

app/src/composables/index.ts

@@ -0,0 +1,2 @@
+export * from './pushQuery'
+export * from './useHttpApi'