q-page + enum as static in front

RICHARD-Quentin · RICHARD-Quentin · commit 85c4c5c2fac3 · 2023-09-15T19:26:19.000+02:00
diff --git a/app/src/components/searchfilters/RightSelect.vue b/app/src/components/searchfilters/RightSelect.vue
@@ -13,16 +13,16 @@ q-select(
   @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-section(side)
-          q-icon(:name="opt.icon" :color="opt.color" size="xs")
-        q-item-section
-          q-item-label(v-html="opt.label")
-        q-item-section(side)
-          q-toggle(:model-value="selected" @update:model-value="toggleOption")
+  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-section(side)
+        q-icon(:name="opt.icon" :color="opt.color" size="xs")
+      q-item-section
+        q-item-label(v-html="opt.label")
+      q-item-section(side)
+        q-toggle(:model-value="selected" @update:model-value="toggleOption")
 
 </template>
 
@@ -32,7 +32,7 @@ import type { Ref } from 'vue'
 import { useHttpApi } from "~/composables/useHttpApi";
 import type { components } from '#build/types/service-api'
 import { useRoute, useRouter } from 'nuxt/app';
-
+import { ticketType, lifeSteps } from "#imports";
 type Category = components['schemas']['CategoriesDto']
 type State = components['schemas']['StatesDto']
 
@@ -49,12 +49,7 @@ const router = useRouter()
 
 const { data: statesData } = inject('stateFetch')
 const { data: categoriesData } = inject('categoriesFetch')
-const ticketType: {
-  label: string,
-  value: number,
-  icon: string,
-  color: string
-}[] | undefined = inject('ticketType')
+
 onMounted(() => {
   getFilters()
 })
@@ -88,12 +83,6 @@ const getFilters = () => {
 
 
 const filters = ref<Option[]>([])
-const lifeSteps = ref<Option[]>([
-  { label: 'Lifestep', header: true },
-  { label: 'Ouvert', value: '1', group: 'lifestep', icon: 'mdi-circle', color: "green" },
-  { label: 'Clos', value: '0', group: 'lifestep', icon: 'mdi-circle', color: "red" },
-])
-
 const options = computed(() => {
   // const categories: Option[] = categoriesData.value.data.map((category: Category) => {
   //     return {
@@ -103,7 +92,7 @@ const options = computed(() => {
   //     }
   // }) ?? []
   // categories.unshift({ label: 'Catégories', header: true })
-  const ticketTypeOptions: Option[] = ticketType.value.map((type) => {
+  const ticketTypeOptions: Option[] = ticketType.map((type) => {
     return {
       label: type.label,
       value: type.value.toString(),
@@ -123,8 +112,9 @@ const options = computed(() => {
     }
   }) ?? []
   states.unshift({ label: 'États', header: true })
+  lifeSteps.unshift({ label: 'Étapes de vie', header: true })
   return [
-    ...lifeSteps.value,
+    ...lifeSteps,
     ...ticketTypeOptions,
     // ...categories,
     ...states
diff --git a/app/src/layouts/default.vue b/app/src/layouts/default.vue
@@ -5,3 +5,10 @@ q-layout
     nuxt-page
   tk-footer
 </template>
+
+<style>
+.q-page-container {
+  height: 100vh !important;
+  width: 100% !important;
+}
+</style>
diff --git a/app/src/pages/index.vue b/app/src/pages/index.vue
@@ -1,5 +1,5 @@
 <template lang='pug'>
-div
+q-page
   tk-hook(name="accueil" :data='{exemple: 1}' debug)
   span Accueil
   tk-hook(name="index.accueil.bottom")
diff --git a/app/src/pages/tickets.vue b/app/src/pages/tickets.vue
@@ -1,68 +1,68 @@
 
 <template lang="pug">
-div
-    .q-pa-md
-      tk-searchfilters(:fields="fieldsList")
-    .q-pa-md
-      q-table(
-        :rows="tickets.data" :rows-per-page-options="[5, 10, 15]" :loading="pending" :columns="columns" row-key="sequence" :visible-columns="visibleColumns"
-        v-model:pagination="pagination" title="Tickets" @request="onRequest"
-        rows-per-page-label="Lignes par page" no-data-label="Aucune donnée" loading-label="Chargement..." no-results-label="Aucun résultat"
-        :pagination-label="(firstRowIndex, endRowIndex, totalRowsNumber) => `${firstRowIndex}-${endRowIndex} sur ${totalRowsNumber} lignes`"
-        selection="multiple" v-model:selected="selected" virtual-scroll :selected-rows-label="(numberOfRows) => `${numberOfRows} tickets sélectionnées`"
-      )
-        template(v-slot:top)
-          .col-12.col-sm
-            q-btn-group(rounded flat)
-              q-btn(icon="mdi-eye-check-outline" color="primary" rounded @click="markAsRead" size="md" :disable="selected.length === 0" primary)
-                q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Marqué comme lu
-              q-btn(flat icon="mdi-merge" color="primary" rounded @click="mergeTickets" size="md" :disable="selected.length === 0 || selected.length === 1")
-                q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Fusionner les tickets sélectionnés
-              q-btn(flat icon="mdi-eye" color="primary" rounded @click="goToTicket(selected[0])" size="md" :disable="selected.length === 0 || selected.length !== 1")
-                q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Afficher les tickets sélectionnés
-              q-btn(flat icon="mdi-delete" color="primary" rounded @click="deleteTickets" size="md" :disable="selected.length === 0")
-                q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Supprimer les tickets sélectionnés
-          .col-12.col-sm.flex.justify-end
-            q-btn-group(rounded flat)
-              q-btn(flat icon="mdi-table-headers-eye" color="primary")
-                q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Afficher/cacher des colones
-                q-menu(max-width="350px" max-height="350px").q-pa-md
-                  .row
-                    .col-6(v-for="column in columns" :key="column.value")
-                      q-toggle(v-model="visibleColumns" :label="column.label" :val="column.name")
-              q-btn(flat icon="mdi-refresh" @click="refresh" color="primary")
-                q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Rafraichir
-              q-btn(icon="mdi-plus" color="primary" @click="$router.push('/tickets/create')") Créer
-        template(v-slot:body-cell-actions="props")
-          q-td(:props="props")
-            q-btn-group(flat rounded)
-              q-btn(icon="mdi-eye" color="primary" @click="goToTicket(props.row)" size="sm" flat)
-                q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Afficher le ticket
-              q-btn(icon="mdi-delete" color="primary" @click="deleteTickets" size="sm" flat)
-                q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Supprimer le ticket
-        template(v-slot:body-cell-states="props")
-          q-td(:props="props")
-            q-icon(name="mdi-circle" :color="props.row.lifestep ? 'green' : 'red'" size="xs").q-mx-xs
-            q-icon(:name="getType(props.row.type).icon" :color="getType(props.row.type).color" size="xs").q-mx-xs
-            q-icon(v-if="props.row.state && props.row.state.icon" :name="getState(props.row.state).icon" :color="getState(props.row.state).color" size="xs").q-mx-xs
+q-page
+  .q-pa-md
+    tk-searchfilters(:fields="fieldsList")
+  .q-pa-md
+    q-table(
+      :rows="tickets.data" :rows-per-page-options="[5, 10, 15]" :loading="pending" :columns="columns" row-key="sequence" :visible-columns="visibleColumns"
+      v-model:pagination="pagination" title="Tickets" @request="onRequest"
+      rows-per-page-label="Lignes par page" no-data-label="Aucune donnée" loading-label="Chargement..." no-results-label="Aucun résultat"
+      :pagination-label="(firstRowIndex, endRowIndex, totalRowsNumber) => `${firstRowIndex}-${endRowIndex} sur ${totalRowsNumber} lignes`"
+      selection="multiple" v-model:selected="selected" virtual-scroll :selected-rows-label="(numberOfRows) => `${numberOfRows} tickets sélectionnées`"
+    )
+      template(v-slot:top)
+        .col-12.col-sm
+          q-btn-group(rounded flat)
+            q-btn(icon="mdi-eye-check-outline" color="primary" rounded @click="markAsRead" size="md" :disable="selected.length === 0" primary)
+              q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Marqué comme lu
+            q-btn(flat icon="mdi-merge" color="primary" rounded @click="mergeTickets" size="md" :disable="selected.length === 0 || selected.length === 1")
+              q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Fusionner les tickets sélectionnés
+            q-btn(flat icon="mdi-eye" color="primary" rounded @click="goToTicket(selected[0])" size="md" :disable="selected.length === 0 || selected.length !== 1")
+              q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Afficher les tickets sélectionnés
+            q-btn(flat icon="mdi-delete" color="primary" rounded @click="deleteTickets" size="md" :disable="selected.length === 0")
+              q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Supprimer les tickets sélectionnés
+        .col-12.col-sm.flex.justify-end
+          q-btn-group(rounded flat)
+            q-btn(flat icon="mdi-table-headers-eye" color="primary")
+              q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Afficher/cacher des colones
+              q-menu(max-width="350px" max-height="350px").q-pa-md
+                .row
+                  .col-6(v-for="column in columns" :key="column.value")
+                    q-toggle(v-model="visibleColumns" :label="column.label" :val="column.name")
+            q-btn(flat icon="mdi-refresh" @click="refresh" color="primary")
+              q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Rafraichir
+            q-btn(icon="mdi-plus" color="primary" @click="$router.push('/tickets/create')") Créer
+      template(v-slot:body-cell-actions="props")
+        q-td(:props="props")
+          q-btn-group(flat rounded)
+            q-btn(icon="mdi-eye" color="primary" @click="goToTicket(props.row)" size="sm" flat)
+              q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Afficher le ticket
+            q-btn(icon="mdi-delete" color="primary" @click="deleteTickets" size="sm" flat)
+              q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Supprimer le ticket
+      template(v-slot:body-cell-states="props")
+        q-td(:props="props")
+          q-icon(:name="getLifeStep(props.row.lifestep).icon" :color="getLifeStep(props.row.lifestep).color" size="xs").q-mx-xs
+          q-icon(:name="getType(props.row.type).icon" :color="getType(props.row.type).color" size="xs").q-mx-xs
+          q-icon(v-if="props.row.state && props.row.state.icon" :name="getState(props.row.state).icon" :color="getState(props.row.state).color" size="xs").q-mx-xs
 
-        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(', ') }}
 </template>
 
 <script lang="ts" setup>
@@ -72,6 +72,7 @@ import { computed, useDayjs, onMounted, onBeforeMount } from "#imports";
 import { useRoute, useRouter } from "nuxt/app";
 import type { QTableProps } from "quasar";
 import type { components } from '#build/types/service-api'
+import { ticketType, lifeSteps } from "#imports";
 type Ticket = components["schemas"]['TicketDto']
 type State = components["schemas"]['StatesDto']
 
@@ -80,27 +81,27 @@ const route = useRoute()
 const router = useRouter()
 
 const { data: tickets, pending, refresh, error } = await useHttpApi('/tickets/ticket', {
-    method: 'get',
-    query: computed(() => {
-        return {
-            ...route.query,
-        }
-    })
+  method: 'get',
+  query: computed(() => {
+    return {
+      ...route.query,
+    }
+  })
 }).catch((err) => console.error(err))
 const { data: categories, pending: categoriesPending, refresh: categoriesRefresh, error: categoriesError } = await useHttpApi('/core/categories', {
-    method: 'get'
+  method: 'get'
 })
 const { data: states, pending: statesPending, refresh: statesRefresh, error: statesError } = await useHttpApi('/tickets/state', {
-    method: 'get'
+  method: 'get'
 })
 
 onMounted(async () => {
-    pagination.value!.rowsNumber = tickets.value?.total
-    const query = { ...route.query }
-    const limit = query.limit ?? 10
-    const skip = query.skip ?? 0
-    pagination.value!.rowsPerPage = parseInt(limit as string)
-    pagination.value!.page = parseInt(skip as string) / parseInt(limit as string) + 1
+  pagination.value!.rowsNumber = tickets.value?.total
+  const query = { ...route.query }
+  const limit = query.limit ?? 10
+  const skip = query.skip ?? 0
+  pagination.value!.rowsPerPage = parseInt(limit as string)
+  pagination.value!.page = parseInt(skip as string) / parseInt(limit as string) + 1
 
   let sortKey = 'updatedAt'
   let sortDirection = 'desc'
@@ -116,16 +117,6 @@ onMounted(async () => {
 })
 
 const selected = ref<Ticket[]>([])
-const ticketType = ref<{
-  label: string,
-  value: number,
-  icon: string,
-  color: string
-}[]>([
-  { label: 'Incident', value: 1, icon: 'mdi-account-alert', color: 'red' },
-  { label: 'Demande', value: 2, icon: 'mdi-account-question', color: 'primary' },
-])
-
 const columns = ref<QTableProps['columns']>([
   {
     name: 'states',
@@ -225,13 +216,13 @@ const pagination = ref<QTableProps['pagination']>({
 })
 
 const onRequest = async (props: any) => {
-    const { page, rowsPerPage, sortBy, descending } = props.pagination
-    pagination.value!.rowsNumber = tickets.value?.total
-    pagination.value!.page = page
-    pagination.value!.rowsPerPage = rowsPerPage
-    pagination.value!.sortBy = sortBy
-    pagination.value!.descending = descending
-    paginationQuery()
+  const { page, rowsPerPage, sortBy, descending } = props.pagination
+  pagination.value!.rowsNumber = tickets.value?.total
+  pagination.value!.page = page
+  pagination.value!.rowsPerPage = rowsPerPage
+  pagination.value!.sortBy = sortBy
+  pagination.value!.descending = descending
+  paginationQuery()
 }
 
 const paginationQuery = () => {
@@ -282,14 +273,19 @@ const fieldsList = computed(() => {
 })
 
 const getState = (state: { id: string, name: string }) => {
-    const findedState = states.value?.data.find((s: any) => {
-        return s._id === state.id
-    })
-    return findedState
+  const findedState = states.value?.data.find((s: any) => {
+    return s._id === state.id
+  })
+  return findedState
 }
 
 const getType = (type: number) => {
-  return ticketType.value.find(t => t.value === type)
+  return ticketType.find(t => t.value === type)
+}
+
+const getLifeStep = (type: number) => {
+  const lifeStep = lifeSteps.find(l => l.value === type)
+  return lifeStep
 }
 
 const markAsRead = () => {
@@ -307,6 +303,5 @@ const deleteTickets = () => {
 provide('fieldsList', fieldsList)
 provide('stateFetch', { data: states, pending: statesPending, refresh: statesRefresh, error: statesError })
 provide('categoriesFetch', { data: categories, pending: categoriesPending, refresh: categoriesRefresh, error: categoriesError })
-provide('ticketType', ticketType)
 
 </script>
diff --git a/app/src/utils/index.ts b/app/src/utils/index.ts
@@ -0,0 +1 @@
+export * from './statics'
diff --git a/app/src/utils/statics.ts b/app/src/utils/statics.ts
@@ -0,0 +1,9 @@
+export const ticketType = [
+  { label: 'Incident', value: 1, icon: 'mdi-account-alert', color: 'red' },
+  { label: 'Demande', value: 2, icon: 'mdi-account-question', color: 'primary' },
+]
+
+export const lifeSteps = [
+  { label: 'Ouvert', value: 1, group: 'lifestep', icon: 'mdi-circle', color: 'green' },
+  { label: 'Clos', value: 0, group: 'lifestep', icon: 'mdi-circle', color: 'red' },
+]
