From 8506f7c1bd011a13bc4cb6b78ec531abb70e6c09 Mon Sep 17 00:00:00 2001
From: Mono Mono <monomono@disroot.org>
Date: Sat, 5 Oct 2024 13:28:10 -0500
Subject: [PATCH] view(Purchase): add autocomplete customer on purchase #43.

---
 .../don-confiao/src/components/Purchase.vue   | 32 +++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue
index 2b77f7f..d56628c 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue
@@ -3,16 +3,18 @@
       <v-form ref="form" v-model="valid">
         <v-row>
           <v-col>
-          <v-select
-            v-model="purchase.customer"
-            :items="clients"
-            item-title="name"
-            item-value="id"
-            label="Cliente"
-            :rules="[rules.required]"
-            required
-            class="mr-4"
-            ></v-select>
+            <v-autocomplete
+              v-model="purchase.customer"
+              :items="filteredClients"
+              :search="client_search"
+              no-data-text="No se hallaron clientes"
+              item-title="name"
+              item-value="id"
+              label="Cliente"
+              :rules="[rules.required]"
+              required
+              class="mr-4"
+            ></v-autocomplete>
           </v-col>
           <v-col
             lg="2"
@@ -109,6 +111,7 @@
     data() {
       return {
         valid: false,
+        client_search: '',
         purchase: {
           date: this.getCurrentDate(),
           client: null,
@@ -141,6 +144,15 @@
           return total + this.calculateSubtotal(saleline);
         }, 0);
       },
+      filteredClients() {
+        return this.clients.filter(client => {
+          if (this.client_search === '') {
+            return [];
+          } else {
+            return client.name.toLowerCase().includes(this.client_search.toLowerCase());
+          }
+        });
+      }
     },
     methods: {
       getCurrentDate() {