diff --git a/src/components/Purchase.vue b/src/components/Purchase.vue index f553c2d..4815e8a 100644 --- a/src/components/Purchase.vue +++ b/src/components/Purchase.vue @@ -186,17 +186,17 @@ clients: [], products: [], }; - }, + }, created() { - this.fetchClients(); - this.fetchProducts(); - this.fetchPaymentMethods(); - }, - watch: { - group () { - this.drawer = false + this.fetchClients(); + this.fetchProducts(); + this.fetchPaymentMethods(); }, - }, + watch: { + group () { + this.drawer = false + }, + }, beforeMount() { window.addEventListener('beforeunload', this.confirmLeave); }, @@ -228,8 +228,8 @@ }); }, }, - methods: { - openModal() { + methods: { + openModal() { this.$refs.customerModal.openModal(); }, onFormChange() { @@ -307,25 +307,25 @@ calculateSubtotal(line) { return line.unit_price * line.quantity; }, - async submit() { - this.$refs.purchase.validate(); - if (this.valid) { - this.api.createPurchase(this.purchase) - .then(data => { - console.log('Compra enviada:', data); - this.$router.push({ - path: "/summary_purchase", - query : {id: parseInt(data.id)} - }); - }) - .catch(error => console.error('Error al enviarl la compra:', error)); - } else { - this.show_alert_purchase = true; - setTimeout(() => { - this.show_alert_purchase = false; - }, 4000); - } - }, + async submit() { + this.$refs.purchase.validate(); + if (this.valid) { + this.api.createPurchase(this.purchase) + .then(data => { + console.log('Compra enviada:', data); + this.$router.push({ + path: "/summary_purchase", + query : {id: parseInt(data.id)} + }); + }) + .catch(error => console.error('Error al enviarl la compra:', error)); + } else { + this.show_alert_purchase = true; + setTimeout(() => { + this.show_alert_purchase = false; + }, 4000); + } + }, navigate(route) { this.$router.push(route); }, diff --git a/src/pages/catalog.vue b/src/pages/catalog.vue index 8226cdd..5175bb4 100644 --- a/src/pages/catalog.vue +++ b/src/pages/catalog.vue @@ -35,21 +35,32 @@ export default { Card, Cart }, + setup() { + const cartStore = useCartStore(); + return { cartStore }; + }, data() { return { api: inject('api'), - cartItems: [], items: [], }; }, + computed: { + cartItems: { + get() { + return this.cartStore.items; + }, + set(value) { + this.cartStore.items = value; + } + }, + cartCount() { + return this.cartStore.cartCount; + } + }, created() { this.fetchProducts(); }, - computed: { - cartCount() { - return this.cartItems.reduce((sum, item) => sum + item.quantity, 0); - } - }, methods: { fetchProducts() { this.api.getProducts() @@ -85,35 +96,17 @@ export default { }, addToCart(item) { if (item.quantity <= 0) return; - - const existingItem = this.cartItems.find(i => i.id === item.id); - if (existingItem) { - existingItem.quantity = item.quantity; - } else { - this.cartItems.push({ - id: item.id, - name: item.name, - img: item.img, - price: item.price, - quantity: item.quantity - }); - } + this.cartStore.addItem(item); }, removeFromCart(itemId) { - const index = this.cartItems.findIndex(i => i.id === itemId); - if (index > -1) { - this.cartItems.splice(index, 1); - } + this.cartStore.removeItem(itemId); const item = this.items.find(i => i.id === itemId); if (item) { item.quantity = 0; } }, updateCartQuantity({ itemId, quantity }) { - const cartItem = this.cartItems.find(i => i.id === itemId); - if (cartItem) { - cartItem.quantity = quantity; - } + this.cartStore.updateQuantity({ itemId, quantity }); const productItem = this.items.find(i => i.id === itemId); if (productItem) { productItem.quantity = quantity; diff --git a/src/stores/cart.js b/src/stores/cart.js new file mode 100644 index 0000000..c9b8478 --- /dev/null +++ b/src/stores/cart.js @@ -0,0 +1,43 @@ +import { defineStore } from 'pinia' + +export const useCartStore = defineStore('cart', { + state: () => ({ + items: [] + }), + getters: { + cartCount: (state) => state.items.reduce((sum, item) => sum + item.quantity, 0), + cartTotal: (state) => state.items.reduce((sum, item) => sum + (item.price * item.quantity), 0) + }, + actions: { + addItem(product) { + const existing = this.items.find(i => i.id === product.id) + if (existing) { + existing.quantity = product.quantity + } else { + this.items.push({ + id: product.id, + name: product.name, + img: product.img, + price: product.price, + quantity: product.quantity, + measuring_unit: product.measuring_unit || 'Unidad' + }) + } + }, + removeItem(itemId) { + const index = this.items.findIndex(i => i.id === itemId) + if (index > -1) { + this.items.splice(index, 1) + } + }, + updateQuantity({ itemId, quantity }) { + const item = this.items.find(i => i.id === itemId) + if (item) { + item.quantity = quantity + } + }, + clearCart() { + this.items = [] + } + } +})