From 5f3c39f74781088ce96ab8c5a389e3147a428daa Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 8 Nov 2023 03:01:18 +0100
Subject: [PATCH] refs #6416 feat: use custom Vn cmp 1/2

---
 src/pages/InvoiceIn/Card/InvoiceInSummary.vue | 148 ++++++++----------
 1 file changed, 63 insertions(+), 85 deletions(-)

diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
index 370dc786d..66db3608e 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@@ -8,6 +8,9 @@ import { downloadFile } from 'src/composables/downloadFile';
 
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import VnTable from 'src/components/ui/VnTable.vue';
+import VnCardSection from 'src/components/ui/VnCardSection.vue';
+import VnCard from 'src/components/ui/VnCard.vue';
 import in18n from '../in18n';
 
 onMounted(async () => {
@@ -355,93 +358,67 @@ function setData(entity) {
                 />
             </QCard>
             <!--Vat-->
-            <QCard v-if="invoiceIn.invoiceInTax.length" class="vn-three">
-                <a class="header">
-                    {{ t('invoiceIn.card.vat') }}
-                </a>
-                <QTable
-                    :columns="vatColumns"
-                    :rows="invoiceIn.invoiceInTax"
-                    flat
-                    hide-pagination
-                >
-                    <template #header="props">
-                        <QTr :props="props" class="bg">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                {{ t(col.label) }}
-                            </QTh>
-                        </QTr>
-                    </template>
-                    <template #bottom-row>
-                        <QTr class="bg">
-                            <QTd></QTd>
-                            <QTd>{{ toCurrency(invoiceIn.totals.totalTaxableBase) }}</QTd>
-                            <QTd></QTd>
-                            <QTd></QTd>
-                            <QTd></QTd>
-                            <QTd></QTd>
-                        </QTr>
-                    </template>
-                </QTable>
-            </QCard>
+            <VnCard v-if="invoiceIn.invoiceInTax.length" class="vn-three">
+                <template #header>
+                    <VnCardSection :title="'invoiceIn.card.vat'"> </VnCardSection>
+                </template>
+                <template #body>
+                    <VnTable :columns="vatColumns" :rows="invoiceIn.invoiceInTax">
+                        <template #bottom-row>
+                            <QTr class="bg">
+                                <QTd></QTd>
+                                <QTd>{{
+                                    toCurrency(invoiceIn.totals.totalTaxableBase)
+                                }}</QTd>
+                                <QTd></QTd>
+                                <QTd></QTd>
+                                <QTd></QTd>
+                                <QTd></QTd>
+                            </QTr>
+                        </template>
+                    </VnTable>
+                </template>
+            </VnCard>
             <!--Due Day-->
-            <QCard v-if="invoiceIn.invoiceInDueDay.length" class="vn-two">
-                <div class="header">
-                    {{ t('invoiceIn.card.dueDay') }}
-                </div>
-                <QTable
-                    class="full-width"
-                    :columns="dueDayColumns"
-                    :rows="invoiceIn.invoiceInDueDay"
-                    flat
-                    hide-pagination
-                >
-                    <template #header="props">
-                        <QTr :props="props" class="bg">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                {{ t(col.label) }}
-                            </QTh>
-                        </QTr>
-                    </template>
-                    <template #bottom-row>
-                        <QTr class="bg">
-                            <QTd></QTd>
-                            <QTd></QTd>
-                            <QTd>{{ toCurrency(invoiceIn.totals.totalDueDay) }}</QTd>
-                            <QTd></QTd>
-                        </QTr>
-                    </template>
-                </QTable>
-            </QCard>
+            <VnCard v-if="invoiceIn.invoiceInDueDay.length" class="vn-two">
+                <template #header>
+                    <VnCardSection :title="'invoiceIn.card.dueDay'"> </VnCardSection>
+                </template>
+                <template #body
+                    ><VnTable :columns="dueDayColumns" :rows="invoiceIn.invoiceInDueDay">
+                        <template #bottom-row>
+                            <QTr class="bg">
+                                <QTd></QTd>
+                                <QTd></QTd>
+                                <QTd>{{ toCurrency(invoiceIn.totals.totalDueDay) }}</QTd>
+                                <QTd></QTd>
+                            </QTr>
+                        </template>
+                    </VnTable>
+                </template>
+            </VnCard>
             <!--Intrastat-->
-            <QCard v-if="invoiceIn.invoiceInIntrastat.length">
-                <div class="header">
-                    {{ t('invoiceIn.card.intrastat') }}
-                </div>
-                <QTable
-                    :columns="intrastatColumns"
-                    :rows="invoiceIn.invoiceInIntrastat"
-                    flat
-                    hide-pagination
-                >
-                    <template #header="props">
-                        <QTr :props="props" class="bg">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                {{ t(col.label) }}
-                            </QTh>
-                        </QTr>
-                    </template>
-                    <template #bottom-row>
-                        <QTr class="bg">
-                            <QTd></QTd>
-                            <QTd>{{ toCurrency(intrastatTotals.amount) }}</QTd>
-                            <QTd>{{ intrastatTotals.net }}</QTd>
-                            <QTd>{{ intrastatTotals.stems }}</QTd>
-                            <QTd></QTd>
-                        </QTr>
-                    </template>
-                </QTable>
-            </QCard>
+            <VnCard v-if="invoiceIn.invoiceInIntrastat.length">
+                <template #header>
+                    <VnCardSection :title="'invoiceIn.card.intrastat'"> </VnCardSection>
+                </template>
+                <template #body
+                    ><VnTable
+                        :columns="intrastatColumns"
+                        :rows="invoiceIn.invoiceInIntrastat"
+                    >
+                        <template #bottom-row>
+                            <QTr class="bg">
+                                <QTd></QTd>
+                                <QTd>{{ toCurrency(intrastatTotals.amount) }}</QTd>
+                                <QTd>{{ intrastatTotals.net }}</QTd>
+                                <QTd>{{ intrastatTotals.stems }}</QTd>
+                                <QTd></QTd>
+                            </QTr>
+                        </template>
+                    </VnTable>
+                </template>
+            </VnCard>
         </template>
     </CardSummary>
 </template>
@@ -449,6 +426,7 @@ function setData(entity) {
 .bg {
     background-color: var(--vn-light-gray);
 }
+
 .bordered {
     border: 1px solid var(--vn-text);
     width: 16em;