Merge pull request #3 from josedario87/jules_wip_11748544748520558008
Jules was unable to complete the task in time. Please review the work…
This commit is contained in:
josedario87
GitHub
@@ -1,2 +1,181 @@
|
||||
<template>
|
||||
<div class="asistencia-card">
|
||||
<div class="card-header">
|
||||
<span class="empleado-id">Empleado ID: {{ asistencia.empleado_id }}</span>
|
||||
<span :class="`estado-asistencia estado-${asistencia.estado?.toLowerCase().replace(/\s+/g, '-')}`">
|
||||
{{ asistencia.estado || 'N/A' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><strong>Entrada:</strong> {{ formatDateTime(asistencia.entrada) }}</p>
|
||||
<p><strong>Salida:</strong> {{ asistencia.salida ? formatDateTime(asistencia.salida) : 'No registrada' }}</p>
|
||||
<p v-if="asistencia.observacion" class="observacion">
|
||||
<strong>Observación:</strong> {{ asistencia.observacion }}
|
||||
</p>
|
||||
<!-- Historial might be too complex for a card, but can be added if needed -->
|
||||
<!-- <p v-if="asistencia.historial"><strong>Historial:</strong> {{ asistencia.historial }}</p> -->
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button @click="editAsistencia" class="action-button edit-button">Editar</button>
|
||||
<button @click="confirmDeleteAsistencia" class="action-button delete-button">Eliminar</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template></template>
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
import { useAsistenciasStore } from '../../stores/useAsistencias';
|
||||
|
||||
const props = defineProps({
|
||||
asistencia: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['edit']);
|
||||
|
||||
const asistenciasStore = useAsistenciasStore();
|
||||
|
||||
const formatDateTime = (dateTimeString) => {
|
||||
if (!dateTimeString) return 'N/A';
|
||||
const date = new Date(dateTimeString);
|
||||
return date.toLocaleString('es-ES', { // Spanish locale
|
||||
year: 'numeric',
|
||||
month: '2-digit', // Using 2-digit for month for brevity in card
|
||||
day: '2-digit', // Using 2-digit for day
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
// second: '2-digit', // Optional: include seconds
|
||||
});
|
||||
};
|
||||
|
||||
const editAsistencia = () => {
|
||||
emit('edit', props.asistencia.id);
|
||||
};
|
||||
|
||||
const confirmDeleteAsistencia = () => {
|
||||
if (confirm(`¿Está seguro de que desea eliminar esta asistencia (ID: ${props.asistencia.id})?`)) {
|
||||
deleteAsistenciaInternal();
|
||||
}
|
||||
};
|
||||
|
||||
const deleteAsistenciaInternal = async () => {
|
||||
try {
|
||||
await asistenciasStore.deleteAsistencia(props.asistencia.id);
|
||||
// Optionally, emit 'deleted' or show notification
|
||||
} catch (error) {
|
||||
console.error('Error deleting asistencia:', error);
|
||||
alert('Ocurrió un error al eliminar la asistencia.');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.asistencia-card {
|
||||
border: 1px solid #e0e0e0; /* Lighter border for a softer look */
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Softer shadow */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: box-shadow 0.3s ease-in-out;
|
||||
}
|
||||
.asistencia-card:hover {
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Enhanced shadow on hover */
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 10px; /* Increased padding */
|
||||
border-bottom: 1px solid #f0f0f0; /* Even lighter border */
|
||||
}
|
||||
|
||||
.empleado-id {
|
||||
font-weight: bold;
|
||||
color: #2c3e50; /* Dark blue/grey */
|
||||
font-size: 1.05em;
|
||||
}
|
||||
|
||||
.estado-asistencia {
|
||||
padding: 5px 10px; /* Slightly more padding */
|
||||
border-radius: 15px; /* Pill shape */
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-transform: uppercase; /* Uppercase status */
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.card-body p {
|
||||
margin: 8px 0;
|
||||
color: #555;
|
||||
font-size: 0.95em;
|
||||
line-height: 1.6; /* Improved line spacing */
|
||||
}
|
||||
.card-body p strong {
|
||||
color: #333;
|
||||
}
|
||||
.observacion {
|
||||
font-style: italic;
|
||||
color: #666;
|
||||
background-color: #f8f9fa; /* Very light grey background */
|
||||
padding: 10px; /* More padding */
|
||||
border-left: 3px solid #007bff; /* Blue accent line */
|
||||
border-radius: 4px;
|
||||
margin-top:10px;
|
||||
font-size: 0.9em; /* Slightly smaller for observation */
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
margin-top: auto;
|
||||
padding-top: 16px; /* More space before actions */
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: 8px 15px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9em;
|
||||
font-weight: 500; /* Slightly bolder text on buttons */
|
||||
transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.action-button:hover{
|
||||
transform: translateY(-2px); /* More pronounced lift */
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
.edit-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
.delete-button:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
|
||||
/* Estado specific styling */
|
||||
.estado-pendiente { background-color: #ffc107; color: #212529;} /* Amber, dark text */
|
||||
.estado-presente,
|
||||
.estado-confirmada { background-color: #28a745; color: white;} /* Green */
|
||||
.estado-ausente { background-color: #dc3545; color: white;} /* Red */
|
||||
.estado-justificada { background-color: #17a2b8; color: white;} /* Info Blue */
|
||||
.estado-cancelada,
|
||||
.estado-anulada { background-color: #6c757d; color: white;} /* Gray */
|
||||
</style>
|
||||
|
||||
@@ -1,2 +1,163 @@
|
||||
<template>
|
||||
<div class="tabla-asistencias-container">
|
||||
<table class="tabla-asistencias">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Empleado ID</th>
|
||||
<th>Entrada</th>
|
||||
<th>Salida</th>
|
||||
<th>Estado</th>
|
||||
<th>Observación</th>
|
||||
<th>Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="!asistencias || asistencias.length === 0">
|
||||
<td :colspan="7" style="text-align: center;">No hay asistencias para mostrar.</td>
|
||||
</tr>
|
||||
<tr v-for="asistencia in asistencias" :key="asistencia.id">
|
||||
<td>{{ asistencia.id }}</td>
|
||||
<td>{{ asistencia.empleado_id }}</td>
|
||||
<td>{{ formatDateTime(asistencia.entrada) }}</td>
|
||||
<td>{{ asistencia.salida ? formatDateTime(asistencia.salida) : 'N/A' }}</td>
|
||||
<td><span :class="`estado-${asistencia.estado?.toLowerCase().replace(/\s+/g, '-')}`">{{ asistencia.estado }}</span></td>
|
||||
<td :title="asistencia.observacion">{{ truncateText(asistencia.observacion, 50) }}</td>
|
||||
<td>
|
||||
<button @click="editAsistencia(asistencia.id)" class="action-button edit-button">Editar</button>
|
||||
<button @click="confirmDeleteAsistencia(asistencia)" class="action-button delete-button">Eliminar</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template></template>
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
import { useAsistenciasStore } from '../../stores/useAsistencias';
|
||||
|
||||
const props = defineProps({
|
||||
asistencias: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['edit']);
|
||||
|
||||
const asistenciasStore = useAsistenciasStore();
|
||||
|
||||
const formatDateTime = (dateTimeString) => {
|
||||
if (!dateTimeString) return 'N/A';
|
||||
const date = new Date(dateTimeString);
|
||||
// Using UTC methods to ensure consistency if dates are stored in UTC
|
||||
const day = String(date.getUTCDate()).padStart(2, '0');
|
||||
const month = String(date.getUTCMonth() + 1).padStart(2, '0'); // Months are 0-indexed
|
||||
const year = date.getUTCFullYear();
|
||||
const hours = String(date.getUTCHours()).padStart(2, '0');
|
||||
const minutes = String(date.getUTCMinutes()).padStart(2, '0');
|
||||
return `${day}/${month}/${year} ${hours}:${minutes}`;
|
||||
};
|
||||
|
||||
const truncateText = (text, maxLength) => {
|
||||
if (!text) return 'N/A';
|
||||
if (text.length <= maxLength) return text;
|
||||
return text.substring(0, maxLength) + '...';
|
||||
};
|
||||
|
||||
const editAsistencia = (id) => {
|
||||
emit('edit', id);
|
||||
};
|
||||
|
||||
const confirmDeleteAsistencia = (asistencia) => {
|
||||
if (confirm(`¿Está seguro de que desea eliminar la asistencia ID: ${asistencia.id} (Empleado: ${asistencia.empleado_id})?`)) {
|
||||
deleteAsistenciaInternal(asistencia.id);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteAsistenciaInternal = async (id) => {
|
||||
try {
|
||||
await asistenciasStore.deleteAsistencia(id);
|
||||
// Optional: Show success notification or emit 'deleted' event
|
||||
} catch (error) {
|
||||
console.error(`Error deleting asistencia with id ${id}:`, error);
|
||||
alert('Ocurrió un error al eliminar la asistencia.');
|
||||
}
|
||||
};
|
||||
</script
|
||||
|
||||
<style scoped>
|
||||
.tabla-asistencias-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tabla-asistencias {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 1em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.tabla-asistencias th,
|
||||
.tabla-asistencias td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
vertical-align: middle; /* Good for table cells */
|
||||
}
|
||||
|
||||
.tabla-asistencias th {
|
||||
background-color: #f4f6f8; /* Light grey for header */
|
||||
font-weight: 600; /* Bolder text for header */
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tabla-asistencias tr:nth-child(even) {
|
||||
background-color: #f9fafb; /* Very light alternating row color */
|
||||
}
|
||||
|
||||
.tabla-asistencias tr:hover {
|
||||
background-color: #f0f0f0; /* Hover effect */
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: 6px 10px;
|
||||
margin-right: 6px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85em;
|
||||
transition: background-color 0.2s ease, transform 0.1s ease;
|
||||
}
|
||||
.action-button:hover {
|
||||
transform: translateY(-1px); /* Slight lift effect */
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
background-color: #007bff; /* Blue */
|
||||
color: white;
|
||||
}
|
||||
.edit-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
background-color: #dc3545; /* Red */
|
||||
color: white;
|
||||
}
|
||||
.delete-button:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
|
||||
/* Estado specific styling (using text color for tables is often cleaner) */
|
||||
.estado-pendiente { color: #ffc107; font-weight: bold; } /* Amber */
|
||||
.estado-presente,
|
||||
.estado-confirmada { color: #28a745; font-weight: bold; } /* Green */
|
||||
.estado-ausente { color: #dc3545; font-weight: bold; } /* Red */
|
||||
.estado-justificada { color: #17a2b8; font-weight: bold; } /* Info Blue */
|
||||
.estado-cancelada,
|
||||
.estado-anulada { color: #6c757d; font-weight: bold; } /* Gray */
|
||||
/* If you prefer background colors like in cards, copy those styles here, but they can be visually heavy in tables. */
|
||||
</style>
|
||||
|
||||
@@ -1,2 +1,134 @@
|
||||
<template>
|
||||
<div class="planilla-card">
|
||||
<h3>{{ planilla.titulo }}</h3>
|
||||
<p><strong>Empleado ID:</strong> {{ planilla.empleado_id }}</p>
|
||||
<p><strong>Desde:</strong> {{ formatDate(planilla.fecha_desde) }}</p>
|
||||
<p><strong>Hasta:</strong> {{ formatDate(planilla.fecha_hasta) }}</p>
|
||||
<p><strong>Total:</strong> {{ formatCurrency(planilla.total) }}</p>
|
||||
<p><strong>Estado:</strong> <span :class="`estado-${planilla.estado?.toLowerCase()}`">{{ planilla.estado }}</span></p>
|
||||
<div class="actions">
|
||||
<button @click="editPlanilla">Editar</button>
|
||||
<button @click="confirmDeletePlanilla">Eliminar</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template></template>
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
import { usePlanillasStore } from '../../stores/usePlanillas';
|
||||
|
||||
const props = defineProps({
|
||||
planilla: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['edit']);
|
||||
|
||||
const planillasStore = usePlanillasStore();
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return 'N/A';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('es-ES', { // Using Spanish locale for date
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
const formatCurrency = (value) => {
|
||||
if (value == null) return 'N/A'; // Handle null or undefined totals
|
||||
// Assuming the value is a number or can be converted to one.
|
||||
// Adjust 'es-PY' and currency 'PYG' (Paraguayan Guarani) as needed.
|
||||
return Number(value).toLocaleString('es-PY', {
|
||||
style: 'currency',
|
||||
currency: 'PYG'
|
||||
});
|
||||
};
|
||||
|
||||
const editPlanilla = () => {
|
||||
emit('edit', props.planilla.id);
|
||||
};
|
||||
|
||||
const confirmDeletePlanilla = () => {
|
||||
// In a real app, you'd use a confirmation dialog here
|
||||
if (confirm(`¿Está seguro de que desea eliminar la planilla "${props.planilla.titulo}"?`)) {
|
||||
deletePlanilla();
|
||||
}
|
||||
};
|
||||
|
||||
const deletePlanilla = async () => {
|
||||
try {
|
||||
await planillasStore.deletePlanilla(props.planilla.id);
|
||||
// Optionally, emit an event or show a notification upon successful deletion
|
||||
// For example: emit('deleted', props.planilla.id);
|
||||
} catch (error) {
|
||||
console.error('Error deleting planilla:', error);
|
||||
// Handle error (e.g., show a notification to the user)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.planilla-card {
|
||||
border: 1px solid #ccc;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.planilla-card h3 {
|
||||
margin-top: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.planilla-card p {
|
||||
margin: 8px 0;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.planilla-card .actions {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.planilla-card button {
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.planilla-card button:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.actions button:first-child { /* Edit button */
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.actions button:last-child { /* Delete button */
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Example status styling */
|
||||
.estado-pagado {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
.estado-pendiente {
|
||||
color: orange;
|
||||
font-weight: bold;
|
||||
}
|
||||
.estado-anulado {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,2 +1,167 @@
|
||||
<template>
|
||||
<div class="tabla-planillas-container">
|
||||
<table class="tabla-planillas">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Título</th>
|
||||
<th>Empleado ID</th>
|
||||
<th>Fecha Desde</th>
|
||||
<th>Fecha Hasta</th>
|
||||
<th>Total</th>
|
||||
<th>Estado</th>
|
||||
<th>Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="planillas && planillas.length === 0">
|
||||
<td :colspan="8" style="text-align: center;">No hay planillas para mostrar.</td>
|
||||
</tr>
|
||||
<tr v-for="planilla in planillas" :key="planilla.id">
|
||||
<td>{{ planilla.id }}</td>
|
||||
<td>{{ planilla.titulo }}</td>
|
||||
<td>{{ planilla.empleado_id }}</td>
|
||||
<td>{{ formatDate(planilla.fecha_desde) }}</td>
|
||||
<td>{{ formatDate(planilla.fecha_hasta) }}</td>
|
||||
<td>{{ formatCurrency(planilla.total) }}</td>
|
||||
<td><span :class="`estado-${planilla.estado?.toLowerCase()}`">{{ planilla.estado }}</span></td>
|
||||
<td>
|
||||
<button @click="editPlanilla(planilla.id)" class="action-button edit-button">Editar</button>
|
||||
<button @click="confirmDeletePlanilla(planilla)" class="action-button delete-button">Eliminar</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template></template>
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
import { usePlanillasStore } from '../../stores/usePlanillas';
|
||||
|
||||
const props = defineProps({
|
||||
planillas: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['edit']); // Removed 'delete' as it's handled internally
|
||||
|
||||
const planillasStore = usePlanillasStore();
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return 'N/A';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('es-ES', {
|
||||
year: 'numeric',
|
||||
month: '2-digit', // Changed to 2-digit for table compactness
|
||||
day: '2-digit', // Changed to 2-digit for table compactness
|
||||
});
|
||||
};
|
||||
|
||||
const formatCurrency = (value) => {
|
||||
if (value == null) return 'N/A';
|
||||
return Number(value).toLocaleString('es-PY', {
|
||||
style: 'currency',
|
||||
currency: 'PYG',
|
||||
});
|
||||
};
|
||||
|
||||
const editPlanilla = (id) => {
|
||||
emit('edit', id);
|
||||
};
|
||||
|
||||
const confirmDeletePlanilla = (planilla) => {
|
||||
if (confirm(`¿Está seguro de que desea eliminar la planilla "${planilla.titulo}" (ID: ${planilla.id})?`)) {
|
||||
deletePlanillaInternal(planilla.id);
|
||||
}
|
||||
};
|
||||
|
||||
const deletePlanillaInternal = async (id) => {
|
||||
try {
|
||||
await planillasStore.deletePlanilla(id);
|
||||
// Optional: Show success notification
|
||||
// No need to emit 'delete' if the store handles list updates and parent components react to store changes
|
||||
} catch (error) {
|
||||
console.error(`Error deleting planilla with id ${id}:`, error);
|
||||
// Optional: Show error notification
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tabla-planillas-container {
|
||||
overflow-x: auto; /* Allows table to be scrolled horizontally if needed */
|
||||
}
|
||||
|
||||
.tabla-planillas {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 1em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.tabla-planillas th,
|
||||
.tabla-planillas td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tabla-planillas th {
|
||||
background-color: #f2f2f2;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tabla-planillas tr:nth-child(even) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.tabla-planillas tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: 5px 10px;
|
||||
margin-right: 5px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.edit-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.delete-button:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
|
||||
/* Status styling (similar to cardPlanilla) */
|
||||
.estado-pagado {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
.estado-pendiente {
|
||||
color: orange;
|
||||
font-weight: bold;
|
||||
}
|
||||
.estado-anulado {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
/* text-decoration: line-through; */ /* Optional for table view */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,2 +1,159 @@
|
||||
<template>
|
||||
<div class="tarea-card">
|
||||
<h4>{{ tarea.titulo }}</h4>
|
||||
<p><strong>Empleado ID:</strong> {{ tarea.empleado_id }}</p>
|
||||
<p><strong>Fecha:</strong> {{ formatDate(tarea.fecha) }}</p>
|
||||
<p><strong>Estado:</strong> <span :class="`estado-${tarea.estado?.toLowerCase().replace(/\s+/g, '-')}`">{{ tarea.estado }}</span></p>
|
||||
<p><strong>Tipo:</strong> {{ tarea.tipo || 'N/A' }}</p>
|
||||
<p v-if="tarea.precio != null"><strong>Precio:</strong> {{ formatCurrency(tarea.precio) }}</p>
|
||||
<p v-if="tarea.observacion"><strong>Observación:</strong> {{ tarea.observacion }}</p>
|
||||
|
||||
<div class="actions">
|
||||
<button @click="editTarea" class="action-button edit-button">Editar</button>
|
||||
<button @click="confirmDeleteTarea" class="action-button delete-button">Eliminar</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template></template>
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
import { useTareasStore } from '../../stores/useTareas';
|
||||
|
||||
const props = defineProps({
|
||||
tarea: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['edit']);
|
||||
|
||||
const tareasStore = useTareasStore();
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return 'N/A';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('es-ES', { // Spanish locale
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
const formatCurrency = (value) => {
|
||||
if (value == null) return '';
|
||||
return Number(value).toLocaleString('es-PY', { // Paraguayan Guarani
|
||||
style: 'currency',
|
||||
currency: 'PYG',
|
||||
});
|
||||
};
|
||||
|
||||
const editTarea = () => {
|
||||
emit('edit', props.tarea.id);
|
||||
};
|
||||
|
||||
const confirmDeleteTarea = () => {
|
||||
if (confirm(`¿Está seguro de que desea eliminar la tarea "${props.tarea.titulo}"?`)) {
|
||||
deleteTareaInternal();
|
||||
}
|
||||
};
|
||||
|
||||
const deleteTareaInternal = async () => {
|
||||
try {
|
||||
await tareasStore.deleteTarea(props.tarea.id);
|
||||
// Optionally, emit a 'deleted' event: emit('deleted', props.tarea.id);
|
||||
// Or show a success notification.
|
||||
} catch (error) {
|
||||
console.error('Error deleting tarea:', error);
|
||||
alert('Ocurrió un error al eliminar la tarea. Por favor, intente de nuevo.');
|
||||
// Potentially show a more user-friendly notification.
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tarea-card {
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||
transition: box-shadow 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.tarea-card:hover {
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.tarea-card h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
color: #333;
|
||||
font-size: 1.15em; /* Slightly smaller than a typical h3 */
|
||||
}
|
||||
|
||||
.tarea-card p {
|
||||
margin: 6px 0;
|
||||
color: #555;
|
||||
font-size: 0.95em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.tarea-card p strong {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9em;
|
||||
transition: background-color 0.2s ease, opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
background-color: #007bff; /* Primary blue */
|
||||
color: white;
|
||||
}
|
||||
.edit-button:hover {
|
||||
background-color: #0056b3; /* Darker blue */
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
background-color: #dc3545; /* Red */
|
||||
color: white;
|
||||
}
|
||||
.delete-button:hover {
|
||||
background-color: #c82333; /* Darker red */
|
||||
}
|
||||
|
||||
/* Status styling: Added .replace(/\s+/g, '-') for multi-word statuses */
|
||||
.estado-pendiente {
|
||||
color: #ff9800; /* Orange */
|
||||
font-weight: bold;
|
||||
}
|
||||
.estado-realizada,
|
||||
.estado-completada, /* Common synonyms for 'done' */
|
||||
.estado-hecho {
|
||||
color: #4caf50; /* Green */
|
||||
font-weight: bold;
|
||||
}
|
||||
.estado-en-progreso { /* Example for 'in progress' */
|
||||
color: #2196f3; /* Blue */
|
||||
font-weight: bold;
|
||||
}
|
||||
.estado-anulada,
|
||||
.estado-cancelada {
|
||||
color: #f44336; /* Red */
|
||||
font-weight: bold;
|
||||
/* text-decoration: line-through; */ /* Optional */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,2 +1,167 @@
|
||||
<template>
|
||||
<div class="tabla-tareas-container">
|
||||
<table class="tabla-tareas">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Título</th>
|
||||
<th>Empleado ID</th>
|
||||
<th>Fecha</th>
|
||||
<th>Estado</th>
|
||||
<th>Tipo</th>
|
||||
<th>Precio</th>
|
||||
<th>Planilla ID</th>
|
||||
<th>Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="!tareas || tareas.length === 0">
|
||||
<td :colspan="9" style="text-align: center;">No hay tareas para mostrar.</td>
|
||||
</tr>
|
||||
<tr v-for="tarea in tareas" :key="tarea.id">
|
||||
<td>{{ tarea.id }}</td>
|
||||
<td>{{ tarea.titulo }}</td>
|
||||
<td>{{ tarea.empleado_id }}</td>
|
||||
<td>{{ formatDate(tarea.fecha) }}</td>
|
||||
<td><span :class="`estado-${tarea.estado?.toLowerCase().replace(/\s+/g, '-')}`">{{ tarea.estado }}</span></td>
|
||||
<td>{{ tarea.tipo || 'N/A' }}</td>
|
||||
<td>{{ tarea.precio != null ? formatCurrency(tarea.precio) : 'N/A' }}</td>
|
||||
<td>{{ tarea.planilla_id || 'N/A' }}</td>
|
||||
<td>
|
||||
<button @click="editTarea(tarea.id)" class="action-button edit-button">Editar</button>
|
||||
<button @click="confirmDeleteTarea(tarea)" class="action-button delete-button">Eliminar</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template></template>
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
import { useTareasStore } from '../../stores/useTareas';
|
||||
|
||||
const props = defineProps({
|
||||
tareas: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['edit']);
|
||||
|
||||
const tareasStore = useTareasStore();
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return 'N/A';
|
||||
// Assuming dateString might be a full ISO string, ensure it's handled correctly by Date constructor
|
||||
const date = new Date(dateString);
|
||||
const day = String(date.getUTCDate()).padStart(2, '0'); // Use getUTCDate for consistency if dates are stored in UTC
|
||||
const month = String(date.getUTCMonth() + 1).padStart(2, '0'); // Months are 0-indexed
|
||||
const year = date.getUTCFullYear();
|
||||
return `${day}/${month}/${year}`;
|
||||
};
|
||||
|
||||
const formatCurrency = (value) => {
|
||||
if (value == null) return 'N/A';
|
||||
return Number(value).toLocaleString('es-PY', { // Paraguayan Guarani
|
||||
style: 'currency',
|
||||
currency: 'PYG',
|
||||
});
|
||||
};
|
||||
|
||||
const editTarea = (id) => {
|
||||
emit('edit', id);
|
||||
};
|
||||
|
||||
const confirmDeleteTarea = (tarea) => {
|
||||
if (confirm(`¿Está seguro de que desea eliminar la tarea "${tarea.titulo}" (ID: ${tarea.id})?`)) {
|
||||
deleteTareaInternal(tarea.id);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteTareaInternal = async (id) => {
|
||||
try {
|
||||
await tareasStore.deleteTarea(id);
|
||||
// Optional: Show success notification or emit 'deleted' event
|
||||
} catch (error) {
|
||||
console.error(`Error deleting tarea with id ${id}:`, error);
|
||||
alert('Ocurrió un error al eliminar la tarea.');
|
||||
// Optional: Show error notification
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tabla-tareas-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tabla-tareas {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 1em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.tabla-tareas th,
|
||||
.tabla-tareas td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tabla-tareas th {
|
||||
background-color: #f4f6f8;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tabla-tareas tr:nth-child(even) {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.tabla-tareas tr:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: 6px 10px;
|
||||
margin-right: 6px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85em;
|
||||
transition: background-color 0.2s ease, transform 0.1s ease;
|
||||
}
|
||||
.action-button:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
background-color: #007bff; /* Blue */
|
||||
color: white;
|
||||
}
|
||||
.edit-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
background-color: #dc3545; /* Red */
|
||||
color: white;
|
||||
}
|
||||
.delete-button:hover {
|
||||
background-color: #c82333;
|
||||
}
|
||||
|
||||
/* Status styling (consistent with cardTarea) */
|
||||
.estado-pendiente { color: #ff9800; font-weight: bold; } /* Orange */
|
||||
.estado-realizada,
|
||||
.estado-completada, /* Synonyms */
|
||||
.estado-hecho { color: #4caf50; font-weight: bold; } /* Green */
|
||||
.estado-en-progreso { color: #2196f3; font-weight: bold; } /* Blue */
|
||||
.estado-anulada,
|
||||
.estado-cancelada { color: #f44336; font-weight: bold; } /* Red */
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,88 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { defineStore } from 'pinia';
|
||||
import apiClient from '../apiClient'; // Assuming apiClient is configured
|
||||
|
||||
export const useAsistencias = defineStore('asistencias', {
|
||||
state: () => ({ asistencias: [] }),
|
||||
})
|
||||
// Helper function to get default values for currentAsistencia
|
||||
const getDefaultCurrentAsistencia = () => ({
|
||||
id: null,
|
||||
empleado_id: null,
|
||||
entrada: null, // Will likely be a datetime string
|
||||
salida: null, // Will likely be a datetime string
|
||||
historial: null, // JSON field, can be an object or string
|
||||
observacion: '',
|
||||
estado: 'pendiente', // Default from schema (if applicable, or common practice)
|
||||
// fecha_anulado is not typically part of creation/edit form directly
|
||||
});
|
||||
|
||||
export const useAsistenciasStore = defineStore('asistencias', {
|
||||
state: () => ({
|
||||
asistencias: [],
|
||||
currentAsistencia: getDefaultCurrentAsistencia(),
|
||||
}),
|
||||
actions: {
|
||||
async fetchAsistencias() {
|
||||
try {
|
||||
const response = await apiClient.get('/api/asistencias');
|
||||
this.asistencias = response.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching asistencias:', error);
|
||||
// Handle error (e.g., show a notification to the user)
|
||||
}
|
||||
},
|
||||
|
||||
async fetchAsistenciaById(id) {
|
||||
try {
|
||||
const response = await apiClient.get(`/api/asistencias/${id}`);
|
||||
// Assuming API returns dates as ISO strings.
|
||||
// No special date conversion needed here, Pinia will store as is.
|
||||
// Components will handle formatting for display or input fields.
|
||||
this.currentAsistencia = response.data;
|
||||
} catch (error) {
|
||||
console.error(`Error fetching asistencia with id ${id}:`, error);
|
||||
this.currentAsistencia = getDefaultCurrentAsistencia(); // Reset on error
|
||||
}
|
||||
},
|
||||
|
||||
async createAsistencia(asistenciaData) {
|
||||
try {
|
||||
// Ensure date fields are in a format the API expects (e.g., ISO string)
|
||||
// If asistenciaData.entrada/salida are Date objects, convert them:
|
||||
// if (asistenciaData.entrada instanceof Date) asistenciaData.entrada = asistenciaData.entrada.toISOString();
|
||||
// if (asistenciaData.salida instanceof Date) asistenciaData.salida = asistenciaData.salida.toISOString();
|
||||
await apiClient.post('/api/asistencias', asistenciaData);
|
||||
await this.fetchAsistencias(); // Refresh the list
|
||||
} catch (error) {
|
||||
console.error('Error creating asistencia:', error);
|
||||
throw error; // Re-throw to allow form to handle it
|
||||
}
|
||||
},
|
||||
|
||||
async updateAsistencia(id, asistenciaData) {
|
||||
try {
|
||||
// Similar date conversion logic as in createAsistencia if needed
|
||||
// if (asistenciaData.entrada instanceof Date) asistenciaData.entrada = asistenciaData.entrada.toISOString();
|
||||
// if (asistenciaData.salida instanceof Date) asistenciaData.salida = asistenciaData.salida.toISOString();
|
||||
await apiClient.put(`/api/asistencias/${id}`, asistenciaData);
|
||||
await this.fetchAsistencias(); // Refresh the list
|
||||
this.currentAsistencia = getDefaultCurrentAsistencia(); // Reset currentAsistencia
|
||||
} catch (error) {
|
||||
console.error(`Error updating asistencia with id ${id}:`, error);
|
||||
throw error; // Re-throw to allow form to handle it
|
||||
}
|
||||
},
|
||||
|
||||
async deleteAsistencia(id) {
|
||||
try {
|
||||
await apiClient.delete(`/api/asistencias/${id}`);
|
||||
await this.fetchAsistencias(); // Refresh the list
|
||||
} catch (error) {
|
||||
console.error(`Error deleting asistencia with id ${id}:`, error);
|
||||
throw error; // Re-throw to allow handling in component
|
||||
}
|
||||
},
|
||||
|
||||
// Action to clear currentAsistencia, useful when navigating away from a form
|
||||
clearCurrentAsistencia() {
|
||||
this.currentAsistencia = getDefaultCurrentAsistencia();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,5 +1,81 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { defineStore } from 'pinia';
|
||||
import apiClient from '../apiClient'; // Assuming apiClient is configured for API calls
|
||||
|
||||
export const usePlanillas = defineStore('planillas', {
|
||||
state: () => ({ planillas: [] }),
|
||||
})
|
||||
export const usePlanillasStore = defineStore('planillas', {
|
||||
state: () => ({
|
||||
planillas: [],
|
||||
currentPlanilla: {
|
||||
id: null,
|
||||
fecha_desde: null,
|
||||
fecha_hasta: null,
|
||||
titulo: '',
|
||||
total: null,
|
||||
estado: 'pagado', // Default value from schema
|
||||
fecha_anulado: null,
|
||||
empleado_id: null,
|
||||
// Empleado relation is not included here, will be handled by ID.
|
||||
},
|
||||
}),
|
||||
actions: {
|
||||
async fetchPlanillas() {
|
||||
try {
|
||||
const response = await apiClient.get('/api/planillas');
|
||||
this.planillas = response.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching planillas:', error);
|
||||
// Handle error (e.g., show a notification to the user)
|
||||
}
|
||||
},
|
||||
|
||||
async fetchPlanillaById(id) {
|
||||
try {
|
||||
const response = await apiClient.get(`/api/planillas/${id}`);
|
||||
this.currentPlanilla = response.data;
|
||||
} catch (error) {
|
||||
console.error(`Error fetching planilla with id ${id}:`, error);
|
||||
// Handle error
|
||||
}
|
||||
},
|
||||
|
||||
async createPlanilla(planillaData) {
|
||||
try {
|
||||
await apiClient.post('/api/planillas', planillaData);
|
||||
await this.fetchPlanillas(); // Refresh the list
|
||||
} catch (error) {
|
||||
console.error('Error creating planilla:', error);
|
||||
// Handle error
|
||||
}
|
||||
},
|
||||
|
||||
async updatePlanilla(id, planillaData) {
|
||||
try {
|
||||
await apiClient.put(`/api/planillas/${id}`, planillaData);
|
||||
await this.fetchPlanillas(); // Refresh the list
|
||||
this.currentPlanilla = { // Reset currentPlanilla
|
||||
id: null,
|
||||
fecha_desde: null,
|
||||
fecha_hasta: null,
|
||||
titulo: '',
|
||||
total: null,
|
||||
estado: 'pagado',
|
||||
fecha_anulado: null,
|
||||
empleado_id: null,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error(`Error updating planilla with id ${id}:`, error);
|
||||
// Handle error
|
||||
}
|
||||
},
|
||||
|
||||
async deletePlanilla(id) {
|
||||
try {
|
||||
await apiClient.delete(`/api/planillas/${id}`);
|
||||
await this.fetchPlanillas(); // Refresh the list
|
||||
} catch (error)
|
||||
{
|
||||
console.error(`Error deleting planilla with id ${id}:`, error);
|
||||
// Handle error
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,5 +1,80 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { defineStore } from 'pinia';
|
||||
import apiClient from '../apiClient'; // Assuming apiClient is configured
|
||||
|
||||
export const useTareas = defineStore('tareas', {
|
||||
state: () => ({ tareas: [] }),
|
||||
})
|
||||
// Helper function to get default values for currentTarea
|
||||
const getDefaultCurrentTarea = () => ({
|
||||
id: null,
|
||||
empleado_id: null,
|
||||
planilla_id: null, // Optional
|
||||
titulo: '',
|
||||
precio: null, // Optional
|
||||
estado: 'pendiente', // Default from schema
|
||||
observacion: '', // Optional
|
||||
fecha: null, // Should be a date
|
||||
tipo: '', // Default from schema
|
||||
// fecha_anulado is not typically part of creation/edit form directly
|
||||
});
|
||||
|
||||
export const useTareasStore = defineStore('tareas', {
|
||||
state: () => ({
|
||||
tareas: [],
|
||||
currentTarea: getDefaultCurrentTarea(),
|
||||
}),
|
||||
actions: {
|
||||
async fetchTareas() {
|
||||
try {
|
||||
const response = await apiClient.get('/api/tareas');
|
||||
this.tareas = response.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching tareas:', error);
|
||||
// Consider more sophisticated error handling (e.g., user notifications)
|
||||
}
|
||||
},
|
||||
|
||||
async fetchTareaById(id) {
|
||||
try {
|
||||
const response = await apiClient.get(`/api/tareas/${id}`);
|
||||
this.currentTarea = response.data;
|
||||
} catch (error) {
|
||||
console.error(`Error fetching tarea with id ${id}:`, error);
|
||||
this.currentTarea = getDefaultCurrentTarea(); // Reset on error
|
||||
}
|
||||
},
|
||||
|
||||
async createTarea(tareaData) {
|
||||
try {
|
||||
await apiClient.post('/api/tareas', tareaData);
|
||||
await this.fetchTareas(); // Refresh the list
|
||||
} catch (error) {
|
||||
console.error('Error creating tarea:', error);
|
||||
throw error; // Re-throw to allow form to handle it
|
||||
}
|
||||
},
|
||||
|
||||
async updateTarea(id, tareaData) {
|
||||
try {
|
||||
await apiClient.put(`/api/tareas/${id}`, tareaData);
|
||||
await this.fetchTareas(); // Refresh the list
|
||||
this.currentTarea = getDefaultCurrentTarea(); // Reset currentTarea
|
||||
} catch (error) {
|
||||
console.error(`Error updating tarea with id ${id}:`, error);
|
||||
throw error; // Re-throw to allow form to handle it
|
||||
}
|
||||
},
|
||||
|
||||
async deleteTarea(id) {
|
||||
try {
|
||||
await apiClient.delete(`/api/tareas/${id}`);
|
||||
await this.fetchTareas(); // Refresh the list
|
||||
} catch (error) {
|
||||
console.error(`Error deleting tarea with id ${id}:`, error);
|
||||
throw error; // Re-throw to allow handling in component
|
||||
}
|
||||
},
|
||||
|
||||
// Action to clear currentTarea, useful when navigating away from a form
|
||||
clearCurrentTarea() {
|
||||
this.currentTarea = getDefaultCurrentTarea();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user