From c807b5feb278c6918bec7f02189d226c5810f9ee Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 17 Jun 2024 08:21:43 -0300
Subject: [PATCH 01/21] Weekly tickets

---
 src/i18n/locale/en.yml            |   1 +
 src/i18n/locale/es.yml            |   1 +
 src/pages/Ticket/TicketWeekly.vue | 327 ++++++++++++++++++++++++++++++
 src/pages/Ticket/locale/en.yml    |   9 +
 src/pages/Ticket/locale/es.yml    |   9 +
 src/router/modules/ticket.js      |  11 +-
 6 files changed, 357 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Ticket/TicketWeekly.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 5ef3a5472..7f212ca30 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -442,6 +442,7 @@ ticket:
         sms: Sms
         notes: Notes
         sale: Sale
+        weeklyTickets: Weekly tickets
     list:
         nickname: Nickname
         state: State
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index cfadd57b3..ff357492b 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -440,6 +440,7 @@ ticket:
         sms: Sms
         notes: Notas
         sale: Lineas del pedido
+        weeklyTickets: Tickets programados
     list:
         nickname: Alias
         state: Estado
diff --git a/src/pages/Ticket/TicketWeekly.vue b/src/pages/Ticket/TicketWeekly.vue
new file mode 100644
index 000000000..50b4c0451
--- /dev/null
+++ b/src/pages/Ticket/TicketWeekly.vue
@@ -0,0 +1,327 @@
+<script setup>
+import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { dashIfEmpty } from 'src/filters';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import { useArrayData } from 'composables/useArrayData';
+import useNotify from 'src/composables/useNotify.js';
+import axios from 'axios';
+
+const router = useRouter();
+const stateStore = useStateStore();
+const { t } = useI18n();
+const { openConfirmationModal } = useVnConfirm();
+const { notify } = useNotify();
+
+const paginateRef = ref(null);
+const agencyModesOptions = ref([]);
+const visibleColumns = ref([]);
+const allColumnNames = ref([]);
+
+const arrayData = useArrayData('WeeklyTickets');
+const { store } = arrayData;
+
+const weekdays = [
+    { id: 0, name: t('weekdays.mon') },
+    { id: 1, name: t('weekdays.tue') },
+    { id: 2, name: t('weekdays.wed') },
+    { id: 3, name: t('weekdays.thu') },
+    { id: 4, name: t('weekdays.fri') },
+    { id: 5, name: t('weekdays.sat') },
+    { id: 6, name: t('weekdays.sun') },
+];
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'clientName':
+            return { 'c.name': value };
+        case 'nickName':
+            return { 'u.name': value };
+    }
+};
+
+const params = reactive({});
+
+const applyColumnFilter = async (col) => {
+    try {
+        const paramKey = col.columnFilter?.filterParamKey || col.field;
+        params[paramKey] = col.columnFilter.filterValue;
+        console.log('paramKey', paramKey, 'params', params);
+        await paginateRef.value.addFilter(null, params);
+    } catch (err) {
+        console.error('Error applying column filter', err);
+    }
+};
+
+const getInputEvents = (col) => ({ 'update:modelValue': () => applyColumnFilter(col) });
+
+const columns = computed(() => [
+    {
+        label: t('weeklyTickets.id'),
+        name: 'id',
+        field: 'ticketFk',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+    },
+    {
+        label: t('weeklyTickets.client'),
+        name: 'client',
+        field: 'clientName',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('weeklyTickets.shipment'),
+        name: 'shipment',
+        field: 'weekDay',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+    },
+    {
+        label: t('weeklyTickets.agency'),
+        name: 'agency',
+        field: 'agencyModeFk',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+    },
+    {
+        label: t('weeklyTickets.warehouse'),
+        name: 'warehouse',
+        field: 'warehouseName',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+    },
+    {
+        label: t('weeklyTickets.salesperson'),
+        field: 'salesperson',
+        name: 'salesperson',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            filterParamKey: 'nickName',
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: '',
+        name: 'actions',
+        align: 'left',
+        columnFilter: null,
+    },
+]);
+
+const redirectToTicketSummary = (ticketFk) =>
+    router.push({ name: 'TicketSummary', params: { id: ticketFk } });
+
+const deleteWeekly = async (ticketFk) => {
+    try {
+        await axios.delete(`TicketWeeklies/${ticketFk}`);
+        notify(t('globals.dataSaved'), 'positive');
+        const ticketIndex = store.data.findIndex((e) => e.ticketFk == ticketFk);
+        store.data.splice(ticketIndex, 1);
+    } catch (err) {
+        console.error('Error deleting weekly', err);
+    }
+};
+
+const onUpdate = async (ticketFk, field, value) => {
+    try {
+        const params = { ticketFk, [field]: value };
+        await axios.patch('TicketWeeklies', params);
+    } catch (err) {
+        console.error('Error updating weekly', err);
+    }
+};
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+    const filteredColumns = columns.value.filter((col) => col.name !== 'actions');
+    allColumnNames.value = filteredColumns.map((col) => col.name);
+});
+
+onUnmounted(() => (stateStore.rightDrawer = false));
+</script>
+
+<template>
+    <FetchData
+        url="AgencyModes/isActive"
+        :filter="{ fields: ['id', 'name'], order: 'name' }"
+        auto-load
+        @on-fetch="(data) => (agencyModesOptions = data)"
+    />
+    <VnSearchbar
+        data-key="WeeklyTickets"
+        :label="t('weeklyTickets.search')"
+        :info="t('weeklyTickets.searchInfo')"
+    />
+    <VnSubToolbar>
+        <template #st-data>
+            <TableVisibleColumns
+                :all-columns="allColumnNames"
+                table-code="itemsIndex"
+                labels-traductions-path="weeklyTickets"
+                @on-config-saved="visibleColumns = [...$event, 'actions']"
+            />
+        </template>
+    </VnSubToolbar>
+    <QPage class="column items-center q-pa-md">
+        <VnPaginate
+            ref="paginateRef"
+            data-key="WeeklyTickets"
+            url="TicketWeeklies/filter"
+            :order="['weekDay', 'ticketFk']"
+            :limit="20"
+            :expr-builder="exprBuilder"
+            :user-params="params"
+            :offset="50"
+            auto-load
+        >
+            <template #body="{ rows }">
+                <QTable
+                    :rows="rows"
+                    :columns="columns"
+                    row-key="id"
+                    :pagination="{ rowsPerPage: 0 }"
+                    class="full-width q-mt-md"
+                    :visible-columns="visibleColumns"
+                    :no-data-label="t('globals.noResults')"
+                    @row-click="(_, row) => redirectToTicketSummary(row.ticketFk)"
+                >
+                    <template #top-row="{ cols }">
+                        <QTr>
+                            <QTd
+                                v-for="(col, index) in cols"
+                                :key="index"
+                                style="max-width: 100px"
+                            >
+                                <component
+                                    :is="col.columnFilter.component"
+                                    v-if="col.columnFilter"
+                                    v-model="col.columnFilter.filterValue"
+                                    v-bind="col.columnFilter.attrs"
+                                    v-on="col.columnFilter.event(col)"
+                                    dense
+                                />
+                            </QTd>
+                        </QTr>
+                    </template>
+                    <template #body-cell-id="{ row }">
+                        <QTd @click.stop>
+                            <QBtn flat color="primary">
+                                {{ row.ticketFk }}
+                                <TicketDescriptorProxy :id="row.ticketFk" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-salesperson="{ row }">
+                        <QTd @click.stop>
+                            <QBtn flat color="primary">
+                                {{ row.userName }}
+                                <WorkerDescriptorProxy :id="row.workerFk" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-client="{ row }">
+                        <QTd @click.stop>
+                            <QBtn flat color="primary" dense>
+                                {{ row.clientName }}
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-shipment="{ row }">
+                        <QTd @click.stop>
+                            <VnSelect
+                                :options="weekdays"
+                                hide-selected
+                                option-label="name"
+                                option-value="id"
+                                v-model="row.weekDay"
+                                @update:model-value="
+                                    onUpdate(row.ticketFk, 'weekDay', $event)
+                                "
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-agency="{ row }">
+                        <QTd @click.stop>
+                            <VnSelect
+                                :options="agencyModesOptions"
+                                hide-selected
+                                option-label="name"
+                                option-value="id"
+                                v-model="row.agencyModeFk"
+                                @update:model-value="
+                                    onUpdate(row.ticketFk, 'agencyModeFk', $event)
+                                "
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-actions="{ row }">
+                        <QTd>
+                            <QIcon
+                                @click.stop="
+                                    openConfirmationModal(
+                                        t('You are going to delete this weekly ticket'),
+                                        t(
+                                            'This ticket will be removed from weekly tickets! Continue anyway?'
+                                        ),
+                                        () => deleteWeekly(row.ticketFk)
+                                    )
+                                "
+                                class="q-ml-sm cursor-pointer"
+                                color="primary"
+                                name="delete"
+                                size="sm"
+                            >
+                                <QTooltip>
+                                    {{ t('globals.delete') }}
+                                </QTooltip>
+                            </QIcon>
+                        </QTd>
+                    </template>
+                </QTable>
+            </template>
+        </VnPaginate>
+    </QPage>
+</template>
+
+<i18n>
+es:
+    You are going to delete this weekly ticket: Vas a eliminar este ticket programado
+    This ticket will be removed from weekly tickets! Continue anyway?: Este ticket se eliminará de tickets programados! ¿Continuar de todas formas?
+</i18n>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
new file mode 100644
index 000000000..a4c5b78ac
--- /dev/null
+++ b/src/pages/Ticket/locale/en.yml
@@ -0,0 +1,9 @@
+weeklyTickets:
+    id: Ticket ID
+    client: Client
+    shipment: Shipment
+    agency: Agency
+    warehouse: Warehouse
+    salesperson: Salesperson
+    search: Search weekly tickets
+    searchInfo: Search weekly tickets by id or client id
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 5348b29b9..0e2f77d73 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -1,2 +1,11 @@
+weeklyTickets:
+    id: ID Ticket
+    client: Cliente
+    shipment: Salida
+    agency: Agencia
+    warehouse: Almacén
+    salesperson: Comercial
+    search: Buscar por tickets programados
+    searchInfo: Buscar tickets programados por el identificador o el identificador del cliente
 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..e92ba6650 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -11,7 +11,7 @@ export default {
     component: RouterView,
     redirect: { name: 'TicketMain' },
     menus: {
-        main: ['TicketList'],
+        main: ['TicketList', 'TicketWeekly'],
         card: ['TicketBoxing', 'TicketSms', 'TicketSale'],
     },
     children: [
@@ -40,6 +40,15 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/TicketCreate.vue'),
                 },
+                {
+                    name: 'TicketWeekly',
+                    path: 'weekly',
+                    meta: {
+                        title: 'weeklyTickets',
+                        icon: 'access_time',
+                    },
+                    component: () => import('src/pages/Ticket/TicketWeekly.vue'),
+                },
             ],
         },
         {

From d488a2d52391e12f4d1f89ddfdf5a86ba6ab1b4f Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 18 Jun 2024 11:50:15 -0300
Subject: [PATCH 02/21] small change

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

diff --git a/src/pages/Ticket/TicketWeekly.vue b/src/pages/Ticket/TicketWeekly.vue
index 50b4c0451..022f1bb30 100644
--- a/src/pages/Ticket/TicketWeekly.vue
+++ b/src/pages/Ticket/TicketWeekly.vue
@@ -67,7 +67,7 @@ const applyColumnFilter = async (col) => {
     }
 };
 
-const getInputEvents = (col) => ({ 'update:modelValue': () => applyColumnFilter(col) });
+const getInputEvents = (col) => ({ 'keyup.enter': () => applyColumnFilter(col) });
 
 const columns = computed(() => [
     {

From de0ef06d926b01293350fe5a4ce76ad16307464e Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 18 Jun 2024 19:28:05 -0300
Subject: [PATCH 03/21] remove console.log

---
 src/pages/Ticket/TicketWeekly.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/Ticket/TicketWeekly.vue b/src/pages/Ticket/TicketWeekly.vue
index 022f1bb30..5dbc99d22 100644
--- a/src/pages/Ticket/TicketWeekly.vue
+++ b/src/pages/Ticket/TicketWeekly.vue
@@ -60,7 +60,6 @@ const applyColumnFilter = async (col) => {
     try {
         const paramKey = col.columnFilter?.filterParamKey || col.field;
         params[paramKey] = col.columnFilter.filterValue;
-        console.log('paramKey', paramKey, 'params', params);
         await paginateRef.value.addFilter(null, params);
     } catch (err) {
         console.error('Error applying column filter', err);

From b3a4dd3f799c340f73c5e81af8aff7742d5f8bc9 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 19 Jun 2024 08:16:20 -0300
Subject: [PATCH 04/21] Ticket purchase request

---
 src/i18n/locale/en.yml                        |   1 +
 src/i18n/locale/es.yml                        |   1 +
 src/pages/Ticket/Card/TicketCard.vue          |  24 +-
 src/pages/Ticket/Card/TicketCreateRequest.vue |  69 +++++
 .../Ticket/Card/TicketPurchaseRequest.vue     | 261 ++++++++++++++++++
 src/pages/Ticket/locale/en.yml                |  14 +
 src/pages/Ticket/locale/es.yml                |  14 +
 src/router/modules/ticket.js                  |  12 +-
 8 files changed, 389 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/Ticket/Card/TicketCreateRequest.vue
 create mode 100644 src/pages/Ticket/Card/TicketPurchaseRequest.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..3ebf23b3c 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -443,6 +443,7 @@ ticket:
         sms: Sms
         notes: Notes
         sale: Sale
+        purchaseRequest: Purchase request
     list:
         nickname: Nickname
         state: State
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index d03ee9d5c..620b67a0a 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
+        purchaseRequest: Petición de compra
     list:
         nickname: Alias
         state: Estado
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 04363b506..ecea3aab2 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',
+    TicketPurchaseRequest: 'TicketPurchaseRequest',
+};
 </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/TicketCreateRequest.vue b/src/pages/Ticket/Card/TicketCreateRequest.vue
new file mode 100644
index 000000000..6b436621f
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketCreateRequest.vue
@@ -0,0 +1,69 @@
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FormModelPopup from 'components/FormModelPopup.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';
+
+const emit = defineEmits(['onRequestCreated']);
+
+const route = useRoute();
+const { t } = useI18n();
+
+const attendersOptions = ref([]);
+</script>
+<template>
+    <FetchData
+        url="TicketRequests/getItemTypeWorker"
+        :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC' }"
+        auto-load
+        @on-fetch="(data) => (attendersOptions = data)"
+    />
+    <FormModelPopup
+        :title="t('Create request')"
+        url-create="TicketRequests"
+        model="CreateTicketRequest"
+        :form-initial-data="{ ticketFk: route.params.id }"
+        @on-data-saved="() => emit('onRequestCreated')"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    v-model="data.description"
+                    :label="t('purchaseRequest.description')"
+                />
+                <VnSelect
+                    :label="t('purchaseRequest.atender')"
+                    v-model="data.attenderFk"
+                    :options="attendersOptions"
+                    hide-selected
+                    option-label="nickname"
+                    option-value="id"
+                />
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    v-model="data.quantity"
+                    :label="t('purchaseRequest.quantity')"
+                    type="number"
+                    min="1"
+                />
+                <VnInput
+                    v-model="data.price"
+                    :label="t('purchaseRequest.price')"
+                    type="number"
+                    min="0"
+                />
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+    es:
+        Create request: Crear petición de compra
+</i18n>
diff --git a/src/pages/Ticket/Card/TicketPurchaseRequest.vue b/src/pages/Ticket/Card/TicketPurchaseRequest.vue
new file mode 100644
index 000000000..387a5baf1
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketPurchaseRequest.vue
@@ -0,0 +1,261 @@
+<script setup>
+import { ref, computed, watch, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import VnInput from 'src/components/common/VnInput.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import CrudModel from 'src/components/CrudModel.vue';
+import TicketCreateRequest from './TicketCreateRequest.vue';
+
+import { dashIfEmpty } from 'src/filters';
+import { toDateFormat } from 'src/filters/date.js';
+
+const route = useRoute();
+const { t } = useI18n();
+const createTicketRequestDialogRef = ref(null);
+const crudModelRef = ref(null);
+
+watch(
+    () => route.params.id,
+    async (val) => {
+        crudModelFilter.where.ticketFk = val;
+        crudModelRef.value.reload();
+    }
+);
+
+const crudModelFilter = reactive({
+    include: [
+        {
+            relation: 'atender',
+            scope: {
+                include: {
+                    relation: 'user',
+                    scope: {
+                        fields: ['nickname'],
+                    },
+                },
+            },
+        },
+        {
+            relation: 'requester',
+            scope: {
+                include: {
+                    relation: 'user',
+                    scope: {
+                        fields: ['nickname'],
+                    },
+                },
+            },
+        },
+        {
+            relation: 'sale',
+        },
+    ],
+    fields: [
+        'id',
+        'description',
+        'created',
+        'requesterFk',
+        'attenderFk',
+        'quantity',
+        'price',
+        'saleFk',
+        'isOk',
+    ],
+    order: ['created ASC'],
+    where: {
+        ticketFk: route.params.id,
+    },
+});
+
+const columns = computed(() => [
+    {
+        label: t('purchaseRequest.id'),
+        name: 'id',
+        field: 'id',
+        align: 'left',
+        columnFilter: null,
+    },
+    {
+        label: t('purchaseRequest.description'),
+        name: 'description',
+        field: 'description',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('purchaseRequest.created'),
+        name: 'created',
+        field: 'created',
+        align: 'left',
+        format: (val) => toDateFormat(val),
+    },
+    {
+        label: t('purchaseRequest.requester'),
+        name: 'requester',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('purchaseRequest.atender'),
+        name: 'atender',
+        align: 'left',
+    },
+    {
+        label: t('purchaseRequest.quantity'),
+        name: 'quantity',
+        align: 'left',
+    },
+    {
+        label: t('purchaseRequest.price'),
+        name: 'price',
+        align: 'left',
+    },
+    {
+        label: t('purchaseRequest.saleFk'),
+        name: 'saleFk',
+        align: 'left',
+    },
+    {
+        label: t('purchaseRequest.state'),
+        name: 'state',
+        field: 'isOk',
+        align: 'left',
+        format: (val) => getRequestState(val),
+    },
+    {
+        label: '',
+        name: 'actions',
+        align: 'left',
+        columnFilter: null,
+    },
+]);
+
+const getRequestState = (state) => {
+    switch (state) {
+        case null:
+            return 'New';
+        case false:
+            return 'Denied';
+        case true:
+            return 'Acepted';
+    }
+};
+
+const isEditable = (isOk) => isOk !== null;
+
+const removeLine = async (row) => crudModelRef.value.remove([row]);
+
+const openCreateModal = () => createTicketRequestDialogRef.value.show();
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <CrudModel
+            data-key="PurchaseRequests"
+            url="TicketRequests"
+            ref="crudModelRef"
+            :filter="crudModelFilter"
+            :order="['created ASC']"
+            :default-remove="false"
+            :default-save="false"
+            :default-reset="false"
+            :limit="0"
+            auto-load
+        >
+            <template #body="{ rows }">
+                <QTable
+                    :rows="rows"
+                    :columns="columns"
+                    row-key="id"
+                    :pagination="{ rowsPerPage: 0 }"
+                    class="full-width q-mt-md"
+                    :no-data-label="t('globals.noResults')"
+                    @row-click="(_, row) => redirectToTicketSummary(row.ticketFk)"
+                >
+                    <template #body-cell-description="{ row }">
+                        <QTd @click.stop>
+                            <VnInput
+                                v-model="row.description"
+                                @blur="crudModelRef.saveChanges()"
+                                :disable="isEditable(row.isOk)"
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-requester="{ row }">
+                        <QTd @click.stop>
+                            <QBtn flat color="primary">
+                                {{ row.requester?.user?.nickname }}
+                                <WorkerDescriptorProxy :id="row.requesterFk" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-atender="{ row }">
+                        <QTd @click.stop>
+                            <QBtn flat color="primary">
+                                {{ row.atender?.user?.nickname }}
+                                <WorkerDescriptorProxy :id="row.attenderFk" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-quantity="{ row }">
+                        <QTd @click.stop>
+                            <VnInput
+                                v-model="row.quantity"
+                                @blur="crudModelRef.saveChanges()"
+                                :disable="isEditable(row.isOk)"
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-price="{ row }">
+                        <QTd @click.stop>
+                            <VnInput
+                                v-model="row.price"
+                                @blur="crudModelRef.saveChanges()"
+                                :disable="isEditable(row.isOk)"
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-saleFk="{ row }">
+                        <QTd @click.stop>
+                            <QBtn v-if="row.saleFk" flat color="primary">
+                                {{ row.requester?.user?.nickname }}
+                                <ItemDescriptorProxy :id="row.sale.itemFk" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-actions="{ row }">
+                        <QTd>
+                            <QIcon
+                                @click.stop="removeLine(row)"
+                                class="q-ml-sm cursor-pointer"
+                                color="primary"
+                                name="delete"
+                                size="sm"
+                            >
+                                <QTooltip>
+                                    {{ t('globals.delete') }}
+                                </QTooltip>
+                            </QIcon>
+                        </QTd>
+                    </template>
+                </QTable>
+            </template>
+        </CrudModel>
+        <QDialog
+            ref="createTicketRequestDialogRef"
+            transition-show="scale"
+            transition-hide="scale"
+        >
+            <TicketCreateRequest @on-request-created="crudModelRef.reload()" />
+        </QDialog>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn @click="openCreateModal()" color="primary" fab icon="add" />
+            <QTooltip class="text-no-wrap">
+                {{ t('purchaseRequest.newRequest') }}
+            </QTooltip>
+        </QPageSticky>
+    </QPage>
+</template>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
new file mode 100644
index 000000000..5930e3487
--- /dev/null
+++ b/src/pages/Ticket/locale/en.yml
@@ -0,0 +1,14 @@
+card:
+    search: Search tickets
+    searchInfo: You can search by ticket id or alias
+purchaseRequest:
+    id: Id
+    description: Description
+    created: Created
+    requester: Requester
+    atender: Atender
+    quantity: Quantity
+    price: Price
+    saleFk: Item id
+    state: State
+    newRequest: New request
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 5348b29b9..80d32b4a5 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -1,2 +1,16 @@
+card:
+    search: Buscar tickets
+    searchInfo: Buscar tickets por identificador o alias
+purchaseRequest:
+    Id: Id
+    description: Descripción
+    created: Fecha creación
+    requester: Solicitante
+    atender: Comprador
+    quantity: Cantidad
+    price: Precio
+    saleFk: Id artículo
+    state: Estado
+    newRequest: Crear petición
 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..584fb9dc5 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', 'TicketPurchaseRequest'],
     },
     children: [
         {
@@ -93,6 +93,16 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
                 },
+                {
+                    path: 'request',
+                    name: 'TicketPurchaseRequest',
+                    meta: {
+                        title: 'purchaseRequest',
+                        icon: 'vn:buyrequest',
+                    },
+                    component: () =>
+                        import('src/pages/Ticket/Card/TicketPurchaseRequest.vue'),
+                },
             ],
         },
     ],

From 9f1dd4d74d7e89d890fce2be00cc385a49c78fb9 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 20 Jun 2024 09:41:53 -0300
Subject: [PATCH 05/21] WIP

---
 src/pages/Ticket/Card/TicketBasicData.vue | 47 ++++++++++++++++++++++-
 src/pages/Ticket/locale/en.yml            |  4 ++
 src/pages/Ticket/locale/es.yml            |  4 ++
 src/router/modules/ticket.js              |  2 +-
 4 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/Ticket/locale/en.yml

diff --git a/src/pages/Ticket/Card/TicketBasicData.vue b/src/pages/Ticket/Card/TicketBasicData.vue
index 0c9a8b042..70382d0fb 100644
--- a/src/pages/Ticket/Card/TicketBasicData.vue
+++ b/src/pages/Ticket/Card/TicketBasicData.vue
@@ -1,3 +1,48 @@
+<script setup>
+import { ref } from 'vue';
+
+const stepperRef = ref(null);
+const step = ref(1);
+</script>
 <template>
-    <QCard>Basic Data</QCard>
+    <QStepper v-model="step" ref="stepperRef" color="primary" header-nav animated>
+        <QStep
+            :name="1"
+            title="Select campaign settings"
+            icon="settings"
+            :error="step < 3"
+            :done="step > 1"
+        >
+            For each ad campaign that you create, you can control how much you're willing
+            to spend on clicks and conversions, which networks and geographical locations
+            you want your ads to show on, and more.
+        </QStep>
+        <QStep
+            :name="2"
+            title="Create an ad group"
+            caption="Optional"
+            icon="create_new_folder"
+            :done="step > 2"
+        >
+            An ad group contains one or more ads which target a shared set of keywords.
+        </QStep>
+
+        <template #navigation>
+            <QStepperNavigation>
+                <QBtn
+                    @click="stepperRef.next()"
+                    color="primary"
+                    :label="step === 3 ? 'Finish' : 'Continue'"
+                />
+                <QBtn
+                    v-if="step > 1"
+                    flat
+                    color="primary"
+                    @click="stepperRef.previous()"
+                    label="Back"
+                    class="q-ml-sm"
+                />
+            </QStepperNavigation>
+        </template>
+    </QStepper>
 </template>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
new file mode 100644
index 000000000..4016973cc
--- /dev/null
+++ b/src/pages/Ticket/locale/en.yml
@@ -0,0 +1,4 @@
+basicData:
+    next: Next
+    back: Back
+    finalize: Finalize
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 5348b29b9..da7c45cc0 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -1,2 +1,6 @@
+basicData:
+    next: Siguiente
+    back: Anterior
+    finalize: Finalizar
 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..3c60f40ab 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: ['TicketBasicData', 'TicketBoxing', 'TicketSms', 'TicketSale'],
     },
     children: [
         {

From 633b13b07668366436b4cf66ba9c53c39303f7da Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 20 Jun 2024 16:51:07 -0300
Subject: [PATCH 06/21] Basic data form

---
 src/components/FormModel.vue              |   2 +-
 src/pages/Ticket/Card/TicketBasicData.vue | 522 +++++++++++++++++++++-
 src/pages/Ticket/locale/en.yml            |  13 +
 src/pages/Ticket/locale/es.yml            |  13 +
 4 files changed, 528 insertions(+), 22 deletions(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 336ea281e..11542ed65 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -246,7 +246,7 @@ function updateAndEmit(evt, val, res) {
     emit(evt, state.get(modelValue), res);
 }
 
-defineExpose({ save, isLoading, hasChanges });
+defineExpose({ save, isLoading, hasChanges, formData });
 </script>
 <template>
     <div class="column items-center full-width">
diff --git a/src/pages/Ticket/Card/TicketBasicData.vue b/src/pages/Ticket/Card/TicketBasicData.vue
index 70382d0fb..e4bf52a94 100644
--- a/src/pages/Ticket/Card/TicketBasicData.vue
+++ b/src/pages/Ticket/Card/TicketBasicData.vue
@@ -1,29 +1,508 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
 
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInputTime from 'components/common/VnInputTime.vue';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+import { toTimeFormat } from 'filters/date.js';
+
+const { notify } = useNotify();
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
 const stepperRef = ref(null);
+const formModelRef = ref(null);
+const agencyFetchRef = ref(null);
+const zonesFetchRef = ref(null);
+
+const filter = {
+    include: [
+        { relation: 'address' },
+        {
+            relation: 'client',
+            scope: {
+                fields: [
+                    'salesPersonFk',
+                    'name',
+                    'isActive',
+                    'isFreezed',
+                    'isTaxDataChecked',
+                    'credit',
+                    'email',
+                    'phone',
+                    'mobile',
+                    'hasElectronicInvoice',
+                ],
+                include: {
+                    relation: 'salesPersonUser',
+                    scope: { fields: ['id', 'name'] },
+                },
+            },
+        },
+        { relation: 'invoiceOut' },
+    ],
+};
+
 const step = ref(1);
+const clientsOptions = ref([]);
+const warehousesOptions = ref([]);
+const companiesOptions = ref([]);
+const agenciesOptions = ref([]);
+const zonesOptions = ref([]);
+const addresses = ref([]);
+
+const agencyByWarehouseFilter = computed(() => ({
+    fields: ['id', 'name'],
+    order: 'name ASC',
+    where: {
+        warehouseFk: warehouseId.value,
+    },
+}));
+
+const zonesFilter = computed(() => ({
+    fields: ['id', 'name'],
+    order: 'name ASC',
+    where: formModelRef.value?.formData?.agencyModeFk
+        ? {
+              shipped: formModelRef.value?.formData?.shipped,
+              addressFk: formModelRef.value?.formData?.addressFk,
+              agencyModeFk: formModelRef.value?.formData?.agencyModeFk,
+              warehouseFk: formModelRef.value?.formData?.warehouseFk,
+          }
+        : {},
+}));
+
+const getLanded = async (params) => {
+    try {
+        const validParams =
+            shipped.value && addressId.value && agencyModeId.value && warehouseId.value;
+        if (!validParams) {
+            // this.$q.resolve(); ???????
+            return;
+        }
+        formModelRef.value.formData.zoneFk = null;
+        const { data } = await axios.get(`Agencies/getLanded`, { params });
+        if (data) {
+            formModelRef.value.formData.zoneFk = data.zoneFk;
+            formModelRef.value.formData.landed = data.landed;
+            formModelRef.value.formData.shipped = params.shipped;
+        }
+    } catch (error) {
+        console.error(error);
+        notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
+    }
+};
+
+const getShipped = async (params) => {
+    try {
+        const validParams =
+            landed.value && addressId.value && agencyModeId.value && warehouseId.value;
+        if (!validParams) return;
+
+        formModelRef.value.formData.zoneFk = null;
+        const { data } = await axios.get(`Agencies/getShipped`, { params });
+        if (data) {
+            formModelRef.value.formData.zoneFk = data.zoneFk;
+            formModelRef.value.formData.landed = params.landed;
+            formModelRef.value.formData.shipped = data.shipped;
+        } else {
+            notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
+        }
+    } catch (error) {
+        console.error(error);
+        notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
+    }
+};
+
+const onChangeZone = async (zoneId) => {
+    try {
+        formModelRef.value.formData.agencyModeFk = null;
+        const { data } = await axios.get(`Zones/${zoneId}`);
+        formModelRef.value.formData.agencyModeFk = data.agencyModeFk;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const onChangeAddress = async (addressId) => {
+    try {
+        formModelRef.value.formData.nickname = null;
+        const { data } = await axios.get(`Addresses/${addressId}`);
+        formModelRef.value.formData.nickname = data.nickname;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const getClientDefaultAddress = async (clientId) => {
+    try {
+        const { data } = await axios.get(`Clients/${clientId}`);
+        if (data) addressId.value = data.defaultAddressFk;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const clientAddressesList = async (value) => {
+    let filter = {
+        include: [
+            {
+                relation: 'province',
+                scope: {
+                    fields: ['name'],
+                },
+            },
+            {
+                relation: 'agencyMode',
+                scope: {
+                    fields: ['name'],
+                },
+            },
+        ],
+    };
+    const params = { filter: JSON.stringify(filter) };
+    const { data } = await axios.get(`Clients/${value}/addresses`, { params });
+    if (data) addresses.value = data;
+};
+
+const addressId = computed({
+    get: () => formModelRef.value?.formData?.addressFk,
+    set: (val) => {
+        if (val != formModelRef.value?.formData?.addressFk) {
+            formModelRef.value.formData.addressFk = val;
+            onChangeAddress(val);
+            getShipped({
+                landed: formModelRef.value?.formData?.landed,
+                addressFk: val,
+                agencyModeFk: formModelRef.value?.formData?.agencyModeFk,
+                warehouseFk: formModelRef.value?.formData?.warehouseFk,
+            });
+        }
+    },
+});
+
+const clientId = computed({
+    get: () => formModelRef.value?.formData?.clientFk,
+    set: (val) => {
+        formModelRef.value.formData.clientFk = val;
+        formModelRef.value.formData.addressFk = null;
+        if (!val) return;
+        getClientDefaultAddress(val);
+        clientAddressesList(val);
+    },
+});
+
+const landed = computed({
+    get: () => formModelRef.value?.formData?.landed,
+    set: (val) => {
+        formModelRef.value.formData.landed = val;
+        getShipped({
+            landed: val,
+            addressFk: formModelRef.value?.formData?.addressFk,
+            agencyModeFk: formModelRef.value?.formData?.agencyModeFk,
+            warehouseFk: formModelRef.value?.formData?.warehouseFk,
+        });
+    },
+});
+
+const agencyModeId = computed({
+    get: () => formModelRef.value?.formData?.agencyModeFk,
+    set: (val) => {
+        if (val != formModelRef.value?.formData?.agencyModeFk) {
+            formModelRef.value.formData.agencyModeFk = val;
+            if (!val) return;
+            const agencyMode = agenciesOptions.value.find((a) => a.id == val);
+            formModelRef.value.formData.warehouseFk = agencyMode.warehouseFk;
+
+            getLanded({
+                shipped: formModelRef.value?.formData?.shipped,
+                addressFk: formModelRef.value?.formData?.addressFk,
+                agencyModeFk: val,
+                warehouseFk: formModelRef.value?.formData?.warehouseFk,
+            });
+        }
+    },
+});
+
+const zoneId = computed({
+    get: () => formModelRef.value?.formData?.zoneFk,
+    set: (val) => {
+        if (val != formModelRef.value.formData.zoneFk) {
+            formModelRef.value.formData.zoneFk = val;
+            onChangeZone(val);
+        }
+    },
+});
+
+const warehouseId = computed({
+    get: () => formModelRef.value?.formData?.warehouseFk,
+    set: (val) => {
+        if (val != formModelRef.value.formData.warehouseFk) {
+            formModelRef.value.formData.warehouseFk = val;
+            getShipped({
+                landed: formModelRef.value.formData.landed,
+                addressFk: formModelRef.value.formData.addressFk,
+                agencyModeFk: formModelRef.value.formData.agencyModeFk,
+                warehouseFk: val,
+            }).then(() => {
+                if (zoneId.value == null) formModelRef.value.formData.agencyModeFk = null;
+            });
+        }
+    },
+});
+
+const shipped = computed({
+    get: () => formModelRef.value?.formData?.shipped,
+    set: (val) => {
+        if (
+            new Date(formModelRef.value?.formData?.shipped).toDateString() !=
+            val.toDateString()
+        )
+            val.setHours(0, 0, 0, 0);
+        formModelRef.value.formData.shipped = val;
+        getLanded({
+            shipped: val,
+            addressFk: formModelRef.value?.formData?.addressFk,
+            agencyModeFk: formModelRef.value?.formData?.agencyModeFk,
+            warehouseFk: formModelRef.value?.formData?.warehouseFk,
+        });
+    },
+});
+
+const onFormModelInit = () => {
+    if (formModelRef.value.formData.clientFk)
+        clientAddressesList(formModelRef.value.formData.clientFk);
+};
+
+const redirectToCustomerAddress = () => {
+    router.push({
+        name: 'CustomerAddressEditCard',
+        params: { id: clientId.value, addressId: addressId.value },
+    });
+};
 </script>
 <template>
-    <QStepper v-model="step" ref="stepperRef" color="primary" header-nav animated>
-        <QStep
-            :name="1"
-            title="Select campaign settings"
-            icon="settings"
-            :error="step < 3"
-            :done="step > 1"
-        >
-            For each ad campaign that you create, you can control how much you're willing
-            to spend on clicks and conversions, which networks and geographical locations
-            you want your ads to show on, and more.
+    <FetchData
+        url="Clients"
+        :filter="{
+            fields: ['id', 'name'],
+            order: 'id',
+        }"
+        @on-fetch="(data) => (clientsOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Warehouses"
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Companies"
+        :filter="{
+            fields: ['id', 'code'],
+            order: 'code ASC',
+        }"
+        @on-fetch="(data) => (companiesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="agencyFetchRef"
+        url="AgencyModes/byWarehouse"
+        :filter="agencyByWarehouseFilter"
+        @on-fetch="(data) => (agenciesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="zonesFetchRef"
+        url="Zones/includingExpired"
+        :filter="zonesFilter"
+        @on-fetch="(data) => (zonesOptions = data)"
+        auto-load
+    />
+    <QStepper
+        v-model="step"
+        ref="stepperRef"
+        color="primary"
+        header-nav
+        animated
+        keep-alive
+    >
+        <QStep :name="1" title="Select campaign settings" :done="step > 1">
+            <FormModel
+                ref="formModelRef"
+                :url="`Tickets/${route.params.id}`"
+                :url-update="`Tickets/${route.params.id}`"
+                :filter="filter"
+                model="Ticket"
+                auto-load
+                :default-actions="false"
+                @on-fetch="onFormModelInit()"
+            >
+                <template #form="{ data }">
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <VnSelect
+                            :label="t('basicData.client')"
+                            v-model="clientId"
+                            option-value="id"
+                            option-label="name"
+                            :options="clientsOptions"
+                            hide-selected
+                            map-options
+                            :required="true"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel
+                                            >#{{ scope.opt?.id }}
+                                            {{ scope.opt?.name }}</QItemLabel
+                                        >
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                        <VnSelect
+                            :label="t('basicData.warehouse')"
+                            v-model="warehouseId"
+                            option-value="id"
+                            option-label="name"
+                            :options="warehousesOptions"
+                            hide-selected
+                            map-options
+                            :required="true"
+                        />
+                    </VnRow>
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <VnSelect
+                            :label="t('basicData.address')"
+                            v-model="addressId"
+                            option-value="id"
+                            option-label="nickname"
+                            :options="addresses"
+                            hide-selected
+                            map-options
+                            :required="true"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel
+                                            :class="{
+                                                'color-vn-label': !scope.opt?.isActive,
+                                            }"
+                                        >
+                                            {{
+                                                `${
+                                                    !scope.opt?.isActive
+                                                        ? t('basicData.inactive')
+                                                        : ''
+                                                } `
+                                            }}
+                                            <span> {{ scope.opt?.nickname }}</span>
+                                            <span
+                                                v-if="
+                                                    scope.opt?.province ||
+                                                    scope.opt?.city ||
+                                                    scope.opt?.street
+                                                "
+                                                >, {{ scope.opt?.street }},
+                                                {{ scope.opt?.city }},
+                                                {{ scope.opt?.province?.name }} -
+                                                {{ scope.opt?.agencyMode?.name }}</span
+                                            >
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                            <template #append>
+                                <QIcon
+                                    name="edit"
+                                    color="primary"
+                                    size="sm"
+                                    class="fill-icon cursor-pointer"
+                                    @click.stop="redirectToCustomerAddress()"
+                                >
+                                    <QTooltip>{{ t('basicData.editAddress') }}</QTooltip>
+                                </QIcon>
+                            </template>
+                        </VnSelect>
+                        <VnInput :label="t('basicData.alias')" v-model="data.nickname" />
+                    </VnRow>
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <VnSelect
+                            :label="t('basicData.company')"
+                            v-model="data.companyFk"
+                            option-value="id"
+                            option-label="code"
+                            :options="companiesOptions"
+                            hide-selected
+                            map-options
+                            :required="true"
+                        />
+                        <VnSelect
+                            :label="t('basicData.agency')"
+                            v-model="agencyModeId"
+                            option-value="id"
+                            option-label="name"
+                            :options="agenciesOptions"
+                            hide-selected
+                            map-options
+                            :required="true"
+                            @focus="agencyFetchRef.fetch()"
+                        />
+                        <VnSelect
+                            :label="t('basicData.zone')"
+                            v-model="zoneId"
+                            option-value="id"
+                            option-label="name"
+                            :options="zonesOptions"
+                            hide-selected
+                            map-options
+                            :required="true"
+                            @focus="zonesFetchRef.fetch()"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel
+                                            >{{ scope.opt?.name }} - Max.
+                                            {{ toTimeFormat(scope.opt?.hour) }}
+                                            h.</QItemLabel
+                                        >
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                    </VnRow>
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <VnInputDate
+                            :label="t('basicData.shipped')"
+                            v-model="data.shipped"
+                            :required="true"
+                        />
+                        <VnInputTime
+                            :label="t('basicData.shippedHour')"
+                            v-model="data.shipped"
+                        />
+                        <VnInputDate
+                            :label="t('basicData.landed')"
+                            v-model="data.landed"
+                            :required="true"
+                        />
+                    </VnRow>
+                </template>
+            </FormModel>
         </QStep>
-        <QStep
-            :name="2"
-            title="Create an ad group"
-            caption="Optional"
-            icon="create_new_folder"
-            :done="step > 2"
-        >
+        <QStep :name="2" title="Create an ad group" caption="Optional">
             An ad group contains one or more ads which target a shared set of keywords.
         </QStep>
 
@@ -32,17 +511,18 @@ const step = ref(1);
                 <QBtn
                     @click="stepperRef.next()"
                     color="primary"
-                    :label="step === 3 ? 'Finish' : 'Continue'"
+                    :label="step === 2 ? t('basicData.finalize') : t('basicData.next')"
                 />
                 <QBtn
                     v-if="step > 1"
                     flat
                     color="primary"
                     @click="stepperRef.previous()"
-                    label="Back"
+                    :label="t('basicData.back')"
                     class="q-ml-sm"
                 />
             </QStepperNavigation>
         </template>
     </QStepper>
+    <pre v-if="formModelRef">{{ formModelRef.formData }}</pre>
 </template>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index 4016973cc..643421ad4 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -2,3 +2,16 @@ basicData:
     next: Next
     back: Back
     finalize: Finalize
+    client: Client
+    warehouse: Warehouse
+    address: Address
+    inactive: (Inactive)
+    noDeliveryZoneAvailable: No delivery zone available for this landing date
+    editAddress: Edit address
+    alias: Alias
+    company: Company
+    agency: Agency
+    zone: Zone
+    shipped: Shipped
+    landed: Landed
+    shippedHour: Shipped hour
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index da7c45cc0..913d1935d 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -2,5 +2,18 @@ basicData:
     next: Siguiente
     back: Anterior
     finalize: Finalizar
+    client: Cliente
+    warehouse: Almacén
+    address: Consignatario
+    inactive: (Inactivo)
+    noDeliveryZoneAvailable: No hay una zona de reparto disponible para la fecha de envío seleccionada
+    editAddress: Editar dirección
+    alias: Alias
+    company: Empresa
+    agency: Agencia
+    zone: Zona
+    shipped: F. Envío
+    landed: F. Entrega
+    shippedHour: Hora de envío
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket

From 5cf183607de779f485d50258e15aa3c592ef27d0 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 21 Jun 2024 09:20:03 -0300
Subject: [PATCH 07/21] WIP

---
 .../Ticket/Card/BasicData/BasicDataTable.vue  | 245 ++++++++++++++++++
 .../Card/BasicData/TicketBasicDataForm.vue    |   0
 .../TicketBasicDataView.vue}                  |  46 +++-
 src/pages/Ticket/locale/en.yml                |  17 ++
 src/pages/Ticket/locale/es.yml                |  17 ++
 src/router/modules/ticket.js                  |   3 +-
 6 files changed, 323 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/Ticket/Card/BasicData/BasicDataTable.vue
 create mode 100644 src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
 rename src/pages/Ticket/Card/{TicketBasicData.vue => BasicData/TicketBasicDataView.vue} (93%)

diff --git a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
new file mode 100644
index 000000000..37c51fadf
--- /dev/null
+++ b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
@@ -0,0 +1,245 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import FetchData from 'components/FetchData.vue';
+import { useVnConfirm } from 'composables/useVnConfirm';
+
+import { useStateStore } from 'stores/useStateStore';
+import { toCurrency } from 'filters/index';
+import { useRole } from 'src/composables/useRole';
+
+const $props = defineProps({
+    ticketData: {
+        type: Object,
+        required: true,
+    },
+});
+
+const stateStore = useStateStore();
+const { t } = useI18n();
+const { hasAny } = useRole();
+const { openConfirmationModal } = useVnConfirm();
+
+const _ticketData = ref($props.ticketData);
+const ticketUpdateActions = ref(null);
+const haveNegatives = ref(false);
+const rows = computed(() => _ticketData.value?.sale?.items || []);
+
+const columns = computed(() => [
+    {
+        label: t('basicData.item'),
+        name: 'item',
+        align: 'left',
+        format: (val) => val.name,
+    },
+    {
+        label: t('basicData.description'),
+        name: 'description',
+        align: 'left',
+    },
+    {
+        label: t('basicData.movable'),
+        name: 'movable',
+        align: 'left',
+    },
+    {
+        label: t('basicData.quantity'),
+        name: 'quantity',
+        field: 'quantity',
+        align: 'left',
+    },
+    {
+        label: t('basicData.pricePPU'),
+        name: 'price',
+        field: 'price',
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('basicData.newPricePPU'),
+        name: 'newPrice',
+        field: (row) => row.component.newPrice,
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('basicData.difference'),
+        name: 'difference',
+        field: (row) => row.component.difference,
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+]);
+
+const loadDefaultTicketAction = () => {
+    const isSalesAssistant = hasAny(['salesAssistant']);
+    _ticketData.value.option = isSalesAssistant ? 'mana' : 'renewPrices';
+};
+
+const totalPrice = computed(() => {
+    return rows.value.reduce((acc, item) => acc + item.price * item.quantity, 0);
+});
+
+const totalNewPrice = computed(() => {
+    return rows.value.reduce(
+        (acc, item) => acc + item.component.newPrice * item.quantity,
+        0
+    );
+});
+
+const totalDifference = computed(() => {
+    return rows.value.reduce(
+        (acc, item) => acc + item.component.difference * item.quantity,
+        0
+    );
+});
+
+const ticketHaveNegatives = () => {
+    let _haveNegatives = false;
+    let haveNotNegatives = false;
+    _ticketData.value.withoutNegatives = false;
+    const haveDifferences = _ticketData.value.sale.haveDifferences;
+
+    _ticketData.value.sale.items.forEach((item) => {
+        if (item.quantity > item.movable) _haveNegatives = true;
+        else haveNotNegatives = true;
+    });
+
+    haveNegatives.value = _haveNegatives && haveNotNegatives && haveDifferences;
+    if (haveNegatives.value) _ticketData.value.withoutNegatives = true;
+};
+
+onMounted(() => {
+    stateStore.rightDrawer = true;
+    loadDefaultTicketAction();
+    ticketHaveNegatives();
+    console.log('ticketData: ', _ticketData.value);
+});
+
+onUnmounted(() => (stateStore.rightDrawer = false));
+</script>
+
+<template>
+    <FetchData
+        url="TicketUpdateActions"
+        @on-fetch="(data) => (ticketUpdateActions = data)"
+        auto-load
+    />
+    <RightMenu>
+        <template #right-panel>
+            <QCard
+                class="q-pa-md q-mb-md q-ma-md color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection horizontal>
+                    <span class="text-weight-bold text-subtitle1 text-center full-width">
+                        {{ t('basicData.total') }}
+                    </span>
+                </QCardSection>
+                <QCardSection class="column items-center" horizontal>
+                    <span>
+                        {{ t('basicData.price') }}:
+                        {{ toCurrency(totalPrice) }}
+                    </span>
+                </QCardSection>
+                <QCardSection class="column items-center" horizontal>
+                    <span>
+                        {{ t('basicData.newPrice') }}: {{ toCurrency(totalNewPrice) }}
+                    </span>
+                </QCardSection>
+                <QCardSection class="column items-center" horizontal>
+                    <span>
+                        {{ t('basicData.difference') }}: {{ toCurrency(totalDifference) }}
+                    </span>
+                </QCardSection>
+            </QCard>
+            <QCard
+                v-if="totalDifference"
+                class="q-pa-md q-mb-md q-ma-md color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection horizontal>
+                    <span class="text-weight-bold text-subtitle1 text-center full-width">
+                        {{ t('basicData.chargeDifference') }}
+                    </span>
+                </QCardSection>
+                <QCardSection
+                    v-for="(action, index) in ticketUpdateActions"
+                    :key="index"
+                    horizontal
+                >
+                    <QRadio
+                        v-model="_ticketData.option"
+                        :val="action.code"
+                        :label="action.description"
+                        dense
+                    />
+                </QCardSection>
+            </QCard>
+            <QCard
+                v-if="haveNegatives"
+                class="q-pa-md q-mb-md q-ma-md color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection horizontal class="flex row items-center">
+                    <QCheckbox
+                        :label="t('basicData.withoutNegatives')"
+                        v-model="_ticketData.withoutNegatives"
+                        :toggle-indeterminate="false"
+                    />
+                    <QIcon name="info" size="xs" class="q-ml-sm">
+                        <QTooltip max-width="350px">
+                            {{ t('basicData.withoutNegativesInfo') }}
+                        </QTooltip>
+                    </QIcon>
+                </QCardSection>
+            </QCard>
+        </template>
+    </RightMenu>
+    <QTable
+        :rows="rows"
+        :columns="columns"
+        row-key="id"
+        :pagination="{ rowsPerPage: 0 }"
+        class="full-width q-mt-md"
+        :no-data-label="t('globals.noResults')"
+    >
+        <template #body-cell-item="{ row }">
+            <QTd>
+                <QBtn flat color="primary">
+                    {{ row.itemFk }}
+                    <ItemDescriptorProxy :id="row.itemFk" />
+                </QBtn>
+            </QTd>
+        </template>
+        <template #body-cell-description="{ row }">
+            <QTd>
+                <div class="column">
+                    <span>{{ row.item.name }}</span>
+                    <span class="color-vn-label">{{ row.item.subName }}</span>
+                    <FetchedTags :item="row.item" :max-length="6" />
+                </div>
+            </QTd>
+        </template>
+        <template #body-cell-movable="{ row }">
+            <QTd>
+                <QBadge
+                    v-if="row.haveDifferences"
+                    :text-color="row.quantity > row.movable ? 'black' : 'white'"
+                    :color="row.quantity > row.movable ? 'negative' : 'transparent'"
+                    :label="row.movable"
+                />
+            </QTd>
+        </template>
+    </QTable>
+</template>
diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/Ticket/Card/TicketBasicData.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue
similarity index 93%
rename from src/pages/Ticket/Card/TicketBasicData.vue
rename to src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue
index e4bf52a94..bba90a35a 100644
--- a/src/pages/Ticket/Card/TicketBasicData.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue
@@ -10,6 +10,7 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnInputTime from 'components/common/VnInputTime.vue';
+import BasicDataTable from './BasicDataTable.vue';
 
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
@@ -289,6 +290,43 @@ const redirectToCustomerAddress = () => {
         params: { id: clientId.value, addressId: addressId.value },
     });
 };
+
+const isFormInvalid = (formData) => {
+    return (
+        !formData.clientFk ||
+        !formData.addressFk ||
+        !formData.agencyModeFk ||
+        !formData.companyFk ||
+        !formData.shipped ||
+        !formData.landed ||
+        !formData.zoneFk
+    );
+};
+
+const onNextStep = async () => {
+    if (step.value === 1) {
+        const formData = formModelRef.value.formData;
+        if (isFormInvalid(formData))
+            return notify(t('basicData.someFieldsAreInvalid'), 'negative');
+
+        if (!formData.sale || formModelRef.value.hasChanges) {
+            const params = {
+                landed: formData.landed,
+                addressId: formData.addressFk,
+                agencyModeId: formData.agencyModeFk,
+                zoneId: formData.zoneFk,
+                warehouseId: formData.warehouseFk,
+                shipped: formData.shipped,
+            };
+            const { data } = await axios.post(
+                `tickets/${formData.id}/priceDifference`,
+                params
+            );
+            formData.sale = data;
+            stepperRef.value.next();
+        }
+    }
+};
 </script>
 <template>
     <FetchData
@@ -336,7 +374,7 @@ const redirectToCustomerAddress = () => {
         animated
         keep-alive
     >
-        <QStep :name="1" title="Select campaign settings" :done="step > 1">
+        <QStep :name="1" :title="t('globals.pageTitles.basicData')" :done="step > 1">
             <FormModel
                 ref="formModelRef"
                 :url="`Tickets/${route.params.id}`"
@@ -502,14 +540,14 @@ const redirectToCustomerAddress = () => {
                 </template>
             </FormModel>
         </QStep>
-        <QStep :name="2" title="Create an ad group" caption="Optional">
-            An ad group contains one or more ads which target a shared set of keywords.
+        <QStep :name="2" :title="t('basicData.priceDifference')">
+            <BasicDataTable :ticket-data="formModelRef.formData" />
         </QStep>
 
         <template #navigation>
             <QStepperNavigation>
                 <QBtn
-                    @click="stepperRef.next()"
+                    @click="onNextStep()"
                     color="primary"
                     :label="step === 2 ? t('basicData.finalize') : t('basicData.next')"
                 />
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index 643421ad4..6fe813a2a 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -15,3 +15,20 @@ basicData:
     shipped: Shipped
     landed: Landed
     shippedHour: Shipped hour
+    priceDifference: Price difference
+    someFieldsAreInvalid: Some fields are invalid
+    item: Item
+    description: Description
+    movable: Movable
+    quantity: Quantity
+    pricePPU: Price (PPU)
+    newPricePPU: New (PPU)
+    difference: Difference
+    total: Total
+    price: Price
+    newPrice: New price
+    chargeDifference: Charge difference to
+    withoutNegatives: Create without negatives
+    withoutNegativesInfo: Clone this ticket with the changes and only sales availables
+    negativesConfirmTitle: Edit basic data
+    negativesConfirmMessage: Negatives are going to be generated, are you sure you want to advance all the lines?
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 913d1935d..8f9394a2e 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -15,5 +15,22 @@ basicData:
     shipped: F. Envío
     landed: F. Entrega
     shippedHour: Hora de envío
+    priceDifference: Diferencia de precio
+    someFieldsAreInvalid: Algunos campos no son válidos
+    item: Artículo
+    description: Descripción
+    movable: Movible
+    quantity: Cantidad
+    pricePPU: Precio (Ud.)
+    newPricePPU: Nuevo (Ud.)
+    difference: Diferencia
+    total: Total
+    price: Precio
+    newPrice: Nuevo precio
+    chargeDifference: Cargar diferencia a
+    withoutNegatives: Crear sin negativos
+    withoutNegativesInfo: Clonar este ticket con los cambios y solo ventas disponibles
+    negativesConfirmTitle: Editar datos básicos
+    negativesConfirmMessage: Se van a generar negativos, ¿seguro que quieres adelantar todas las líneas?
 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 3c60f40ab..351ca5baa 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -64,7 +64,8 @@ export default {
                         title: 'basicData',
                         icon: 'vn:settings',
                     },
-                    component: () => import('src/pages/Ticket/Card/TicketBasicData.vue'),
+                    component: () =>
+                        import('src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue'),
                 },
                 {
                     name: 'TicketSale',

From dfb67f6f2b872cbf87b976d229d7e6dda8b69118 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 21 Jun 2024 16:51:29 -0300
Subject: [PATCH 08/21] refactor

---
 .../Ticket/Card/BasicData/BasicDataTable.vue  |  29 +-
 .../Card/BasicData/TicketBasicDataForm.vue    | 463 ++++++++++++++
 .../Card/BasicData/TicketBasicDataView.vue    | 586 ++++--------------
 src/pages/Ticket/locale/en.yml                |   2 +
 src/pages/Ticket/locale/es.yml                |   2 +
 5 files changed, 595 insertions(+), 487 deletions(-)

diff --git a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
index 37c51fadf..b7eed5fa8 100644
--- a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
+++ b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
@@ -1,34 +1,47 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import FetchData from 'components/FetchData.vue';
-import { useVnConfirm } from 'composables/useVnConfirm';
 
 import { useStateStore } from 'stores/useStateStore';
 import { toCurrency } from 'filters/index';
 import { useRole } from 'src/composables/useRole';
 
 const $props = defineProps({
-    ticketData: {
+    formData: {
         type: Object,
         required: true,
     },
+    haveNegatives: {
+        type: Boolean,
+        required: true,
+        default: false,
+    },
 });
 
+const emit = defineEmits(['updateForm', 'update:haveNegatives']);
+
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { hasAny } = useRole();
-const { openConfirmationModal } = useVnConfirm();
 
-const _ticketData = ref($props.ticketData);
+const _ticketData = ref($props.formData);
 const ticketUpdateActions = ref(null);
-const haveNegatives = ref(false);
+const haveNegatives = computed({
+    get: () => $props.haveNegatives,
+    set: (val) => emit('update:haveNegatives', val),
+});
 const rows = computed(() => _ticketData.value?.sale?.items || []);
 
+watch(
+    () => _ticketData.value,
+    (val) => emit('updateForm', val)
+);
+
 const columns = computed(() => [
     {
         label: t('basicData.item'),
@@ -103,7 +116,6 @@ const ticketHaveNegatives = () => {
     let haveNotNegatives = false;
     _ticketData.value.withoutNegatives = false;
     const haveDifferences = _ticketData.value.sale.haveDifferences;
-
     _ticketData.value.sale.items.forEach((item) => {
         if (item.quantity > item.movable) _haveNegatives = true;
         else haveNotNegatives = true;
@@ -117,7 +129,6 @@ onMounted(() => {
     stateStore.rightDrawer = true;
     loadDefaultTicketAction();
     ticketHaveNegatives();
-    console.log('ticketData: ', _ticketData.value);
 });
 
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -234,7 +245,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         <template #body-cell-movable="{ row }">
             <QTd>
                 <QBadge
-                    v-if="row.haveDifferences"
+                    v-if="_ticketData?.sale?.haveDifferences"
                     :text-color="row.quantity > row.movable ? 'black' : 'white'"
                     :color="row.quantity > row.movable ? 'negative' : 'transparent'"
                     :label="row.movable"
diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
index e69de29bb..2412fad5c 100644
--- a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
@@ -0,0 +1,463 @@
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInputTime from 'components/common/VnInputTime.vue';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+import { toTimeFormat } from 'filters/date.js';
+
+const $props = defineProps({
+    formData: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+    },
+});
+
+const emit = defineEmits(['updateForm']);
+
+const { notify } = useNotify();
+const router = useRouter();
+const { t } = useI18n();
+const agencyFetchRef = ref(null);
+const zonesFetchRef = ref(null);
+
+const clientsOptions = ref([]);
+const warehousesOptions = ref([]);
+const companiesOptions = ref([]);
+const agenciesOptions = ref([]);
+const zonesOptions = ref([]);
+const addresses = ref([]);
+const _formData = ref($props.formData);
+
+watch(
+    () => _formData.value,
+    (val) => emit('updateForm', val)
+);
+
+const agencyByWarehouseFilter = computed(() => ({
+    fields: ['id', 'name'],
+    order: 'name ASC',
+    where: {
+        warehouseFk: warehouseId.value,
+    },
+}));
+
+const zonesFilter = computed(() => ({
+    fields: ['id', 'name'],
+    order: 'name ASC',
+    where: _formData.value?.agencyModeFk
+        ? {
+              shipped: _formData.value?.shipped,
+              addressFk: _formData.value?.addressFk,
+              agencyModeFk: _formData.value?.agencyModeFk,
+              warehouseFk: _formData.value?.warehouseFk,
+          }
+        : {},
+}));
+
+const getLanded = async (params) => {
+    try {
+        const validParams =
+            shipped.value && addressId.value && agencyModeId.value && warehouseId.value;
+        if (!validParams) return;
+
+        _formData.value.zoneFk = null;
+        zonesOptions.value = [];
+        const { data } = await axios.get(`Agencies/getLanded`, { params });
+        if (data) {
+            _formData.value.zoneFk = data.zoneFk;
+            _formData.value.landed = data.landed;
+            _formData.value.shipped = params.shipped;
+        }
+    } catch (error) {
+        console.error(error);
+        notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
+    }
+};
+
+const getShipped = async (params) => {
+    try {
+        const validParams =
+            landed.value && addressId.value && agencyModeId.value && warehouseId.value;
+        if (!validParams) return;
+
+        _formData.value.zoneFk = null;
+        zonesOptions.value = [];
+        const { data } = await axios.get(`Agencies/getShipped`, { params });
+        if (data) {
+            _formData.value.zoneFk = data.zoneFk;
+            _formData.value.landed = params.landed;
+            _formData.value.shipped = data.shipped;
+        } else {
+            notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
+        }
+    } catch (error) {
+        console.error(error);
+        notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
+    }
+};
+
+const onChangeZone = async (zoneId) => {
+    try {
+        _formData.value.agencyModeFk = null;
+        const { data } = await axios.get(`Zones/${zoneId}`);
+        _formData.value.agencyModeFk = data.agencyModeFk;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const onChangeAddress = async (addressId) => {
+    try {
+        _formData.value.nickname = null;
+        const { data } = await axios.get(`Addresses/${addressId}`);
+        _formData.value.nickname = data.nickname;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const getClientDefaultAddress = async (clientId) => {
+    try {
+        const { data } = await axios.get(`Clients/${clientId}`);
+        if (data) addressId.value = data.defaultAddressFk;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const clientAddressesList = async (value) => {
+    let filter = {
+        include: [
+            {
+                relation: 'province',
+                scope: {
+                    fields: ['name'],
+                },
+            },
+            {
+                relation: 'agencyMode',
+                scope: {
+                    fields: ['name'],
+                },
+            },
+        ],
+    };
+    const params = { filter: JSON.stringify(filter) };
+    const { data } = await axios.get(`Clients/${value}/addresses`, { params });
+    if (data) addresses.value = data;
+};
+
+const addressId = computed({
+    get: () => _formData.value?.addressFk,
+    set: (val) => {
+        if (val != _formData.value?.addressFk) {
+            _formData.value.addressFk = val;
+            onChangeAddress(val);
+            getShipped({
+                landed: _formData.value?.landed,
+                addressFk: val,
+                agencyModeFk: _formData.value?.agencyModeFk,
+                warehouseFk: _formData.value?.warehouseFk,
+            });
+        }
+    },
+});
+
+const clientId = computed({
+    get: () => _formData.value?.clientFk,
+    set: (val) => {
+        _formData.value.clientFk = val;
+        _formData.value.addressFk = null;
+        if (!val) return;
+        getClientDefaultAddress(val);
+        clientAddressesList(val);
+    },
+});
+
+const landed = computed({
+    get: () => _formData.value?.landed,
+    set: (val) => {
+        _formData.value.landed = val;
+        getShipped({
+            landed: val,
+            addressFk: _formData.value?.addressFk,
+            agencyModeFk: _formData.value?.agencyModeFk,
+            warehouseFk: _formData.value?.warehouseFk,
+        });
+    },
+});
+
+const agencyModeId = computed({
+    get: () => _formData.value.agencyModeFk,
+    set: (val) => {
+        if (val != _formData.value.agencyModeFk) {
+            _formData.value.agencyModeFk = val;
+            if (!val) return;
+            const agencyMode = agenciesOptions.value.find((a) => a.id == val);
+            _formData.value.warehouseFk = agencyMode.warehouseFk;
+
+            getLanded({
+                shipped: _formData.value?.shipped,
+                addressFk: _formData.value?.addressFk,
+                agencyModeFk: val,
+                warehouseFk: _formData.value?.warehouseFk,
+            });
+        }
+    },
+});
+
+const zoneId = computed({
+    get: () => _formData.value?.zoneFk,
+    set: (val) => {
+        if (val != _formData.value?.zoneFk) {
+            _formData.value.zoneFk = val;
+            onChangeZone(val);
+        }
+    },
+});
+
+const warehouseId = computed({
+    get: () => _formData.value?.warehouseFk,
+    set: (val) => {
+        if (val != _formData.value?.warehouseFk) {
+            _formData.value.warehouseFk = val;
+            getShipped({
+                landed: _formData.value?.landed,
+                addressFk: _formData.value?.addressFk,
+                agencyModeFk: _formData.value?.agencyModeFk,
+                warehouseFk: val,
+            }).then(() => {
+                if (zoneId.value == null) _formData.value.agencyModeFk = null;
+            });
+        }
+    },
+});
+
+const shipped = computed({
+    get: () => _formData.value?.shipped,
+    set: (val) => {
+        if (new Date(_formData.value?.shipped).toDateString() != val.toDateString())
+            val.setHours(0, 0, 0, 0);
+        _formData.value.shipped = val;
+        getLanded({
+            shipped: val,
+            addressFk: _formData.value?.addressFk,
+            agencyModeFk: _formData.value?.agencyModeFk,
+            warehouseFk: _formData.value?.warehouseFk,
+        });
+    },
+});
+
+const onFormModelInit = () => {
+    if (_formData.value?.clientFk) clientAddressesList(_formData.value?.clientFk);
+};
+
+const redirectToCustomerAddress = () => {
+    router.push({
+        name: 'CustomerAddressEditCard',
+        params: { id: clientId.value, addressId: addressId.value },
+    });
+};
+
+onMounted(() => onFormModelInit());
+</script>
+<template>
+    <FetchData
+        url="Clients"
+        :filter="{
+            fields: ['id', 'name'],
+            order: 'id',
+        }"
+        @on-fetch="(data) => (clientsOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Warehouses"
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Companies"
+        :filter="{
+            fields: ['id', 'code'],
+            order: 'code ASC',
+        }"
+        @on-fetch="(data) => (companiesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="agencyFetchRef"
+        url="AgencyModes/byWarehouse"
+        :filter="agencyByWarehouseFilter"
+        @on-fetch="(data) => (agenciesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="zonesFetchRef"
+        url="Zones/includingExpired"
+        :filter="zonesFilter"
+        @on-fetch="(data) => (zonesOptions = data)"
+        auto-load
+    />
+    <QForm>
+        <VnRow class="row q-gutter-md q-mb-md">
+            <VnSelect
+                :label="t('basicData.client')"
+                v-model="clientId"
+                option-value="id"
+                option-label="name"
+                :options="clientsOptions"
+                hide-selected
+                map-options
+                :required="true"
+            >
+                <template #option="scope">
+                    <QItem v-bind="scope.itemProps">
+                        <QItemSection>
+                            <QItemLabel
+                                >#{{ scope.opt?.id }} {{ scope.opt?.name }}</QItemLabel
+                            >
+                        </QItemSection>
+                    </QItem>
+                </template>
+            </VnSelect>
+            <VnSelect
+                :label="t('basicData.warehouse')"
+                v-model="warehouseId"
+                option-value="id"
+                option-label="name"
+                :options="warehousesOptions"
+                hide-selected
+                map-options
+                :required="true"
+            />
+        </VnRow>
+        <VnRow class="row q-gutter-md q-mb-md">
+            <VnSelect
+                :label="t('basicData.address')"
+                v-model="addressId"
+                option-value="id"
+                option-label="nickname"
+                :options="addresses"
+                hide-selected
+                map-options
+                :required="true"
+            >
+                <template #option="scope">
+                    <QItem v-bind="scope.itemProps">
+                        <QItemSection>
+                            <QItemLabel
+                                :class="{
+                                    'color-vn-label': !scope.opt?.isActive,
+                                }"
+                            >
+                                {{
+                                    `${
+                                        !scope.opt?.isActive
+                                            ? t('basicData.inactive')
+                                            : ''
+                                    } `
+                                }}
+                                <span> {{ scope.opt?.nickname }}</span>
+                                <span
+                                    v-if="
+                                        scope.opt?.province ||
+                                        scope.opt?.city ||
+                                        scope.opt?.street
+                                    "
+                                    >, {{ scope.opt?.street }}, {{ scope.opt?.city }},
+                                    {{ scope.opt?.province?.name }} -
+                                    {{ scope.opt?.agencyMode?.name }}</span
+                                >
+                            </QItemLabel>
+                        </QItemSection>
+                    </QItem>
+                </template>
+                <template #append>
+                    <QIcon
+                        name="edit"
+                        color="primary"
+                        size="sm"
+                        class="fill-icon cursor-pointer"
+                        @click.stop="redirectToCustomerAddress()"
+                    >
+                        <QTooltip>{{ t('basicData.editAddress') }}</QTooltip>
+                    </QIcon>
+                </template>
+            </VnSelect>
+            <VnInput :label="t('basicData.alias')" v-model="_formData.nickname" />
+        </VnRow>
+        <VnRow class="row q-gutter-md q-mb-md no-wrap">
+            <VnSelect
+                :label="t('basicData.company')"
+                v-model="_formData.companyFk"
+                option-value="id"
+                option-label="code"
+                :options="companiesOptions"
+                hide-selected
+                map-options
+                :required="true"
+            />
+            <VnSelect
+                :label="t('basicData.agency')"
+                v-model="agencyModeId"
+                option-value="id"
+                option-label="name"
+                :options="agenciesOptions"
+                hide-selected
+                map-options
+                :required="true"
+                @focus="agencyFetchRef.fetch()"
+            />
+            <VnSelect
+                :label="t('basicData.zone')"
+                v-model="zoneId"
+                option-value="id"
+                option-label="name"
+                :options="zonesOptions"
+                hide-selected
+                map-options
+                :required="true"
+                @focus="zonesFetchRef.fetch()"
+            >
+                <template #option="scope">
+                    <QItem v-bind="scope.itemProps">
+                        <QItemSection>
+                            <QItemLabel
+                                >{{ scope.opt?.name }} - Max.
+                                {{ toTimeFormat(scope.opt?.hour) }}
+                                h.</QItemLabel
+                            >
+                        </QItemSection>
+                    </QItem>
+                </template>
+            </VnSelect>
+        </VnRow>
+        <VnRow class="row q-gutter-md q-mb-md">
+            <VnInputDate
+                :label="t('basicData.shipped')"
+                v-model="_formData.shipped"
+                :required="true"
+            />
+            <VnInputTime
+                :label="t('basicData.shippedHour')"
+                v-model="_formData.shipped"
+            />
+            <VnInputDate
+                :label="t('basicData.landed')"
+                v-model="_formData.landed"
+                :required="true"
+            />
+        </VnRow>
+    </QForm>
+</template>
diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue
index bba90a35a..e8ed8bc0f 100644
--- a/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue
@@ -1,31 +1,28 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, onBeforeMount } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
-import FetchData from 'components/FetchData.vue';
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnInputTime from 'components/common/VnInputTime.vue';
 import BasicDataTable from './BasicDataTable.vue';
+import TicketBasicDataForm from './TicketBasicDataForm.vue';
+import { useVnConfirm } from 'composables/useVnConfirm';
 
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
-import { toTimeFormat } from 'filters/date.js';
 
 const { notify } = useNotify();
 const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
 const stepperRef = ref(null);
-const formModelRef = ref(null);
-const agencyFetchRef = ref(null);
-const zonesFetchRef = ref(null);
+const { openConfirmationModal } = useVnConfirm();
 
-const filter = {
+const step = ref(1);
+const formData = ref({});
+const initialDataLoaded = ref(false);
+const haveNegatives = ref(false);
+
+const ticketFilter = {
     include: [
         { relation: 'address' },
         {
@@ -53,319 +50,108 @@ const filter = {
     ],
 };
 
-const step = ref(1);
-const clientsOptions = ref([]);
-const warehousesOptions = ref([]);
-const companiesOptions = ref([]);
-const agenciesOptions = ref([]);
-const zonesOptions = ref([]);
-const addresses = ref([]);
-
-const agencyByWarehouseFilter = computed(() => ({
-    fields: ['id', 'name'],
-    order: 'name ASC',
-    where: {
-        warehouseFk: warehouseId.value,
-    },
-}));
-
-const zonesFilter = computed(() => ({
-    fields: ['id', 'name'],
-    order: 'name ASC',
-    where: formModelRef.value?.formData?.agencyModeFk
-        ? {
-              shipped: formModelRef.value?.formData?.shipped,
-              addressFk: formModelRef.value?.formData?.addressFk,
-              agencyModeFk: formModelRef.value?.formData?.agencyModeFk,
-              warehouseFk: formModelRef.value?.formData?.warehouseFk,
-          }
-        : {},
-}));
-
-const getLanded = async (params) => {
-    try {
-        const validParams =
-            shipped.value && addressId.value && agencyModeId.value && warehouseId.value;
-        if (!validParams) {
-            // this.$q.resolve(); ???????
-            return;
-        }
-        formModelRef.value.formData.zoneFk = null;
-        const { data } = await axios.get(`Agencies/getLanded`, { params });
-        if (data) {
-            formModelRef.value.formData.zoneFk = data.zoneFk;
-            formModelRef.value.formData.landed = data.landed;
-            formModelRef.value.formData.shipped = params.shipped;
-        }
-    } catch (error) {
-        console.error(error);
-        notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
-    }
+const getTicketData = async () => {
+    const params = { filter: JSON.stringify(ticketFilter) };
+    const { data } = await axios.get(`tickets/${route.params.id}`, { params });
+    formData.value = data;
+    initialDataLoaded.value = true;
 };
 
-const getShipped = async (params) => {
-    try {
-        const validParams =
-            landed.value && addressId.value && agencyModeId.value && warehouseId.value;
-        if (!validParams) return;
-
-        formModelRef.value.formData.zoneFk = null;
-        const { data } = await axios.get(`Agencies/getShipped`, { params });
-        if (data) {
-            formModelRef.value.formData.zoneFk = data.zoneFk;
-            formModelRef.value.formData.landed = params.landed;
-            formModelRef.value.formData.shipped = data.shipped;
-        } else {
-            notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
-        }
-    } catch (error) {
-        console.error(error);
-        notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
-    }
-};
-
-const onChangeZone = async (zoneId) => {
-    try {
-        formModelRef.value.formData.agencyModeFk = null;
-        const { data } = await axios.get(`Zones/${zoneId}`);
-        formModelRef.value.formData.agencyModeFk = data.agencyModeFk;
-    } catch (error) {
-        console.error(error);
-    }
-};
-
-const onChangeAddress = async (addressId) => {
-    try {
-        formModelRef.value.formData.nickname = null;
-        const { data } = await axios.get(`Addresses/${addressId}`);
-        formModelRef.value.formData.nickname = data.nickname;
-    } catch (error) {
-        console.error(error);
-    }
-};
-
-const getClientDefaultAddress = async (clientId) => {
-    try {
-        const { data } = await axios.get(`Clients/${clientId}`);
-        if (data) addressId.value = data.defaultAddressFk;
-    } catch (error) {
-        console.error(error);
-    }
-};
-
-const clientAddressesList = async (value) => {
-    let filter = {
-        include: [
-            {
-                relation: 'province',
-                scope: {
-                    fields: ['name'],
-                },
-            },
-            {
-                relation: 'agencyMode',
-                scope: {
-                    fields: ['name'],
-                },
-            },
-        ],
-    };
-    const params = { filter: JSON.stringify(filter) };
-    const { data } = await axios.get(`Clients/${value}/addresses`, { params });
-    if (data) addresses.value = data;
-};
-
-const addressId = computed({
-    get: () => formModelRef.value?.formData?.addressFk,
-    set: (val) => {
-        if (val != formModelRef.value?.formData?.addressFk) {
-            formModelRef.value.formData.addressFk = val;
-            onChangeAddress(val);
-            getShipped({
-                landed: formModelRef.value?.formData?.landed,
-                addressFk: val,
-                agencyModeFk: formModelRef.value?.formData?.agencyModeFk,
-                warehouseFk: formModelRef.value?.formData?.warehouseFk,
-            });
-        }
-    },
-});
-
-const clientId = computed({
-    get: () => formModelRef.value?.formData?.clientFk,
-    set: (val) => {
-        formModelRef.value.formData.clientFk = val;
-        formModelRef.value.formData.addressFk = null;
-        if (!val) return;
-        getClientDefaultAddress(val);
-        clientAddressesList(val);
-    },
-});
-
-const landed = computed({
-    get: () => formModelRef.value?.formData?.landed,
-    set: (val) => {
-        formModelRef.value.formData.landed = val;
-        getShipped({
-            landed: val,
-            addressFk: formModelRef.value?.formData?.addressFk,
-            agencyModeFk: formModelRef.value?.formData?.agencyModeFk,
-            warehouseFk: formModelRef.value?.formData?.warehouseFk,
-        });
-    },
-});
-
-const agencyModeId = computed({
-    get: () => formModelRef.value?.formData?.agencyModeFk,
-    set: (val) => {
-        if (val != formModelRef.value?.formData?.agencyModeFk) {
-            formModelRef.value.formData.agencyModeFk = val;
-            if (!val) return;
-            const agencyMode = agenciesOptions.value.find((a) => a.id == val);
-            formModelRef.value.formData.warehouseFk = agencyMode.warehouseFk;
-
-            getLanded({
-                shipped: formModelRef.value?.formData?.shipped,
-                addressFk: formModelRef.value?.formData?.addressFk,
-                agencyModeFk: val,
-                warehouseFk: formModelRef.value?.formData?.warehouseFk,
-            });
-        }
-    },
-});
-
-const zoneId = computed({
-    get: () => formModelRef.value?.formData?.zoneFk,
-    set: (val) => {
-        if (val != formModelRef.value.formData.zoneFk) {
-            formModelRef.value.formData.zoneFk = val;
-            onChangeZone(val);
-        }
-    },
-});
-
-const warehouseId = computed({
-    get: () => formModelRef.value?.formData?.warehouseFk,
-    set: (val) => {
-        if (val != formModelRef.value.formData.warehouseFk) {
-            formModelRef.value.formData.warehouseFk = val;
-            getShipped({
-                landed: formModelRef.value.formData.landed,
-                addressFk: formModelRef.value.formData.addressFk,
-                agencyModeFk: formModelRef.value.formData.agencyModeFk,
-                warehouseFk: val,
-            }).then(() => {
-                if (zoneId.value == null) formModelRef.value.formData.agencyModeFk = null;
-            });
-        }
-    },
-});
-
-const shipped = computed({
-    get: () => formModelRef.value?.formData?.shipped,
-    set: (val) => {
-        if (
-            new Date(formModelRef.value?.formData?.shipped).toDateString() !=
-            val.toDateString()
-        )
-            val.setHours(0, 0, 0, 0);
-        formModelRef.value.formData.shipped = val;
-        getLanded({
-            shipped: val,
-            addressFk: formModelRef.value?.formData?.addressFk,
-            agencyModeFk: formModelRef.value?.formData?.agencyModeFk,
-            warehouseFk: formModelRef.value?.formData?.warehouseFk,
-        });
-    },
-});
-
-const onFormModelInit = () => {
-    if (formModelRef.value.formData.clientFk)
-        clientAddressesList(formModelRef.value.formData.clientFk);
-};
-
-const redirectToCustomerAddress = () => {
-    router.push({
-        name: 'CustomerAddressEditCard',
-        params: { id: clientId.value, addressId: addressId.value },
-    });
-};
-
-const isFormInvalid = (formData) => {
+const isFormInvalid = () => {
     return (
-        !formData.clientFk ||
-        !formData.addressFk ||
-        !formData.agencyModeFk ||
-        !formData.companyFk ||
-        !formData.shipped ||
-        !formData.landed ||
-        !formData.zoneFk
+        !formData.value.clientFk ||
+        !formData.value.addressFk ||
+        !formData.value.agencyModeFk ||
+        !formData.value.companyFk ||
+        !formData.value.shipped ||
+        !formData.value.landed ||
+        !formData.value.zoneFk
     );
 };
 
+const getPriceDifference = async () => {
+    try {
+        const params = {
+            landed: formData.value.landed,
+            addressId: formData.value.addressFk,
+            agencyModeId: formData.value.agencyModeFk,
+            zoneId: formData.value.zoneFk,
+            warehouseId: formData.value.warehouseFk,
+            shipped: formData.value.shipped,
+        };
+        const { data } = await axios.post(
+            `tickets/${formData.value.id}/priceDifference`,
+            params
+        );
+        formData.value.sale = data;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const submit = async () => {
+    try {
+        if (!formData.value.option)
+            return notify(t('basicData.chooseAnOption'), 'negative');
+
+        const params = {
+            clientFk: formData.value.clientFk,
+            nickname: formData.value.nickname,
+            agencyModeFk: formData.value.agencyModeFk,
+            addressFk: formData.value.addressFk,
+            zoneFk: formData.value.zoneFk,
+            warehouseFk: formData.value.warehouseFk,
+            companyFk: formData.value.companyFk,
+            shipped: formData.value.shipped,
+            landed: formData.value.landed,
+            isDeleted: formData.value.isDeleted,
+            option: formData.value.option,
+            isWithoutNegatives: formData.value.withoutNegatives,
+            withWarningAccept: formData.value.withWarningAccept,
+            keepPrice: false,
+        };
+
+        const { data } = await axios.post(
+            `tickets/${formData.value.id}/componentUpdate`,
+            params
+        );
+
+        if (!data) return;
+
+        const ticketToMove = data.id;
+        notify(t('basicData.unroutedTicket'), 'positive');
+        router.push({ name: 'TicketSummary', params: { id: ticketToMove } });
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const submitWithNegatives = async () => {
+    formData.value.withWarningAccept = true;
+    submit();
+};
+
 const onNextStep = async () => {
     if (step.value === 1) {
-        const formData = formModelRef.value.formData;
-        if (isFormInvalid(formData))
+        if (isFormInvalid())
             return notify(t('basicData.someFieldsAreInvalid'), 'negative');
 
-        if (!formData.sale || formModelRef.value.hasChanges) {
-            const params = {
-                landed: formData.landed,
-                addressId: formData.addressFk,
-                agencyModeId: formData.agencyModeFk,
-                zoneId: formData.zoneFk,
-                warehouseId: formData.warehouseFk,
-                shipped: formData.shipped,
-            };
-            const { data } = await axios.post(
-                `tickets/${formData.id}/priceDifference`,
-                params
+        await getPriceDifference();
+        stepperRef.value.next();
+    } else if (step.value === 2) {
+        if (haveNegatives.value && !formData.value.withoutNegatives)
+            openConfirmationModal(
+                t('basicData.negativesConfirmTitle'),
+                t('basicData.negativesConfirmMessage'),
+                submitWithNegatives
             );
-            formData.sale = data;
-            stepperRef.value.next();
-        }
+        else submit();
     }
 };
+
+onBeforeMount(async () => await getTicketData());
 </script>
 <template>
-    <FetchData
-        url="Clients"
-        :filter="{
-            fields: ['id', 'name'],
-            order: 'id',
-        }"
-        @on-fetch="(data) => (clientsOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="Warehouses"
-        @on-fetch="(data) => (warehousesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="Companies"
-        :filter="{
-            fields: ['id', 'code'],
-            order: 'code ASC',
-        }"
-        @on-fetch="(data) => (companiesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        ref="agencyFetchRef"
-        url="AgencyModes/byWarehouse"
-        :filter="agencyByWarehouseFilter"
-        @on-fetch="(data) => (agenciesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        ref="zonesFetchRef"
-        url="Zones/includingExpired"
-        :filter="zonesFilter"
-        @on-fetch="(data) => (zonesOptions = data)"
-        auto-load
-    />
     <QStepper
         v-model="step"
         ref="stepperRef"
@@ -373,177 +159,22 @@ const onNextStep = async () => {
         header-nav
         animated
         keep-alive
+        style="max-width: 800px; margin: auto"
     >
         <QStep :name="1" :title="t('globals.pageTitles.basicData')" :done="step > 1">
-            <FormModel
-                ref="formModelRef"
-                :url="`Tickets/${route.params.id}`"
-                :url-update="`Tickets/${route.params.id}`"
-                :filter="filter"
-                model="Ticket"
-                auto-load
-                :default-actions="false"
-                @on-fetch="onFormModelInit()"
-            >
-                <template #form="{ data }">
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <VnSelect
-                            :label="t('basicData.client')"
-                            v-model="clientId"
-                            option-value="id"
-                            option-label="name"
-                            :options="clientsOptions"
-                            hide-selected
-                            map-options
-                            :required="true"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel
-                                            >#{{ scope.opt?.id }}
-                                            {{ scope.opt?.name }}</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelect>
-                        <VnSelect
-                            :label="t('basicData.warehouse')"
-                            v-model="warehouseId"
-                            option-value="id"
-                            option-label="name"
-                            :options="warehousesOptions"
-                            hide-selected
-                            map-options
-                            :required="true"
-                        />
-                    </VnRow>
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <VnSelect
-                            :label="t('basicData.address')"
-                            v-model="addressId"
-                            option-value="id"
-                            option-label="nickname"
-                            :options="addresses"
-                            hide-selected
-                            map-options
-                            :required="true"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel
-                                            :class="{
-                                                'color-vn-label': !scope.opt?.isActive,
-                                            }"
-                                        >
-                                            {{
-                                                `${
-                                                    !scope.opt?.isActive
-                                                        ? t('basicData.inactive')
-                                                        : ''
-                                                } `
-                                            }}
-                                            <span> {{ scope.opt?.nickname }}</span>
-                                            <span
-                                                v-if="
-                                                    scope.opt?.province ||
-                                                    scope.opt?.city ||
-                                                    scope.opt?.street
-                                                "
-                                                >, {{ scope.opt?.street }},
-                                                {{ scope.opt?.city }},
-                                                {{ scope.opt?.province?.name }} -
-                                                {{ scope.opt?.agencyMode?.name }}</span
-                                            >
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                            <template #append>
-                                <QIcon
-                                    name="edit"
-                                    color="primary"
-                                    size="sm"
-                                    class="fill-icon cursor-pointer"
-                                    @click.stop="redirectToCustomerAddress()"
-                                >
-                                    <QTooltip>{{ t('basicData.editAddress') }}</QTooltip>
-                                </QIcon>
-                            </template>
-                        </VnSelect>
-                        <VnInput :label="t('basicData.alias')" v-model="data.nickname" />
-                    </VnRow>
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <VnSelect
-                            :label="t('basicData.company')"
-                            v-model="data.companyFk"
-                            option-value="id"
-                            option-label="code"
-                            :options="companiesOptions"
-                            hide-selected
-                            map-options
-                            :required="true"
-                        />
-                        <VnSelect
-                            :label="t('basicData.agency')"
-                            v-model="agencyModeId"
-                            option-value="id"
-                            option-label="name"
-                            :options="agenciesOptions"
-                            hide-selected
-                            map-options
-                            :required="true"
-                            @focus="agencyFetchRef.fetch()"
-                        />
-                        <VnSelect
-                            :label="t('basicData.zone')"
-                            v-model="zoneId"
-                            option-value="id"
-                            option-label="name"
-                            :options="zonesOptions"
-                            hide-selected
-                            map-options
-                            :required="true"
-                            @focus="zonesFetchRef.fetch()"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel
-                                            >{{ scope.opt?.name }} - Max.
-                                            {{ toTimeFormat(scope.opt?.hour) }}
-                                            h.</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelect>
-                    </VnRow>
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <VnInputDate
-                            :label="t('basicData.shipped')"
-                            v-model="data.shipped"
-                            :required="true"
-                        />
-                        <VnInputTime
-                            :label="t('basicData.shippedHour')"
-                            v-model="data.shipped"
-                        />
-                        <VnInputDate
-                            :label="t('basicData.landed')"
-                            v-model="data.landed"
-                            :required="true"
-                        />
-                    </VnRow>
-                </template>
-            </FormModel>
+            <TicketBasicDataForm
+                v-if="initialDataLoaded"
+                @update-form="($event) => (formData = $event)"
+                :form-data="formData"
+            />
         </QStep>
         <QStep :name="2" :title="t('basicData.priceDifference')">
-            <BasicDataTable :ticket-data="formModelRef.formData" />
+            <BasicDataTable
+                :form-data="formData"
+                v-model:haveNegatives="haveNegatives"
+                @update-form="($event) => (formData = $event)"
+            />
         </QStep>
-
         <template #navigation>
             <QStepperNavigation>
                 <QBtn
@@ -562,5 +193,4 @@ const onNextStep = async () => {
             </QStepperNavigation>
         </template>
     </QStepper>
-    <pre v-if="formModelRef">{{ formModelRef.formData }}</pre>
 </template>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index 6fe813a2a..88b73857b 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -32,3 +32,5 @@ basicData:
     withoutNegativesInfo: Clone this ticket with the changes and only sales availables
     negativesConfirmTitle: Edit basic data
     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
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 8f9394a2e..087cacb45 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -32,5 +32,7 @@ basicData:
     withoutNegativesInfo: Clonar este ticket con los cambios y solo ventas disponibles
     negativesConfirmTitle: Editar datos básicos
     negativesConfirmMessage: Se van a generar negativos, ¿seguro que quieres adelantar todas las líneas?
+    chooseAnOption: Elige una opción
+    unroutedTicket: El ticket ha sido desenrutado
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket

From 3d9d41afcb7708c47d2dcacfa728b577768ac60e Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 21 Jun 2024 16:55:33 -0300
Subject: [PATCH 09/21] Add deep true

---
 src/pages/Ticket/Card/BasicData/BasicDataTable.vue      | 3 ++-
 src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
index b7eed5fa8..ef7d10a46 100644
--- a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
+++ b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
@@ -39,7 +39,8 @@ const rows = computed(() => _ticketData.value?.sale?.items || []);
 
 watch(
     () => _ticketData.value,
-    (val) => emit('updateForm', val)
+    (val) => emit('updateForm', val),
+    { deep: true }
 );
 
 const columns = computed(() => [
diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
index 2412fad5c..678cbdf30 100644
--- a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
@@ -40,7 +40,8 @@ const _formData = ref($props.formData);
 
 watch(
     () => _formData.value,
-    (val) => emit('updateForm', val)
+    (val) => emit('updateForm', val),
+    { deep: true }
 );
 
 const agencyByWarehouseFilter = computed(() => ({

From 3d0cbcfd12b2f478e20fa5eef8f3e90b8da125c8 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 21 Jun 2024 16:57:51 -0300
Subject: [PATCH 10/21] remove form model expose

---
 src/components/FormModel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 11542ed65..336ea281e 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -246,7 +246,7 @@ function updateAndEmit(evt, val, res) {
     emit(evt, state.get(modelValue), res);
 }
 
-defineExpose({ save, isLoading, hasChanges, formData });
+defineExpose({ save, isLoading, hasChanges });
 </script>
 <template>
     <div class="column items-center full-width">

From ea7ee97867f7feed2a11a7dacbeb6e29a69c7e0d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Jun 2024 09:35:21 +0200
Subject: [PATCH 11/21] proposals

---
 .../Ticket/Card/BasicData/BasicDataTable.vue  |   6 +-
 .../Card/BasicData/TicketBasicDataForm.vue    | 127 +++++++++---------
 2 files changed, 64 insertions(+), 69 deletions(-)

diff --git a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
index ef7d10a46..c14c95a70 100644
--- a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
+++ b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
@@ -106,10 +106,7 @@ const totalNewPrice = computed(() => {
 });
 
 const totalDifference = computed(() => {
-    return rows.value.reduce(
-        (acc, item) => acc + item.component.difference * item.quantity,
-        0
-    );
+    return rows.value.reduce((acc, item) => acc + item.component.difference, 0);
 });
 
 const ticketHaveNegatives = () => {
@@ -225,6 +222,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         :pagination="{ rowsPerPage: 0 }"
         class="full-width q-mt-md"
         :no-data-label="t('globals.noResults')"
+        flat
     >
         <template #body-cell-item="{ row }">
             <QTd>
diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
index 678cbdf30..07e7b8043 100644
--- a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
@@ -36,10 +36,10 @@ const companiesOptions = ref([]);
 const agenciesOptions = ref([]);
 const zonesOptions = ref([]);
 const addresses = ref([]);
-const _formData = ref($props.formData);
+const formData = ref($props.formData);
 
 watch(
-    () => _formData.value,
+    () => formData.value,
     (val) => emit('updateForm', val),
     { deep: true }
 );
@@ -55,12 +55,12 @@ const agencyByWarehouseFilter = computed(() => ({
 const zonesFilter = computed(() => ({
     fields: ['id', 'name'],
     order: 'name ASC',
-    where: _formData.value?.agencyModeFk
+    where: formData.value?.agencyModeFk
         ? {
-              shipped: _formData.value?.shipped,
-              addressFk: _formData.value?.addressFk,
-              agencyModeFk: _formData.value?.agencyModeFk,
-              warehouseFk: _formData.value?.warehouseFk,
+              shipped: formData.value?.shipped,
+              addressFk: formData.value?.addressFk,
+              agencyModeFk: formData.value?.agencyModeFk,
+              warehouseFk: formData.value?.warehouseFk,
           }
         : {},
 }));
@@ -71,13 +71,13 @@ const getLanded = async (params) => {
             shipped.value && addressId.value && agencyModeId.value && warehouseId.value;
         if (!validParams) return;
 
-        _formData.value.zoneFk = null;
+        formData.value.zoneFk = null;
         zonesOptions.value = [];
         const { data } = await axios.get(`Agencies/getLanded`, { params });
         if (data) {
-            _formData.value.zoneFk = data.zoneFk;
-            _formData.value.landed = data.landed;
-            _formData.value.shipped = params.shipped;
+            formData.value.zoneFk = data.zoneFk;
+            formData.value.landed = data.landed;
+            formData.value.shipped = params.shipped;
         }
     } catch (error) {
         console.error(error);
@@ -91,13 +91,13 @@ const getShipped = async (params) => {
             landed.value && addressId.value && agencyModeId.value && warehouseId.value;
         if (!validParams) return;
 
-        _formData.value.zoneFk = null;
+        formData.value.zoneFk = null;
         zonesOptions.value = [];
         const { data } = await axios.get(`Agencies/getShipped`, { params });
         if (data) {
-            _formData.value.zoneFk = data.zoneFk;
-            _formData.value.landed = params.landed;
-            _formData.value.shipped = data.shipped;
+            formData.value.zoneFk = data.zoneFk;
+            formData.value.landed = params.landed;
+            formData.value.shipped = data.shipped;
         } else {
             notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
         }
@@ -109,9 +109,9 @@ const getShipped = async (params) => {
 
 const onChangeZone = async (zoneId) => {
     try {
-        _formData.value.agencyModeFk = null;
+        formData.value.agencyModeFk = null;
         const { data } = await axios.get(`Zones/${zoneId}`);
-        _formData.value.agencyModeFk = data.agencyModeFk;
+        formData.value.agencyModeFk = data.agencyModeFk;
     } catch (error) {
         console.error(error);
     }
@@ -119,9 +119,9 @@ const onChangeZone = async (zoneId) => {
 
 const onChangeAddress = async (addressId) => {
     try {
-        _formData.value.nickname = null;
+        formData.value.nickname = null;
         const { data } = await axios.get(`Addresses/${addressId}`);
-        _formData.value.nickname = data.nickname;
+        formData.value.nickname = data.nickname;
     } catch (error) {
         console.error(error);
     }
@@ -159,26 +159,26 @@ const clientAddressesList = async (value) => {
 };
 
 const addressId = computed({
-    get: () => _formData.value?.addressFk,
+    get: () => formData.value?.addressFk,
     set: (val) => {
-        if (val != _formData.value?.addressFk) {
-            _formData.value.addressFk = val;
+        if (val != formData.value?.addressFk) {
+            formData.value.addressFk = val;
             onChangeAddress(val);
             getShipped({
-                landed: _formData.value?.landed,
+                landed: formData.value?.landed,
                 addressFk: val,
-                agencyModeFk: _formData.value?.agencyModeFk,
-                warehouseFk: _formData.value?.warehouseFk,
+                agencyModeFk: formData.value?.agencyModeFk,
+                warehouseFk: formData.value?.warehouseFk,
             });
         }
     },
 });
 
 const clientId = computed({
-    get: () => _formData.value?.clientFk,
+    get: () => formData.value?.clientFk,
     set: (val) => {
-        _formData.value.clientFk = val;
-        _formData.value.addressFk = null;
+        formData.value.clientFk = val;
+        formData.value.addressFk = null;
         if (!val) return;
         getClientDefaultAddress(val);
         clientAddressesList(val);
@@ -186,81 +186,81 @@ const clientId = computed({
 });
 
 const landed = computed({
-    get: () => _formData.value?.landed,
+    get: () => formData.value?.landed,
     set: (val) => {
-        _formData.value.landed = val;
+        formData.value.landed = val;
         getShipped({
             landed: val,
-            addressFk: _formData.value?.addressFk,
-            agencyModeFk: _formData.value?.agencyModeFk,
-            warehouseFk: _formData.value?.warehouseFk,
+            addressFk: formData.value?.addressFk,
+            agencyModeFk: formData.value?.agencyModeFk,
+            warehouseFk: formData.value?.warehouseFk,
         });
     },
 });
 
 const agencyModeId = computed({
-    get: () => _formData.value.agencyModeFk,
+    get: () => formData.value.agencyModeFk,
     set: (val) => {
-        if (val != _formData.value.agencyModeFk) {
-            _formData.value.agencyModeFk = val;
+        if (val != formData.value.agencyModeFk) {
+            formData.value.agencyModeFk = val;
             if (!val) return;
             const agencyMode = agenciesOptions.value.find((a) => a.id == val);
-            _formData.value.warehouseFk = agencyMode.warehouseFk;
+            formData.value.warehouseFk = agencyMode.warehouseFk;
 
             getLanded({
-                shipped: _formData.value?.shipped,
-                addressFk: _formData.value?.addressFk,
+                shipped: formData.value?.shipped,
+                addressFk: formData.value?.addressFk,
                 agencyModeFk: val,
-                warehouseFk: _formData.value?.warehouseFk,
+                warehouseFk: formData.value?.warehouseFk,
             });
         }
     },
 });
 
 const zoneId = computed({
-    get: () => _formData.value?.zoneFk,
+    get: () => formData.value?.zoneFk,
     set: (val) => {
-        if (val != _formData.value?.zoneFk) {
-            _formData.value.zoneFk = val;
+        if (val != formData.value?.zoneFk) {
+            formData.value.zoneFk = val;
             onChangeZone(val);
         }
     },
 });
 
 const warehouseId = computed({
-    get: () => _formData.value?.warehouseFk,
+    get: () => formData.value?.warehouseFk,
     set: (val) => {
-        if (val != _formData.value?.warehouseFk) {
-            _formData.value.warehouseFk = val;
+        if (val != formData.value?.warehouseFk) {
+            formData.value.warehouseFk = val;
             getShipped({
-                landed: _formData.value?.landed,
-                addressFk: _formData.value?.addressFk,
-                agencyModeFk: _formData.value?.agencyModeFk,
+                landed: formData.value?.landed,
+                addressFk: formData.value?.addressFk,
+                agencyModeFk: formData.value?.agencyModeFk,
                 warehouseFk: val,
             }).then(() => {
-                if (zoneId.value == null) _formData.value.agencyModeFk = null;
+                if (zoneId.value == null) formData.value.agencyModeFk = null;
             });
         }
     },
 });
 
 const shipped = computed({
-    get: () => _formData.value?.shipped,
+    get: () => formData.value?.shipped,
     set: (val) => {
-        if (new Date(_formData.value?.shipped).toDateString() != val.toDateString())
+        if (new Date(formData.value?.shipped).toDateString() != val.toDateString())
             val.setHours(0, 0, 0, 0);
-        _formData.value.shipped = val;
+        formData.value.shipped = val;
         getLanded({
             shipped: val,
-            addressFk: _formData.value?.addressFk,
-            agencyModeFk: _formData.value?.agencyModeFk,
-            warehouseFk: _formData.value?.warehouseFk,
+            addressFk: formData.value?.addressFk,
+            agencyModeFk: formData.value?.agencyModeFk,
+            warehouseFk: formData.value?.warehouseFk,
         });
     },
 });
 
 const onFormModelInit = () => {
-    if (_formData.value?.clientFk) clientAddressesList(_formData.value?.clientFk);
+    if (formData.value?.clientFk) clientAddressesList(formData.value?.clientFk);
 };
 
 const redirectToCustomerAddress = () => {
@@ -396,12 +396,12 @@ onMounted(() => onFormModelInit());
                     </QIcon>
                 </template>
             </VnSelect>
-            <VnInput :label="t('basicData.alias')" v-model="_formData.nickname" />
+            <VnInput :label="t('basicData.alias')" v-model="formData.nickname" />
         </VnRow>
         <VnRow class="row q-gutter-md q-mb-md no-wrap">
             <VnSelect
                 :label="t('basicData.company')"
-                v-model="_formData.companyFk"
+                v-model="formData.companyFk"
                 option-value="id"
                 option-label="code"
                 :options="companiesOptions"
@@ -447,16 +447,13 @@ onMounted(() => onFormModelInit());
         <VnRow class="row q-gutter-md q-mb-md">
             <VnInputDate
                 :label="t('basicData.shipped')"
-                v-model="_formData.shipped"
+                v-model="formData.shipped"
                 :required="true"
             />
-            <VnInputTime
-                :label="t('basicData.shippedHour')"
-                v-model="_formData.shipped"
-            />
+            <VnInputTime :label="t('basicData.shippedHour')" v-model="formData.shipped" />
             <VnInputDate
                 :label="t('basicData.landed')"
-                v-model="_formData.landed"
+                v-model="formData.landed"
                 :required="true"
             />
         </VnRow>

From 5a66af341f2f4d288fdef7f50e2afd2624ce4e05 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Jun 2024 10:07:36 +0200
Subject: [PATCH 12/21] fix: state translations

---
 src/pages/Ticket/Card/TicketPurchaseRequest.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/pages/Ticket/Card/TicketPurchaseRequest.vue b/src/pages/Ticket/Card/TicketPurchaseRequest.vue
index 387a5baf1..ea81a445c 100644
--- a/src/pages/Ticket/Card/TicketPurchaseRequest.vue
+++ b/src/pages/Ticket/Card/TicketPurchaseRequest.vue
@@ -123,7 +123,7 @@ const columns = computed(() => [
         name: 'state',
         field: 'isOk',
         align: 'left',
-        format: (val) => getRequestState(val),
+        format: (val) => t(getRequestState(val)),
     },
     {
         label: '',
@@ -259,3 +259,9 @@ const openCreateModal = () => createTicketRequestDialogRef.value.show();
         </QPageSticky>
     </QPage>
 </template>
+<i18n>
+    es:
+        New: Nueva
+        Denied: Denegada
+        Accepted: Aceptada
+</i18n>

From d10f6b4d6c9e8c73f744c42deeb7349a3363f726 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Jun 2024 10:33:15 +0200
Subject: [PATCH 13/21] replace value sale.itemFk

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

diff --git a/src/pages/Ticket/Card/TicketPurchaseRequest.vue b/src/pages/Ticket/Card/TicketPurchaseRequest.vue
index ea81a445c..281dc46a1 100644
--- a/src/pages/Ticket/Card/TicketPurchaseRequest.vue
+++ b/src/pages/Ticket/Card/TicketPurchaseRequest.vue
@@ -221,7 +221,7 @@ const openCreateModal = () => createTicketRequestDialogRef.value.show();
                     <template #body-cell-saleFk="{ row }">
                         <QTd @click.stop>
                             <QBtn v-if="row.saleFk" flat color="primary">
-                                {{ row.requester?.user?.nickname }}
+                                {{ row.sale.itemFk }}
                                 <ItemDescriptorProxy :id="row.sale.itemFk" />
                             </QBtn>
                         </QTd>

From 266657fab5bd31f330b4a18bfbbf66dc238bf5a5 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 25 Jun 2024 08:35:11 -0300
Subject: [PATCH 14/21] Fix total difference

---
 src/pages/Ticket/Card/BasicData/BasicDataTable.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
index ef7d10a46..6faf7c9e5 100644
--- a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
+++ b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
@@ -106,10 +106,7 @@ const totalNewPrice = computed(() => {
 });
 
 const totalDifference = computed(() => {
-    return rows.value.reduce(
-        (acc, item) => acc + item.component.difference * item.quantity,
-        0
-    );
+    return rows.value.reduce((acc, item) => acc + item.component?.difference || 0, 0);
 });
 
 const ticketHaveNegatives = () => {

From 9817ae8c2c1a32cbb7270b8f9499174adb186eb4 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Jun 2024 13:35:16 +0200
Subject: [PATCH 15/21] fix: column hidden v-if

---
 src/pages/Ticket/Card/BasicData/BasicDataTable.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
index c14c95a70..60aeeb4f9 100644
--- a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
+++ b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
@@ -45,15 +45,18 @@ watch(
 
 const columns = computed(() => [
     {
+        required: true,
         label: t('basicData.item'),
         name: 'item',
         align: 'left',
         format: (val) => val.name,
     },
     {
+        required: true,
         label: t('basicData.description'),
         name: 'description',
         align: 'left',
+        hidden: true,
     },
     {
         label: t('basicData.movable'),
@@ -61,12 +64,14 @@ const columns = computed(() => [
         align: 'left',
     },
     {
+        required: true,
         label: t('basicData.quantity'),
         name: 'quantity',
         field: 'quantity',
         align: 'left',
     },
     {
+        required: true,
         label: t('basicData.pricePPU'),
         name: 'price',
         field: 'price',
@@ -74,6 +79,7 @@ const columns = computed(() => [
         format: (val) => toCurrency(val),
     },
     {
+        required: true,
         label: t('basicData.newPricePPU'),
         name: 'newPrice',
         field: (row) => row.component.newPrice,
@@ -81,6 +87,7 @@ const columns = computed(() => [
         format: (val) => toCurrency(val),
     },
     {
+        required: true,
         label: t('basicData.difference'),
         name: 'difference',
         field: (row) => row.component.difference,
@@ -108,18 +115,18 @@ const totalNewPrice = computed(() => {
 const totalDifference = computed(() => {
     return rows.value.reduce((acc, item) => acc + item.component.difference, 0);
 });
-
+const showMovablecolumn = computed(() => (haveDifferences.value > 0 ? ['movable'] : []));
+const haveDifferences = computed(() => _ticketData.value.sale.haveDifferences);
 const ticketHaveNegatives = () => {
     let _haveNegatives = false;
     let haveNotNegatives = false;
     _ticketData.value.withoutNegatives = false;
-    const haveDifferences = _ticketData.value.sale.haveDifferences;
     _ticketData.value.sale.items.forEach((item) => {
         if (item.quantity > item.movable) _haveNegatives = true;
         else haveNotNegatives = true;
     });
 
-    haveNegatives.value = _haveNegatives && haveNotNegatives && haveDifferences;
+    haveNegatives.value = _haveNegatives && haveNotNegatives && haveDifferences.value;
     if (haveNegatives.value) _ticketData.value.withoutNegatives = true;
 };
 
@@ -216,6 +223,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         </template>
     </RightMenu>
     <QTable
+        :visible-columns="showMovablecolumn"
         :rows="rows"
         :columns="columns"
         row-key="id"

From 54e3eb6f0d7de3726ffa6269e7d9c02b2b9faa5d Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 25 Jun 2024 08:40:21 -0300
Subject: [PATCH 16/21] Add required rule to VnInputTime and VnInputDate

---
 src/components/common/VnInputDate.vue                   | 6 ++++++
 src/components/common/VnInputTime.vue                   | 5 ++++-
 src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue | 8 ++++++--
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index fe0866292..a2ad54eda 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import isValidDate from 'filters/isValidDate';
 
 const props = defineProps({
@@ -24,6 +25,9 @@ const hover = ref(false);
 
 const emit = defineEmits(['update:modelValue']);
 
+const { t } = useI18n();
+const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+
 const joinDateAndTime = (date, time) => {
     if (!date) {
         return null;
@@ -91,6 +95,8 @@ const styleAttrs = computed(() => {
             readonly
             :model-value="displayDate(value)"
             v-bind="{ ...$attrs, ...styleAttrs }"
+            :class="{ required: $attrs.required }"
+            :rules="$attrs.required ? [requiredFieldRule] : null"
             @click="isPopupOpen = true"
         >
             <template #append>
diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue
index 4b436c136..5c84951cb 100644
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@@ -17,8 +17,9 @@ const props = defineProps({
         default: false,
     },
 });
-const { t } = useI18n();
 const emit = defineEmits(['update:modelValue']);
+const { t } = useI18n();
+const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
 
 const value = computed({
     get() {
@@ -71,6 +72,8 @@ const styleAttrs = computed(() => {
         readonly
         :model-value="formatTime(value)"
         v-bind="{ ...$attrs, ...styleAttrs }"
+        :class="{ required: $attrs.required }"
+        :rules="$attrs.required ? [requiredFieldRule] : null"
         @click="isPopupOpen = true"
     >
         <template #append>
diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
index 678cbdf30..f7e5f6836 100644
--- a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
@@ -396,7 +396,11 @@ onMounted(() => onFormModelInit());
                     </QIcon>
                 </template>
             </VnSelect>
-            <VnInput :label="t('basicData.alias')" v-model="_formData.nickname" />
+            <VnInput
+                :label="t('basicData.alias')"
+                v-model="_formData.nickname"
+                :required="true"
+            />
         </VnRow>
         <VnRow class="row q-gutter-md q-mb-md no-wrap">
             <VnSelect
@@ -417,7 +421,6 @@ onMounted(() => onFormModelInit());
                 :options="agenciesOptions"
                 hide-selected
                 map-options
-                :required="true"
                 @focus="agencyFetchRef.fetch()"
             />
             <VnSelect
@@ -453,6 +456,7 @@ onMounted(() => onFormModelInit());
             <VnInputTime
                 :label="t('basicData.shippedHour')"
                 v-model="_formData.shipped"
+                :required="true"
             />
             <VnInputDate
                 :label="t('basicData.landed')"

From 4de347d0e8f180a05035282ddf863fd8d5b3918b Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 25 Jun 2024 09:19:12 -0300
Subject: [PATCH 17/21] Rmove nav navigation and organize buttons

---
 .../Ticket/Card/BasicData/BasicDataTable.vue      |  4 ++--
 .../Ticket/Card/BasicData/TicketBasicDataView.vue | 15 +++++++--------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
index 8ba56213b..48b8c882f 100644
--- a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
+++ b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
@@ -116,12 +116,12 @@ const totalDifference = computed(() => {
     return rows.value.reduce((acc, item) => acc + item.component?.difference || 0, 0);
 });
 const showMovablecolumn = computed(() => (haveDifferences.value > 0 ? ['movable'] : []));
-const haveDifferences = computed(() => _ticketData.value.sale.haveDifferences);
+const haveDifferences = computed(() => _ticketData.value.sale?.haveDifferences);
 const ticketHaveNegatives = () => {
     let _haveNegatives = false;
     let haveNotNegatives = false;
     _ticketData.value.withoutNegatives = false;
-    _ticketData.value.sale.items.forEach((item) => {
+    _ticketData.value?.sale?.items.forEach((item) => {
         if (item.quantity > item.movable) _haveNegatives = true;
         else haveNotNegatives = true;
     });
diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue
index e8ed8bc0f..af47761a2 100644
--- a/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue
@@ -156,7 +156,6 @@ onBeforeMount(async () => await getTicketData());
         v-model="step"
         ref="stepperRef"
         color="primary"
-        header-nav
         animated
         keep-alive
         style="max-width: 800px; margin: auto"
@@ -176,19 +175,19 @@ onBeforeMount(async () => await getTicketData());
             />
         </QStep>
         <template #navigation>
-            <QStepperNavigation>
+            <QStepperNavigation class="flex justify-between">
                 <QBtn
-                    @click="onNextStep()"
-                    color="primary"
-                    :label="step === 2 ? t('basicData.finalize') : t('basicData.next')"
-                />
-                <QBtn
-                    v-if="step > 1"
                     flat
                     color="primary"
                     @click="stepperRef.previous()"
                     :label="t('basicData.back')"
                     class="q-ml-sm"
+                    :class="{ invisible: step === 1 }"
+                />
+                <QBtn
+                    @click="onNextStep()"
+                    color="primary"
+                    :label="step === 2 ? t('basicData.finalize') : t('basicData.next')"
                 />
             </QStepperNavigation>
         </template>

From d29bf095358a62cd9db21719b65cbda66ec34531 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Jun 2024 14:48:39 +0200
Subject: [PATCH 18/21] remove warnings

---
 src/components/ui/VnImg.vue                 |  2 +-
 src/pages/Account/Card/AccountBasicData.vue |  1 -
 src/pages/Route/RouteList.vue               |  1 -
 src/pages/Route/RouteRoadmap.vue            |  2 +-
 src/pages/Ticket/Card/TicketSale.vue        | 17 ++++++++---------
 5 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
index a88c02898..37c1edefc 100644
--- a/src/components/ui/VnImg.vue
+++ b/src/components/ui/VnImg.vue
@@ -32,7 +32,7 @@ const url = computed(
     () =>
         `/api/${$props.storage}/${$props.collection}/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
 );
-const reload = (emit = false) => {
+const reload = () => {
     timeStamp.value = `timestamp=${Date.now()}`;
 };
 defineExpose({
diff --git a/src/pages/Account/Card/AccountBasicData.vue b/src/pages/Account/Card/AccountBasicData.vue
index 3a9d5c9bf..42b77419f 100644
--- a/src/pages/Account/Card/AccountBasicData.vue
+++ b/src/pages/Account/Card/AccountBasicData.vue
@@ -3,7 +3,6 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import { ref, watch } from 'vue';
 
diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue
index edec43fec..de60d164e 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
 import { computed, onMounted, ref } from 'vue';
 import { dashIfEmpty, toHour } from 'src/filters';
diff --git a/src/pages/Route/RouteRoadmap.vue b/src/pages/Route/RouteRoadmap.vue
index bc4a7a3e7..2c9234c6e 100644
--- a/src/pages/Route/RouteRoadmap.vue
+++ b/src/pages/Route/RouteRoadmap.vue
@@ -128,7 +128,7 @@ function confirmRemove() {
         .onOk(() => refreshKey.value++);
 }
 
-function navigateToRoadmapSummary(event, { id }) {
+function navigateToRoadmapSummary(_, { id }) {
     router.push({ name: 'RoadmapSummary', params: { id } });
 }
 </script>
diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
index 7cc8539cf..9fdbd4738 100644
--- a/src/pages/Ticket/Card/TicketSale.vue
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -353,15 +353,14 @@ const newOrderFromTicket = async () => {
 };
 
 const goToLog = (saleId) => {
-    //TODO: Redireccionar cuando exista la vista TicketLog
-    // router.push({
-    //     name: 'TicketLog',
-    //     params: {
-    //         originId: route.params.id,
-    //         changedModel: 'Sale',
-    //         changedModelId: saleId,
-    //     },
-    // });
+    router.push({
+        name: 'TicketLog',
+        params: {
+            originId: route.params.id,
+            changedModel: 'Sale',
+            changedModelId: saleId,
+        },
+    });
 };
 
 const changeTicketState = async (val) => {

From 6e6c6301d2bcdf9e4308b5a14044395585153804 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 25 Jun 2024 15:27:48 -0300
Subject: [PATCH 19/21] fix log view not refreshing when changing id param

---
 src/pages/Ticket/Card/TicketLog.vue  | 5 ++++-
 src/pages/Ticket/Card/TicketSale.vue | 3 ++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/Ticket/Card/TicketLog.vue b/src/pages/Ticket/Card/TicketLog.vue
index 94b63a117..94cff4dfc 100644
--- a/src/pages/Ticket/Card/TicketLog.vue
+++ b/src/pages/Ticket/Card/TicketLog.vue
@@ -1,7 +1,10 @@
 <script setup>
 import VnLog from 'src/components/common/VnLog.vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
 </script>
 
 <template>
-    <VnLog model="Ticket" url="/TicketLogs"></VnLog>
+    <VnLog model="Ticket" url="/TicketLogs" :key="route.params.id"></VnLog>
 </template>
diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
index 9fdbd4738..32408bf67 100644
--- a/src/pages/Ticket/Card/TicketSale.vue
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -724,8 +724,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </QTd>
         </template>
         <template #body-cell-history="{ row }">
-            <QTd v-if="row.hasLogs">
+            <QTd>
                 <QBtn
+                    v-if="row.$hasLogs"
                     @click.stop="goToLog(row.id)"
                     color="primary"
                     icon="history"

From 4e4563d48110fec668862c43f28fe857a136f743 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Jun 2024 22:34:19 +0200
Subject: [PATCH 20/21] fix: merge dev

---
 src/pages/Ticket/locale/es.yml | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 657be5512..ac09ed064 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -129,6 +129,3 @@ ticketSale:
     shipped: F. Envío
     agency: Agencia
     address: Consignatario
-card:
-    search: Buscar tickets
-    searchInfo: Buscar tickets por identificador o alias

From 56560d4b507868f3a0133549159f0cb8eb05a9e3 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Jun 2024 22:35:20 +0200
Subject: [PATCH 21/21] fix: merge dev

---
 src/pages/Ticket/locale/en.yml | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index 86e221e1f..1b67cec5c 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -22,9 +22,6 @@ ticketSale:
     shipped: Shipped
     agency: Agency
     address: Address
-card:
-    search: Search tickets
-    searchInfo: You can search by ticket id or alias
 advanceTickets:
     origin: Origin
     destination: Destination