src/pages/Claim/Card/ClaimSummary.vue

@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDate, toCurrency } from 'src/filters';
@@ -48,24 +48,31 @@ const claimDmsFilter = ref({
         },
     ],
 });
-function onFetch(rows, newRows) {
-    console.log('rows: ', rows);
-    console.log('newRows: ', newRows);
+async function totalClaim(rows, newRows) {
     if (newRows) rows = newRows;
-    amount.value = 0;
-    console.log('amount.value: ', amount.value);
-    amountClaimed.value = 0;
-    console.log('amountClaimed.value: ', amountClaimed.value);
-    if (!rows || !rows.length) return;
+    const { data } = await axios.get(`Claims/${entityId.value}/getSummary`);
 
-    for (const row of rows) {
-        const { sale } = row;
+    const lines = data.salesClaimed;
+
+    totalRow(lines);
+    amount.value = 0;
+    amountClaimed.value = 0;
+    for (const line of lines) {
+        const { sale } = line;
+        console.log('sale: ', sale);
         amount.value = amount.value + totalRow(sale);
-        const price = row.quantity * sale.price;
+        console.log('amount: ', amount.value);
+        const price = line.quantity * sale.price;
         const discount = (sale.discount * price) / 100;
         amountClaimed.value = amountClaimed.value + (price - discount);
+        console.log('amountClaimed: ', amountClaimed.value);
     }
 }
+function totalRow(lines) {
+    const amount = lines.price * lines.quantity;
+    const appliedDiscount = (lines.discount * amount) / 100;
+    return amount - appliedDiscount;
+}
 const detailsColumns = ref([
     {
         name: 'item',
@@ -118,11 +125,7 @@ const detailsColumns = ref([
         sortable: true,
     },
 ]);
-function totalRow({ price, quantity, discount }) {
-    const amount = price * quantity;
-    const appliedDiscount = (discount * amount) / 100;
-    return amount - appliedDiscount;
-}
+
 const markerLabels = [
     { value: 1, label: t('claim.company') },
     { value: 5, label: t('claim.person') },
@@ -201,6 +204,10 @@ async function changeState(value) {
 function claimUrl(section) {
     return '#/claim/' + entityId.value + '/' + section;
 }
+
+onMounted(() => {
+    totalClaim();
+});
 </script>
 
 <template>
@@ -255,7 +262,7 @@ function claimUrl(section) {
             <ClaimDescriptorMenu :claim="entity.claim" />
         </template>
         <template #body="{ entity: { claim, salesClaimed, developments } }">
-            <QCard class="vn-one" v-if="$route.name != 'ClaimSummary'">
+            <QCard class="vn-two" v-if="$route.name != 'ClaimSummary'">
                 <VnTitle
                     :url="claimUrl('basic-data')"
                     :text="t('globals.pageTitles.basicData')"
@@ -306,7 +313,7 @@ function claimUrl(section) {
                     order="created ASC"
                 />
             </QCard>
-            <QCard class="vn-two" v-if="claimDms?.length">
+            <QCard class="vn-one" v-if="claimDms?.length">
                 <VnTitle :url="claimUrl('photos')" :text="t('claim.photos')" />
                 <div class="container max-container-height" style="overflow: auto">
                     <div
@@ -348,10 +355,21 @@ function claimUrl(section) {
                     </div>
                 </div>
             </QCard>
+            <QCard class="vn-one">
+                <VnTitle :text="t('claim.resume')" />
+                <div class="container max-container-height">
+                    <VnLv :label="t('Amount')" :value="toCurrency(amount)" />
+                    <VnLv :label="t('Amount Claimed')">
+                        <template #value>
+                            <QChip color="positive">
+                                {{ toCurrency(amountClaimed) }}
+                            </QChip>
+                        </template>
+                    </VnLv>
+                </div>
+            </QCard>
             <QCard class="vn-max" v-if="salesClaimed.length > 0" @on-fetch="onFetch">
                 <VnTitle :url="claimUrl('lines')" :text="t('claim.details')" />
-                {{ salesClaimed }}
-
                 <QTable
                     :columns="detailsColumns"
                     :rows="salesClaimed"

src/pages/Claim/locale/en.yml

@@ -46,3 +46,4 @@ claim:
     dragDrop: Drag and drop it here
     search: Search claims
     searchInfo: You can search by claim id or customer name
+    resume: Resume

src/pages/Claim/locale/es.yml

@@ -46,3 +46,4 @@ claim:
     dragDrop: Arrastra y suelta aquí
     search: Buscar reclamación
     searchInfo: Puedes buscar por ID de la reclamación o nombre del cliente
+    resume: Resumen