Merge pull request 'Ticket notes' (!487) from hyervoni/salix-front-mindshore:feature/TicketNotes into dev

Reviewed-on: verdnatura/salix-front#487
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

src/i18n/locale/en.yml

@@ -444,6 +444,7 @@ ticket:
         sms: Sms
         notes: Notes
         sale: Sale
+        observation: Notes
         ticketAdvance: Advance tickets
         futureTickets: Future tickets
         purchaseRequest: Purchase request

src/i18n/locale/es.yml

@@ -443,6 +443,7 @@ ticket:
         sms: Sms
         notes: Notas
         sale: Lineas del pedido
+        observation: Notas
         ticketAdvance: Adelantar tickets
         futureTickets: Tickets a futuro
         purchaseRequest: Petición de compra

src/pages/Ticket/Card/TicketDescriptor.vue

@@ -71,7 +71,7 @@ const filter = {
 
 const data = ref(useCardDescription());
 const setData = (entity) =>
-    (data.value = useCardDescription(entity.client.name, entity.id));
+    (data.value = useCardDescription(entity.client?.name, entity.id));
 </script>
 
 <template>
@@ -92,7 +92,7 @@ const setData = (entity) =>
                 <template #value>
                     <span class="link">
                         {{ entity.clientFk }}
-                        <CustomerDescriptorProxy :id="entity.client.id" />
+                        <CustomerDescriptorProxy :id="entity.client?.id" />
                     </span>
                 </template>
             </VnLv>
@@ -109,8 +109,8 @@ const setData = (entity) =>
             <VnLv :label="t('ticket.summary.salesPerson')">
                 <template #value>
                     <VnUserLink
-                        :name="entity.client.salesPersonUser?.name"
-                        :worker-id="entity.client.salesPersonFk"
+                        :name="entity.client?.salesPersonUser?.name"
+                        :worker-id="entity.client?.salesPersonFk"
                     />
                 </template>
             </VnLv>

src/pages/Ticket/Card/TicketNotes.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { ref, watch, computed, reactive } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CrudModel from 'components/CrudModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+
+import { useArrayData } from 'src/composables/useArrayData';
+
+const route = useRoute();
+const { t } = useI18n();
+const ticketNotesCrudRef = ref(null);
+const observationTypes = ref([]);
+const arrayData = useArrayData('TicketNotes');
+const { store } = arrayData;
+
+const crudModelFilter = reactive({
+    where: { ticketFk: route.params.id },
+    fields: ['id', 'ticketFk', 'observationTypeFk', 'description'],
+});
+
+const crudModelRequiredData = computed(() => ({ ticketFk: route.params.id }));
+
+watch(
+    () => route.params.id,
+    async () => {
+        crudModelFilter.where.ticketFk = route.params.id;
+        store.filter = crudModelFilter;
+        await ticketNotesCrudRef.value.reload();
+    }
+);
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => (observationTypes = data)"
+        auto-load
+        url="ObservationTypes"
+    />
+    <div class="flex justify-center">
+        <CrudModel
+            ref="ticketNotesCrudRef"
+            data-key="TicketNotes"
+            url="TicketObservations"
+            model="TicketNotes"
+            :filter="crudModelFilter"
+            :data-required="crudModelRequiredData"
+            :default-remove="false"
+            auto-load
+            style="max-width: 800px"
+        >
+            <template #body="{ rows }">
+                <QCard class="q-px-lg q-py-md">
+                    <div
+                        v-for="(row, index) in rows"
+                        :key="index"
+                        class="q-mb-md row items-center q-gutter-x-md"
+                    >
+                        <VnSelect
+                            :label="t('ticketNotes.observationType')"
+                            :options="observationTypes"
+                            hide-selected
+                            option-label="description"
+                            option-value="id"
+                            v-model="row.observationTypeFk"
+                            :disable="!!row.id"
+                        />
+                        <VnInput
+                            :label="t('ticketNotes.description')"
+                            v-model="row.description"
+                            class="col"
+                        />
+                        <QIcon
+                            name="delete"
+                            size="sm"
+                            class="cursor-pointer"
+                            color="primary"
+                            @click="ticketNotesCrudRef.remove([row])"
+                        >
+                            <QTooltip>
+                                {{ t('ticketNotes.removeNote') }}
+                            </QTooltip>
+                        </QIcon>
+                    </div>
+                    <VnRow v-if="observationTypes.length > rows.length">
+                        <QIcon
+                            name="add_circle"
+                            class="fill-icon-on-hover q-ml-md"
+                            size="sm"
+                            color="primary"
+                            @click="ticketNotesCrudRef.insert()"
+                        >
+                            <QTooltip>
+                                {{ t('ticketNotes.addNote') }}
+                            </QTooltip>
+                        </QIcon>
+                    </VnRow>
+                </QCard>
+            </template>
+        </CrudModel>
+    </div>
+</template>

src/pages/Ticket/locale/en.yml

@@ -1,3 +1,11 @@
+card:
+    search: Search tickets
+    searchInfo: You can search by ticket id or alias
+ticketNotes:
+    observationType: Observation type
+    description: Description
+    removeNote: Remove note
+    addNote: Add note
 ticketSale:
     id: Id
     visible: Visible
@@ -113,9 +121,6 @@ basicData:
     negativesConfirmMessage: Negatives are going to be generated, are you sure you want to advance all the lines?
     chooseAnOption: Choose an option
     unroutedTicket: The ticket has been unrouted
-card:
-    search: Search tickets
-    searchInfo: You can search by ticket id or alias
 purchaseRequest:
     id: Id
     description: Description

src/pages/Ticket/locale/es.yml

@@ -1,6 +1,11 @@
 card:
     search: Buscar tickets
     searchInfo: Buscar tickets por identificador o alias
+ticketNotes:
+    observationType: Tipo de observación
+    description: Descripción
+    removeNote: Quitar nota
+    addNote: Añadir nota
 purchaseRequest:
     Id: Id
     description: Descripción
@@ -112,8 +117,6 @@ futureTickets:
     moveTicketSuccess: Tickets movidos correctamente
     searchInfo: Buscar tickets por fecha
     futureTicket: Tickets a futuro
-Search ticket: Buscar tickets
-You can search by ticket id or alias: Puedes buscar por id o alias del ticket
 ticketSale:
     id: Id
     visible: Visible
@@ -138,3 +141,5 @@ ticketSale:
     shipped: F. Envío
     agency: Agencia
     address: Consignatario
+Search ticket: Buscar tickets
+You can search by ticket id or alias: Puedes buscar por id o alias del ticket

src/router/modules/ticket.js

@@ -19,6 +19,7 @@ export default {
             'TicketSale',
             'TicketLog',
             'TicketPurchaseRequest',
+            'TicketNotes',
         ],
     },
     children: [
@@ -147,6 +148,15 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
                 },
+                {
+                    path: 'observation',
+                    name: 'TicketNotes',
+                    meta: {
+                        title: 'notes',
+                        icon: 'vn:notes',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketNotes.vue'),
+                },
             ],
         },
     ],