Merge pull request 'Venta de admin que puede editar precios de productos' (#15) from admin_purchase_#12 into main
Reviewed-on: #15
This commit is contained in:
341
src/components/AdminPurchase.vue
Normal file
341
src/components/AdminPurchase.vue
Normal file
@@ -0,0 +1,341 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-form ref="purchase" v-model="valid" @change="onFormChange">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-autocomplete
|
||||
v-model="purchase.customer"
|
||||
:items="filteredClients"
|
||||
:search="client_search"
|
||||
no-data-text="No se hallaron clientes"
|
||||
item-title="name"
|
||||
item-value="id"
|
||||
@update:model-value="onFormChange"
|
||||
label="Cliente"
|
||||
:rules="[rules.required]"
|
||||
required
|
||||
class="mr-4"
|
||||
></v-autocomplete>
|
||||
<v-btn color="primary" @click="openModal">Agregar Cliente</v-btn>
|
||||
<CreateCustomerModal ref="customerModal" @customerCreated="handleNewCustomer"/>
|
||||
</v-col>
|
||||
<v-col lg="4">
|
||||
<v-text-field
|
||||
v-model="purchase.date"
|
||||
label="Fecha"
|
||||
type="datetime-local"
|
||||
:rules="[rules.required]"
|
||||
required
|
||||
readonly
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-textarea
|
||||
v-model="purchase.notes"
|
||||
label="Notas"
|
||||
rows="2"
|
||||
></v-textarea>
|
||||
<v-divider></v-divider>
|
||||
<v-container>
|
||||
<v-toolbar>
|
||||
<v-toolbar-title secondary>Productos</v-toolbar-title>
|
||||
p </v-toolbar>
|
||||
<v-container v-for="(line, index) in purchase.saleline_set" :key="line.id">
|
||||
<v-row>
|
||||
<v-col
|
||||
lg="9">
|
||||
<v-autocomplete
|
||||
v-model="line.product"
|
||||
: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
|
||||
>
|
||||
<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
|
||||
lg="2"
|
||||
>
|
||||
<v-text-field
|
||||
v-model.number="line.quantity"
|
||||
label="Cantidad"
|
||||
type="number"
|
||||
:rules="[rules.required,rules.positive]"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
v-model.number="line.unit_price"
|
||||
label="Precio"
|
||||
type="number"
|
||||
:rules="[rules.required]"
|
||||
prefix="$"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
v-model="line.measuring_unit"
|
||||
label="UdM"
|
||||
persistent-placeholder="true"
|
||||
readonly
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
type="number"
|
||||
:value="calculateSubtotal(line)"
|
||||
label="Subtotal"
|
||||
prefix="$"
|
||||
readonly
|
||||
disable
|
||||
persistent-placeholder="true"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-btn @click="removeLine(index)" color="red">Eliminar</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-alert type="warning" :duration="2000" closable v-model="show_alert_lines">
|
||||
No se puede eliminar la única línea.
|
||||
</v-alert>
|
||||
</v-container>
|
||||
<v-btn @click="addLine" color="blue">Agregar</v-btn>
|
||||
</v-container>
|
||||
<v-divider></v-divider>
|
||||
<v-text-field
|
||||
:value="calculateTotal"
|
||||
label="Total"
|
||||
prefix="$"
|
||||
readonly
|
||||
persistent-placeholder="true"
|
||||
></v-text-field>
|
||||
<v-container v-if="calculateTotal > 0">
|
||||
<v-select
|
||||
:items="payment_methods"
|
||||
v-model="purchase.payment_method"
|
||||
item-title="text"
|
||||
item-value="value"
|
||||
label="Pago en"
|
||||
:rules="[rules.required]"
|
||||
required
|
||||
></v-select>
|
||||
<v-btn @click="openCasherModal" v-if="purchase.payment_method === 'CASH'">Calcular Devuelta</v-btn>
|
||||
<CasherModal :total_purchase="calculateTotal" ref="casherModal"</CasherModal>
|
||||
</v-container>
|
||||
<v-btn @click="submit" color="green">Comprar</v-btn>
|
||||
<v-alert type="error" :duration="2000" closable v-model="show_alert_purchase">
|
||||
Verifique los campos obligatorios.
|
||||
</v-alert>
|
||||
</v-form>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomerForm from './CreateCustomerModal.vue';
|
||||
import CasherModal from './CasherModal.vue';
|
||||
import { inject } from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'DonConfiao',
|
||||
components: {
|
||||
CustomerForm,
|
||||
CasherModal,
|
||||
},
|
||||
props: {
|
||||
msg: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
api: inject('api'),
|
||||
valid: false,
|
||||
form_changed: false,
|
||||
show_alert_lines: false,
|
||||
show_alert_purchase: false,
|
||||
client_search: '',
|
||||
product_search: '',
|
||||
payment_methods: null,
|
||||
purchase: {
|
||||
date: this.getCurrentDate(),
|
||||
customer: null,
|
||||
notes: '',
|
||||
payment_method: null,
|
||||
saleline_set: [{product:'', unit_price: 0, quantity: 0, unit: ''}],
|
||||
},
|
||||
rules: {
|
||||
required: value => !!value || 'Requerido.',
|
||||
positive: value => value > 0 || 'La cantidad debe ser mayor que 0.',
|
||||
},
|
||||
menuItems: [
|
||||
{ title: 'Inicio', route: '/'},
|
||||
{ title: 'Compras', route:'/compras'},
|
||||
],
|
||||
clients: [],
|
||||
products: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchClients();
|
||||
this.fetchProducts();
|
||||
this.fetchPaymentMethods();
|
||||
},
|
||||
watch: {
|
||||
group () {
|
||||
this.drawer = false
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
window.addEventListener('beforeunload', this.confirmLeave);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('beforeunload', this.confirmLeave);
|
||||
},
|
||||
computed: {
|
||||
calculateTotal() {
|
||||
return this.purchase.saleline_set.reduce((total, saleline) => {
|
||||
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());
|
||||
}
|
||||
});
|
||||
},
|
||||
filteredProducts() {
|
||||
return this.products.filter(product => {
|
||||
if (this.product_search === '') {
|
||||
return [];
|
||||
} else {
|
||||
return product.name.toLowerCase().includes(this.product_search.toLowerCase());
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openModal() {
|
||||
this.$refs.customerModal.openModal();
|
||||
},
|
||||
onFormChange() {
|
||||
this.form_changed = true;
|
||||
},
|
||||
openCasherModal() {
|
||||
this.$refs.casherModal.dialog = true
|
||||
},
|
||||
confirmLeave(event) {
|
||||
if (this.form_changed) {
|
||||
const message = '¿seguro que quieres salir? Perderas la información diligenciada';
|
||||
event.preventDefault();
|
||||
event.returnValue = message;
|
||||
return message;
|
||||
}
|
||||
},
|
||||
getCurrentDate() {
|
||||
const today = new Date();
|
||||
const gmtOffSet = -5;
|
||||
const localDate = new Date(today.getTime() + (gmtOffSet * 60 * 60 * 1000));
|
||||
// Formatear la fecha y hora en el formato YYYY-MM-DDTHH:MM
|
||||
const formattedDate = localDate.toISOString().slice(0,16);
|
||||
return formattedDate;
|
||||
},
|
||||
onProductChange(index) {
|
||||
const selectedProductId = this.purchase.saleline_set[index].product;
|
||||
const selectedProduct = this.products.find(p => p.id == selectedProductId);
|
||||
this.purchase.saleline_set[index].unit_price = selectedProduct.price;
|
||||
this.purchase.saleline_set[index].measuring_unit = selectedProduct.measuring_unit;
|
||||
},
|
||||
fetchClients() {
|
||||
this.api.getCustomers()
|
||||
.then(data => {
|
||||
this.clients = data;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
handleNewCustomer(newCustomer){
|
||||
this.clients.push(newCustomer);
|
||||
this.purchase.customer = newCustomer.id;
|
||||
},
|
||||
fetchProducts() {
|
||||
this.api.getProducts()
|
||||
.then(data => {
|
||||
this.products = data;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
fetchPaymentMethods() {
|
||||
this.api.getPaymentMethods()
|
||||
.then(data => {
|
||||
this.payment_methods = data;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
addLine() {
|
||||
this.purchase.saleline_set.push({ product: '', unit_price: 0, quantity:0, measuring_unit: ''});
|
||||
},
|
||||
removeLine(index) {
|
||||
if (this.purchase.saleline_set.length > 1) {
|
||||
this.purchase.saleline_set.splice(index, 1);
|
||||
} else {
|
||||
this.show_alert_lines = true;
|
||||
setTimeout(() => {
|
||||
this.show_alert_lines = false;
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
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);
|
||||
}
|
||||
},
|
||||
navigate(route) {
|
||||
this.$router.push(route);
|
||||
},
|
||||
formatPrice(price) {
|
||||
return new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'COP' }).format(price);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchClients();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
@@ -12,11 +12,30 @@
|
||||
<v-navigation-drawer v-model="drawer"
|
||||
:location="$vuetify.display.mobile ? 'bottom' : undefined"
|
||||
temporary>
|
||||
<v-list>
|
||||
<v-list-item v-for="item in menuItems" :key="item.title" @click="navigate(item.route)">
|
||||
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-list
|
||||
density="compact"
|
||||
nav
|
||||
>
|
||||
<v-list-item
|
||||
v-for="item in menuItems"
|
||||
:key="item.title"
|
||||
:title="item.title"
|
||||
:prepend-icon="item.icon"
|
||||
@click="navigate(item.route)"
|
||||
></v-list-item>
|
||||
<v-list-item prepend-icon="mdi-cog" title="Administracion" @click="toggleAdminMenu()"></v-list-item>
|
||||
<v-list-item>
|
||||
<v-list v-if="showAdminMenu">
|
||||
<v-list-item
|
||||
v-for="item in menuAdminItems"
|
||||
:key="item.title"
|
||||
:title="item.title"
|
||||
:prepend-icon="item.icon"
|
||||
@click="navigateAdmin(item.route)"
|
||||
></v-list-item>
|
||||
</v-list>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
@@ -26,12 +45,16 @@
|
||||
data: () => ({
|
||||
drawer: false,
|
||||
group: null,
|
||||
showAdminMenu: false,
|
||||
menuItems: [
|
||||
{ title: 'Inicio', route: '/'},
|
||||
{ title: 'Comprar', route:'/comprar'},
|
||||
{ title: 'Cuadrar tarro', route: '/cuadrar_tarro'},
|
||||
{ title: 'Cuadres de tarro', route: '/cuadres_de_tarro'},
|
||||
{ title: 'CSV Tryton', route: '/ventas_para_tryton'},
|
||||
{ title: 'Inicio', route: '/', icon: 'mdi-home'},
|
||||
{ title: 'Comprar', route:'/comprar', icon: 'mdi-cart'},
|
||||
],
|
||||
menuAdminItems: [
|
||||
{ title: 'Cuadrar tarro', route: '/cuadrar_tarro', icon: 'mdi-calculator'},
|
||||
{ title: 'Cuadres de tarro', route: '/cuadres_de_tarro', icon: 'mdi-chart-bar'},
|
||||
{ title: 'CSV Tryton', route: '/ventas_para_tryton', icon: 'mdi-file-table'},
|
||||
{ title: 'Compra adm', route: '/compra_admin', icon: 'mdi-cart'},
|
||||
],
|
||||
}),
|
||||
watch: {
|
||||
@@ -43,6 +66,13 @@
|
||||
navigate(route) {
|
||||
this.$router.push(route);
|
||||
},
|
||||
navigateAdmin(route) {
|
||||
this.toggleAdminMenu();
|
||||
this.navigate(route);
|
||||
},
|
||||
toggleAdminMenu() {
|
||||
this.showAdminMenu = !this.showAdminMenu;
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
20
src/pages/compra_admin.vue
Normal file
20
src/pages/compra_admin.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div>
|
||||
<CodeDialog @code-verified="(verified) => showComponent = verified"/>
|
||||
</div>
|
||||
<AdminPurchase v-if="showComponent"/>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
import CodeDialog from '../components/CodeDialog.vue'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showComponent: false,
|
||||
}
|
||||
},
|
||||
components: { CodeDialog },
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user