refactor: unificar componentes de compra con prop isAdmin
- Agregar prop isAdmin a Purchase.vue para controlar campos editables - Hacer campo unit_price editable solo en modo admin (:readonly="!isAdmin") - Actualizar comprar.vue y compra_admin.vue para usar Purchase unificado - Eliminar componente AdminPurchase.vue duplicado - Ambas páginas ahora usan interfaz moderna con cards y diseño responsive - Mantener seguridad con authStore.isAdmin check en compra_admin.vue
This commit is contained in:
@@ -1,341 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -173,7 +173,7 @@
|
|||||||
:rules="[rules.required]"
|
:rules="[rules.required]"
|
||||||
prefix="$"
|
prefix="$"
|
||||||
required
|
required
|
||||||
readonly
|
:readonly="!isAdmin"
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
density="compact"
|
density="compact"
|
||||||
hide-details="auto"
|
hide-details="auto"
|
||||||
@@ -330,7 +330,11 @@
|
|||||||
CasherModal,
|
CasherModal,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
msg: String
|
msg: String,
|
||||||
|
isAdmin: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -1,14 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<AdminPurchase v-if="authStore.isAdmin"/>
|
<Purchase v-if="authStore.isAdmin" :isAdmin="true" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script >
|
<script setup>
|
||||||
import { useAuthStore } from '@/stores/auth';
|
import Purchase from '@/components/Purchase.vue';
|
||||||
|
import { useAuthStore } from '@/stores/auth';
|
||||||
|
|
||||||
export default {
|
const authStore = useAuthStore();
|
||||||
setup() {
|
|
||||||
const authStore = useAuthStore();
|
definePage({
|
||||||
return { authStore };
|
meta: {
|
||||||
},
|
requiresAuth: true
|
||||||
}
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,8 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<Purchase />
|
<Purchase :isAdmin="false" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import Purchase from '@/components/Purchase.vue';
|
||||||
|
|
||||||
definePage({
|
definePage({
|
||||||
meta: {
|
meta: {
|
||||||
requiresAuth: true
|
requiresAuth: true
|
||||||
|
|||||||
Reference in New Issue
Block a user