view(Purchase): enable autocomplete products #44

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

@@ -42,16 +42,23 @@
         <v-container v-for="(line, index) in purchase.saleline_set" :key="line.id">
           <v-row>
             <v-col>
-              <v-select
+              <v-autocomplete
                 v-model="line.product"
-                :items="products"
+                :items="filteredProducts"
+                :search="product_search"
                 @update:modelValue="onProductChange(index)"
+                no-data-text="No se hallaron productos"
                 item-title="name"
                 item-value="id"
+                item-subtitle="Price"
                 label="Producto"
                 :rules="[rules.required]"
                 required
-              ></v-select>
+              >
+                <template v-slot:item="{ props, item }">
+                  <v-list-item v-bind="props" :title="item.raw.name" :subtitle="formatPrice(item.raw.price)"></v-list-item>
+                </template>
+              </v-autocomplete>
             </v-col>
             <v-col>
               <v-text-field
@@ -81,6 +88,7 @@
                 prefix="$"
                 readonly
                 disable
+                persistent-placeholder="true"
               ></v-text-field>
             </v-col>
             <v-col>
@@ -96,6 +104,7 @@
           label="Total"
           prefix="$"
           readonly
+          persistent-placeholder="true"
         ></v-text-field>
         <v-btn @click="submit" color="green">Comprar</v-btn>
       </v-form>
@@ -112,6 +121,7 @@
       return {
         valid: false,
         client_search: '',
+        product_search: '',
         purchase: {
           date: this.getCurrentDate(),
           client: null,
@@ -152,7 +162,16 @@
             return client.name.toLowerCase().includes(this.client_search.toLowerCase());
           }
         });
-      }
+      },
+      filteredProducts() {
+        return this.products.filter(product => {
+          if (this.product_search === '') {
+            return [];
+          } else {
+            return product.name.toLowerCase().includes(this.product_search.toLowerCase());
+          }
+        });
+      },
     },
     methods: {
       getCurrentDate() {
@@ -223,6 +242,9 @@
       navigate(route) {
         this.$router.push(route);
       },
+      formatPrice(price) {
+        return new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'COP' }).format(price);
+      },
     },
   };
 </script>