From 781c8050a88d7a757db7492e7419d1739e98baa6 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Tue, 11 Mar 2025 11:56:50 +0100
Subject: [PATCH] refactor: refs #8326 modified sumaryDialog width

---
 src/pages/InvoiceIn/InvoiceInList.vue   |   2 +-
 src/pages/Order/Card/OrderSummary.vue   | 338 ++++++++++++------------
 src/pages/Order/OrderList.vue           |   2 +-
 src/pages/Ticket/TicketList.vue         |   2 +-
 src/pages/Travel/Card/TravelSummary.vue |  18 +-
 src/pages/Travel/TravelList.vue         |   2 +-
 src/pages/Worker/WorkerList.vue         |   2 +-
 7 files changed, 179 insertions(+), 187 deletions(-)

diff --git a/src/pages/InvoiceIn/InvoiceInList.vue b/src/pages/InvoiceIn/InvoiceInList.vue
index 0960d0d6c..9b62fdf6a 100644
--- a/src/pages/InvoiceIn/InvoiceInList.vue
+++ b/src/pages/InvoiceIn/InvoiceInList.vue
@@ -119,7 +119,7 @@ const cols = computed(() => [
                 icon: 'preview',
                 type: 'submit',
                 isPrimary: true,
-                action: (row) => viewSummary(row.id, InvoiceInSummary),
+                action: (row) => viewSummary(row.id, InvoiceInSummary, 'lg-width'),
             },
             {
                 title: t('globals.download'),
diff --git a/src/pages/Order/Card/OrderSummary.vue b/src/pages/Order/Card/OrderSummary.vue
index 55c309cf5..10a458bfb 100644
--- a/src/pages/Order/Card/OrderSummary.vue
+++ b/src/pages/Order/Card/OrderSummary.vue
@@ -71,180 +71,174 @@ async function handleConfirm() {
 </script>
 
 <template>
-    <div class="q-pa-md">
-        <CardSummary
-            ref="summary"
-            :url="`Orders/${entityId}/summary`"
-            data-key="OrderSummary"
-        >
-            <template #header="{ entity }">
-                {{ t('order.summary.basket') }} #{{ entity?.id }} -
-                {{ entity?.client?.name }} ({{ entity?.clientFk }})
-            </template>
-            <template #header-right>
-                <QBtn
-                    flat
-                    text-color="white"
-                    :disabled="isConfirmed"
-                    :label="t('order.summary.confirm')"
-                    @click="handleConfirm()"
-                >
-                    <QTooltip>{{ t('order.summary.confirmLines') }}</QTooltip>
-                </QBtn>
-            </template>
-            <template #menu="{ entity }">
-                <OrderDescriptorMenu :order="entity" />
-            </template>
-            <template #body="{ entity }">
-                <QCard class="vn-two">
-                    <VnTitle
-                        :url="`#/order/${entity.id}/basic-data`"
-                        :text="t('globals.pageTitles.basicData')"
-                    />
-                    <div class="vn-card-group">
-                        <div class="vn-card-content">
-                            <VnLv label="ID" :value="entity.id" />
-                            <VnLv :label="t('globals.alias')" dash>
-                                <template #value>
-                                    <span class="link">
-                                        {{ dashIfEmpty(entity?.address?.nickname) }}
-                                        <CustomerDescriptorProxy :id="entity?.clientFk" />
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv
-                                :label="t('globals.company')"
-                                :value="entity?.address?.companyFk"
-                            />
-                            <VnLv
-                                :label="t('globals.confirmed')"
-                                :value="Boolean(entity?.isConfirmed)"
-                            />
-                        </div>
-                        <div class="vn-card-content">
-                            <VnLv
-                                :label="t('order.summary.created')"
-                                :value="toDateHourMinSec(entity?.created)"
-                            />
-                            <VnLv
-                                :label="t('globals.confirmed')"
-                                :value="toDateHourMinSec(entity?.confirmed)"
-                            />
-                            <VnLv
-                                :label="t('globals.landed')"
-                                :value="toDateHourMinSec(entity?.landed)"
-                            />
-                            <VnLv :label="t('globals.phone')">
-                                <template #value>
-                                    {{ dashIfEmpty(entity?.address?.phone) }}
-                                    <a
-                                        v-if="entity?.address?.phone"
-                                        :href="`tel:${entity?.address?.phone}`"
-                                        class="text-primary"
-                                    >
-                                        <QIcon name="phone" />
-                                    </a>
-                                </template>
-                            </VnLv>
-                            <VnLv
-                                :label="t('order.summary.createdFrom')"
-                                :value="entity?.sourceApp"
-                            />
-                            <VnLv
-                                :label="t('order.summary.address')"
-                                :value="`${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`"
-                                class="order-summary-address"
-                            />
-                        </div>
+    <CardSummary
+        ref="summary"
+        :url="`Orders/${entityId}/summary`"
+        data-key="OrderSummary"
+    >
+        <template #header="{ entity }">
+            {{ t('order.summary.basket') }} #{{ entity?.id }} -
+            {{ entity?.client?.name }} ({{ entity?.clientFk }})
+        </template>
+        <template #header-right>
+            <QBtn
+                flat
+                text-color="white"
+                :disabled="isConfirmed"
+                :label="t('order.summary.confirm')"
+                @click="handleConfirm()"
+            >
+                <QTooltip>{{ t('order.summary.confirmLines') }}</QTooltip>
+            </QBtn>
+        </template>
+        <template #menu="{ entity }">
+            <OrderDescriptorMenu :order="entity" />
+        </template>
+        <template #body="{ entity }">
+            <QCard class="vn-two">
+                <VnTitle
+                    :url="`#/order/${entity.id}/basic-data`"
+                    :text="t('globals.pageTitles.basicData')"
+                />
+                <div class="vn-card-group">
+                    <div class="vn-card-content">
+                        <VnLv label="ID" :value="entity.id" />
+                        <VnLv :label="t('globals.alias')" dash>
+                            <template #value>
+                                <span class="link">
+                                    {{ dashIfEmpty(entity?.address?.nickname) }}
+                                    <CustomerDescriptorProxy :id="entity?.clientFk" />
+                                </span>
+                            </template>
+                        </VnLv>
+                        <VnLv
+                            :label="t('globals.company')"
+                            :value="entity?.address?.companyFk"
+                        />
+                        <VnLv
+                            :label="t('globals.confirmed')"
+                            :value="Boolean(entity?.isConfirmed)"
+                        />
                     </div>
-                </QCard>
-                <QCard class="vn-one">
-                    <VnTitle :text="t('globals.pageTitles.notes')" />
-                    <p v-if="entity?.note" class="no-margin">
-                        {{ entity?.note }}
-                    </p>
-                </QCard>
-                <QCard class="vn-one">
-                    <VnTitle :text="t('order.summary.total')" />
-                    <VnLv>
-                        <template #label>
-                            <span class="text-h6">{{ t('globals.subtotal') }}</span>
-                        </template>
-                        <template #value>
-                            <span class="text-h6">{{
-                                toCurrency(entity?.subTotal)
-                            }}</span>
-                        </template>
-                    </VnLv>
-                    <VnLv>
-                        <template #label>
-                            <span class="text-h6">{{ t('globals.vat') }}</span>
-                        </template>
-                        <template #value>
-                            <span class="text-h6">{{ toCurrency(entity?.VAT) }}</span>
-                        </template>
-                    </VnLv>
-                    <VnLv>
-                        <template #label>
-                            <span class="text-h6">{{ t('order.summary.total') }}</span>
-                        </template>
-                        <template #value>
-                            <span class="text-h6">{{ toCurrency(entity?.total) }}</span>
-                        </template>
-                    </VnLv>
-                </QCard>
-                <QCard>
-                    <VnTitle :text="t('globals.details')" />
-                    <QTable :columns="detailsColumns" :rows="entity?.rows" flat>
-                        <template #header="props">
-                            <QTr :props="props">
-                                <QTh auto-width>{{ t('globals.item') }}</QTh>
-                                <QTh>{{ t('globals.description') }}</QTh>
-                                <QTh auto-width>{{ t('globals.quantity') }}</QTh>
-                                <QTh auto-width>{{ t('globals.price') }}</QTh>
-                                <QTh auto-width>{{ t('order.summary.amount') }}</QTh>
-                            </QTr>
-                        </template>
-                        <template #body="props">
-                            <QTr :props="props">
-                                <QTd key="item" :props="props" class="item">
-                                    <span class="link">
-                                        {{ props.row.item?.id }}
-                                        <ItemDescriptorProxy :id="props.row.item?.id" />
-                                    </span>
-                                </QTd>
-                                <QTd key="description" :props="props">
-                                    <div class="description">
-                                        <div class="name">
-                                            {{ props.row.item.name }}
-                                            <span
-                                                v-if="props.row.item.subName"
-                                                class="subName"
-                                            >
-                                                {{ props.row.item.subName }}
-                                            </span>
-                                        </div>
+                    <div class="vn-card-content">
+                        <VnLv
+                            :label="t('order.summary.created')"
+                            :value="toDateHourMinSec(entity?.created)"
+                        />
+                        <VnLv
+                            :label="t('globals.confirmed')"
+                            :value="toDateHourMinSec(entity?.confirmed)"
+                        />
+                        <VnLv
+                            :label="t('globals.landed')"
+                            :value="toDateHourMinSec(entity?.landed)"
+                        />
+                        <VnLv :label="t('globals.phone')">
+                            <template #value>
+                                {{ dashIfEmpty(entity?.address?.phone) }}
+                                <a
+                                    v-if="entity?.address?.phone"
+                                    :href="`tel:${entity?.address?.phone}`"
+                                    class="text-primary"
+                                >
+                                    <QIcon name="phone" />
+                                </a>
+                            </template>
+                        </VnLv>
+                        <VnLv
+                            :label="t('order.summary.createdFrom')"
+                            :value="entity?.sourceApp"
+                        />
+                        <VnLv
+                            :label="t('order.summary.address')"
+                            :value="`${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`"
+                            class="order-summary-address"
+                        />
+                    </div>
+                </div>
+            </QCard>
+            <QCard class="vn-one">
+                <VnTitle :text="t('globals.pageTitles.notes')" />
+                <p v-if="entity?.note" class="no-margin">
+                    {{ entity?.note }}
+                </p>
+            </QCard>
+            <QCard class="vn-one">
+                <VnTitle :text="t('order.summary.total')" />
+                <VnLv>
+                    <template #label>
+                        <span class="text-h6">{{ t('globals.subtotal') }}</span>
+                    </template>
+                    <template #value>
+                        <span class="text-h6">{{ toCurrency(entity?.subTotal) }}</span>
+                    </template>
+                </VnLv>
+                <VnLv>
+                    <template #label>
+                        <span class="text-h6">{{ t('globals.vat') }}</span>
+                    </template>
+                    <template #value>
+                        <span class="text-h6">{{ toCurrency(entity?.VAT) }}</span>
+                    </template>
+                </VnLv>
+                <VnLv>
+                    <template #label>
+                        <span class="text-h6">{{ t('order.summary.total') }}</span>
+                    </template>
+                    <template #value>
+                        <span class="text-h6">{{ toCurrency(entity?.total) }}</span>
+                    </template>
+                </VnLv>
+            </QCard>
+            <QCard>
+                <VnTitle :text="t('globals.details')" />
+                <QTable :columns="detailsColumns" :rows="entity?.rows" flat>
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh auto-width>{{ t('globals.item') }}</QTh>
+                            <QTh>{{ t('globals.description') }}</QTh>
+                            <QTh auto-width>{{ t('globals.quantity') }}</QTh>
+                            <QTh auto-width>{{ t('globals.price') }}</QTh>
+                            <QTh auto-width>{{ t('order.summary.amount') }}</QTh>
+                        </QTr>
+                    </template>
+                    <template #body="props">
+                        <QTr :props="props">
+                            <QTd key="item" :props="props" class="item">
+                                <span class="link">
+                                    {{ props.row.item?.id }}
+                                    <ItemDescriptorProxy :id="props.row.item?.id" />
+                                </span>
+                            </QTd>
+                            <QTd key="description" :props="props">
+                                <div class="description">
+                                    <div class="name">
+                                        {{ props.row.item.name }}
+                                        <span
+                                            v-if="props.row.item.subName"
+                                            class="subName"
+                                        >
+                                            {{ props.row.item.subName }}
+                                        </span>
                                     </div>
-                                    <FetchedTags :item="props.row.item" :columns="3" />
-                                </QTd>
-                                <QTd key="quantity" :props="props">
-                                    {{ props.row.quantity }}
-                                </QTd>
-                                <QTd key="price" :props="props">
-                                    {{ toCurrency(props.row.price) }}
-                                </QTd>
-                                <QTd key="amount" :props="props">
-                                    {{
-                                        toCurrency(props.row?.quantity * props.row?.price)
-                                    }}
-                                </QTd>
-                            </QTr>
-                        </template>
-                    </QTable>
-                </QCard>
-            </template>
-        </CardSummary>
-    </div>
+                                </div>
+                                <FetchedTags :item="props.row.item" :columns="3" />
+                            </QTd>
+                            <QTd key="quantity" :props="props">
+                                {{ props.row.quantity }}
+                            </QTd>
+                            <QTd key="price" :props="props">
+                                {{ toCurrency(props.row.price) }}
+                            </QTd>
+                            <QTd key="amount" :props="props">
+                                {{ toCurrency(props.row?.quantity * props.row?.price) }}
+                            </QTd>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
+        </template>
+    </CardSummary>
 </template>
 <style lang="scss">
 .cardSummary .summaryBody .vn-label-value.order-summary-address {
diff --git a/src/pages/Order/OrderList.vue b/src/pages/Order/OrderList.vue
index 2a1997f21..42f90c33a 100644
--- a/src/pages/Order/OrderList.vue
+++ b/src/pages/Order/OrderList.vue
@@ -147,7 +147,7 @@ const columns = computed(() => [
             {
                 title: t('globals.pageTitles.summary'),
                 icon: 'preview',
-                action: (row) => viewSummary(row.id, OrderSummary),
+                action: (row) => viewSummary(row.id, OrderSummary, 'lg-width'),
                 isPrimary: true,
             },
         ],
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index dfaabc848..fa4e3c89f 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -253,7 +253,7 @@ const columns = computed(() => [
                             name: 'TicketCard',
                         }).href;
                         window.open(url, '_blank');
-                    } else viewSummary(row.id, TicketSummary);
+                    } else viewSummary(row.id, TicketSummary, 'lg-width');
                 },
             },
         ],
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index 68af36474..af6db6304 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -7,8 +7,6 @@ import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
-import FetchData from 'src/components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
 import { toDate, toCurrency, toCelsius } from 'src/filters';
 import { toDateTimeFormat } from 'src/filters/date.js';
 import { dashIfEmpty } from 'src/filters';
@@ -252,16 +250,16 @@ async function setTravelData(travelData) {
 }
 
 const getLink = (param) => `#/travel/${entityId.value}/${param}`;
+
+onMounted(async () => {
+    const { data } = await axios.get('Warehouses', {
+        params: { fields: ['id', 'name'] },
+    });
+    warehouses.value = data;
+});
 </script>
 
 <template>
-    <FetchData
-        url="Warehouses"
-        :filter="{ fields: ['id', 'name'] }"
-        order="name"
-        @on-fetch="(data) => (warehouses = data)"
-        auto-load
-    />
     <CardSummary
         ref="summaryRef"
         :url="`Travels/${entityId}/getTravel`"
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index b227afcb2..32ddc639a 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@@ -201,7 +201,7 @@ const columns = computed(() => [
             {
                 title: t('components.smartCard.viewSummary'),
                 icon: 'preview',
-                action: (row) => viewSummary(row.id, TravelSummary),
+                action: (row) => viewSummary(row.id, TravelSummary, 'lg-width'),
                 isPrimary: true,
             },
         ],
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index b76790075..cb722a139 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -105,7 +105,7 @@ const columns = computed(() => [
             {
                 title: t('components.smartCard.viewSummary'),
                 icon: 'preview',
-                action: (row) => viewSummary(row.id, WorkerSummary),
+                action: (row) => viewSummary(row.id, WorkerSummary, 'lg-width'),
                 isPrimary: true,
             },
         ],