From 4472d8b6b89fd5fd4dd0cbd8cb952b0f085bc539 Mon Sep 17 00:00:00 2001
From: Mono Mono <monomono@disroot.org>
Date: Sat, 2 Nov 2024 15:27:26 -0500
Subject: [PATCH] view(Frontend): make dinamic summary_purchase.

---
 .../src/components/SummaryPurchase.vue        | 78 +++++++++++--------
 .../src/pages/summary_purchase.vue            |  2 +-
 2 files changed, 47 insertions(+), 33 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 43425c7..eac9264 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
@@ -1,46 +1,56 @@
 <template>
+
   <v-container>
-    <v-toolbar>
-      <v-toolbar-title> Resumen de la compra </v-toolbar-title>
-    </v-toolbar>
-    <v-list>
-      <v-list-item>
-        <v-list-item-content>
-          <v-list-item-title>Fecha:</v-list-item-title>
-          <v-list-item-subtitle>{{ purchase.date }}</v-list-item-subtitle>
-        </v-list-item-content>
-      </v-list-item>
-      <v-list-item>
-        <v-list-item-content>
-          <v-list-item-title>Cliente:</v-list-item-title>
-          <v-list-item-subtitle v-if="purchase.customer">{{ purchase.customer.name }}</v-list-item-subtitle>
-        </v-list-item-content>
-      </v-list-item>
-      <v-list-item>
+    <v-container v-show="!id">
+      <v-toolbar>
+        <v-toolbar-title> No se indicó Id de la compra</v-toolbar-title>
+      </v-toolbar>
+    </v-container>
+    <v-container v-show="id">
+      <v-toolbar>
+        <v-toolbar-title> Resumen de la compra {{ id }}</v-toolbar-title>
+      </v-toolbar>
+      <v-list>
+        <v-list-item>
+          <v-list-item-content>
+            <v-list-item-title>Fecha:</v-list-item-title>
+            <v-list-item-subtitle>{{ purchase.date }}</v-list-item-subtitle>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item>
+          <v-list-item-content>
+            <v-list-item-title>Cliente:</v-list-item-title>
+            <v-list-item-subtitle v-if="purchase.customer">{{ purchase.customer.name }}</v-list-item-subtitle>
+          </v-list-item-content>
+        </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-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-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>
   </v-container>
 </template>
+
 <script>
   export default {
     name: 'SummaryPurchase',
     props: {
-      msg: String
+      msg: String,
+      id: String
     },
     data () {
       return {
@@ -54,7 +64,11 @@
       };
     },
     created() {
-      this.fetchPurchase(1);
+      if (this.id) {
+        this.fetchPurchase(this.id);
+      } else {
+        console.error('No se proporcionó un ID de compra.');
+      }
     },
     methods: {
       fetchPurchase(purchaseId) {
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/summary_purchase.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/summary_purchase.vue
index 6a46ff1..2fcd7ff 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/summary_purchase.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/summary_purchase.vue
@@ -1,5 +1,5 @@
 <template>
-  <SummaryPurchase />
+  <SummaryPurchase :id="$route.query.id"/>
 </template>
 
 <script setup>