56 lines
3.0 KiB
Vue
56 lines
3.0 KiB
Vue
<template>
|
|
<div>
|
|
<div class="mb-5"><div class="text-overline text-primary">OPERACION</div><h1 class="text-h4 mb-1">Gastos</h1><div class="text-body-2 text-medium-emphasis">Registra compras y pagos de la jornada.</div></div>
|
|
<v-alert v-if="mensaje" :type="tipoMensaje" variant="tonal" class="mb-3">{{ mensaje }}</v-alert>
|
|
<v-alert :type="jornadaAbierta ? 'success' : 'warning'" variant="tonal" class="mb-4">{{ jornadaAbierta ? 'Jornada abierta' : 'Abre una jornada para registrar gastos' }}</v-alert>
|
|
<v-card class="mb-4"><v-card-title>Registrar gasto</v-card-title><v-card-text><v-form @submit.prevent="registrar"><v-text-field v-model="concepto" label="Concepto" placeholder="Cinta, lapicero, bolsas..." prepend-inner-icon="mdi-receipt-text" /><v-row><v-col cols="12" sm="6"><v-text-field v-model.number="monto" type="number" label="Monto" prefix="$" /></v-col><v-col cols="12" sm="6"><v-select v-model="formaPago" :items="['EFECTIVO', 'QR']" label="Forma de pago" /></v-col></v-row><v-btn type="submit" color="primary" block size="large" :disabled="!jornadaAbierta" prepend-icon="mdi-plus-circle">Registrar gasto</v-btn></v-form></v-card-text></v-card>
|
|
<v-card><v-card-title>Gastos del día</v-card-title><v-list><v-list-item v-for="g in gastos" :key="g.id" :title="g.concepto" :subtitle="g.formaPago"><template #append><span class="font-weight-bold">${{ g.monto.toLocaleString() }}</span></template></v-list-item><v-list-item v-if="!gastos.length" title="Sin gastos registrados" /></v-list></v-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import { GastosService, JornadaService } from '@toldo/services';
|
|
|
|
const gastosService = new GastosService();
|
|
const jornadaService = new JornadaService();
|
|
const concepto = ref('');
|
|
const monto = ref(0);
|
|
const formaPago = ref<'EFECTIVO' | 'QR'>('EFECTIVO');
|
|
const gastos = ref<any[]>([]);
|
|
const jornadaAbierta = ref<any>(null);
|
|
const mensaje = ref('');
|
|
const tipoMensaje = ref<'success' | 'error'>('success');
|
|
|
|
async function cargar() {
|
|
gastos.value = await gastosService.getGastosDelDia(new Date());
|
|
jornadaAbierta.value = await jornadaService.getJornadaAbierta();
|
|
}
|
|
|
|
async function registrar() {
|
|
if (!concepto.value.trim() || monto.value <= 0) { tipoMensaje.value = 'error'; mensaje.value = 'Escribe un concepto y un monto mayor que cero.'; return; }
|
|
if (!jornadaAbierta.value) {
|
|
tipoMensaje.value = 'error'; mensaje.value = 'Debe abrir una jornada antes de registrar gastos.';
|
|
return;
|
|
}
|
|
try {
|
|
await jornadaService.registrarGastoEnJornada(jornadaAbierta.value.id, {
|
|
id: crypto.randomUUID(),
|
|
fecha: new Date(),
|
|
concepto: concepto.value,
|
|
monto: monto.value,
|
|
formaPago: formaPago.value,
|
|
createdAt: new Date()
|
|
} as any);
|
|
concepto.value = '';
|
|
monto.value = 0;
|
|
await cargar();
|
|
tipoMensaje.value = 'success'; mensaje.value = 'Gasto registrado.';
|
|
} catch (e: any) {
|
|
tipoMensaje.value = 'error'; mensaje.value = e.message;
|
|
}
|
|
}
|
|
|
|
onMounted(cargar);
|
|
</script>
|