From 10548a00d2fbe544801903b35a5c757e7c3b6f57 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Wed, 23 Apr 2025 18:32:36 +0200
Subject: [PATCH] fix: refs #8388 update layout

---
 src/pages/InvoiceIn/Card/InvoiceInDueDay.vue | 165 +++++++++----------
 1 file changed, 82 insertions(+), 83 deletions(-)

diff --git a/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue b/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
index 2346ee301..f4278e19a 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
@@ -115,96 +115,95 @@ async function setTaxableBase() {
 onBeforeMount(async () => await setTaxableBase());
 </script>
 <template>
-    <VnTable
-        v-if="invoiceIn"
-        ref="invoiceInDueDayTableRef"
-        data-key="InvoiceInDueDays"
-        url="InvoiceInDueDays"
-        save-url="InvoiceInDueDays/crud"
-        :filter="filter"
-        :user-filter="{
-            include: { relation: 'bank', scope: { fields: ['id', 'bank'] } },
-        }"
-        auto-load
-        :data-required="{ invoiceInFk: invoiceId }"
-        v-model:selected="rowsSelected"
-        @on-fetch="(data) => (areRows = !!data.length)"
-        @save-changes="setTaxableBase"
-        :columns="columns"
-        :is-editable="true"
-        :table="{ selection: 'multiple', 'row-key': '$index' }"
-        footer
-        :right-search="false"
-        :column-search="false"
-        :disable-option="{ card: true }"
-        class="q-pa-none"
-    >
-        <!-- <template #column-foreignValue="{ row }">
-            <VnInputNumber
-                :class="{
-                    'no-pointer-events': !isNotEuro(currency),
-                }"
-                :disable="!isNotEuro(currency)"
-                v-model="row.foreignValue"
-                dense
-                borderless
-                hide-bottom-space
-            />
-        </template> -->
-        <template #column-footer-amount>
-            <QChip
-                dense
-                :color="noMatch ? 'negative' : 'transparent'"
-                class="q-pa-xs"
-                :title="noMatch ? t('invoiceIn.noMatch', { totalTaxableBase }) : ''"
-            >
-                {{ toCurrency(totalAmount) }}
-            </QChip>
-        </template>
-        <template #column-footer-foreignValue>
-            <template v-if="isNotEuro(currency)">
-                {{
-                    getTotal(tableRows, 'foreignValue', {
-                        currency: currency,
-                    })
-                }}
+    <div class="invoice-in-due-day">
+        <VnTable
+            v-if="invoiceIn"
+            ref="invoiceInDueDayTableRef"
+            data-key="InvoiceInDueDays"
+            url="InvoiceInDueDays"
+            save-url="InvoiceInDueDays/crud"
+            :filter="filter"
+            :user-filter="{
+                include: { relation: 'bank', scope: { fields: ['id', 'bank'] } },
+            }"
+            auto-load
+            :data-required="{ invoiceInFk: invoiceId }"
+            v-model:selected="rowsSelected"
+            @on-fetch="(data) => (areRows = !!data.length)"
+            @save-changes="setTaxableBase"
+            :columns="columns"
+            :is-editable="true"
+            :table="{ selection: 'multiple', 'row-key': '$index' }"
+            footer
+            :right-search="false"
+            :column-search="false"
+            :disable-option="{ card: true }"
+            class="q-pa-none"
+        >
+            <template #column-footer-amount>
+                <QChip
+                    dense
+                    :color="noMatch ? 'negative' : 'transparent'"
+                    class="q-pa-xs"
+                    :title="noMatch ? t('invoiceIn.noMatch', { totalTaxableBase }) : ''"
+                >
+                    {{ toCurrency(totalAmount) }}
+                </QChip>
             </template>
-        </template>
-    </VnTable>
-    <QPageSticky :offset="[20, 20]" style="z-index: 2">
-        <QBtn
-            @click="
-                () => {
-                    if (!areRows) return insert();
+            <template #column-footer-foreignValue>
+                <template v-if="isNotEuro(currency)">
+                    {{
+                        getTotal(tableRows, 'foreignValue', {
+                            currency: currency,
+                        })
+                    }}
+                </template>
+            </template>
+        </VnTable>
+        <QPageSticky :offset="[20, 20]" style="z-index: 2">
+            <QBtn
+                @click="
+                    () => {
+                        if (!areRows) return insert();
 
-                    invoiceInDueDayTableRef.create = {
-                        urlCreate: 'InvoiceInDueDays',
-                        onDataSaved: () => invoiceInDueDayTableRef.reload(),
-                        title: t('Create due day'),
-                        formInitialData: {
-                            invoiceInFk: invoiceId,
-                            dueDated: Date.vnNew(),
-                            amount: (totalTaxableBase - totalAmount).toFixed(2),
-                        },
-                    };
-                    invoiceInDueDayTableRef.showForm = true;
-                }
-            "
-            color="primary"
-            fab
-            icon="add"
-            v-shortcut="'+'"
-            data-cy="invoiceInDueDayAdd"
-        />
-        <QTooltip class="text-no-wrap">
-            {{ t('Create due day') }}
-        </QTooltip>
-    </QPageSticky>
+                        invoiceInDueDayTableRef.create = {
+                            urlCreate: 'InvoiceInDueDays',
+                            onDataSaved: () => invoiceInDueDayTableRef.reload(),
+                            title: t('Create due day'),
+                            formInitialData: {
+                                invoiceInFk: invoiceId,
+                                dueDated: Date.vnNew(),
+                                amount: (totalTaxableBase - totalAmount).toFixed(2),
+                            },
+                        };
+                        invoiceInDueDayTableRef.showForm = true;
+                    }
+                "
+                color="primary"
+                fab
+                icon="add"
+                v-shortcut="'+'"
+                data-cy="invoiceInDueDayAdd"
+            />
+            <QTooltip class="text-no-wrap">
+                {{ t('Create due day') }}
+            </QTooltip>
+        </QPageSticky>
+    </div>
 </template>
 <style lang="scss" scoped>
 .q-chip {
     color: var(--vn-text-color);
 }
+
+.invoice-in-due-day {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+:deep(.full-width) {
+    max-width: 900px;
+}
 </style>
 <i18n>
     es: