From 8b15d9dd9d091234d26f2337f49c768ec602d94e Mon Sep 17 00:00:00 2001
From: Mono Mono <monomono@disroot.org>
Date: Sat, 2 Nov 2024 14:52:44 -0500
Subject: [PATCH] view (Frontend): purchase summary.

---
 .../src/components/SummaryPurchase.vue        | 44 ++++++++-----------
 1 file changed, 19 insertions(+), 25 deletions(-)

diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryPurchase.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryPurchase.vue
index 5111c64..43425c7 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryPurchase.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryPurchase.vue
@@ -16,36 +16,24 @@
           <v-list-item-subtitle v-if="purchase.customer">{{ purchase.customer.name }}</v-list-item-subtitle>
         </v-list-item-content>
       </v-list-item>
-      <v-list>
-        <v-list-item v-for="(line, index) in purchase.set_lines" :key="index">
-          <v-list-item-content>
-            <v-list-item-title>Producto:</v-list-item-title>
-            <v-list-item-subtitle>
-              <v-row>
-                <v-col >Nombre:</v-col>
-                <v-col >{{ line.product.name }}</v-col>
-                <v-col >Precio:</v-col>
-                <v-col >{{ currencyFormat(line.unit_price) }}</v-col>
-                <v-col >Cantidad:</v-col>
-                <v-col >{{ line.quantity }}</v-col>
-                <v-col >Cantidad:</v-col>
-                <v-col >{{ line.quantity }}</v-col>
-                <v-col >Subtotal:</v-col>
-                <v-col >{{ currencyFormat(calculateSubtotal(line.price, line.quantity)) }}</v-col>
-              </v-row>
-            </v-list-item-subtitle>
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-      <v-list>
-        <v-list-item>
+      <v-list-item>
           <v-list-item-content>
             <v-list-item-title>Total:</v-list-item-title>
             <v-list-item-subtitle v-if="purchase.set_lines">{{ currencyFormat(calculateTotal(purchase.set_lines)) }}</v-list-item-subtitle>
           </v-list-item-content>
-        </v-list-item>
-      </v-list>
+      </v-list-item>
     </v-list>
+    <v-data-table-virtual
+      :headers="headers"
+      :items="purchase.set_lines"
+    >
+      <template v-slot:item.unit_price="{ item }">
+        {{ currencyFormat(item.unit_price) }}
+      </template>
+      <template v-slot:item.subtotal="{ item }">
+        {{ currencyFormat(calculateSubtotal(item.price, item.quantity)) }}
+      </template>
+    </v-data-table-virtual>
   </v-container>
 </template>
 <script>
@@ -57,6 +45,12 @@
     data () {
       return {
         purchase: {},
+        headers: [
+          { title: 'Nombre', value: 'product.name' },
+          { title: 'Precio', value: 'unit_price' },
+          { title: 'Cantidad', value: 'quantity' },
+          { title: 'Subtotal', value: 'subtotal' },
+        ],
       };
     },
     created() {