nucleo000/planilla
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Jules was unable to complete the task in time. Please review the work done so far and provide feedback for Jules to continue.

Browse Source
This commit is contained in:
google-labs-jules[bot]
2025-05-30 06:41:49 +00:00
parent 2c43538db3
commit fe014b677b
15 changed files with 2563 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

297
ui/src/views/asistencias/AsistenciaForm.vue
View File

@@ -1,2 +1,297 @@
<template>
<div class="asistencia-form-container">
<h2>{{ formTitle }}</h2>
<form @submit.prevent="handleSubmit">
<div class="form-group">
<label for="empleado_id">Empleado ID:</label>
<input type="number" id="empleado_id" v-model.number="formData.empleado_id" />
<span v-if="formErrors.empleado_id" class="error-message">{{ formErrors.empleado_id }}</span>
</div>
<div class="form-group">
<label for="entrada">Entrada:</label>
<input type="datetime-local" id="entrada" v-model="formData.entrada" />
<span v-if="formErrors.entrada" class="error-message">{{ formErrors.entrada }}</span>
</div>
<template></template>
<div class="form-group">
<label for="salida">Salida (Opcional):</label>
<input type="datetime-local" id="salida" v-model="formData.salida" />
<span v-if="formErrors.salida" class="error-message">{{ formErrors.salida }}</span>
</div>
<div class="form-group">
<label for="estado">Estado:</label>
<select id="estado" v-model="formData.estado">
<option value="pendiente">Pendiente</option>
<option value="presente">Presente</option>
<option value="ausente">Ausente</option>
<option value="justificada">Justificada</option>
<option value="cancelada">Cancelada</option>
</select>
<span v-if="formErrors.estado" class="error-message">{{ formErrors.estado }}</span>
</div>
<div class="form-group">
<label for="observacion">Observación (Opcional):</label>
<textarea id="observacion" v-model="formData.observacion" rows="3"></textarea>
</div>
<div class="form-actions">
<button type="submit" :disabled="isSubmitting">{{ isSubmitting ? 'Guardando...' : 'Guardar' }}</button>
<button type="button" @click="handleCancel" :disabled="isSubmitting">Cancelar</button>
</div>
</form>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue';
import { useAsistenciasStore } from '../../stores/useAsistencias';
import { useRouter, useRoute } from 'vue-router';
const props = defineProps({
id: String,
});
const router = useRouter();
const route = useRoute();
const asistenciasStore = useAsistenciasStore();
const formatDateTimeForInput = (dateString) => {
const date = dateString ? new Date(dateString) : new Date();
const timezoneOffset = date.getTimezoneOffset() * 60000;
const localDate = new Date(date.getTime() - timezoneOffset);
return localDate.toISOString().slice(0, 16);
};
const getDefaultFormData = () => ({
empleado_id: null,
entrada: formatDateTimeForInput(null),
salida: '',
observacion: '',
estado: 'pendiente',
});
const formData = reactive(getDefaultFormData());
const formErrors = reactive({
empleado_id: '',
entrada: '',
salida: '',
estado: '',
});
const isSubmitting = ref(false);
const editingId = ref(route.params.id || props.id || null);
const formTitle = computed(() => (editingId.value ? 'Editar Asistencia' : 'Registrar Nueva Asistencia'));
const loadAsistenciaForEditing = async (id) => {
try {
await asistenciasStore.fetchAsistenciaById(id);
if (asistenciasStore.currentAsistencia && String(asistenciasStore.currentAsistencia.id) === String(id)) {
const current = asistenciasStore.currentAsistencia;
formData.empleado_id = current.empleado_id ? Number(current.empleado_id) : null;
formData.entrada = current.entrada ? formatDateTimeForInput(current.entrada) : '';
formData.salida = current.salida ? formatDateTimeForInput(current.salida) : '';
formData.observacion = current.observacion || '';
formData.estado = current.estado || 'pendiente';
} else {
console.error(`Failed to load asistencia data for ID: ${id} or ID mismatch.`);
router.push({ name: 'AsistenciasIndex' });
}
} catch (error) {
console.error(`Error fetching asistencia ${id} for editing:`, error);
router.push({ name: 'AsistenciasIndex' });
}
};
onMounted(() => {
if (editingId.value) {
loadAsistenciaForEditing(editingId.value);
}
});
watch(() => route.params.id, (newId) => {
editingId.value = newId || null;
if (newId) {
loadAsistenciaForEditing(newId);
} else {
Object.assign(formData, getDefaultFormData());
}
});
onUnmounted(() => {
asistenciasStore.clearCurrentAsistencia();
});
const validateForm = () => {
let isValid = true;
Object.keys(formErrors).forEach(key => formErrors[key] = '');
if (formData.empleado_id == null || isNaN(Number(formData.empleado_id)) || Number(formData.empleado_id) <= 0) {
formErrors.empleado_id = 'El ID de empleado es obligatorio y debe ser un número positivo.';
isValid = false;
}
if (!formData.entrada) {
formErrors.entrada = 'La fecha y hora de entrada son obligatorias.';
isValid = false;
}
if (!formData.estado) {
formErrors.estado = 'El estado es obligatorio.';
isValid = false;
}
if (formData.entrada && formData.salida) {
// Convert to Date objects for comparison
// The value from datetime-local is already in a format that Date constructor can parse
const entradaDate = new Date(formData.entrada);
const salidaDate = new Date(formData.salida);
if (salidaDate < entradaDate) {
formErrors.salida = 'La fecha y hora de salida no pueden ser anteriores a la entrada.';
isValid = false;
}
}
return isValid;
};
const handleSubmit = async () => {
if (!validateForm()) return;
isSubmitting.value = true;
// Ensure datetime strings are converted to full ISO strings if API requires (includes seconds and Z for UTC)
// Otherwise, YYYY-MM-DDTHH:mm (from datetime-local) might be acceptable by some backends.
const toISOStringOrNull = (datetimeLocalString) => {
if (!datetimeLocalString) return null;
// Create Date object. datetime-local is interpreted as local time.
// To send as UTC, new Date(datetimeLocalString).toISOString() works if the API expects UTC.
// If the API expects local time but in full ISO format, more complex handling might be needed
// or send as is and let backend handle it. For now, we send as is from input.
return datetimeLocalString;
};
const payload = {
...formData,
empleado_id: Number(formData.empleado_id),
entrada: toISOStringOrNull(formData.entrada),
salida: toISOStringOrNull(formData.salida),
};
// If your API strictly needs ISO8601 with Z (UTC) and datetime-local gives local time:
// payload.entrada = formData.entrada ? new Date(formData.entrada).toISOString() : null;
// payload.salida = formData.salida ? new Date(formData.salida).toISOString() : null;
try {
if (editingId.value) {
await asistenciasStore.updateAsistencia(editingId.value, payload);
} else {
await asistenciasStore.createAsistencia(payload);
}
router.push({ name: 'AsistenciasIndex' });
} catch (error) {
console.error('Error saving asistencia:', error);
const errorMsg = error.response?.data?.message || error.message || 'Ocurrió un error.';
alert(`Error al guardar la asistencia: ${errorMsg}`);
} finally {
isSubmitting.value = false;
}
};
const handleCancel = () => {
router.go(-1);
};
</script>
<style scoped>
.asistencia-form-container {
max-width: 600px;
margin: 20px auto;
padding: 25px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h2 {
text-align: center;
color: #333;
margin-bottom: 25px;
}
.form-group {
margin-bottom: 18px;
}
.form-group label {
display: block;
margin-bottom: 6px;
font-weight: bold;
color: #555;
}
.form-group input[type="number"],
.form-group input[type="datetime-local"],
.form-group select,
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 1em;
}
.form-group textarea {
resize: vertical;
}
.error-message {
display: block;
color: #e74c3c;
font-size: 0.9em;
margin-top: 5px;
}
.form-actions {
margin-top: 25px;
display: flex;
justify-content: flex-end;
gap: 12px;
}
.form-actions button {
padding: 10px 18px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
font-weight: 500;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.form-actions button[type="submit"] {
background-color: #3498db; /* Blue */
color: white;
}
.form-actions button[type="submit"]:hover {
background-color: #2980b9;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.form-actions button[type="submit"]:disabled {
background-color: #bdc3c7;
cursor: not-allowed;
}
.form-actions button[type="button"] {
background-color: #e74c3c; /* Red for cancel */
color: white;
}
.form-actions button[type="button"]:hover {
background-color: #c0392b;
}
.form-actions button[type="button"]:disabled {
background-color: #bdc3c7;
cursor: not-allowed;
}
</style>

143
ui/src/views/asistencias/AsistenciasIndex.vue
View File

@@ -1,2 +1,143 @@
<template>
<div class="asistencias-index-container">
<header class="page-header">
<h1>Gestión de Asistencias</h1>
<button @click="navigateToCreateForm" class="btn-create">
Registrar Nueva Asistencia
</button>
</header>
<template></template>
<div v-if="isLoading" class="loading-message">
Cargando asistencias...
</div>
<div v-else-if="errorLoading" class="error-message-full">
<p>Ocurrió un error al cargar las asistencias. Por favor, intente de nuevo más tarde.</p>
<p v-if="errorMessage">Detalle: {{ errorMessage }}</p>
</div>
<div v-else>
<tabla-asistencias
:asistencias="asistenciasList"
@edit="handleEditAsistencia"
/>
<div v-if="!asistenciasList || asistenciasList.length === 0 && !isLoading" class="no-data-message">
No hay asistencias registradas. Puede registrar una nueva haciendo clic en el botón de arriba.
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import { useAsistenciasStore } from '../../stores/useAsistencias';
import { useRouter } from 'vue-router';
import TablaAsistencias from '../../components/asistencias/tablaAsistencias.vue';
const asistenciasStore = useAsistenciasStore();
const router = useRouter();
const isLoading = ref(true);
const errorLoading = ref(false);
const errorMessage = ref('');
const asistenciasList = computed(() => asistenciasStore.asistencias);
onMounted(async () => {
try {
isLoading.value = true;
errorLoading.value = false;
errorMessage.value = '';
await asistenciasStore.fetchAsistencias();
} catch (error) {
console.error("Error fetching asistencias on mount:", error);
errorLoading.value = true;
errorMessage.value = error.message || 'Error desconocido al cargar asistencias.';
} finally {
isLoading.value = false;
}
});
const navigateToCreateForm = () => {
// Assuming route for creating a new asistencia is named 'AsistenciaFormNew'
router.push({ name: 'AsistenciaFormNew' });
};
const handleEditAsistencia = (asistenciaId) => {
// Assuming route for editing is named 'AsistenciaFormEdit'
router.push({ name: 'AsistenciaFormEdit', params: { id: asistenciaId } });
};
</script>
<style scoped>
.asistencias-index-container {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
font-family: 'Arial', sans-serif;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid #dee2e6;
}
.page-header h1 {
color: #212529;
font-size: 1.8em;
font-weight: 600;
}
.btn-create {
background-color: #17a2b8; /* Info Blue */
color: white;
padding: 10px 18px;
border: none;
border-radius: 5px;
font-size: 1em;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn-create:hover {
background-color: #138496;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.loading-message,
.error-message-full,
.no-data-message {
text-align: center;
padding: 25px;
margin-top: 25px;
border-radius: 8px;
font-size: 1.1em;
}
.loading-message {
color: #495057;
}
.error-message-full {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.error-message-full p {
margin: 5px 0;
}
.no-data-message {
background-color: #f8f9fa;
color: #343a40;
border: 1px solid #e9ecef;
}
</style>

305
ui/src/views/planillas/PlanillaForm.vue
View File

@@ -1,2 +1,305 @@
<template>
<div class="planilla-form-container">
<h2>{{ formTitle }}</h2>
<form @submit.prevent="handleSubmit">
<div class="form-group">
<label for="titulo">Título:</label>
<input type="text" id="titulo" v-model="formData.titulo" />
<span v-if="formErrors.titulo" class="error-message">{{ formErrors.titulo }}</span>
</div>
<template></template>
<div class="form-group">
<label for="empleado_id">Empleado ID:</label>
<input type="number" id="empleado_id" v-model.number="formData.empleado_id" />
<span v-if="formErrors.empleado_id" class="error-message">{{ formErrors.empleado_id }}</span>
</div>
<div class="form-group">
<label for="fecha_desde">Fecha Desde:</label>
<input type="date" id="fecha_desde" v-model="formData.fecha_desde" />
<span v-if="formErrors.fecha_desde" class="error-message">{{ formErrors.fecha_desde }}</span>
</div>
<div class="form-group">
<label for="fecha_hasta">Fecha Hasta:</label>
<input type="date" id="fecha_hasta" v-model="formData.fecha_hasta" />
<span v-if="formErrors.fecha_hasta" class="error-message">{{ formErrors.fecha_hasta }}</span>
</div>
<div class="form-group">
<label for="total">Total:</label>
<input type="number" step="any" id="total" v-model.number="formData.total" />
<span v-if="formErrors.total" class="error-message">{{ formErrors.total }}</span>
</div>
<div class="form-group">
<label for="estado">Estado:</label>
<select id="estado" v-model="formData.estado">
<option value="pendiente">Pendiente</option>
<option value="pagado">Pagado</option>
<option value="anulado">Anulado</option>
</select>
<span v-if="formErrors.estado" class="error-message">{{ formErrors.estado }}</span>
</div>
<div class="form-actions">
<button type="submit" :disabled="isSubmitting">{{ isSubmitting ? 'Guardando...' : 'Guardar' }}</button>
<button type="button" @click="handleCancel" :disabled="isSubmitting">Cancelar</button>
</div>
</form>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue';
import { usePlanillasStore } from '../../stores/usePlanillas';
import { useRouter, useRoute } from 'vue-router';
const props = defineProps({
id: String, // From route params, will be a string
});
const router = useRouter();
const route = useRoute(); // Can also get id from route.params.id
const planillasStore = usePlanillasStore();
const formData = reactive({
titulo: '',
empleado_id: null,
fecha_desde: '',
fecha_hasta: '',
total: null,
estado: 'pendiente', // Default state
});
const formErrors = reactive({
titulo: '',
empleado_id: '',
fecha_desde: '',
fecha_hasta: '',
estado: '',
total: '', // Though not explicitly required, can add validation if needed
});
const isSubmitting = ref(false);
const editingId = ref(null); // To store the actual ID for editing
const formTitle = computed(() => (editingId.value ? 'Editar Planilla' : 'Crear Nueva Planilla'));
// Helper to format date for <input type="date">
const formatDateForInput = (dateString) => {
if (!dateString) return '';
const date = new Date(dateString);
// Adjust for timezone issues if date is off by one day
const offset = date.getTimezoneOffset();
const correctedDate = new Date(date.getTime() - (offset * 60 * 1000));
return correctedDate.toISOString().split('T')[0];
};
onMounted(() => {
const routeId = route.params.id || props.id;
if (routeId) {
editingId.value = routeId;
planillasStore.fetchPlanillaById(routeId).then(() => {
if (planillasStore.currentPlanilla && String(planillasStore.currentPlanilla.id) === String(editingId.value)) {
populateFormFromStore();
} else {
console.error(`Failed to load planilla data for ID: ${routeId} or mismatch. Current store ID: ${planillasStore.currentPlanilla?.id}`);
// router.push({ name: 'PlanillasIndex' });
}
}).catch(error => {
console.error(`Error fetching planilla ${routeId}:`, error);
// router.push({ name: 'PlanillasIndex' });
});
}
});
// Watch for changes in currentPlanilla if the component might be reused
// or if fetchPlanillaById updates currentPlanilla asynchronously after mount
watch(() => planillasStore.currentPlanilla, (newPlanilla) => {
if (editingId.value && newPlanilla && String(newPlanilla.id) === String(editingId.value)) {
populateFormFromStore();
}
}, { deep: true });
function populateFormFromStore() {
Object.assign(formData, {
...planillasStore.currentPlanilla,
fecha_desde: formatDateForInput(planillasStore.currentPlanilla.fecha_desde),
fecha_hasta: formatDateForInput(planillasStore.currentPlanilla.fecha_hasta),
empleado_id: planillasStore.currentPlanilla.empleado_id ? Number(planillasStore.currentPlanilla.empleado_id) : null,
total: planillasStore.currentPlanilla.total ? parseFloat(planillasStore.currentPlanilla.total) : null,
});
}
const validateForm = () => {
let isValid = true;
for (const key in formErrors) {
formErrors[key] = '';
}
if (!formData.titulo?.trim()) {
formErrors.titulo = 'El título es obligatorio.';
isValid = false;
}
if (formData.empleado_id == null || isNaN(parseInt(formData.empleado_id)) || Number(formData.empleado_id) <= 0) {
formErrors.empleado_id = 'El ID de empleado es obligatorio y debe ser un número positivo.';
isValid = false;
}
if (!formData.fecha_desde) {
formErrors.fecha_desde = 'La fecha desde es obligatoria.';
isValid = false;
}
if (!formData.fecha_hasta) {
formErrors.fecha_hasta = 'La fecha hasta es obligatoria.';
isValid = false;
}
if (formData.fecha_desde && formData.fecha_hasta && new Date(formData.fecha_desde) > new Date(formData.fecha_hasta)) {
formErrors.fecha_hasta = 'La fecha hasta no puede ser anterior a la fecha desde.';
isValid = false;
}
if (!formData.estado) {
formErrors.estado = 'El estado es obligatorio.';
isValid = false;
}
if (formData.total != null && (isNaN(parseFloat(formData.total)) || parseFloat(formData.total) < 0)) {
formErrors.total = 'El total debe ser un número positivo.';
isValid = false;
}
return isValid;
};
const handleSubmit = async () => {
if (!validateForm()) {
return;
}
isSubmitting.value = true;
try {
const payload = {
...formData,
empleado_id: parseInt(formData.empleado_id, 10),
total: formData.total != null ? parseFloat(formData.total) : null,
// Ensure dates are actual Date objects or correctly formatted ISO strings if API requires
// The <input type="date"> provides YYYY-MM-DD. If API needs full DateTime:
// fecha_desde: formData.fecha_desde ? new Date(formData.fecha_desde).toISOString() : null,
// fecha_hasta: formData.fecha_hasta ? new Date(formData.fecha_hasta).toISOString() : null,
};
if (editingId.value) {
await planillasStore.updatePlanilla(editingId.value, payload);
} else {
await planillasStore.createPlanilla(payload);
}
router.push({ name: 'PlanillasIndex' });
} catch (error) {
console.error('Error saving planilla:', error);
const errorMessage = error.response?.data?.message || error.message || 'Ocurrió un error al guardar la planilla.';
alert(`Error: ${errorMessage}`);
// Potentially set a form-level error message:
// formErrors.general = `Error: ${errorMessage}`;
} finally {
isSubmitting.value = false;
}
};
const handleCancel = () => {
router.go(-1);
};
</script>
<style scoped>
.planilla-form-container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.form-group select {
appearance: none;
background-color: white;
}
.error-message {
display: block;
color: red;
font-size: 0.9em;
margin-top: 5px;
}
.form-actions {
margin-top: 20px;
display: flex;
justify-content: flex-end;
gap: 10px;
}
.form-actions button {
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
}
.form-actions button[type="submit"] {
background-color: #28a745; /* Green */
color: white;
}
.form-actions button[type="submit"]:hover {
background-color: #218838;
}
.form-actions button[type="submit"]:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.form-actions button[type="button"] {
background-color: #6c757d; /* Gray */
color: white;
}
.form-actions button[type="button"]:hover {
background-color: #5a6268;
}
.form-actions button[type="button"]:disabled {
background-color: #ccc;
cursor: not-allowed;
}
</style>

152
ui/src/views/planillas/PlanillasIndex.vue
View File

@@ -1,2 +1,152 @@
<template>
<div class="planillas-index-container">
<header class="page-header">
<h1>Gestión de Planillas</h1>
<button @click="navigateToCreateForm" class="btn-create">
Crear Nueva Planilla
</button>
</header>
<template></template>
<div v-if="isLoading" class="loading-message">
Cargando planillas...
</div>
<div v-else-if="errorLoading" class="error-message-full">
<p>Ocurrió un error al cargar las planillas. Por favor, intente de nuevo más tarde.</p>
<p v-if="errorMessage">Detalle: {{ errorMessage }}</p>
</div>
<div v-else>
<tabla-planillas
:planillas="planillasList"
@edit="handleEditPlanilla"
/>
<div v-if="!planillasList || planillasList.length === 0 && !isLoading" class="no-data-message">
No hay planillas registradas. Puede crear una nueva haciendo clic en el botón de arriba.
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import { usePlanillasStore } from '../../stores/usePlanillas';
import { useRouter } from 'vue-router';
import TablaPlanillas from '../../components/planillas/tablaPlanillas.vue'; // Corrected path
const planillasStore = usePlanillasStore();
const router = useRouter();
const isLoading = ref(true); // Set to true initially
const errorLoading = ref(false);
const errorMessage = ref('');
// Computed property to get planillas from the store
const planillasList = computed(() => planillasStore.planillas);
// Fetch planillas when the component is mounted
onMounted(async () => {
try {
isLoading.value = true;
errorLoading.value = false;
errorMessage.value = '';
await planillasStore.fetchPlanillas();
} catch (error) {
console.error("Error fetching planillas on mount:", error);
errorLoading.value = true;
errorMessage.value = error.message || 'Error desconocido.';
} finally {
isLoading.value = false;
}
});
// Navigate to the form for creating a new planilla
const navigateToCreateForm = () => {
// Assuming your route for creating a new planilla is named 'PlanillaFormNew'
// This name should match what's defined in your router configuration
router.push({ name: 'PlanillaFormNew' });
};
// Navigate to the form for editing an existing planilla
const handleEditPlanilla = (planillaId) => {
// Assuming your route for editing is named 'PlanillaFormEdit'
// This name should match what's defined in your router configuration
router.push({ name: 'PlanillaFormEdit', params: { id: planillaId } });
};
</script>
<style scoped>
.planillas-index-container {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
font-family: Arial, sans-serif;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.page-header h1 {
color: #2c3e50; /* Darker, more neutral blue */
font-size: 2.2em;
font-weight: 600;
}
.btn-create {
background-color: #3498db; /* Vibrant blue */
color: white;
padding: 12px 18px;
border: none;
border-radius: 5px;
font-size: 1em;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn-create:hover {
background-color: #2980b9; /* Darker shade of vibrant blue */
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.loading-message,
.error-message-full,
.no-data-message {
text-align: center;
padding: 25px;
margin-top: 25px;
border-radius: 8px;
font-size: 1.1em;
}
.loading-message {
color: #7f8c8d; /* Gray */
}
.error-message-full {
background-color: #fdedec; /* Lighter red */
color: #e74c3c; /* Strong red */
border: 1px solid #f5b7b1; /* Light red border */
}
.error-message-full p {
margin: 5px 0;
}
.no-data-message {
background-color: #eafaf1; /* Lighter green/blue */
color: #2ecc71; /* Green */
border: 1px solid #a3e4d7; /* Light green/blue border */
}
/* Styling for the imported tablaPlanillas can be managed within its own component,
but you can add overrides or container styles here if needed. */
</style>

318
ui/src/views/tareas/TareaForm.vue
View File

@@ -1,2 +1,318 @@
<template>
<div class="tarea-form-container">
<h2>{{ formTitle }}</h2>
<form @submit.prevent="handleSubmit">
<div class="form-group">
<label for="titulo">Título:</label>
<input type="text" id="titulo" v-model="formData.titulo" />
<span v-if="formErrors.titulo" class="error-message">{{ formErrors.titulo }}</span>
</div>
<template></template>
<div class="form-group">
<label for="empleado_id">Empleado ID:</label>
<input type="number" id="empleado_id" v-model.number="formData.empleado_id" />
<span v-if="formErrors.empleado_id" class="error-message">{{ formErrors.empleado_id }}</span>
</div>
<div class="form-group">
<label for="fecha">Fecha:</label>
<input type="date" id="fecha" v-model="formData.fecha" />
<span v-if="formErrors.fecha" class="error-message">{{ formErrors.fecha }}</span>
</div>
<div class="form-group">
<label for="estado">Estado:</label>
<select id="estado" v-model="formData.estado">
<option value="pendiente">Pendiente</option>
<option value="en progreso">En Progreso</option>
<option value="completada">Completada</option>
<option value="cancelada">Cancelada</option>
</select>
<span v-if="formErrors.estado" class="error-message">{{ formErrors.estado }}</span>
</div>
<div class="form-group">
<label for="tipo">Tipo:</label>
<input type="text" id="tipo" v-model="formData.tipo" />
<span v-if="formErrors.tipo" class="error-message">{{ formErrors.tipo }}</span>
</div>
<div class="form-group">
<label for="precio">Precio (Opcional):</label>
<input type="number" step="any" id="precio" v-model.number="formData.precio" />
<span v-if="formErrors.precio" class="error-message">{{ formErrors.precio }}</span>
</div>
<div class="form-group">
<label for="planilla_id">Planilla ID (Opcional):</label>
<input type="number" id="planilla_id" v-model.number="formData.planilla_id" />
<span v-if="formErrors.planilla_id" class="error-message">{{ formErrors.planilla_id }}</span>
</div>
<div class="form-group">
<label for="observacion">Observación (Opcional):</label>
<textarea id="observacion" v-model="formData.observacion" rows="3"></textarea>
</div>
<div class="form-actions">
<button type="submit" :disabled="isSubmitting">{{ isSubmitting ? 'Guardando...' : 'Guardar' }}</button>
<button type="button" @click="handleCancel" :disabled="isSubmitting">Cancelar</button>
</div>
</form>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue';
import { useTareasStore } from '../../stores/useTareas';
import { useRouter, useRoute } from 'vue-router';
const props = defineProps({
id: String,
});
const router = useRouter();
const route = useRoute();
const tareasStore = useTareasStore();
const formatDateForInput = (dateString) => {
const date = dateString ? new Date(dateString) : new Date();
// Apply timezone offset correction to ensure the date displayed is the intended "local" date
const userTimezoneOffset = date.getTimezoneOffset() * 60000;
const correctedDate = new Date(date.getTime() - userTimezoneOffset);
return correctedDate.toISOString().split('T')[0];
};
const getDefaultFormData = () => ({
titulo: '',
empleado_id: null,
planilla_id: null,
precio: null,
estado: 'pendiente',
observacion: '',
fecha: formatDateForInput(null),
tipo: '',
});
const formData = reactive(getDefaultFormData());
const formErrors = reactive({
titulo: '',
empleado_id: '',
fecha: '',
estado: '',
tipo: '',
precio: '',
planilla_id: '',
});
const isSubmitting = ref(false);
const editingId = ref(route.params.id || props.id || null);
const formTitle = computed(() => (editingId.value ? 'Editar Tarea' : 'Crear Nueva Tarea'));
const loadTareaForEditing = async (id) => {
try {
await tareasStore.fetchTareaById(id);
if (tareasStore.currentTarea && String(tareasStore.currentTarea.id) === String(id)) {
Object.assign(formData, {
...tareasStore.currentTarea,
fecha: formatDateForInput(tareasStore.currentTarea.fecha),
empleado_id: tareasStore.currentTarea.empleado_id ? Number(tareasStore.currentTarea.empleado_id) : null,
planilla_id: tareasStore.currentTarea.planilla_id ? Number(tareasStore.currentTarea.planilla_id) : null,
precio: tareasStore.currentTarea.precio ? parseFloat(tareasStore.currentTarea.precio) : null,
});
} else {
console.error(`Failed to load tarea data for ID: ${id} or ID mismatch.`);
router.push({ name: 'TareasIndex' });
}
} catch (error) {
console.error(`Error fetching tarea ${id} for editing:`, error);
router.push({ name: 'TareasIndex' });
}
};
onMounted(() => {
if (editingId.value) {
loadTareaForEditing(editingId.value);
}
// else, new form uses default data, already set
});
watch(() => route.params.id, (newId) => {
editingId.value = newId || null; // Update editingId when route changes
if (newId) {
loadTareaForEditing(newId);
} else {
// Navigated to create form from an edit form or similar scenario
Object.assign(formData, getDefaultFormData());
}
});
onUnmounted(() => {
tareasStore.clearCurrentTarea();
});
const validateForm = () => {
let isValid = true;
Object.keys(formErrors).forEach(key => formErrors[key] = '');
if (!formData.titulo?.trim()) {
formErrors.titulo = 'El título es obligatorio.';
isValid = false;
}
if (formData.empleado_id == null || isNaN(Number(formData.empleado_id)) || Number(formData.empleado_id) <= 0) {
formErrors.empleado_id = 'El ID de empleado es obligatorio y debe ser un número positivo.';
isValid = false;
}
if (!formData.fecha) {
formErrors.fecha = 'La fecha es obligatoria.';
isValid = false;
}
if (!formData.estado) {
formErrors.estado = 'El estado es obligatorio.';
isValid = false;
}
if (!formData.tipo?.trim()) {
formErrors.tipo = 'El tipo es obligatorio.';
isValid = false;
}
if (formData.precio != null && (isNaN(parseFloat(formData.precio)) || parseFloat(formData.precio) < 0)) {
formErrors.precio = 'El precio, si se ingresa, debe ser un número positivo.';
isValid = false;
}
if (formData.planilla_id != null && (formData.planilla_id !== '' && (isNaN(Number(formData.planilla_id)) || Number(formData.planilla_id) <= 0))) {
// Allow empty string for planilla_id, but if a value is present, it must be a positive number
formErrors.planilla_id = 'El ID de planilla, si se ingresa, debe ser un número positivo.';
isValid = false;
}
return isValid;
};
const handleSubmit = async () => {
if (!validateForm()) return;
isSubmitting.value = true;
const payload = {
...formData,
empleado_id: Number(formData.empleado_id),
// Send null if planilla_id is empty or not a number, otherwise send the number
planilla_id: (formData.planilla_id && !isNaN(Number(formData.planilla_id))) ? Number(formData.planilla_id) : null,
precio: (formData.precio != null && formData.precio !== '') ? parseFloat(formData.precio) : null,
// API expects date as YYYY-MM-DD string or full ISO. Input type="date" provides YYYY-MM-DD.
// If API needs full DateTime, convert: new Date(formData.fecha + 'T00:00:00Z').toISOString()
};
try {
if (editingId.value) {
await tareasStore.updateTarea(editingId.value, payload);
} else {
await tareasStore.createTarea(payload);
}
router.push({ name: 'TareasIndex' });
} catch (error) {
console.error('Error saving tarea:', error);
const errorMsg = error.response?.data?.message || error.message || 'Ocurrió un error.';
alert(`Error al guardar la tarea: ${errorMsg}`);
} finally {
isSubmitting.value = false;
}
};
const handleCancel = () => {
router.go(-1);
};
</script>
<style scoped>
.tarea-form-container {
max-width: 650px;
margin: 20px auto;
padding: 25px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h2 {
text-align: center;
color: #333;
margin-bottom: 25px;
}
.form-group {
margin-bottom: 18px;
}
.form-group label {
display: block;
margin-bottom: 6px;
font-weight: bold;
color: #555;
}
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 1em;
}
.form-group textarea {
resize: vertical;
}
.error-message {
display: block;
color: #e74c3c;
font-size: 0.9em;
margin-top: 5px;
}
.form-actions {
margin-top: 25px;
display: flex;
justify-content: flex-end;
gap: 12px;
}
.form-actions button {
padding: 10px 18px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
font-weight: 500;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.form-actions button[type="submit"] {
background-color: #2ecc71;
color: white;
}
.form-actions button[type="submit"]:hover {
background-color: #27ae60;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.form-actions button[type="submit"]:disabled {
background-color: #bdc3c7;
cursor: not-allowed;
}
.form-actions button[type="button"] {
background-color: #95a5a6;
color: white;
}
.form-actions button[type="button"]:hover {
background-color: #7f8c8d;
}
.form-actions button[type="button"]:disabled {
background-color: #bdc3c7;
cursor: not-allowed;
}
</style>

143
ui/src/views/tareas/TareasIndex.vue
View File

@@ -1,2 +1,143 @@
<template>
<div class="tareas-index-container">
<header class="page-header">
<h1>Gestión de Tareas</h1>
<button @click="navigateToCreateForm" class="btn-create">
Crear Nueva Tarea
</button>
</header>
<template></template>
<div v-if="isLoading" class="loading-message">
Cargando tareas...
</div>
<div v-else-if="errorLoading" class="error-message-full">
<p>Ocurrió un error al cargar las tareas. Por favor, intente de nuevo más tarde.</p>
<p v-if="errorMessage">Detalle: {{ errorMessage }}</p>
</div>
<div v-else>
<tabla-tareas
:tareas="tareasList"
@edit="handleEditTarea"
/>
<div v-if="!tareasList || tareasList.length === 0 && !isLoading" class="no-data-message">
No hay tareas registradas. Puede crear una nueva haciendo clic en el botón de arriba.
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import { useTareasStore } from '../../stores/useTareas';
import { useRouter } from 'vue-router';
import TablaTareas from '../../components/tareas/tablaTareas.vue';
const tareasStore = useTareasStore();
const router = useRouter();
const isLoading = ref(true);
const errorLoading = ref(false);
const errorMessage = ref('');
const tareasList = computed(() => tareasStore.tareas);
onMounted(async () => {
try {
isLoading.value = true;
errorLoading.value = false;
errorMessage.value = '';
await tareasStore.fetchTareas();
} catch (error) {
console.error("Error fetching tareas on mount:", error);
errorLoading.value = true;
errorMessage.value = error.message || 'Error desconocido al cargar tareas.';
} finally {
isLoading.value = false;
}
});
const navigateToCreateForm = () => {
// Assuming route for creating a new tarea is named 'TareaFormNew'
router.push({ name: 'TareaFormNew' });
};
const handleEditTarea = (tareaId) => {
// Assuming route for editing is named 'TareaFormEdit'
router.push({ name: 'TareaFormEdit', params: { id: tareaId } });
};
</script>
<style scoped>
.tareas-index-container {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid #e0e0e0;
}
.page-header h1 {
color: #333;
font-size: 2em;
font-weight: 600;
}
.btn-create {
background-color: #5cb85c;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
font-size: 1em;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn-create:hover {
background-color: #4cae4c;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.loading-message,
.error-message-full,
.no-data-message {
text-align: center;
padding: 25px;
margin-top: 25px;
border-radius: 8px;
font-size: 1.1em;
}
.loading-message {
color: #555;
}
.error-message-full {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.error-message-full p {
margin: 5px 0;
}
.no-data-message {
background-color: #e9ecef;
color: #495057;
border: 1px solid #ced4da;
}
</style>