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>