From fb12d4ddc085b7f0de5a13c78bbb9ddfd586a88d Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 24 Jun 2024 17:24:36 -0300
Subject: [PATCH 1/8] WIP

---
 src/i18n/locale/en.yml                  |  5 +++++
 src/i18n/locale/es.yml                  |  5 +++++
 src/pages/Ticket/Card/TicketService.vue |  1 +
 src/pages/Ticket/locale/en.yml          |  8 ++++++++
 src/pages/Ticket/locale/es.yml          |  8 ++++++++
 src/router/modules/ticket.js            | 25 +++++++++++++++++++++++++
 6 files changed, 52 insertions(+)
 create mode 100644 src/pages/Ticket/Card/TicketService.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..347543092 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -443,6 +443,11 @@ ticket:
         sms: Sms
         notes: Notes
         sale: Sale
+<<<<<<< Updated upstream
+=======
+        dms: File management
+        services: Service
+>>>>>>> Stashed changes
     list:
         nickname: Nickname
         state: State
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index d03ee9d5c..3151d72bf 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -441,6 +441,11 @@ ticket:
         sms: Sms
         notes: Notas
         sale: Lineas del pedido
+<<<<<<< Updated upstream
+=======
+        dms: Gestión documental
+        service: Servicios
+>>>>>>> Stashed changes
     list:
         nickname: Alias
         state: Estado
diff --git a/src/pages/Ticket/Card/TicketService.vue b/src/pages/Ticket/Card/TicketService.vue
new file mode 100644
index 000000000..25e345de0
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketService.vue
@@ -0,0 +1 @@
+<template>Ticket service</template>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
new file mode 100644
index 000000000..b8c21600d
--- /dev/null
+++ b/src/pages/Ticket/locale/en.yml
@@ -0,0 +1,8 @@
+service:
+    pay: Pay
+    description: Description
+    quantity: Quantity
+    price: Price
+    removeService: Remove service
+    newService: New service type
+    addService: Add service
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 5348b29b9..a8ef0347b 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -1,2 +1,10 @@
+service:
+    pay: Abonar
+    description: Descripción
+    quantity: Cantidad
+    price: Precio
+    removeService: Quitar servicio
+    newService: Nuevo tipo de servicio
+    addService: Añadir servicio
 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..cbcc4b762 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -12,7 +12,11 @@ export default {
     redirect: { name: 'TicketMain' },
     menus: {
         main: ['TicketList'],
+<<<<<<< Updated upstream
         card: ['TicketBoxing', 'TicketSms', 'TicketSale'],
+=======
+        card: ['TicketBoxing', 'TicketSms', 'TicketSale', 'TicketDms', 'TicketService'],
+>>>>>>> Stashed changes
     },
     children: [
         {
@@ -93,6 +97,27 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
                 },
+<<<<<<< Updated upstream
+=======
+                {
+                    path: 'dms',
+                    name: 'TicketDms',
+                    meta: {
+                        title: 'dms',
+                        icon: 'cloud_upload',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketDms.vue'),
+                },
+                {
+                    path: 'service',
+                    name: 'TicketService',
+                    meta: {
+                        title: 'service',
+                        icon: 'cloud_upload',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketService.vue'),
+                },
+>>>>>>> Stashed changes
             ],
         },
     ],
-- 
2.40.1


From 8e538fb4638f705656d7544a3d2578373cffa3b5 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 25 Jun 2024 08:27:25 -0300
Subject: [PATCH 2/8] WIP

---
 src/i18n/locale/en.yml                        |   4 -
 src/i18n/locale/es.yml                        |   4 -
 .../Ticket/Card/TicketCreateServiceType.vue   |  49 +++++++
 src/pages/Ticket/Card/TicketService.vue       | 138 +++++++++++++++++-
 src/pages/Ticket/locale/en.yml                |   1 +
 src/pages/Ticket/locale/es.yml                |   1 +
 src/router/modules/ticket.js                  |  19 +--
 7 files changed, 190 insertions(+), 26 deletions(-)
 create mode 100644 src/pages/Ticket/Card/TicketCreateServiceType.vue

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 347543092..5e7b3621b 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -443,11 +443,7 @@ ticket:
         sms: Sms
         notes: Notes
         sale: Sale
-<<<<<<< Updated upstream
-=======
-        dms: File management
         services: Service
->>>>>>> Stashed changes
     list:
         nickname: Nickname
         state: State
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 3151d72bf..fd3dad952 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -441,11 +441,7 @@ ticket:
         sms: Sms
         notes: Notas
         sale: Lineas del pedido
-<<<<<<< Updated upstream
-=======
-        dms: Gestión documental
         service: Servicios
->>>>>>> Stashed changes
     list:
         nickname: Alias
         state: Estado
diff --git a/src/pages/Ticket/Card/TicketCreateServiceType.vue b/src/pages/Ticket/Card/TicketCreateServiceType.vue
new file mode 100644
index 000000000..d392ec206
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketCreateServiceType.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { reactive, ref, onMounted, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import VnRow from 'components/ui/VnRow.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
+
+const { t } = useI18n();
+const emit = defineEmits(['onDataSaved']);
+
+const nameInputRef = ref(null);
+const serviceFormData = reactive({});
+
+const onDataSaved = (formData, requestResponse) => {
+    emit('onDataSaved', formData, requestResponse);
+};
+
+onMounted(async () => {
+    await nextTick();
+    nameInputRef.value.focus();
+});
+</script>
+
+<template>
+    <FormModelPopup
+        url-create="TicketServiceTypes"
+        model="TicketServiceType"
+        :title="t('New service type')"
+        :form-initial-data="serviceFormData"
+        @on-data-saved="onDataSaved"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    ref="nameInputRef"
+                    :label="t('service.description')"
+                    v-model="data.name"
+                    :required="true"
+                />
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    New service type: Nuevo tipo de servicio
+</i18n>
diff --git a/src/pages/Ticket/Card/TicketService.vue b/src/pages/Ticket/Card/TicketService.vue
index 25e345de0..af2a5c664 100644
--- a/src/pages/Ticket/Card/TicketService.vue
+++ b/src/pages/Ticket/Card/TicketService.vue
@@ -1 +1,137 @@
-<template>Ticket service</template>
+<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 VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
+import FetchData from 'components/FetchData.vue';
+import TicketCreateServiceType from './TicketCreateServiceType.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+
+import { useArrayData } from 'src/composables/useArrayData';
+
+const route = useRoute();
+const { t } = useI18n();
+const ticketServiceTypeFetchRef = ref(null);
+const ticketServiceCrudRef = ref(null);
+const ticketServiceOptions = ref([]);
+const arrayData = useArrayData('TicketNotes');
+const { store } = arrayData;
+
+const selectedServices = ref(new Set());
+
+const toggleCheckSelection = (id) => {
+    if (selectedServices.value.has(id)) selectedServices.value.delete(id);
+    else selectedServices.value.add(id);
+};
+
+const crudModelFilter = computed(() => ({
+    where: { ticketFk: route.params.id },
+}));
+
+const crudModelRequiredData = computed(() => ({ ticketFk: route.params.id }));
+
+watch(
+    () => route.params.id,
+    async () => {
+        store.filter = crudModelFilter.value;
+        await ticketServiceCrudRef.value.reload();
+    }
+);
+</script>
+
+<template>
+    <FetchData
+        ref="ticketServiceTypeFetchRef"
+        @on-fetch="(data) => (ticketServiceOptions = data)"
+        auto-load
+        url="TicketServiceTypes"
+    />
+    <!-- <Teleport v-if="" to="#st-actions">
+        <QBtn
+            color="primary"
+            :label="t('service.pay')"
+            :disabled="!selectedServices.size"
+            @click.stop="viewAddObservation(selected)"
+        />
+    </Teleport> -->
+    <CrudModel
+        ref="ticketServiceCrudRef"
+        data-key="TicketService"
+        url="TicketServices"
+        model="TicketService"
+        :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"
+                >
+                    <QCheckbox
+                        size="sm"
+                        @update:model-value="toggleCheckSelection(row.id)"
+                        :model-value="selectedServices.has(row.id)"
+                        :toggle-indeterminate="false"
+                    />
+                    <VnSelectDialog
+                        :label="t('service.description')"
+                        v-model="row.ticketServiceTypeFk"
+                        :options="ticketServiceOptions"
+                        option-label="name"
+                        option-value="id"
+                        hide-selected
+                    >
+                        <template #form>
+                            <TicketCreateServiceType
+                                @on-data-saved="ticketServiceTypeFetchRef.fetch()"
+                            />
+                        </template>
+                    </VnSelectDialog>
+                    <VnInput
+                        :label="t('service.quantity')"
+                        v-model="row.quantity"
+                        type="number"
+                        min="0"
+                        :info="t('service.quantityInfo')"
+                    />
+                    <VnInput
+                        :label="t('service.price')"
+                        v-model="row.price"
+                        type="number"
+                        min="0"
+                    />
+                    <QIcon
+                        name="delete"
+                        size="sm"
+                        class="cursor-pointer"
+                        color="primary"
+                        @click="ticketServiceCrudRef.remove([row])"
+                    >
+                        <QTooltip>
+                            {{ t('service.removeNote') }}
+                        </QTooltip>
+                    </QIcon>
+                </div>
+                <QIcon
+                    name="add_circle"
+                    class="fill-icon-on-hover q-ml-md"
+                    size="sm"
+                    color="primary"
+                    @click="ticketServiceCrudRef.insert()"
+                >
+                    <QTooltip>
+                        {{ t('service.addService') }}
+                    </QTooltip>
+                </QIcon>
+            </QCard>
+        </template>
+    </CrudModel>
+    <pre>checkeds: {{ selectedServices }}</pre>
+</template>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index b8c21600d..ff928c492 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -6,3 +6,4 @@ service:
     removeService: Remove service
     newService: New service type
     addService: Add service
+    quantityInfo: To create services with negative amounts mark the service on the source ticket and press the pay button.
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index a8ef0347b..f1326e502 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -6,5 +6,6 @@ service:
     removeService: Quitar servicio
     newService: Nuevo tipo de servicio
     addService: Añadir servicio
+    quantityInfo: Para crear sevicios con cantidades negativas marcar servicio en el ticket origen y apretar el boton abonar.
 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 cbcc4b762..eadaa1cab 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -12,11 +12,7 @@ export default {
     redirect: { name: 'TicketMain' },
     menus: {
         main: ['TicketList'],
-<<<<<<< Updated upstream
-        card: ['TicketBoxing', 'TicketSms', 'TicketSale'],
-=======
-        card: ['TicketBoxing', 'TicketSms', 'TicketSale', 'TicketDms', 'TicketService'],
->>>>>>> Stashed changes
+        card: ['TicketBoxing', 'TicketSms', 'TicketSale', 'TicketService'],
     },
     children: [
         {
@@ -97,17 +93,7 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
                 },
-<<<<<<< Updated upstream
-=======
-                {
-                    path: 'dms',
-                    name: 'TicketDms',
-                    meta: {
-                        title: 'dms',
-                        icon: 'cloud_upload',
-                    },
-                    component: () => import('src/pages/Ticket/Card/TicketDms.vue'),
-                },
+
                 {
                     path: 'service',
                     name: 'TicketService',
@@ -117,7 +103,6 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketService.vue'),
                 },
->>>>>>> Stashed changes
             ],
         },
     ],
-- 
2.40.1


From a57df459a6be01d2e312ff16477aa3be95143745 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 25 Jun 2024 12:54:21 -0300
Subject: [PATCH 3/8] Add pay button

---
 src/pages/Ticket/Card/TicketService.vue | 39 +++++++++++++++++++++----
 src/pages/Ticket/locale/en.yml          |  1 +
 src/pages/Ticket/locale/es.yml          |  1 +
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/pages/Ticket/Card/TicketService.vue b/src/pages/Ticket/Card/TicketService.vue
index af2a5c664..f071c7baa 100644
--- a/src/pages/Ticket/Card/TicketService.vue
+++ b/src/pages/Ticket/Card/TicketService.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, watch, computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
 import CrudModel from 'components/CrudModel.vue';
@@ -8,17 +8,22 @@ import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import FetchData from 'components/FetchData.vue';
 import TicketCreateServiceType from './TicketCreateServiceType.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 import { useArrayData } from 'src/composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+import useNotify from 'src/composables/useNotify.js';
+import axios from 'axios';
 
+const stateStore = useStateStore();
 const route = useRoute();
+const router = useRouter();
 const { t } = useI18n();
 const ticketServiceTypeFetchRef = ref(null);
 const ticketServiceCrudRef = ref(null);
 const ticketServiceOptions = ref([]);
 const arrayData = useArrayData('TicketNotes');
 const { store } = arrayData;
+const { notify } = useNotify();
 
 const selectedServices = ref(new Set());
 
@@ -40,6 +45,29 @@ watch(
         await ticketServiceCrudRef.value.reload();
     }
 );
+
+const createRefund = async () => {
+    try {
+        if (!selectedServices.value.size) return;
+
+        const params = {
+            servicesIds: Array.from(selectedServices.value),
+            withWarehouse: false,
+            negative: true,
+        };
+        const { data } = await axios.post('Sales/clone', params);
+        const [refundTicket] = data;
+        notify(
+            t('service.createRefundSuccess', {
+                ticketId: refundTicket.id,
+            }),
+            'positive'
+        );
+        router.push({ name: 'TicketSale', params: { id: refundTicket.id } });
+    } catch (error) {
+        console.error(error);
+    }
+};
 </script>
 
 <template>
@@ -49,14 +77,14 @@ watch(
         auto-load
         url="TicketServiceTypes"
     />
-    <!-- <Teleport v-if="" to="#st-actions">
+    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
         <QBtn
             color="primary"
             :label="t('service.pay')"
             :disabled="!selectedServices.size"
-            @click.stop="viewAddObservation(selected)"
+            @click.stop="createRefund()"
         />
-    </Teleport> -->
+    </Teleport>
     <CrudModel
         ref="ticketServiceCrudRef"
         data-key="TicketService"
@@ -133,5 +161,4 @@ watch(
             </QCard>
         </template>
     </CrudModel>
-    <pre>checkeds: {{ selectedServices }}</pre>
 </template>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index ff928c492..9162ca945 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -7,3 +7,4 @@ service:
     newService: New service type
     addService: Add service
     quantityInfo: To create services with negative amounts mark the service on the source ticket and press the pay button.
+    createRefundSuccess: 'The following refund ticket have been created: { ticketId }'
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index f1326e502..bb02a946f 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -7,5 +7,6 @@ service:
     newService: Nuevo tipo de servicio
     addService: Añadir servicio
     quantityInfo: Para crear sevicios con cantidades negativas marcar servicio en el ticket origen y apretar el boton abonar.
+    createRefundSuccess: 'Se ha creado siguiente ticket de abono: { ticketId }'
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket
-- 
2.40.1


From db4c3a67995926291f81426e18655c478b182a08 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 27 Jun 2024 11:46:31 -0300
Subject: [PATCH 4/8] Changes

---
 src/i18n/locale/es.yml                  |   2 +-
 src/pages/Ticket/Card/TicketService.vue | 164 ++++++++++++++----------
 src/router/modules/ticket.js            |   4 +-
 3 files changed, 97 insertions(+), 73 deletions(-)

diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index fd3dad952..d528dbb7d 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -441,7 +441,7 @@ ticket:
         sms: Sms
         notes: Notas
         sale: Lineas del pedido
-        service: Servicios
+        services: Servicios
     list:
         nickname: Alias
         state: Estado
diff --git a/src/pages/Ticket/Card/TicketService.vue b/src/pages/Ticket/Card/TicketService.vue
index f071c7baa..bacad697e 100644
--- a/src/pages/Ticket/Card/TicketService.vue
+++ b/src/pages/Ticket/Card/TicketService.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -26,6 +26,7 @@ const { store } = arrayData;
 const { notify } = useNotify();
 
 const selectedServices = ref(new Set());
+const defaultTaxClass = ref(null);
 
 const toggleCheckSelection = (id) => {
     if (selectedServices.value.has(id)) selectedServices.value.delete(id);
@@ -36,7 +37,10 @@ const crudModelFilter = computed(() => ({
     where: { ticketFk: route.params.id },
 }));
 
-const crudModelRequiredData = computed(() => ({ ticketFk: route.params.id }));
+const crudModelRequiredData = computed(() => ({
+    ticketFk: route.params.id,
+    taxClassFk: defaultTaxClass.value?.id,
+}));
 
 watch(
     () => route.params.id,
@@ -68,6 +72,23 @@ const createRefund = async () => {
         console.error(error);
     }
 };
+
+const getDefaultTaxClass = async () => {
+    try {
+        let filter = {
+            where: { code: 'G' },
+        };
+        const { data } = await axios.get('TaxClasses/findOne', {
+            params: { filter: JSON.stringify(filter) },
+        });
+        defaultTaxClass.value = data;
+        console.log('defaultTaxClass', defaultTaxClass.value);
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+onMounted(async () => await getDefaultTaxClass());
 </script>
 
 <template>
@@ -85,80 +106,83 @@ const createRefund = async () => {
             @click.stop="createRefund()"
         />
     </Teleport>
-    <CrudModel
-        ref="ticketServiceCrudRef"
-        data-key="TicketService"
-        url="TicketServices"
-        model="TicketService"
-        :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"
-                >
-                    <QCheckbox
-                        size="sm"
-                        @update:model-value="toggleCheckSelection(row.id)"
-                        :model-value="selectedServices.has(row.id)"
-                        :toggle-indeterminate="false"
-                    />
-                    <VnSelectDialog
-                        :label="t('service.description')"
-                        v-model="row.ticketServiceTypeFk"
-                        :options="ticketServiceOptions"
-                        option-label="name"
-                        option-value="id"
-                        hide-selected
+    <div class="flex justify-center">
+        <CrudModel
+            ref="ticketServiceCrudRef"
+            data-key="TicketService"
+            url="TicketServices"
+            model="TicketService"
+            :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"
                     >
-                        <template #form>
-                            <TicketCreateServiceType
-                                @on-data-saved="ticketServiceTypeFetchRef.fetch()"
-                            />
-                        </template>
-                    </VnSelectDialog>
-                    <VnInput
-                        :label="t('service.quantity')"
-                        v-model="row.quantity"
-                        type="number"
-                        min="0"
-                        :info="t('service.quantityInfo')"
-                    />
-                    <VnInput
-                        :label="t('service.price')"
-                        v-model="row.price"
-                        type="number"
-                        min="0"
-                    />
+                        <QCheckbox
+                            size="sm"
+                            @update:model-value="toggleCheckSelection(row.id)"
+                            :model-value="selectedServices.has(row.id)"
+                            :toggle-indeterminate="false"
+                        />
+                        <VnSelectDialog
+                            :label="t('service.description')"
+                            v-model="row.ticketServiceTypeFk"
+                            :options="ticketServiceOptions"
+                            option-label="name"
+                            option-value="id"
+                            hide-selected
+                        >
+                            <template #form>
+                                <TicketCreateServiceType
+                                    @on-data-saved="ticketServiceTypeFetchRef.fetch()"
+                                />
+                            </template>
+                        </VnSelectDialog>
+                        <VnInput
+                            :label="t('service.quantity')"
+                            v-model.number="row.quantity"
+                            type="number"
+                            min="0"
+                            :info="t('service.quantityInfo')"
+                        />
+                        <VnInput
+                            :label="t('service.price')"
+                            v-model.number="row.price"
+                            type="number"
+                            min="0"
+                        />
+                        <QIcon
+                            name="delete"
+                            size="sm"
+                            class="cursor-pointer"
+                            color="primary"
+                            @click="ticketServiceCrudRef.remove([row])"
+                        >
+                            <QTooltip>
+                                {{ t('service.removeNote') }}
+                            </QTooltip>
+                        </QIcon>
+                    </div>
                     <QIcon
-                        name="delete"
+                        name="add_circle"
+                        class="fill-icon-on-hover q-ml-md"
                         size="sm"
-                        class="cursor-pointer"
                         color="primary"
-                        @click="ticketServiceCrudRef.remove([row])"
+                        @click="ticketServiceCrudRef.insert()"
                     >
                         <QTooltip>
-                            {{ t('service.removeNote') }}
+                            {{ t('service.addService') }}
                         </QTooltip>
                     </QIcon>
-                </div>
-                <QIcon
-                    name="add_circle"
-                    class="fill-icon-on-hover q-ml-md"
-                    size="sm"
-                    color="primary"
-                    @click="ticketServiceCrudRef.insert()"
-                >
-                    <QTooltip>
-                        {{ t('service.addService') }}
-                    </QTooltip>
-                </QIcon>
-            </QCard>
-        </template>
-    </CrudModel>
+                </QCard>
+            </template>
+        </CrudModel>
+    </div>
 </template>
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index eadaa1cab..ceada90a8 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -98,8 +98,8 @@ export default {
                     path: 'service',
                     name: 'TicketService',
                     meta: {
-                        title: 'service',
-                        icon: 'cloud_upload',
+                        title: 'services',
+                        icon: 'vn:services',
                     },
                     component: () => import('src/pages/Ticket/Card/TicketService.vue'),
                 },
-- 
2.40.1


From 128303939b5d73cdc16b9189f1a28be383f5dd5e Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 1 Jul 2024 07:41:58 +0200
Subject: [PATCH 5/8] fix(ticket router): typo

---
 src/router/modules/ticket.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index c13801fc5..5c03366e0 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -19,7 +19,6 @@ export default {
             'TicketSale',
             'TicketLog',
             'TicketPurchaseRequest',
-            ,
             'TicketService',
         ],
     },
-- 
2.40.1


From 7b9e26528a324475dcdf59bb974e0610f9b104d7 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 1 Jul 2024 08:08:41 +0200
Subject: [PATCH 6/8] feat(TicketService): use correct format

---
 src/pages/Ticket/Card/TicketService.vue | 145 ++++++++++++------------
 1 file changed, 74 insertions(+), 71 deletions(-)

diff --git a/src/pages/Ticket/Card/TicketService.vue b/src/pages/Ticket/Card/TicketService.vue
index bacad697e..5d9688834 100644
--- a/src/pages/Ticket/Card/TicketService.vue
+++ b/src/pages/Ticket/Card/TicketService.vue
@@ -10,17 +10,16 @@ import TicketCreateServiceType from './TicketCreateServiceType.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 import { useArrayData } from 'src/composables/useArrayData';
-import { useStateStore } from 'stores/useStateStore';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 
-const stateStore = useStateStore();
 const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
 const ticketServiceTypeFetchRef = ref(null);
 const ticketServiceCrudRef = ref(null);
 const ticketServiceOptions = ref([]);
+const selected = ref([]);
 const arrayData = useArrayData('TicketNotes');
 const { store } = arrayData;
 const { notify } = useNotify();
@@ -28,11 +27,6 @@ const { notify } = useNotify();
 const selectedServices = ref(new Set());
 const defaultTaxClass = ref(null);
 
-const toggleCheckSelection = (id) => {
-    if (selectedServices.value.has(id)) selectedServices.value.delete(id);
-    else selectedServices.value.add(id);
-};
-
 const crudModelFilter = computed(() => ({
     where: { ticketFk: route.params.id },
 }));
@@ -50,6 +44,8 @@ watch(
     }
 );
 
+onMounted(async () => await getDefaultTaxClass());
+
 const createRefund = async () => {
     try {
         if (!selectedServices.value.size) return;
@@ -88,7 +84,29 @@ const getDefaultTaxClass = async () => {
     }
 };
 
-onMounted(async () => await getDefaultTaxClass());
+const columns = computed(() => [
+    {
+        name: 'description',
+        label: t('service.description'),
+        field: (row) => row.ticketServiceTypeFk,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'quantity',
+        label: t('service.quantity'),
+        field: (row) => row.quantity,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'price',
+        label: t('service.price'),
+        field: (row) => row.price,
+        sortable: true,
+        align: 'left',
+    },
+]);
 </script>
 
 <template>
@@ -98,41 +116,37 @@ onMounted(async () => await getDefaultTaxClass());
         auto-load
         url="TicketServiceTypes"
     />
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-        <QBtn
-            color="primary"
-            :label="t('service.pay')"
-            :disabled="!selectedServices.size"
-            @click.stop="createRefund()"
-        />
-    </Teleport>
-    <div class="flex justify-center">
-        <CrudModel
-            ref="ticketServiceCrudRef"
-            data-key="TicketService"
-            url="TicketServices"
-            model="TicketService"
-            :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"
-                    >
-                        <QCheckbox
-                            size="sm"
-                            @update:model-value="toggleCheckSelection(row.id)"
-                            :model-value="selectedServices.has(row.id)"
-                            :toggle-indeterminate="false"
-                        />
+    <CrudModel
+        ref="ticketServiceCrudRef"
+        data-key="TicketService"
+        url="TicketServices"
+        model="TicketService"
+        :filter="crudModelFilter"
+        :data-required="crudModelRequiredData"
+        auto-load
+        v-model:selected="selected"
+    >
+        <template #moreBeforeActions>
+            <QBtn
+                color="primary"
+                :label="t('service.pay')"
+                :disabled="!selectedServices.size"
+                @click.stop="createRefund()"
+            />
+        </template>
+        <template #body="{ rows }">
+            <QTable
+                :columns="columns"
+                :rows="rows"
+                row-key="$index"
+                selection="multiple"
+                v-model:selected="selected"
+                table-header-class="text-left"
+            >
+                <template #body-cell-description="{ row, col }">
+                    <QTd auto-width>
                         <VnSelectDialog
-                            :label="t('service.description')"
+                            :label="col.label"
                             v-model="row.ticketServiceTypeFk"
                             :options="ticketServiceOptions"
                             option-label="name"
@@ -145,44 +159,33 @@ onMounted(async () => await getDefaultTaxClass());
                                 />
                             </template>
                         </VnSelectDialog>
+                    </QTd>
+                </template>
+                <template #body-cell-quantity="{ row, col }">
+                    <QTd auto-width>
                         <VnInput
-                            :label="t('service.quantity')"
+                            :label="col.label"
                             v-model.number="row.quantity"
                             type="number"
                             min="0"
                             :info="t('service.quantityInfo')"
                         />
+                    </QTd>
+                </template>
+                <template #body-cell-price="{ row, col }">
+                    <QTd auto-width>
                         <VnInput
-                            :label="t('service.price')"
+                            :label="col.label"
                             v-model.number="row.price"
                             type="number"
                             min="0"
                         />
-                        <QIcon
-                            name="delete"
-                            size="sm"
-                            class="cursor-pointer"
-                            color="primary"
-                            @click="ticketServiceCrudRef.remove([row])"
-                        >
-                            <QTooltip>
-                                {{ t('service.removeNote') }}
-                            </QTooltip>
-                        </QIcon>
-                    </div>
-                    <QIcon
-                        name="add_circle"
-                        class="fill-icon-on-hover q-ml-md"
-                        size="sm"
-                        color="primary"
-                        @click="ticketServiceCrudRef.insert()"
-                    >
-                        <QTooltip>
-                            {{ t('service.addService') }}
-                        </QTooltip>
-                    </QIcon>
-                </QCard>
-            </template>
-        </CrudModel>
-    </div>
+                    </QTd>
+                </template>
+            </QTable>
+        </template>
+    </CrudModel>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn fab color="primary" icon="add" @click="ticketServiceCrudRef.insert()" />
+    </QPageSticky>
 </template>
-- 
2.40.1


From 3b18375cdbc1417e7080584b0dbba15463b47d46 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 1 Jul 2024 08:13:49 +0200
Subject: [PATCH 7/8] fix(TicketService): pay use selected

---
 src/pages/Ticket/Card/TicketService.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/pages/Ticket/Card/TicketService.vue b/src/pages/Ticket/Card/TicketService.vue
index 5d9688834..1ec072dd2 100644
--- a/src/pages/Ticket/Card/TicketService.vue
+++ b/src/pages/Ticket/Card/TicketService.vue
@@ -19,12 +19,11 @@ const { t } = useI18n();
 const ticketServiceTypeFetchRef = ref(null);
 const ticketServiceCrudRef = ref(null);
 const ticketServiceOptions = ref([]);
-const selected = ref([]);
 const arrayData = useArrayData('TicketNotes');
 const { store } = arrayData;
 const { notify } = useNotify();
 
-const selectedServices = ref(new Set());
+const selected = ref([]);
 const defaultTaxClass = ref(null);
 
 const crudModelFilter = computed(() => ({
@@ -48,10 +47,10 @@ onMounted(async () => await getDefaultTaxClass());
 
 const createRefund = async () => {
     try {
-        if (!selectedServices.value.size) return;
+        if (!selected.value.length) return;
 
         const params = {
-            servicesIds: Array.from(selectedServices.value),
+            servicesIds: selected.value.map((s) => s.id),
             withWarehouse: false,
             negative: true,
         };
@@ -130,7 +129,7 @@ const columns = computed(() => [
             <QBtn
                 color="primary"
                 :label="t('service.pay')"
-                :disabled="!selectedServices.size"
+                :disabled="!selected.length"
                 @click.stop="createRefund()"
             />
         </template>
-- 
2.40.1


From ae713213394796e34ba0d4a5cf0007fa986eac5b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 1 Jul 2024 14:43:39 +0200
Subject: [PATCH 8/8] fix: map selected

---
 src/pages/Ticket/Card/TicketService.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Ticket/Card/TicketService.vue b/src/pages/Ticket/Card/TicketService.vue
index 1ec072dd2..4cc8207ef 100644
--- a/src/pages/Ticket/Card/TicketService.vue
+++ b/src/pages/Ticket/Card/TicketService.vue
@@ -50,7 +50,7 @@ const createRefund = async () => {
         if (!selected.value.length) return;
 
         const params = {
-            servicesIds: selected.value.map((s) => s.id),
+            servicesIds: selected.value.map((s) => +s.ticketFk),
             withWarehouse: false,
             negative: true,
         };
-- 
2.40.1