From 63f6b3da10af9bd8f518a0ca2e3e3193ca8e270a Mon Sep 17 00:00:00 2001
From: Mono Mono <monomono@disroot.org>
Date: Sat, 5 Oct 2024 15:31:31 -0500
Subject: [PATCH] view(Purchase): enable autocomplete products #44
---
.../don-confiao/src/components/Purchase.vue | 30 ++++++++++++++++---
1 file changed, 26 insertions(+), 4 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 d56628c..56a6ae0 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
@@ -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>