tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue

@@ -22,13 +22,13 @@
           required
         ></v-text-field>
         <v-select
-          v-model="purchase.client"
+          v-model="purchase.customer"
           :items="clients"
+          item-title="name"
+          item-value="id"
           label="Cliente"
           :rules="[rules.required]"
           required
-          item-text="name"
-          item-value="id"
         ></v-select>
         <v-textarea
           v-model="purchase.notes"
@@ -39,26 +39,29 @@
           <v-toolbar>
           <v-toolbar-title secondary>Productos</v-toolbar-title>
         </v-toolbar>
-        <div v-for="(line, index) in purchase.lines" :key="line.id">
+        <div v-for="(line, index) in purchase.saleline_set" :key="line.id">
           <v-row>
             <v-col>
-              <v-text-field
+              <v-select
                 v-model="line.product"
+                :items="products"
+                item-title="name"
+                item-value="id"
                 label="Producto"
                 :rules="[rules.required]"
                 required
-              ></v-text-field>
+              ></v-select>
             </v-col>
             <v-col>
               <v-text-field
-                v-model.number="line.price"
+                v-model.number="line.unit_price"
                 label="Precio"
                 type="number"
                 :rules="[rules.required]"
                 required
               ></v-text-field>
             </v-col>
-n            <v-col>
+            <v-col>
               <v-text-field
                 v-model.number="line.quantity"
                 label="Cantidad"
@@ -110,7 +113,7 @@ n            <v-col>
           date: '',
           client: null,
           notes: '',
-          lines: [{product:'', price: 0, quantity: 0}],
+          saleline_set: [{product:'', unit_price: 0, quantity: 0}],
         },
         rules: {
           required: value => !!value || 'Requerido.',
@@ -120,15 +123,17 @@ n            <v-col>
           { title: 'Compras', route:'/compras'},
         ],
         clients: [],
+        products: [],
       };
     },
     created() {
       this.fetchClients();
+      this.fetchProducts();
     },
     computed: {
       calculateTotal() {
-        return this.purchase.lines.reduce((total, line) => {
+        return this.purchase.saleline_set.reduce((total, saleline) => {
-          return total + this.calculateSubtotal(line);
+          return total + this.calculateSubtotal(saleline);
         }, 0);
       },
     },
@@ -137,25 +142,36 @@ n            <v-col>
         fetch('/don_confiao/api/customers/')
           .then(response => response.json())
           .then(data => {
-            this.clients = data.map(client => client.name);
+            this.clients = data;
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      },
+      fetchProducts() {
+        fetch('/don_confiao/api/products/')
+          .then(response => response.json())
+          .then(data => {
+            console.log(data);
+            this.products = data;
           })
           .catch(error => {
             console.error(error);
           });
       },
       addLine() {
-        this.purchase.lines.push({ product: '', price: 0, quantity:0 });
+        this.purchase.saleline_set.push({ product: '', unit_price: 0, quantity:0 });
       },
       removeLine(index) {
-        this.purchase.lines.splice(index, 1);
+        this.purchase.saleline_set.splice(index, 1);
       },
       calculateSubtotal(line) {
-        return line.price * line.quantity;
+        return line.unit_price * line.quantity;
       },
       async submit() {
         if (this.$refs.form.validate()) {
           try {
-            const response = await fetch('http://localhost:8000/don_confiao/', {
+            const response = await fetch('/don_confiao/api/sales/', {
               method: 'POST',
               headers: {
                 'Content-Type': 'application/json',
@@ -165,6 +181,7 @@ n            <v-col>
             if (response.ok) {
               const data = await response.json();
               console.log('Compra enviada:', data);
+              this.$router.push("SummaryPurchase");
             } else {
               console.error('Error al enviar la compra:', response.statusText);
             }
@@ -174,7 +191,7 @@ n            <v-col>
         }
       },
       navigate(route) {
-        this.$route.push(route);
+        this.$router.push(route);
       },
     },
   };

tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryPurchase.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-app>
+    <v-navigation-drawer app>
+    </v-navigation-drawer>
+    <v-app-bar>
+      Resumen de la compra
+    </v-app-bar>
+    <v-container>
+      Pon aqui la información de la compra
+    </v-container>
+  </v-app>
+</template>
+<script>
+
+</script>
+<style>
+
+</style>

tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/sumaryPurchase.vue

@@ -0,0 +1,7 @@
+<template>
+  <SummaryPurchase />
+</template>
+
+<script setup>
+  //
+</script>

tienda_ilusion/don_confiao/serializers.py

@@ -18,9 +18,9 @@ class SaleSerializer(serializers.ModelSerializer):
 class ProductSerializer(serializers.ModelSerializer):
     class Meta:
         model = Product
-        fields = ['name', 'price', 'measuring_unit', 'categories']
+        fields = ['id', 'name', 'price', 'measuring_unit', 'categories']
 
 class CustomerSerializer(serializers.ModelSerializer):
     class Meta:
         model = Customer
-        fields = ['name', 'address']
+        fields = ['id', 'name', 'address']