Reecriture option api (#39)

* change lifesteps

* daysjs clear

* change inject types searchfilters

* fix types in right select

* Reorganise code in threads

* fix mail button size + type iframe ref

* type refs

* correct api call

* fix type + refactor api calls

* types fixs

* refactoring ticket page

* WIP Mails + fix dto

---------

Co-authored-by: Tacx <12997062+tacxou@users.noreply.github.com>

Author: RICHARD-Quentin

app/nuxt.config.ts

@@ -3,7 +3,6 @@ import pugPlugin from 'vite-plugin-pug'
 import openapiTS from 'openapi-typescript'
 import { writeFileSync } from 'fs'
 import { resolve } from 'path'
-import timezone from 'dayjs/plugin/timezone'
 
 const TK_APP_API_URL = process.env.TK_APP_API_URL || 'http://localhost:7100'
 

app/src/components/searchfilters/Main.vue

@@ -37,7 +37,7 @@ import { pushQuery } from '~/composables'
 import type { Filter, Field, Comparator, SearchFilter } from '~/types'
 const dayjs = useDayjs()
 
-const fields = inject('fieldsList', ref<Field[]>([]))
+const fields = inject<Field[]>('fieldsList')
 
 const router = useRouter()
 const route = useRoute()
@@ -160,7 +160,7 @@ const searchInputType = computed(() => {
 
 const fieldsFilteredByType = computed(() => {
   if (fieldType.value === undefined || fieldType.value === null) return []
-  return fields.value.filter((field) => {
+  return fields?.filter((field) => {
     return field.type === fieldType.value
   })
 })

app/src/components/searchfilters/RightSelect.vue

@@ -30,6 +30,8 @@ import { useRoute, useRouter } from 'nuxt/app';
 import { ticketType, lifeSteps } from "#imports";
 type Category = components['schemas']['CategoriesDto']
 type State = components['schemas']['StatesDto']
+type CateforyFetch = components["schemas"]["PaginatedResponseDto"] & { data: Category[] }
+type StateFetch = components["schemas"]["PaginatedResponseDto"] & { data: State[] }
 
 type Option = {
   label: string
@@ -42,8 +44,8 @@ type Option = {
 const route = useRoute()
 const router = useRouter()
 
-const { data: statesData } = inject('stateFetch')
-const { data: categoriesData } = inject('categoriesFetch')
+const { data: statesData } = inject('stateFetch') as StateFetch
+const { data: categoriesData } = inject('categoriesFetch') as CateforyFetch
 
 onMounted(() => {
   getFilters()
@@ -54,28 +56,7 @@ 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 filters = ref<Option[]>([])
 const getFilters = () => {
   // Use destructuring assignment to clone the route.query object
   const query = { ...route.query };
@@ -90,12 +71,11 @@ const getFilters = () => {
     })
     .flat()
     .map(value => options.value.find(option => option.value?.toString() === value?.toString() && option.group === group))
-    .filter(option => option !== undefined);
+    .filter(option => option !== undefined) as Option[]
   filters.value = filteredOptions;
 }
 
 
-const filters = ref<Option[]>([])
 const options = computed(() => {
   // const categories: Option[] = categoriesData.value.data.map((category: Category) => {
   //     return {
@@ -125,7 +105,7 @@ const options = computed(() => {
     }
   }) ?? []
   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 })
+  if (!lifeSteps.find(lifestep => lifestep.header)) lifeSteps.unshift({ label: 'Étapes de vie', header: true })
   return [
     ...lifeSteps,
     ...ticketTypeOptions,
@@ -145,41 +125,6 @@ const regroupFilters = async () => {
   }, {})
 }
 
-// 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();
   for (const key in regroupedFilters) {

app/src/components/searchfilters/index.vue

@@ -25,7 +25,7 @@ type MainData = {
 const dayjs = useDayjs()
 const router = useRouter()
 const route = useRoute()
-const fields = inject('fieldsList', ref<Field[]>([]))
+const fields = inject<Field[]>('fieldsList')
 const mainData = ref<MainData>()
 
 const parseSimpleFilter = (searchFilter: SearchFilter) => {
@@ -86,7 +86,7 @@ const optionsRegrouped = (): { name: string, label: { label: string, value: stri
 const getAllFields = () => {
   const rightSelectOptions = optionsRegrouped()
   return [
-    ...fields.value,
+    ...fields,
     ...rightSelectOptions
   ]
 }

app/src/components/threads/Editor.vue

@@ -61,10 +61,6 @@
             .row
                 q-btn(label="Envoyer en note interne" color="primary" icon="mdi-note" @click="sendMessage(ThreadType.INTERNAL)" :disable="isDisabledTicket").col-6
                 q-btn(label="Envoyer par mail" color="primary" icon="mdi-email" @click="sendMessage(ThreadType.OUTGOING)" :disable="isDisabledTicket").col-6
-                //- .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>
@@ -80,11 +76,8 @@ import { FsType } from '~/utils'
 import { useQuasar } from 'quasar';
 import ObjectID from 'bson-objectid';
 
-type ThreadCreateDto = components['schemas']['ThreadCreateDto']
-type FsPart = components["schemas"]["IdfsPartDto"]
-type MailinfoPartDto = components["schemas"]["MailinfoPartDto"]
-
 const emit = defineEmits(['refreshThreadsList'])
+const isDisabledTicket = inject<boolean>('isDisabledTicket')
 
 const dayjs = useDayjs()
 const store = usePinia()
@@ -96,21 +89,7 @@ onMounted(() => {
     currentThreadId.value = generateMongoId()
 })
 
-const threadType = ref(threadTypes[0])
-const isFullscreen = ref(false)
-const message = ref('')
-const dropZoneRef = ref<HTMLDivElement>()
-const dropZoneDialogRef = ref<HTMLDivElement>()
-const editorDialog = ref()
-const currentThreadId = ref<ObjectID | null>(null)
-const attachements = ref<FsPart[]>([])
-const mailInfo = ref({
-    from: '',
-    to: '',
-    cc: '',
-    subject: ''
-})
-
+// Manage dropzone
 const onDrop = (files: File[] | null) => {
     if (isDisabledTicket) {
         $q.notify({
@@ -130,19 +109,25 @@ const onDrop = (files: File[] | null) => {
         uploadFile(file)
     }
 }
-
+const dropZoneRef = ref<HTMLDivElement>()
+const dropZoneDialogRef = ref<HTMLDivElement>()
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 const { isOverDropZone: isOverDropZoneDialog } = useDropZone(dropZoneDialogRef, onDrop)
 
+// Manage attachements
+type FsPart = components["schemas"]["IdfsPartDto"]
+type FilestorageCreateDto = components["schemas"]["FilestorageCreateDto"]
+const attachements = ref<FsPart[]>([])
+const currentThreadId = ref<ObjectID | null>(null)
 const uploadFile = async (file: File) => {
     const formData = new FormData()
     formData.append('file', file)
     formData.append('namespace', 's3')
-    formData.append('path', `/ticket/${route.params.id}/attachement/${currentThreadId}/${file.name}`)
+    formData.append('path', `/ticket/${route.params.id}/attachement/${currentThreadId.value}/${file.name}`)
     formData.append('type', FsType.FILE)
-    const { data, error } = await useHttpApi(`core/filestorage`, {
+    const { data, error } = await useHttpApi(`/core/filestorage`, {
         method: 'post',
-        body: formData
+        body: formData as unknown as FilestorageCreateDto
     })
     if (error.value) {
         $q.notify({
@@ -151,27 +136,24 @@ const uploadFile = async (file: File) => {
         })
         return
     }
+    const id = generateMongoId(data.value?.data?._id).toHexString()
     const fsPart: FsPart = {
-        id: data.value?.data._id,
+        id,
         name: file.name,
-        namespace: data.value?.data.namespace,
-        path: data.value?.data.path,
-        mime: data.value?.data.mime
+        namespace: data.value?.data?.namespace || '',
+        path: data.value?.data?.path || '',
+        mime: data.value?.data?.mime || '',
     }
     attachements.value.push(fsPart)
     $q.notify('Fichier envoyé')
 }
 
-const emailReponse = (data: MailinfoPartDto) => {
-    mailInfo.value.to = data.from.address
-    mailInfo.value.from = data.to[0].address
-    mailInfo.value.subject = data.subject.startsWith('Re:') ? data.subject : `Re:${data.subject}`
-    isFullscreen.value = true
-}
-
 const removeAttachment = (id: string) => {
-    const { data, error } = useHttpApi(`core/filestorage/${id}`, {
-        method: 'delete'
+    const { data, error } = useHttpApi(`/core/filestorage/{_id}`, {
+        method: 'delete',
+        pathParams: {
+            _id: id
+        }
     })
     if (error.value) {
         $q.notify({
@@ -180,19 +162,38 @@ const removeAttachment = (id: string) => {
         })
         return
     }
-    attachements.value = attachements.value.filter(attachement => attachement.id !== id)
+    attachements.value = attachements.value.filter(attachement => `${attachement.id}` !== id)
     $q.notify('Fichier supprimé')
 }
 
-const sendMessage = (type: ThreadType = ThreadType.OUTGOING) => {
-    const { data: thread, error } = useHttpApi(`tickets/thread`, {
+const editorDialog = ref()
+const isFullscreen = ref(false)
+const mailInfo = ref({
+    from: '',
+    to: '',
+    cc: '',
+    subject: ''
+})
+type MailinfoPartDto = components["schemas"]["MailinfoPartDto"]
+const emailReponse = (data: MailinfoPartDto) => {
+    mailInfo.value.to = data.from.address
+    mailInfo.value.from = data.to[0].address
+    mailInfo.value.subject = data.subject.startsWith('Re:') ? data.subject : `Re:${data.subject}`
+    isFullscreen.value = true
+}
+
+// Manage editor
+const threadType = ref(threadTypes[0])
+const message = ref('')
+async function sendMessage(type: ThreadType = ThreadType.OUTGOING) {
+    const { data: thread, error } = await useHttpApi(`/tickets/thread`, {
         method: 'post',
         body: {
-            _id: currentThreadId.value,
+            _id: currentThreadId.value?.toHexString(),
             attachments: attachements.value,
-            ticketId: generateMongoId(route.params.id.toString()),
+            ticketId: generateStringMongoId(route.params.id.toString()),
             fragments: [{
-                id: generateMongoId(),
+                id: generateStringMongoId(),
                 disposition: 'raw',
                 message: message.value
             }],
@@ -206,7 +207,10 @@ const sendMessage = (type: ThreadType = ThreadType.OUTGOING) => {
         }
     })
 
-    if (error && error.value) {
+    console.log('thread', thread.value)
+    console.log('error', error.value)
+
+    if (error.value) {
         $q.notify({
             message: 'Impossible d\'envoyer le message',
             type: 'negative'
@@ -224,7 +228,6 @@ const sendMessage = (type: ThreadType = ThreadType.OUTGOING) => {
     })
     emit('refreshThreadsList')
 }
-
 const editorDefinitions = computed(() => (
     {
         fullscreen: {
@@ -236,13 +239,10 @@ const editorDefinitions = computed(() => (
             }
         }
     }))
-
 const editorToolbar = computed(() => {
     return [['left', 'center', 'right', 'justify'], ['bold', 'italic', 'underline', 'strike'], ['undo', 'redo'], ['fullscreen']]
 })
 
-const isDisabledTicket = inject('isDisabledTicket')
-
 defineExpose({
     emailReponse
 })