From 17e9d95702e562b5c721b9f66c47c07fda4de482 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 24 Jun 2024 09:02:29 -0300
Subject: [PATCH 1/3] Ticket notes

---
 src/i18n/locale/en.yml                |   1 +
 src/i18n/locale/es.yml                |   1 +
 src/pages/Ticket/Card/TicketCard.vue  |  24 ++++--
 src/pages/Ticket/Card/TicketNotes.vue | 102 ++++++++++++++++++++++++++
 src/pages/Ticket/locale/en.yml        |   8 ++
 src/pages/Ticket/locale/es.yml        |   8 ++
 src/router/modules/ticket.js          |  11 ++-
 7 files changed, 148 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/Ticket/Card/TicketNotes.vue
 create mode 100644 src/pages/Ticket/locale/en.yml

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index b3a85eefa..996ead262 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -443,6 +443,7 @@ ticket:
         sms: Sms
         notes: Notes
         sale: Sale
+        observation: Notes
     list:
         nickname: Nickname
         state: State
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index d03ee9d5c..8358953eb 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -441,6 +441,7 @@ ticket:
         sms: Sms
         notes: Notas
         sale: Lineas del pedido
+        observation: Notas
     list:
         nickname: Alias
         state: Estado
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 04363b506..a75cacd6c 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -1,17 +1,29 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { computed } from 'vue';
+
 import VnCard from 'components/common/VnCard.vue';
 import TicketDescriptor from './TicketDescriptor.vue';
 import TicketFilter from '../TicketFilter.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const routeName = computed(() => route.name);
+const searchBarDataKeys = {
+    TicketSummary: 'TicketSummary',
+    TicketNotes: 'TicketNotes',
+};
 </script>
 <template>
     <VnCard
         data-key="Ticket"
-        base-url="Tickets"
-        :descriptor="TicketDescriptor"
         :filter-panel="TicketFilter"
-        search-data-key="TicketList"
-        search-url="Tickets/filter"
-        searchbar-label="Search ticket"
-        searchbar-info="You can search by ticket id or alias"
+        :descriptor="TicketDescriptor"
+        :search-data-key="searchBarDataKeys[routeName]"
+        :search-custom-route-redirect="routeName"
+        :searchbar-label="t('card.search')"
+        :searchbar-info="t('card.searchInfo')"
     />
 </template>
diff --git a/src/pages/Ticket/Card/TicketNotes.vue b/src/pages/Ticket/Card/TicketNotes.vue
new file mode 100644
index 000000000..732395584
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketNotes.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { ref, watch, computed } 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 = computed(() => ({
+    where: { ticketFk: route.params.id },
+    fields: ['id', 'ticketFk', 'observationTypeFk', 'description'],
+}));
+
+const crudModelRequiredData = computed(() => ({ ticketFk: route.params.id }));
+
+watch(
+    () => route.params.id,
+    async () => {
+        store.filter = crudModelFilter.value;
+        await ticketNotesCrudRef.value.reload();
+    }
+);
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => (observationTypes = data)"
+        auto-load
+        url="ObservationTypes"
+    />
+    <CrudModel
+        ref="ticketNotesCrudRef"
+        data-key="TicketNotes"
+        url="TicketObservations"
+        model="TicketNotes"
+        :filter="crudModelFilter"
+        :data-required="crudModelRequiredData"
+        :default-remove="false"
+        auto-load
+    >
+        <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>
+</template>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
new file mode 100644
index 000000000..087102a07
--- /dev/null
+++ b/src/pages/Ticket/locale/en.yml
@@ -0,0 +1,8 @@
+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
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 5348b29b9..d596fa217 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -1,2 +1,10 @@
+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
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index 6cb7291dc..a69a92e84 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -12,7 +12,7 @@ export default {
     redirect: { name: 'TicketMain' },
     menus: {
         main: ['TicketList'],
-        card: ['TicketBoxing', 'TicketSms', 'TicketSale'],
+        card: ['TicketBoxing', 'TicketSms', 'TicketSale', 'TicketNotes'],
     },
     children: [
         {
@@ -93,6 +93,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'),
+                },
             ],
         },
     ],

From cd01ba8fe1b90a1abfac8e97660a90f13a6b4d15 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 26 Jun 2024 08:36:17 -0300
Subject: [PATCH 2/3] changes

---
 src/pages/Ticket/Card/TicketNotes.vue | 119 +++++++++++++-------------
 1 file changed, 61 insertions(+), 58 deletions(-)

diff --git a/src/pages/Ticket/Card/TicketNotes.vue b/src/pages/Ticket/Card/TicketNotes.vue
index 732395584..747955e6d 100644
--- a/src/pages/Ticket/Card/TicketNotes.vue
+++ b/src/pages/Ticket/Card/TicketNotes.vue
@@ -40,63 +40,66 @@ watch(
         auto-load
         url="ObservationTypes"
     />
-    <CrudModel
-        ref="ticketNotesCrudRef"
-        data-key="TicketNotes"
-        url="TicketObservations"
-        model="TicketNotes"
-        :filter="crudModelFilter"
-        :data-required="crudModelRequiredData"
-        :default-remove="false"
-        auto-load
-    >
-        <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])"
+    <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"
                     >
-                        <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>
+                        <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>

From ae73dd047f214d8dcf94882602338898a4209c35 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 26 Jun 2024 08:55:30 -0300
Subject: [PATCH 3/3] changes

---
 src/pages/Ticket/Card/TicketCard.vue       | 1 -
 src/pages/Ticket/Card/TicketDescriptor.vue | 8 ++++----
 src/pages/Ticket/Card/TicketNotes.vue      | 9 +++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 62b112d5d..689a717e6 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -13,7 +13,6 @@ const route = useRoute();
 const routeName = computed(() => route.name);
 const searchBarDataKeys = {
     TicketSummary: 'TicketSummary',
-    TicketNotes: 'TicketNotes',
     TicketSale: 'TicketSale',
     TicketPurchaseRequest: 'TicketPurchaseRequest',
 };
diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue
index dfbcfc106..5fb312b28 100644
--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/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>
diff --git a/src/pages/Ticket/Card/TicketNotes.vue b/src/pages/Ticket/Card/TicketNotes.vue
index 747955e6d..cfc0c2431 100644
--- a/src/pages/Ticket/Card/TicketNotes.vue
+++ b/src/pages/Ticket/Card/TicketNotes.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, reactive } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -18,17 +18,18 @@ const observationTypes = ref([]);
 const arrayData = useArrayData('TicketNotes');
 const { store } = arrayData;
 
-const crudModelFilter = computed(() => ({
+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 () => {
-        store.filter = crudModelFilter.value;
+        crudModelFilter.where.ticketFk = route.params.id;
+        store.filter = crudModelFilter;
         await ticketNotesCrudRef.value.reload();
     }
 );