App developement (#40)

* fix populate builds and script

* fix emit

* remove from field

* fix queries

* Update release.yml (#26)

* Update release.yml

* Update release.yml (#27)

* Update release.yml (#28)

* v0.0.2

* Update release.yml

* Update Dockerfile

* v0.0.3

* Update release.yml (#29)

* Update Dockerfile

* Update Dockerfile

* Update Dockerfile (#30)

* v0.0.4

* Update jwt.strategy.ts

* Fix build (#31)

* change dockerfile

* change release

* v0.0.5

* Fix build (#32)

* change dockerfile

* change release

* fix skip build

* v0.0.6

* Fix build (#33)

* change dockerfile

* change release

* fix skip build

* fix env values

* v0.0.7

* Fix build (#34)

* change dockerfile

* change release

* fix skip build

* fix env values

* fix envs

* v0.0.8

* Fix build (#35)

* change dockerfile

* change release

* fix skip build

* fix env values

* fix envs

* change envs

* v0.0.9

* Fix build (#36)

* change dockerfile

* change release

* fix skip build

* fix env values

* fix envs

* change envs

* checkout code in build part

* v0.0.10

* Fix build (#37)

* change dockerfile

* change release

* fix skip build

* fix env values

* fix envs

* change envs

* checkout code in build part

* fix dockerfiles

* v0.0.11

* WIP Mails + fix dto

* 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>

* fix queries

* fix api required fields

* add lint config

---------

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

Author: 3 people

.eslintrc.js

@@ -1,9 +1,11 @@
 module.exports = {
-  parser: '@typescript-eslint/parser',
+  parser: 'vue-eslint-parser',
   parserOptions: {
     project: 'tsconfig.json',
     tsconfigRootDir: __dirname,
     sourceType: 'module',
+    extraFileExtensions: ['.vue'],
+    parser: '@typescript-eslint/parser',
   },
   plugins: ['@typescript-eslint/eslint-plugin'],
   extends: [
@@ -25,5 +27,6 @@ module.exports = {
     '@typescript-eslint/no-inferrable-types': 'off',
     '@typescript-eslint/no-explicit-any': 'error',
     '@typescript-eslint/no-var-requires': 'off',
+    "@typescript-eslint/no-unused-vars": "off"
   },
 }

app/package.json

@@ -9,7 +9,9 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "generate:api": "openapi-typescript http://localhost:7100/swagger/json -o ./.nuxt/types/service-api.d.ts",
-    "upgrade:packages": "npx npm-check-updates -u --reject @types/node"
+    "upgrade:packages": "npx npm-check-updates -u --reject @types/node",
+    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
+    "lint:fix": "eslint --ext .ts,.js,.vue --ignore-path .gitignore . --fix"
   },
   "dependencies": {
     "@nuxt-alt/auth": "^2.6.1",
@@ -24,7 +26,8 @@
     "cookie": "^0.5.0",
     "pinia": "^2.1.6",
     "quasar": "^2.12.6",
-    "sass": "^1.68.0"
+    "sass": "^1.68.0",
+    "vue-eslint-parser": "^9.3.2"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",

app/src/components/searchfilters/RightSelect.vue

@@ -10,7 +10,7 @@ q-select(
 )
   template(v-slot:option="{ index, itemProps, opt, selected, toggleOption }")
     q-item-label(v-bind="itemProps" v-if="opt.header" header) {{ opt.label }}
-    q-item(v-bind="itemProps" v-else @click.capture='addFilter({index, value: opt})')
+    q-item(v-bind="itemProps" v-else @click.capture='addFilter(opt)')
       q-item-section(side)
         q-icon(:name="opt.icon" :color="opt.color" size="xs")
       q-item-section
@@ -52,12 +52,13 @@ onMounted(() => {
 })
 
 watch(() => route.query, () => {
-  filters.value = []
   getFilters()
 })
 
 const filters = ref<Option[]>([])
 const getFilters = () => {
+  filters.value = []
+
   // Use destructuring assignment to clone the route.query object
   const query = { ...route.query };
 
@@ -67,24 +68,29 @@ const getFilters = () => {
     .filter(([key, value]) => key.startsWith('filters[@') && value !== null)
     .map(([key, value]) => {
       group = key.replace('filters[@', '').replace(']', '').replace('[]', '')
-      return Array.isArray(value) ? value : [value]
+      if (Array.isArray(value)) {
+        return value.map((val: string) => {
+          return {
+            value: val,
+            group
+          }
+        })
+      } else {
+        return {
+          value,
+          group
+        }
+      }
+
     })
     .flat()
-    .map(value => options.value.find(option => option.value?.toString() === value?.toString() && option.group === group))
-    .filter(option => option !== undefined) as Option[]
+    .map(filter => options.value.find(option => option.value?.toString() === filter.value?.toString() && option.group === filter.group))
+    .filter(option => option !== undefined);
   filters.value = filteredOptions;
 }
 
 
 const options = computed(() => {
-  // const categories: Option[] = categoriesData.value.data.map((category: Category) => {
-  //     return {
-  //         label: category.name,
-  //         value: category._id,
-  //         group: 'categories'
-  //     }
-  // }) ?? []
-  // categories.unshift({ label: 'Catégories', header: true })
   const ticketTypeOptions: Option[] = ticketType.map((type) => {
     return {
       label: type.label,
@@ -104,6 +110,14 @@ const options = computed(() => {
       color: state.color ?? ''
     }
   }) ?? []
+  const categories: Option[] = categoriesData.value.data.map((category: Category) => {
+    return {
+      label: category.name,
+      value: category._id,
+      group: 'categories'
+    }
+  }) ?? []
+  if (!categories.find(category => category.header)) categories.unshift({ label: 'Catégories', header: true })
   if (!states.find(state => state.header)) states.unshift({ label: 'États', header: true })
   if (!lifeSteps.find(lifestep => lifestep.header)) lifeSteps.unshift({ label: 'Étapes de vie', header: true })
   return [
@@ -114,6 +128,7 @@ const options = computed(() => {
   ]
 })
 
+// Regroup the filters by key
 const regroupFilters = async () => {
   return filters.value.reduce((acc: any, filter: Option) => {
     const key = `filters[@${filter.group}]`
@@ -126,22 +141,32 @@ const regroupFilters = async () => {
 }
 
 const pushQueries = async () => {
+  // Regroup the filters by key
   const regroupedFilters = await regroupFilters();
+
+  // Push the filters to the url
   for (const key in regroupedFilters) {
     const values = regroupedFilters[key];
     for (const value of values) {
-      pushQuery({ value, key, multiple: true })
+      pushQuery({ value, key, multiple: true, pagination: { limit: 10, skip: 0 } })
     }
   }
 };
 
-const addFilter = (option: { index: number, value: Option }) => {
-  const index = filters.value.findIndex(filter => filter.value?.toString() === option.value.toString() && filter.group === option.value.group)
+const addFilter = (option: Option) => {
+  // Find the index of the option in the filters array
+  const index = filters.value.findIndex(filter => {
+    return filter.group === option.group && filter.value === option.value
+
+  })
+  console.log('index', index)
+  // If the option is not in the filters array, add it else remove it
   if (index === -1) {
-    filters.value.push(option.value)
+    filters.value.push(option)
   } else {
     filters.value.splice(index, 1)
   }
+  // Push the new filters to the url
   pushQueries()
 }
 

app/src/components/searchfilters/index.vue

@@ -46,7 +46,7 @@ const removeFilter = (filter: Filter) => {
     ...route.query,
   }
   delete query[key]
-  router.push({
+  router.replace({
     query
   })
 }

app/src/components/threads/Editor.vue

@@ -36,7 +36,7 @@
     q-dialog(v-model="isFullscreen")
         q-card
             q-card-section.bg-grey-2
-                q-input(dense label="From" v-model="mailInfo.from" :disable="isDisabledTicket")
+                //- q-input(dense label="From" v-model="mailInfo.from" :disable="isDisabledTicket")
                 q-input(dense label="To" v-model="mailInfo.to" :disable="isDisabledTicket")
                 q-input(dense label="Copy" v-model="mailInfo.cc" :disable="isDisabledTicket")
                 q-input(dense label="Subject" v-model="mailInfo.subject" :disable="isDisabledTicket")
@@ -186,25 +186,26 @@ const emailReponse = (data: MailinfoPartDto) => {
 const threadType = ref(threadTypes[0])
 const message = ref('')
 async function sendMessage(type: ThreadType = ThreadType.OUTGOING) {
+    const body: components["schemas"]["ThreadCreateDto"] & { _id: string } = {
+        _id: currentThreadId.value?.toHexString() || '',
+        attachments: attachements.value,
+        ticketId: generateStringMongoId(route.params.id.toString()),
+        fragments: [{
+            id: generateStringMongoId(),
+            disposition: 'raw',
+            message: message.value
+        }] as components["schemas"]["FragmentPartDto"][],
+        metadata: {
+            createdBy: user.username,
+            createdAt: dayjs().toISOString(),
+            lastUpdatedAt: dayjs().toISOString(),
+            lastUpdatedBy: user.username
+        },
+        type
+    }
     const { data: thread, error } = await useHttpApi(`/tickets/thread`, {
         method: 'post',
-        body: {
-            _id: currentThreadId.value?.toHexString(),
-            attachments: attachements.value,
-            ticketId: generateStringMongoId(route.params.id.toString()),
-            fragments: [{
-                id: generateStringMongoId(),
-                disposition: 'raw',
-                message: message.value
-            }],
-            metadata: {
-                createdBy: user.username,
-                createdAt: dayjs().toISOString(),
-                lastUpdatedAt: dayjs().toISOString(),
-                lastUpdatedBy: user.username
-            },
-            type
-        }
+        body
     })
 
     console.log('thread', thread.value)

app/src/components/threads/List.vue

@@ -10,10 +10,16 @@ q-scroll-area(ref="chatScroll")
 
         div(v-for="(message, index) in value" :id="message._id" :key='index').q-mx-md
             component(
+                v-if="getThreadHookName(message.type) === 'tk-threadsTypesMail'"
                 :is="getThreadHookName(message.type)"
                 :data="message"
                 @email:response="emailReponse($event)"
             )
+            component(
+                v-else
+                :is="getThreadHookName(message.type)"
+                :data="message"
+            )
 </template>
 
 <script lang="ts" setup>

app/src/components/threads/types/mail.vue

@@ -18,8 +18,8 @@ div
                     q-separator.q-my-xs(v-if="props.data.attachments.length > 0")
                     q-chip(v-for='(attachment, key) in props.data.attachments' :key='key' icon="mdi-paperclip" text-color="white" color="primary" dense size='md' :label="attachment.name")
         .col.flex.justify-center.items-center.q-pa-sm.column.q-gutter-sm
-            q-btn(fab size="sm" icon="mdi-share" color="primary" @click="emailReponse(props.data.mailinfo)")
-            q-btn(fab size="sm" icon="mdi-dots-vertical" color="primary")
+            q-btn(fab size="xs" icon="mdi-share" color="primary" @click="emailReponse(props.data.mailinfo)")
+            q-btn(fab size="xs" icon="mdi-dots-vertical" color="primary")
 </template>
 
 <script lang="ts" setup>

app/src/components/tickets/table/top-right.vue

@@ -13,8 +13,6 @@ q-btn-group(rounded flat)
 
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { defineProps } from 'vue'
-
 const props = defineProps({
     columns: {
         type: Array as PropType<{ name: string, label: string, value: string }[]>,

app/src/composables/pushQuery.ts

@@ -1,9 +1,14 @@
 import { useRouter, useRoute } from 'nuxt/app'
-export async function pushQuery(payload: { value: any; key: string; multiple?: boolean }) {
+export async function pushQuery(payload: { value: any; key: string; multiple?: boolean; pagination?: { skip: number; limit: number } }) {
   const route = useRoute()
   const router = useRouter()
-  const { value, key, multiple } = payload
+  const { value, key, multiple, pagination } = payload
   const query = { ...route.query }
+  if (pagination) {
+    query.skip = pagination.skip.toString()
+    query.limit = pagination.limit.toString()
+  }
+
   if (!multiple) {
     query[key] = value
   } else {

app/src/pages/tickets.vue

@@ -21,31 +21,31 @@ q-page
       template(v-slot:body-cell-states="props")
         tk-tickets-table-state-col(:ticket="props.row")
 
-      template(v-slot:body-cell-envelope.senders.name="props")
-        q-td(:props="props")
-          span.q-ml-sm {{ props.row.envelope.senders.length === 0 ? "Pas d'appelant" : props.row.envelope.senders[0].name }}
-          span(v-if="props.row.envelope.senders.length > 1") , {{ props.row.envelope.senders.length -1 }} autre{{ props.row.envelope.senders.length === 2 ? '' : 's'  }}...
-            q-tooltip.text-body2(transition-show="scale" transition-hide="scale") ...{{ [...props.row.envelope.senders].slice(1).map(s => s.name).join(', ') }}
+        template(v-slot:body-cell-envelope.senders.name="props")
+          q-td(:props="props")
+            span.q-ml-sm {{ props.row.envelope.senders.length === 0 ? "Pas d'appelant" : props.row.envelope.senders[0].name }}
+            span(v-if="props.row.envelope.senders.length > 1") , {{ props.row.envelope.senders.length -1 }} autre{{ props.row.envelope.senders.length === 2 ? '' : 's'  }}...
+              q-tooltip.text-body2(transition-show="scale" transition-hide="scale") ...{{ [...props.row.envelope.senders].slice(1).map(s => s.name).join(', ') }}
 
-      template(v-slot:body-cell-envelope.observers.name="props")
-        q-td(:props="props")
-          span.q-ml-sm {{ props.row.envelope.observers.length === 0 ? "Pas de concerné" : props.row.envelope.observers[0].name }}
-          span(v-if="props.row.envelope.observers.length > 1") , {{ props.row.envelope.observers.length -1 }} autre{{ props.row.envelope.observers.length === 2 ? '' : 's'  }}...
-            q-tooltip.text-body2(transition-show="scale" transition-hide="scale") ...{{ [...props.row.envelope.observers].slice(1).map(s => s.name).join(', ') }}
+        template(v-slot:body-cell-envelope.observers.name="props")
+          q-td(:props="props")
+            span.q-ml-sm {{ props.row.envelope.observers.length === 0 ? "Pas de concerné" : props.row.envelope.observers[0].name }}
+            span(v-if="props.row.envelope.observers.length > 1") , {{ props.row.envelope.observers.length -1 }} autre{{ props.row.envelope.observers.length === 2 ? '' : 's'  }}...
+              q-tooltip.text-body2(transition-show="scale" transition-hide="scale") ...{{ [...props.row.envelope.observers].slice(1).map(s => s.name).join(', ') }}
 
-      template(v-slot:body-cell-envelope.assigned.name="props")
-        q-td(:props="props")
-          span.q-ml-sm {{ props.row.envelope.assigned.length === 0 ? "Pas d'assigné" : props.row.envelope.assigned[0].name }}
-          span(v-if="props.row.envelope.assigned.length > 1") , {{ props.row.envelope.assigned.length -1 }} autre{{ props.row.envelope.assigned.length === 2 ? '' : 's'  }}...
-            q-tooltip.text-body2(transition-show="scale" transition-hide="scale") ...{{ [...props.row.envelope.assigned].slice(1).map(s => s.name).join(', ') }}
+        template(v-slot:body-cell-envelope.assigned.name="props")
+          q-td(:props="props")
+            span.q-ml-sm {{ props.row.envelope.assigned.length === 0 ? "Pas d'assigné" : props.row.envelope.assigned[0].name }}
+            span(v-if="props.row.envelope.assigned.length > 1") , {{ props.row.envelope.assigned.length -1 }} autre{{ props.row.envelope.assigned.length === 2 ? '' : 's'  }}...
+              q-tooltip.text-body2(transition-show="scale" transition-hide="scale") ...{{ [...props.row.envelope.assigned].slice(1).map(s => s.name).join(', ') }}
 
   tk-tickets-closeDialog(v-model="closeTicketsDialog" :selected="selected" @refresh="refresh")
 </template>
 
 <script lang="ts" setup>
-import { ref, provide } from "vue";
+import { ref, provide, watch, computed } from "vue";
 import { useHttpApi } from "~/composables/useHttpApi";
-import { computed, useDayjs, onMounted } from "#imports";
+import { useDayjs, onMounted } from "#imports";
 import { useRoute, useRouter } from "nuxt/app";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
@@ -77,7 +77,10 @@ if (error.value) {
 }
 
 const { data: categories, pending: categoriesPending, refresh: categoriesRefresh, error: categoriesError } = await useHttpApi('/core/categories', {
-  method: 'get'
+  method: 'get',
+  query: {
+    "limit": 999,
+  }
 })
 
 if (categoriesError.value) {
@@ -87,7 +90,10 @@ if (categoriesError.value) {
   })
 }
 const { data: states, pending: statesPending, refresh: statesRefresh, error: statesError } = await useHttpApi('/tickets/state', {
-  method: 'get'
+  method: 'get',
+  query: {
+    "limit": 999,
+  }
 })
 
 if (statesError.value) {