Jules was unable to complete the task in time. Please review the work done so far and provide feedback for Jules to continue.
This commit is contained in:
google-labs-jules[bot]
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user