feat(Front): add purchase vue form.

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

@@ -0,0 +1,161 @@
+<template>
+  <v-app>
+    <v-navigation-drawer app>
+      <v-list>
+        <v-list-item v-for="item in menuItems" :key="item.title" @click="navigate(item.route)">
+          <v-list-item-title>{{ item.title }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-app-bar app>
+      <v-toolbar-title>Compra</v-toolbar-title>
+    </v-app-bar>
+
+    <v-container>
+      <v-form ref="form" v-model="valid">
+        <v-text-field
+          v-model="purchase.date"
+          label="Fecha"
+          type="date"
+          :rules="[rules.required]"
+          required
+        ></v-text-field>
+        <v-text-field
+          v-model="purchase.client"
+          label="Cliente"
+          :rules="[rules.required]"
+          required
+        ></v-text-field>
+        <v-textarea
+          v-model="purchase.notes"
+          label="Notas"
+        ></v-textarea>
+        <v-divider></v-divider>
+
+        <v-subheader>Productos</v-subheader>
+        <div v-for="(line, index) in purchase.lines" :key="line.id">
+          <v-row>
+            <v-col>
+              <v-text-field
+                v-model="line.product"
+                label="Producto"
+                :rules="[rules.required]"
+                required
+              ></v-text-field>
+            </v-col>
+            <v-col>
+              <v-text-field
+                v-model.number="line.price"
+                label="Precio"
+                type="number"
+                :rules="[rules.required]"
+                required
+              ></v-text-field>
+            </v-col>
+            <v-col>
+              <v-text-field
+                v-model.number="line.quantity"
+                label="Cantidad"
+                type="number"
+                :rules="[rules.required]"
+                required
+              ></v-text-field>
+            </v-col>
+            <v-col>
+              <v-text-field
+                :value="calculateSubtotal(line)"
+                label="Subtotal"
+                readonly
+              ></v-text-field>
+            </v-col>
+            <v-col>
+              <v-btn @click="removeLine(index)" color="red">Eliminar</v-btn>
+            </v-col>
+          </v-row>
+        </div>
+        <v-btn @click="addLine" color="blue">Agregar</v-btn>
+
+        <v-divider></v-divider>
+
+        <v-text-field
+          :value="calculateTotal"
+          label="Total"
+          readonly
+        ></v-text-field>
+        <v-btn @click="submit" color="green">Comprar</v-btn>
+      </v-form>
+    </v-container>
+  </v-app>
+</template>
+
+<script>
+  export default {
+    name: 'DonConfiao',
+    props: {
+      msg: String
+    },
+    data() {
+      return {
+        valid: false,
+        purchase: {
+          date: '',
+          client: '',
+          notes: '',
+          lines: [{product:'', price: 0, quantity: 0}],
+        },
+        rules: {
+          required: value => !!value || 'Requerido.',
+        },
+        menuItems: [
+          { title: 'Inicio', route: '/'},
+          { title: 'Compras', route:'/compras'},
+        ],
+      };
+    },
+    computed: {
+      calculateTotal() {
+        return this.purchase.lines.reduce((total, line) => {
+          return total + this.calculateSubtotal(line);
+        }, 0);
+      },
+    },
+    methods: {
+      addLine() {
+        this.purchase.lines.push({ product: '', price: 0, quantity:0 });
+      },
+      removeLine(index) {
+        this.purchase.lines.splice(index, 1);
+      },
+      calculateSubtotal(line) {
+        return line.price * line.quantity;
+      },
+      async submit() {
+        if (this.$refs.form.validate()) {
+          try {
+            const response = await fetch('http://localhost:8000/don_confiao/', {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify(this.purchase),
+            });
+            if (response.ok) {
+              const data = await response.json();
+              console.log('Compra enviada:', data);
+            } else {
+              console.error('Error al enviar la compra:', response.statusText);
+            }
+          } catch (error) {
+            console.error('Error de red:', error);
+          }
+        }
+      },
+      navigate(route) {
+        this.$route.push(route);
+      },
+    },
+  };
+</script>
+<style>
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <HelloWorld />
+  <Purchase />
 </template>
 
 <script setup>