refactor: refs #8388 update UI feedback

src/pages/InvoiceIn/Card/InvoiceInDueDay.vue

@@ -25,7 +25,8 @@ const invoiceInFormRef = ref();
 const invoiceId = +route.params.id;
 const filter = { where: { invoiceInFk: invoiceId } };
 const areRows = ref(false);
-const totals = ref();
+const totalTaxableBase = ref();
+const noMatch = computed(() => totalAmount.value != totalTaxableBase.value);
 const columns = computed(() => [
     {
         name: 'duedate',
@@ -74,9 +75,12 @@ async function insert() {
     notify(t('globals.dataSaved'), 'positive');
 }
 
-onBeforeMount(async () => {
+async function setTaxableBase() {
-    totals.value = (await axios.get(`InvoiceIns/${invoiceId}/getTotals`)).data;
+    const { data } = await axios.get(`InvoiceIns/${invoiceId}/getTotals`);
-});
+    totalTaxableBase.value = data.totalTaxableBase;
+}
+
+onBeforeMount(async () => await setTaxableBase());
 </script>
 <template>
     <CrudModel
@@ -89,13 +93,14 @@ onBeforeMount(async () => {
         :data-required="{ invoiceInFk: invoiceId }"
         v-model:selected="rowsSelected"
         @on-fetch="(data) => (areRows = !!data.length)"
+        @save-changes="setTaxableBase"
     >
         <template #body="{ rows }">
             <QTable
                 v-model:selected="rowsSelected"
                 selection="multiple"
-                :columns="columns"
+                :columns
-                :rows="rows"
+                :rows
                 row-key="$index"
                 :grid="$q.screen.lt.sm"
             >
@@ -151,7 +156,18 @@ onBeforeMount(async () => {
                         <QTd />
                         <QTd />
                         <QTd>
-                            {{ toCurrency(totalAmount) }}
+                            <QChip
+                                dense
+                                :color="noMatch ? 'negative' : 'transparent'"
+                                class="q-pa-xs"
+                                :title="
+                                    noMatch
+                                        ? t('invoiceIn.noMatch', { totalTaxableBase })
+                                        : ''
+                                "
+                            >
+                                {{ toCurrency(totalAmount) }}
+                            </QChip>
                         </QTd>
                         <QTd>
                             <template v-if="isNotEuro(invoiceIn.currency.code)">
@@ -237,7 +253,7 @@ onBeforeMount(async () => {
                     if (!areRows) insert();
                     else
                         invoiceInFormRef.insert({
-                            amount: (totals.totalTaxableBase - totalAmount).toFixed(2),
+                            amount: (totalTaxableBase - totalAmount).toFixed(2),
                             invoiceInFk: invoiceId,
                         });
                 }
@@ -249,6 +265,10 @@ onBeforeMount(async () => {
 .bg {
     background-color: var(--vn-light-gray);
 }
+
+.q-chip {
+    color: var(--vn-text-color);
+}
 </style>
 <i18n>
     es:

src/pages/InvoiceIn/locale/en.yml

@@ -68,3 +68,4 @@ invoiceIn:
         isBooked: Is booked
         account: Ledger account
         correctingFk: Rectificative
+    noMatch: No match with the vat({totalTaxableBase})

src/pages/InvoiceIn/locale/es.yml

@@ -60,9 +60,11 @@ invoiceIn:
         net: Neto
         stems: Tallos
         country: País
+        noMatch: No cuadra
     params:
         search: Id o nombre proveedor
         correctedFk: Rectificada
         isBooked: Contabilizada
         account: Cuenta contable
         correctingFk: Rectificativa
+    noMatch: No cuadra con el iva({totalTaxableBase})