fix: refs #8388 update layout

src/pages/InvoiceIn/Card/InvoiceInDueDay.vue

@@ -115,96 +115,95 @@ async function setTaxableBase() {
 onBeforeMount(async () => await setTaxableBase());
 </script>
 <template>
-    <VnTable
+    <div class="invoice-in-due-day">
-        v-if="invoiceIn"
+        <VnTable
-        ref="invoiceInDueDayTableRef"
+            v-if="invoiceIn"
-        data-key="InvoiceInDueDays"
+            ref="invoiceInDueDayTableRef"
-        url="InvoiceInDueDays"
+            data-key="InvoiceInDueDays"
-        save-url="InvoiceInDueDays/crud"
+            url="InvoiceInDueDays"
-        :filter="filter"
+            save-url="InvoiceInDueDays/crud"
-        :user-filter="{
+            :filter="filter"
-            include: { relation: 'bank', scope: { fields: ['id', 'bank'] } },
+            :user-filter="{
-        }"
+                include: { relation: 'bank', scope: { fields: ['id', 'bank'] } },
-        auto-load
+            }"
-        :data-required="{ invoiceInFk: invoiceId }"
+            auto-load
-        v-model:selected="rowsSelected"
+            :data-required="{ invoiceInFk: invoiceId }"
-        @on-fetch="(data) => (areRows = !!data.length)"
+            v-model:selected="rowsSelected"
-        @save-changes="setTaxableBase"
+            @on-fetch="(data) => (areRows = !!data.length)"
-        :columns="columns"
+            @save-changes="setTaxableBase"
-        :is-editable="true"
+            :columns="columns"
-        :table="{ selection: 'multiple', 'row-key': '$index' }"
+            :is-editable="true"
-        footer
+            :table="{ selection: 'multiple', 'row-key': '$index' }"
-        :right-search="false"
+            footer
-        :column-search="false"
+            :right-search="false"
-        :disable-option="{ card: true }"
+            :column-search="false"
-        class="q-pa-none"
+            :disable-option="{ card: true }"
-    >
+            class="q-pa-none"
-        <!-- <template #column-foreignValue="{ row }">
+        >
-            <VnInputNumber
+            <template #column-footer-amount>
-                :class="{
+                <QChip
-                    'no-pointer-events': !isNotEuro(currency),
+                    dense
-                }"
+                    :color="noMatch ? 'negative' : 'transparent'"
-                :disable="!isNotEuro(currency)"
+                    class="q-pa-xs"
-                v-model="row.foreignValue"
+                    :title="noMatch ? t('invoiceIn.noMatch', { totalTaxableBase }) : ''"
-                dense
+                >
-                borderless
+                    {{ toCurrency(totalAmount) }}
-                hide-bottom-space
+                </QChip>
-            />
-        </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,
-                    })
-                }}
             </template>
-        </template>
+            <template #column-footer-foreignValue>
-    </VnTable>
+                <template v-if="isNotEuro(currency)">
-    <QPageSticky :offset="[20, 20]" style="z-index: 2">
+                    {{
-        <QBtn
+                        getTotal(tableRows, 'foreignValue', {
-            @click="
+                            currency: currency,
-                () => {
+                        })
-                    if (!areRows) return insert();
+                    }}
+                </template>
+            </template>
+        </VnTable>
+        <QPageSticky :offset="[20, 20]" style="z-index: 2">
+            <QBtn
+                @click="
+                    () => {
+                        if (!areRows) return insert();
 
-                    invoiceInDueDayTableRef.create = {
+                        invoiceInDueDayTableRef.create = {
-                        urlCreate: 'InvoiceInDueDays',
+                            urlCreate: 'InvoiceInDueDays',
-                        onDataSaved: () => invoiceInDueDayTableRef.reload(),
+                            onDataSaved: () => invoiceInDueDayTableRef.reload(),
-                        title: t('Create due day'),
+                            title: t('Create due day'),
-                        formInitialData: {
+                            formInitialData: {
-                            invoiceInFk: invoiceId,
+                                invoiceInFk: invoiceId,
-                            dueDated: Date.vnNew(),
+                                dueDated: Date.vnNew(),
-                            amount: (totalTaxableBase - totalAmount).toFixed(2),
+                                amount: (totalTaxableBase - totalAmount).toFixed(2),
-                        },
+                            },
-                    };
+                        };
-                    invoiceInDueDayTableRef.showForm = true;
+                        invoiceInDueDayTableRef.showForm = true;
-                }
+                    }
-            "
+                "
-            color="primary"
+                color="primary"
-            fab
+                fab
-            icon="add"
+                icon="add"
-            v-shortcut="'+'"
+                v-shortcut="'+'"
-            data-cy="invoiceInDueDayAdd"
+                data-cy="invoiceInDueDayAdd"
-        />
+            />
-        <QTooltip class="text-no-wrap">
+            <QTooltip class="text-no-wrap">
-            {{ t('Create due day') }}
+                {{ t('Create due day') }}
-        </QTooltip>
+            </QTooltip>
-    </QPageSticky>
+        </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: