Ticket notes

src/i18n/locale/en.yml

@@ -443,6 +443,7 @@ ticket:
         sms: Sms
         notes: Notes
         sale: Sale
+        observation: Notes
     list:
         nickname: Nickname
         state: State

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

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"
+        :descriptor="TicketDescriptor"
-        search-url="Tickets/filter"
+        :search-data-key="searchBarDataKeys[routeName]"
-        searchbar-label="Search ticket"
+        :search-custom-route-redirect="routeName"
-        searchbar-info="You can search by ticket id or alias"
+        :searchbar-label="t('card.search')"
+        :searchbar-info="t('card.searchInfo')"
     />
 </template>

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>

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

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

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'),
+                },
             ],
         },
     ],