view(Purchase): add client list from requesta as example.

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

@@ -21,19 +21,24 @@
           :rules="[rules.required]"
           required
         ></v-text-field>
-        <v-text-field
+        <v-select
           v-model="purchase.client"
+          :items="clients"
           label="Cliente"
           :rules="[rules.required]"
           required
-        ></v-text-field>
+          item-text="name"
+          item-value="id"
+        ></v-select>
         <v-textarea
           v-model="purchase.notes"
           label="Notas"
         ></v-textarea>
         <v-divider></v-divider>
-
-        <v-subheader>Productos</v-subheader>
+        <v-container>
+          <v-toolbar>
+          <v-toolbar-title secondary>Productos</v-toolbar-title>
+        </v-toolbar>
         <div v-for="(line, index) in purchase.lines" :key="line.id">
           <v-row>
             <v-col>
@@ -53,7 +58,7 @@
                 required
               ></v-text-field>
             </v-col>
-            <v-col>
+n            <v-col>
               <v-text-field
                 v-model.number="line.quantity"
                 label="Cantidad"
@@ -76,6 +81,8 @@
         </div>
         <v-btn @click="addLine" color="blue">Agregar</v-btn>
 
+      </v-container>
+
         <v-divider></v-divider>
 
         <v-text-field
@@ -101,7 +108,7 @@
         valid: false,
         purchase: {
           date: '',
-          client: '',
+          client: null,
           notes: '',
           lines: [{product:'', price: 0, quantity: 0}],
         },
@@ -112,8 +119,12 @@
           { title: 'Inicio', route: '/'},
           { title: 'Compras', route:'/compras'},
         ],
+        clients: [],
       };
     },
+    created() {
+      this.fetchClients();
+    },
     computed: {
       calculateTotal() {
         return this.purchase.lines.reduce((total, line) => {
@@ -122,6 +133,16 @@
       },
     },
     methods: {
+      fetchClients() {
+        fetch('/don_confiao/api/customers/')
+          .then(response => response.json())
+          .then(data => {
+            this.clients = data.map(client => client.name);
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      },
       addLine() {
         this.purchase.lines.push({ product: '', price: 0, quantity:0 });
       },