From 1b839a89f78f4367efb1d01f9f23b0d410fdfbc9 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 4 Jul 2024 13:35:27 +0200
Subject: [PATCH 1/5] refactor: refs #6896 Order migration

---
 src/components/VnTable/VnTable.vue    |   2 +
 src/components/common/VnCard.vue      |   2 +-
 src/components/ui/VnPaginate.vue      |   5 +
 src/composables/useArrayData.js       |  10 +-
 src/pages/Order/Card/OrderForm.vue    |  42 +---
 src/pages/Order/Card/OrderSummary.vue |   2 +-
 src/pages/Order/OrderLines.vue        | 285 ++++++++++++++------------
 src/pages/Order/OrderList.vue         | 268 +++++++++++++-----------
 src/pages/Order/locale/en.yml         |  22 ++
 src/pages/Order/locale/es.yml         |  22 ++
 src/router/modules/order.js           |   2 +-
 11 files changed, 377 insertions(+), 285 deletions(-)
 create mode 100644 src/pages/Order/locale/en.yml
 create mode 100644 src/pages/Order/locale/es.yml

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 1610735a4..f2084aeb9 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -210,6 +210,7 @@ defineExpose({
                 v-model="params"
                 :disable-submit-event="true"
                 :search-url="searchUrl"
+                :redirect="!!redirect"
             >
                 <template #body>
                     <VnTableFilter
@@ -287,6 +288,7 @@ defineExpose({
                             :options="tableModes"
                         />
                         <QBtn
+                            v-if="$props.rightSearch"
                             icon="filter_alt"
                             title="asd"
                             class="bg-vn-section-color q-ml-md"
diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index c81bcd8e2..17fa74317 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -39,7 +39,7 @@ const arrayData = useArrayData(props.dataKey, {
 
 onBeforeMount(async () => {
     if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
-    await arrayData.fetch({ append: false });
+    await arrayData.fetch({ append: false, updateRouter: false });
 });
 
 if (props.baseUrl) {
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 8e426b471..fd903e759 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -26,6 +26,10 @@ const props = defineProps({
         type: Object,
         default: null,
     },
+    userFilter: {
+        type: Object,
+        default: null,
+    },
     where: {
         type: Object,
         default: null,
@@ -80,6 +84,7 @@ const pagination = ref({
 const arrayData = useArrayData(props.dataKey, {
     url: props.url,
     filter: props.filter,
+    userFilter: props.userFilter,
     where: props.where,
     limit: props.limit,
     order: props.order,
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 8111bcae4..6253c9df2 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -85,8 +85,10 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         }
 
         Object.assign(filter, store.userFilter, exprFilter);
-        Object.assign(store.filter, filter);
-        const params = { filter: store.filter };
+        const where = Object.assign(filter?.where ?? {}, store.filter?.where ?? {});
+        Object.assign(filter, store.filter);
+        filter.where = where;
+        const params = { filter };
 
         Object.assign(params, userParams);
         params.filter.skip = store.skip;
@@ -148,7 +150,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     }
 
     async function addFilter({ filter, params }) {
-        if (filter) store.userFilter = Object.assign(store.userFilter, filter);
+        if (filter) store.filter = filter;
 
         let userParams = { ...store.userParams, ...params };
         userParams = sanitizerParams(userParams, store?.exprBuilder);
@@ -161,7 +163,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     }
 
     async function addFilterWhere(where) {
-        const storedFilter = { ...store.userFilter };
+        const storedFilter = { ...store.filter };
         if (!storedFilter?.where) storedFilter.where = {};
         where = { ...storedFilter.where, ...where };
         await addFilter({ filter: { where } });
diff --git a/src/pages/Order/Card/OrderForm.vue b/src/pages/Order/Card/OrderForm.vue
index 98bcf4d3a..41c536326 100644
--- a/src/pages/Order/Card/OrderForm.vue
+++ b/src/pages/Order/Card/OrderForm.vue
@@ -1,11 +1,10 @@
 <script setup>
 import { useRoute, useRouter } from 'vue-router';
-import { reactive, ref } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import { useState } from 'composables/useState';
 import FormModel from 'components/FormModel.vue';
-import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
@@ -18,29 +17,9 @@ const ORDER_MODEL = 'order';
 
 const router = useRouter();
 const isNew = Boolean(!route.params.id);
-const initialFormState = reactive({
-    clientFk: null,
-    addressFk: null,
-    agencyModeFk: null,
-    landed: null,
-});
 const clientList = ref([]);
 const agencyList = ref([]);
 const addressList = ref([]);
-const clientId = ref(null);
-
-const onClientsFetched = (data) => {
-    clientList.value = data;
-    initialFormState.clientFk = Number(route.query?.clientFk) || null;
-    clientId.value = initialFormState.clientFk;
-
-    const client = clientList.value.find(
-        (client) => client.id === initialFormState.clientFk
-    );
-    if (!client?.defaultAddressFk)
-        throw new Error(t(`No default address found for the client`));
-    fetchAddressList(client.defaultAddressFk);
-};
 
 const fetchAddressList = async (addressId) => {
     try {
@@ -129,27 +108,18 @@ const onClientChange = async (clientId) => {
 };
 
 async function onDataSaved(data) {
-    await router.push({ path: `/order/${data}/catalog` });
+    await router.push({ path: `/order/${data.id}/catalog` });
 }
 </script>
 
 <template>
-    <FetchData
-        url="Clients"
-        @on-fetch="(data) => onClientsFetched(data)"
-        :filter="{ fields: ['id', 'name', 'defaultAddressFk'] }"
-        auto-load
-    />
     <VnSubToolbar v-if="isNew" />
     <div class="q-pa-md">
         <FormModel
-            :url="!isNew ? `Orders/${route.params.id}` : null"
-            url-create="Orders/new"
+            :url="`Orders/${route.params.id}`"
             @on-data-saved="onDataSaved"
             :model="ORDER_MODEL"
-            :form-initial-data="isNew ? initialFormState : null"
-            :observe-form-changes="!isNew"
-            :mapper="isNew ? orderMapper : null"
+            :mapper="orderMapper"
             :filter="orderFilter"
             @on-fetch="fetchOrderDetails"
             auto-load
@@ -157,11 +127,15 @@ async function onDataSaved(data) {
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <VnSelect
+                        url="Clients"
                         :label="t('order.form.clientFk')"
                         v-model="data.clientFk"
                         :options="clientList"
                         option-value="id"
                         option-label="name"
+                        :option-filter="{
+                            fields: ['id', 'name', 'defaultAddressFk'],
+                        }"
                         hide-selected
                         @update:model-value="onClientChange"
                     >
diff --git a/src/pages/Order/Card/OrderSummary.vue b/src/pages/Order/Card/OrderSummary.vue
index 7961b250e..cb708fb1d 100644
--- a/src/pages/Order/Card/OrderSummary.vue
+++ b/src/pages/Order/Card/OrderSummary.vue
@@ -196,7 +196,7 @@ const detailsColumns = ref([
                                     {{ props.row.quantity }}
                                 </QTd>
                                 <QTd key="price" :props="props">
-                                    {{ props.row.price }}
+                                    {{ toCurrency(props.row.price) }}
                                 </QTd>
                                 <QTd key="amount" :props="props">
                                     {{
diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index 6758fb170..60b190932 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -1,33 +1,67 @@
 <script setup>
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useQuasar } from 'quasar';
 
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import FetchData from 'components/FetchData.vue';
-import VnLv from 'components/ui/VnLv.vue';
-import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
-import VnImg from 'components/ui/VnImg.vue';
-
 import { toCurrency, toDate } from 'src/filters';
 import axios from 'axios';
-import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import FetchData from 'src/components/FetchData.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import FetchedTags from 'src/components/ui/FetchedTags.vue';
 
 const route = useRoute();
 const { t } = useI18n();
 const quasar = useQuasar();
+const componentKey = ref(0);
+const tableLinesRef = ref();
+const refresh = () => {
+    componentKey.value += 1;
+};
 const orderSummary = ref({
     total: null,
     vat: null,
 });
-const componentKey = ref(0);
-const order = ref(0);
 
-const refresh = () => {
-    componentKey.value += 1;
-};
+const lineFilter = ref({
+    include: [
+        {
+            relation: 'item',
+            scope: {
+                fields: [
+                    'id',
+                    'name',
+                    'subName',
+                    'image',
+                    'tag4',
+                    'value4',
+                    'tag5',
+                    'value5',
+                    'tag6',
+                    'value6',
+                    'tag7',
+                    'value7',
+                    'tag8',
+                    'value8',
+                    'tag9',
+                    'value9',
+                    'tag10',
+                    'value10',
+                ],
+            },
+        },
+        {
+            relation: 'warehouse',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+    ],
+    where: { orderFk: route.params.id },
+});
 
 function confirmRemove(item) {
     quasar.dialog({
@@ -60,53 +94,103 @@ async function confirmOrder() {
     });
 }
 
-const detailsColumns = ref([
+const columns = computed(() => [
     {
-        name: 'img',
-        label: '',
-        field: (row) => row?.item?.id,
+        align: 'center',
+        label: t('lines.image'),
+        name: 'image',
+        columnField: {
+            component: VnImg,
+            attrs: (id) => {
+                return {
+                    id,
+                    width: '50px',
+                };
+            },
+        },
+        columnFilter: false,
     },
     {
-        name: 'item',
-        label: t('order.summary.item'),
-        field: (row) => row?.item?.id,
-        sortable: true,
+        align: 'left',
+        name: 'id',
+        label: t('lines.item'),
+        chip: {
+            condition: () => true,
+        },
+        isId: true,
     },
     {
-        name: 'description',
+        align: 'left',
+        name: 'itemFk',
         label: t('globals.description'),
-        field: (row) => row?.item?.name,
+        isTitle: true,
+        cardVisible: true,
+        component: 'select',
+        attrs: {
+            url: 'Items',
+            fields: ['id', 'name', 'subName'],
+        },
+        columnField: {
+            component: null,
+        },
+        format: (row) => row?.item?.name,
     },
     {
-        name: 'warehouse',
-        label: t('warehouse'),
-        field: (row) => row?.warehouse?.name,
-        sortable: true,
+        align: 'left',
+        name: 'warehouseFk',
+        label: t('lines.warehouse'),
+        cardVisible: true,
+        component: 'select',
+        attrs: {
+            url: 'Warehouses',
+            fields: ['id', 'name'],
+        },
+        columnField: {
+            component: null,
+        },
+        format: (row) => row?.warehouse?.name,
     },
     {
+        align: 'left',
         name: 'shipped',
-        label: t('shipped'),
-        field: (row) => toDate(row?.shipped),
+        label: t('lines.shipped'),
+        cardVisible: true,
+        component: 'date',
+        columnField: {
+            component: null,
+        },
+        format: (row) => toDate(row.shipped),
     },
     {
+        align: 'left',
         name: 'quantity',
-        label: t('order.summary.quantity'),
-        field: (row) => row?.quantity,
+        label: t('lines.quantity'),
     },
     {
+        align: 'left',
         name: 'price',
-        label: t('order.summary.price'),
-        field: (row) => toCurrency(row?.price),
+        label: t('lines.price'),
+        cardVisible: true,
+        format: (row) => toCurrency(row.price),
     },
     {
+        align: 'left',
         name: 'amount',
-        label: t('order.summary.amount'),
-        field: (row) => toCurrency(row?.quantity * row?.price),
+        label: t('lines.amount'),
+        format: (row) => toCurrency(row.amount),
     },
     {
-        name: 'actions',
+        align: 'right',
         label: '',
-        field: (row) => row?.id,
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('delete'),
+                icon: 'delete',
+                click: (row) => confirmRemove(row.item),
+                isPrimary: true,
+            },
+        ],
     },
 ]);
 </script>
@@ -135,7 +219,6 @@ const detailsColumns = ref([
             <div v-if="!orderSummary.total" class="no-result">
                 {{ t('globals.noResults') }}
             </div>
-
             <QDrawer side="right" :width="270" show-if-above>
                 <QCard class="order-lines-summary q-pa-lg">
                     <p class="header text-right block">
@@ -143,107 +226,48 @@ const detailsColumns = ref([
                     </p>
                     <VnLv
                         v-if="orderSummary.vat && orderSummary.total"
-                        :label="t('subtotal')"
+                        :label="t('subtotal') + ': '"
                         :value="toCurrency(orderSummary.total - orderSummary.vat)"
                     />
                     <VnLv
                         v-if="orderSummary.vat"
-                        :label="t('VAT')"
+                        :label="t('VAT') + ': '"
                         :value="toCurrency(orderSummary?.vat)"
                     />
                     <VnLv
                         v-if="orderSummary.total"
-                        :label="t('total')"
+                        :label="t('total') + ': '"
                         :value="toCurrency(orderSummary?.total)"
                     />
                 </QCard>
             </QDrawer>
-            <VnPaginate
+            <VnTable
+                ref="tableLinesRef"
                 data-key="OrderLines"
                 url="OrderRows"
-                :limit="20"
+                :columns="columns"
+                default-mode="table"
+                :right-search="false"
+                :use-model="true"
                 auto-load
-                :filter="{
-                    include: [
-                        {
-                            relation: 'item',
-                        },
-                        {
-                            relation: 'warehouse',
-                        },
-                    ],
-                    where: { orderFk: route.params.id },
-                }"
+                :user-filter="lineFilter"
             >
-                <template #body="{ rows }">
-                    <div class="q-pa-md">
-                        <QTable
-                            :columns="detailsColumns"
-                            :rows="rows"
-                            flat
-                            class="full-width"
-                            style="text-align: center"
-                        >
-                            <template #header="props">
-                                <QTr class="tr-header" :props="props">
-                                    <QTh
-                                        v-for="col in props.cols"
-                                        :key="col.name"
-                                        :props="props"
-                                        style="text-align: center"
-                                    >
-                                        {{ t(col.label) }}
-                                    </QTh>
-                                </QTr>
-                            </template>
-                            <template #body-cell-img="{ value }">
-                                <QTd>
-                                    <div class="image-wrapper">
-                                        <VnImg :id="value" class="rounded" />
-                                    </div>
-                                </QTd>
-                            </template>
-                            <template #body-cell-item="{ value }">
-                                <QTd class="item">
-                                    <span class="link">
-                                        <QBtn flat>
-                                            {{ value }}
-                                        </QBtn>
-                                        <ItemDescriptorProxy :id="value" />
-                                    </span>
-                                </QTd>
-                            </template>
-                            <template #body-cell-description="{ row, value }">
-                                <QTd>
-                                    <div
-                                        class="row column full-width justify-between items-start"
-                                    >
-                                        {{ value }}
-                                        <div v-if="value" class="subName">
-                                            {{ value.toUpperCase() }}
-                                        </div>
-                                    </div>
-                                    <FetchedTags :item="row.item" :max-length="6" />
-                                </QTd>
-                            </template>
-
-                            <template #body-cell-actions="{ value }">
-                                <QTd>
-                                    <QIcon
-                                        name="delete"
-                                        color="primary"
-                                        size="sm"
-                                        class="cursor-pointer"
-                                        @click.stop="confirmRemove(value)"
-                                    >
-                                        <QTooltip>{{ t('Remove thermograph') }}</QTooltip>
-                                    </QIcon>
-                                </QTd>
-                            </template>
-                        </QTable>
+                <template #column-image="{ row }">
+                    <div class="image-wrapper">
+                        <VnImg :id="row?.item?.image" class="rounded" />
                     </div>
                 </template>
-            </VnPaginate>
+
+                <template #column-itemFk="{ row }">
+                    <div class="row column full-width justify-between items-start">
+                        {{ row?.item?.name }}
+                        <div v-if="row?.item?.subName" class="subName">
+                            {{ row?.item?.subName.toUpperCase() }}
+                        </div>
+                    </div>
+                    <FetchedTags :item="row?.item" :max-length="6" />
+                </template>
+            </VnTable>
         </div>
         <QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed">
             <QBtn fab icon="check" color="primary" @click="confirmOrder()" />
@@ -253,7 +277,8 @@ const detailsColumns = ref([
         </QPageSticky>
     </QPage>
 </template>
-<style lang="scss">
+
+<style lang="scss" scoped>
 .order-lines-summary {
     .vn-label-value {
         display: flex;
@@ -274,8 +299,13 @@ const detailsColumns = ref([
         }
     }
 }
-</style>
-<style lang="scss" scoped>
+
+.image-wrapper {
+    height: 50px;
+    width: 50px;
+    margin-left: 30%;
+}
+
 .header {
     color: $primary;
     font-weight: bold;
@@ -284,12 +314,6 @@ const detailsColumns = ref([
     display: inline-block;
 }
 
-.image-wrapper {
-    height: 50px;
-    width: 50px;
-    margin-left: 30%;
-}
-
 .no-result {
     font-size: 24px;
     font-weight: bold;
@@ -302,6 +326,7 @@ const detailsColumns = ref([
     color: var(--vn-label-color);
 }
 </style>
+
 <i18n>
 en:
     summary: Summary
diff --git a/src/pages/Order/OrderList.vue b/src/pages/Order/OrderList.vue
index 0e6e11482..ae95f3488 100644
--- a/src/pages/Order/OrderList.vue
+++ b/src/pages/Order/OrderList.vue
@@ -1,31 +1,128 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { onMounted, onUnmounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { useStateStore } from 'stores/useStateStore';
-import { toCurrency, toDate } from 'src/filters';
-import CardList from 'components/ui/CardList.vue';
-import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
-import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import VnLv from 'components/ui/VnLv.vue';
+import { computed, ref } from 'vue';
+import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import OrderFilter from 'pages/Order/Card/OrderFilter.vue';
 import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import RightMenu from 'src/components/common/RightMenu.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
-const stateStore = useStateStore();
-const router = useRouter();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
+const tableRef = ref();
+const clientList = ref([]);
+const agencyList = ref([]);
 
-onMounted(() => (stateStore.rightDrawer = true));
-onUnmounted(() => (stateStore.rightDrawer = false));
-
-function navigate(id) {
-    router.push({ path: `/order/${id}` });
-}
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: t('module.id'),
+        chip: {
+            condition: () => true,
+        },
+        isId: true,
+    },
+    {
+        align: 'left',
+        name: 'clientName',
+        label: t('module.customer'),
+        isTitle: true,
+        cardVisible: true,
+        create: true,
+        component: 'select',
+        attrs: {
+            url: 'Clients',
+            fields: ['id', 'name'],
+        },
+        columnField: {
+            component: null,
+        },
+    },
+    {
+        align: 'left',
+        name: 'name',
+        label: t('module.salesPerson'),
+        component: 'select',
+        attrs: {
+            url: 'Workers/activeWithInheritedRole',
+            fields: ['id', 'name'],
+            where: { role: 'salesPerson' },
+        },
+        columnField: {
+            component: null,
+        },
+    },
+    {
+        align: 'left',
+        name: 'isConfirmed',
+        label: t('module.isConfirmed'),
+    },
+    {
+        align: 'left',
+        name: 'created',
+        label: t('module.created'),
+        component: 'date',
+        cardVisible: true,
+        format: (row) => toDate(row?.landed),
+        columnField: {
+            component: null,
+        },
+    },
+    {
+        align: 'left',
+        name: 'landed',
+        label: t('module.landed'),
+        component: 'date',
+        format: (row) => toDate(row?.landed),
+        columnField: {
+            component: null,
+        },
+        style: 'color="positive"',
+    },
+    {
+        align: 'left',
+        name: 'hour',
+        label: t('module.hour'),
+        format: ({ hourTheoretical, hourEffective }) =>
+            dashIfEmpty(hourTheoretical || hourEffective),
+    },
+    {
+        align: 'left',
+        name: 'agencyName',
+        label: t('module.agency'),
+        component: 'select',
+        cardVisible: true,
+        attrs: {
+            url: 'Agencies',
+            fields: ['id', 'name'],
+        },
+        columnField: {
+            component: null,
+        },
+    },
+    {
+        align: 'left',
+        name: 'total',
+        label: t('module.total'),
+        format: ({ total }) => toCurrency(total),
+        cardVisible: true,
+    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('InvoiceOutSummary'),
+                icon: 'preview',
+                action: (row) => viewSummary(row.id, OrderSummary),
+            },
+        ],
+    },
+]);
 </script>
 <template>
     <VnSearchbar
@@ -33,100 +130,43 @@ function navigate(id) {
         :label="t('Search order')"
         :info="t('You can search orders by reference')"
     />
-    <RightMenu>
-        <template #right-panel>
-            <OrderFilter data-key="OrderList" />
+    <VnTable
+        ref="tableRef"
+        data-key="OrderList"
+        url="Orders/filter"
+        :create="{
+            urlCreate: 'Orders/new',
+            title: 'Create Order',
+            onDataSaved: (url) => {
+                tableRef.redirect(url);
+            },
+            formInitialData: {
+                active: true,
+            },
+        }"
+        :columns="columns"
+        default-mode="table"
+        redirect="order"
+        auto-load
+    >
+        <template #more-create-dialog="{ data }">
+            <VnSelect
+                url="Clients"
+                v-model="data.addressId"
+                :label="t('module.address')"
+                :options="clientList"
+                option-value="defaultAddressFk"
+                option-label="street"
+            />
+            <VnInputDate v-model="data.landed" :label="t('module.landed')" />
+            <VnSelect
+                url="Agencies"
+                v-model="data.agencyModeId"
+                :label="t('module.agency')"
+                :options="agencyList"
+                option-value="id"
+                option-label="name"
+            />
         </template>
-    </RightMenu>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                data-key="OrderList"
-                url="Orders/filter"
-                :limit="20"
-                :order="['landed DESC', 'clientFk', 'id DESC']"
-                :user-params="{ showEmpty: false }"
-                :keep-opts="['userParams']"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        v-for="row of rows"
-                        :key="row.id"
-                        :id="row.id"
-                        :title="`${row?.clientName} (${row?.clientFk})`"
-                        @click="navigate(row.id)"
-                    >
-                        <template #list-items>
-                            <VnLv
-                                :label="t('order.field.salesPersonFk')"
-                                :title-label="t('order.field.salesPersonFk')"
-                            >
-                                <template #value>
-                                    <span class="link" @click.stop>
-                                        {{ row?.name || '-' }}
-                                        <WorkerDescriptorProxy :id="row?.salesPersonFk" />
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv
-                                :label="t('order.field.clientFk')"
-                                :title-label="t('order.field.clientFk')"
-                            >
-                                <template #value>
-                                    <span class="link" @click.stop>
-                                        {{ row?.clientName || '-' }}
-                                        <CustomerDescriptorProxy :id="row?.clientFk" />
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv
-                                :label="t('order.field.isConfirmed')"
-                                :value="row?.isConfirmed === 1"
-                            />
-                            <VnLv
-                                :label="t('order.field.created')"
-                                :value="toDate(row?.created)"
-                            />
-                            <VnLv :label="t('order.field.landed')">
-                                <template #value>
-                                    <QBadge text-color="black" color="positive" dense>
-                                        {{ toDate(row?.landed) }}
-                                    </QBadge>
-                                </template>
-                            </VnLv>
-                            <VnLv
-                                :label="t('order.field.hour')"
-                                :value="row.hourTheoretical || row.hourEffective"
-                            />
-                            <VnLv
-                                :label="t('order.field.agency')"
-                                :value="row?.agencyName"
-                            />
-                            <VnLv
-                                :label="t('order.field.total')"
-                                :value="toCurrency(row?.total)"
-                            />
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, OrderSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QPageSticky :offset="[20, 20]">
-            <RouterLink :to="{ name: 'OrderCreate' }">
-                <QBtn fab icon="add" color="primary" />
-                <QTooltip>
-                    {{ t('order.list.newOrder') }}
-                </QTooltip>
-            </RouterLink>
-        </QPageSticky>
-    </QPage>
+    </VnTable>
 </template>
diff --git a/src/pages/Order/locale/en.yml b/src/pages/Order/locale/en.yml
new file mode 100644
index 000000000..b630a18ed
--- /dev/null
+++ b/src/pages/Order/locale/en.yml
@@ -0,0 +1,22 @@
+module:
+    id: ID
+    name: Name
+    customer: Client
+    isConfirmed: Confirmed
+    created: Created
+    landed: Landed
+    hour: Hour
+    agency: Agency
+    total: Total
+    salesPerson: Sales Person
+    address: Address
+lines:
+    item: Item
+    warehouse: Warehouse
+    shipped: Shipped
+    quantity: Quantity
+    price: Price
+    amount: Amount
+    image: Image
+params:
+    tagGroups: Tags
diff --git a/src/pages/Order/locale/es.yml b/src/pages/Order/locale/es.yml
new file mode 100644
index 000000000..055d22719
--- /dev/null
+++ b/src/pages/Order/locale/es.yml
@@ -0,0 +1,22 @@
+module:
+    id: ID
+    name: Nombre
+    customer: Cliente
+    isConfirmed: Confirmado
+    created: Creado
+    landed: F. Entrega
+    hour: Hora
+    agency: Agencia
+    total: Total
+    salesPerson: Comercial
+    address: Dirección
+lines:
+    item: Artículo
+    warehouse: Almacén
+    shipped: Envío
+    quantity: Cantidad
+    price: Precio
+    amount: Importe
+    image: Imagen
+params:
+    tagGroups: Tags
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
index eb5424e75..910ecbb74 100644
--- a/src/router/modules/order.js
+++ b/src/router/modules/order.js
@@ -37,7 +37,7 @@ export default {
                         title: 'orderCreate',
                         icon: 'add',
                     },
-                    component: () => import('src/pages/Order/Card/OrderForm.vue'),
+                    component: () => import('src/pages/Order/Card/OrderList.vue'),
                 },
             ],
         },

From 0436dbae51da8db4de059d12b890b31d9073e9c4 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 5 Jul 2024 10:21:02 +0200
Subject: [PATCH 2/5] fix: refs #6896 fixed OrderList path

---
 src/router/modules/order.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/modules/order.js b/src/router/modules/order.js
index 910ecbb74..aa1ca774d 100644
--- a/src/router/modules/order.js
+++ b/src/router/modules/order.js
@@ -37,7 +37,7 @@ export default {
                         title: 'orderCreate',
                         icon: 'add',
                     },
-                    component: () => import('src/pages/Order/Card/OrderList.vue'),
+                    component: () => import('src/pages/Order/OrderList.vue'),
                 },
             ],
         },

From 2f173ac2e79a6dd545a70da2c52448ae08a81220 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 5 Jul 2024 13:35:45 +0200
Subject: [PATCH 3/5] refactor: refs #6896 requested changes & deleted
 basicData and Lines warnings

---
 src/pages/Order/Card/OrderForm.vue | 9 ++++-----
 src/pages/Order/OrderLines.vue     | 3 ++-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/Order/Card/OrderForm.vue b/src/pages/Order/Card/OrderForm.vue
index 41c536326..43a9b2e57 100644
--- a/src/pages/Order/Card/OrderForm.vue
+++ b/src/pages/Order/Card/OrderForm.vue
@@ -107,8 +107,8 @@ const onClientChange = async (clientId) => {
     }
 };
 
-async function onDataSaved(data) {
-    await router.push({ path: `/order/${data.id}/catalog` });
+async function onDataSaved(id) {
+    await router.push({ path: `/order/${id}/catalog` });
 }
 </script>
 
@@ -117,7 +117,7 @@ async function onDataSaved(data) {
     <div class="q-pa-md">
         <FormModel
             :url="`Orders/${route.params.id}`"
-            @on-data-saved="onDataSaved"
+            @on-data-saved="(row) => onDataSaved(row.id)"
             :model="ORDER_MODEL"
             :mapper="orderMapper"
             :filter="orderFilter"
@@ -133,7 +133,7 @@ async function onDataSaved(data) {
                         :options="clientList"
                         option-value="id"
                         option-label="name"
-                        :option-filter="{
+                        :filter="{
                             fields: ['id', 'name', 'defaultAddressFk'],
                         }"
                         hide-selected
@@ -157,7 +157,6 @@ async function onDataSaved(data) {
                         option-label="street"
                         hide-selected
                         :disable="!addressList?.length"
-                        @update:model-value="onAddressChange"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index 60b190932..baeb23560 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -18,6 +18,7 @@ const { t } = useI18n();
 const quasar = useQuasar();
 const componentKey = ref(0);
 const tableLinesRef = ref();
+const order = ref();
 const refresh = () => {
     componentKey.value += 1;
 };
@@ -254,7 +255,7 @@ const columns = computed(() => [
             >
                 <template #column-image="{ row }">
                     <div class="image-wrapper">
-                        <VnImg :id="row?.item?.image" class="rounded" />
+                        <VnImg :id="parseInt(row?.item?.image)" class="rounded" />
                     </div>
                 </template>
 

From 286fbc5abaa66c5699e13a0e4a8495278134ceb0 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 8 Jul 2024 14:59:12 +0200
Subject: [PATCH 4/5] fix: Right menu double icon

---
 src/pages/Order/Card/OrderForm.vue |  4 +--
 src/pages/Order/OrderLines.vue     | 48 ++++++++++++++++--------------
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/pages/Order/Card/OrderForm.vue b/src/pages/Order/Card/OrderForm.vue
index 43a9b2e57..e4dfcd0e0 100644
--- a/src/pages/Order/Card/OrderForm.vue
+++ b/src/pages/Order/Card/OrderForm.vue
@@ -107,7 +107,7 @@ const onClientChange = async (clientId) => {
     }
 };
 
-async function onDataSaved(id) {
+async function onDataSaved({ id }) {
     await router.push({ path: `/order/${id}/catalog` });
 }
 </script>
@@ -117,7 +117,7 @@ async function onDataSaved(id) {
     <div class="q-pa-md">
         <FormModel
             :url="`Orders/${route.params.id}`"
-            @on-data-saved="(row) => onDataSaved(row.id)"
+            @on-data-saved="onDataSaved"
             :model="ORDER_MODEL"
             :mapper="orderMapper"
             :filter="orderFilter"
diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index baeb23560..e66a3f7c4 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -12,7 +12,9 @@ import FetchData from 'src/components/FetchData.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import FetchedTags from 'src/components/ui/FetchedTags.vue';
+import { useStateStore } from 'stores/useStateStore';
 
+const stateStore = useStateStore();
 const route = useRoute();
 const { t } = useI18n();
 const quasar = useQuasar();
@@ -215,33 +217,33 @@ const columns = computed(() => [
         @on-fetch="(data) => (orderSummary.vat = data)"
         auto-load
     />
-    <QPage :key="componentKey" class="column items-center q-pa-md">
+    <QDrawer side="right" :width="270" v-model="stateStore.rightDrawer">
+        <QCard class="order-lines-summary q-pa-lg">
+            <p class="header text-right block">
+                {{ t('summary') }}
+            </p>
+            <VnLv
+                v-if="orderSummary.vat && orderSummary.total"
+                :label="t('subtotal') + ': '"
+                :value="toCurrency(orderSummary.total - orderSummary.vat)"
+            />
+            <VnLv
+                v-if="orderSummary.vat"
+                :label="t('VAT') + ': '"
+                :value="toCurrency(orderSummary?.vat)"
+            />
+            <VnLv
+                v-if="orderSummary.total"
+                :label="t('total') + ': '"
+                :value="toCurrency(orderSummary?.total)"
+            />
+        </QCard>
+    </QDrawer>
+    <QPage :key="componentKey" class="column items-center">
         <div class="order-list full-width">
             <div v-if="!orderSummary.total" class="no-result">
                 {{ t('globals.noResults') }}
             </div>
-            <QDrawer side="right" :width="270" show-if-above>
-                <QCard class="order-lines-summary q-pa-lg">
-                    <p class="header text-right block">
-                        {{ t('summary') }}
-                    </p>
-                    <VnLv
-                        v-if="orderSummary.vat && orderSummary.total"
-                        :label="t('subtotal') + ': '"
-                        :value="toCurrency(orderSummary.total - orderSummary.vat)"
-                    />
-                    <VnLv
-                        v-if="orderSummary.vat"
-                        :label="t('VAT') + ': '"
-                        :value="toCurrency(orderSummary?.vat)"
-                    />
-                    <VnLv
-                        v-if="orderSummary.total"
-                        :label="t('total') + ': '"
-                        :value="toCurrency(orderSummary?.total)"
-                    />
-                </QCard>
-            </QDrawer>
             <VnTable
                 ref="tableLinesRef"
                 data-key="OrderLines"

From 20eb26127acef27074e328bd4c9dbeae47168867 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 8 Jul 2024 15:00:45 +0200
Subject: [PATCH 5/5] fix: Right menu double icon

---
 src/pages/Ticket/Card/TicketSale.vue | 56 +++++++++++++---------------
 1 file changed, 25 insertions(+), 31 deletions(-)

diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
index 32408bf67..37be07a79 100644
--- a/src/pages/Ticket/Card/TicketSale.vue
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -515,38 +515,32 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </QBtnGroup>
         </template>
     </VnSubToolbar>
-    <RightMenu>
-        <template #right-panel>
-            <div
-                class="q-pa-md q-mb-md q-ma-md color-vn-text"
-                style="border: 2px solid black"
+    <QDrawer side="right" :width="270" v-model="stateStore.rightDrawer">
+        <div
+            class="q-pa-md q-mb-md q-ma-md color-vn-text"
+            style="border: 2px solid black"
+        >
+            <QCardSection class="justify-center text-subtitle1" horizontal>
+                <span class="q-mr-xs color-vn-label"
+                    >{{ t('ticketSale.subtotal') }}:
+                </span>
+                <span>{{ toCurrency(store.data?.totalWithoutVat) }}</span>
+            </QCardSection>
+            <QCardSection class="justify-center text-subtitle1" horizontal>
+                <span class="q-mr-xs color-vn-label"> {{ t('ticketSale.tax') }}: </span>
+                <span>{{
+                    toCurrency(store.data?.totalWithVat - store.data?.totalWithoutVat)
+                }}</span>
+            </QCardSection>
+            <QCardSection
+                class="justify-center text-weight-bold text-subtitle1"
+                horizontal
             >
-                <QCardSection class="justify-center text-subtitle1" horizontal>
-                    <span class="q-mr-xs color-vn-label"
-                        >{{ t('ticketSale.subtotal') }}:
-                    </span>
-                    <span>{{ toCurrency(store.data?.totalWithoutVat) }}</span>
-                </QCardSection>
-                <QCardSection class="justify-center text-subtitle1" horizontal>
-                    <span class="q-mr-xs color-vn-label">
-                        {{ t('ticketSale.tax') }}:
-                    </span>
-                    <span>{{
-                        toCurrency(store.data?.totalWithVat - store.data?.totalWithoutVat)
-                    }}</span>
-                </QCardSection>
-                <QCardSection
-                    class="justify-center text-weight-bold text-subtitle1"
-                    horizontal
-                >
-                    <span class="q-mr-xs color-vn-label">
-                        {{ t('ticketSale.total') }}:
-                    </span>
-                    <span>{{ toCurrency(store.data?.totalWithVat) }}</span>
-                </QCardSection>
-            </div>
-        </template>
-    </RightMenu>
+                <span class="q-mr-xs color-vn-label"> {{ t('ticketSale.total') }}: </span>
+                <span>{{ toCurrency(store.data?.totalWithVat) }}</span>
+            </QCardSection>
+        </div></QDrawer
+    >
     <QTable
         :rows="sales"
         :columns="columns"