365bbbb89e
This commit updates the card components in all modules (Asistencias, Empleados, Planillas, Tareas) to use the same background color as you specified in the module's "Table Background" setting. Previously, card backgrounds were hardcoded (typically white). Now, they dynamically reflect your color choice for the corresponding module's table, ensuring visual consistency. Changes made: - Modified `cardAsistencia.vue`, `cardEmpleado.vue`, `cardPlanilla.vue`, and `cardTarea.vue`. - Each card component now imports the `useUi` store. - The main container of each card component has its `backgroundColor` style dynamically bound to the respective `tableBgColor<ModuleName>` property from the `useUi` store (e.g., `ui.tableBgColorAsistencias` for `cardAsistencia.vue`). - Removed the static `bg-white` class from these card components. This change directly addresses the issue where cards did not respect the color customization you selected in settings for table backgrounds.
120 lines
4.6 KiB
Vue
120 lines
4.6 KiB
Vue
<template>
|
|
<div :style="{ backgroundColor: ui.tableBgColorTareas }" class="shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col">
|
|
<div class="flex justify-between items-center mb-3 md:mb-4 pb-2 md:pb-3 border-b border-gray-100">
|
|
<h4 class="text-lg md:text-xl font-semibold" :style="{ color: 'var(--accent-color-tareas)' }">Tarea ID: {{ tarea.id }}</h4>
|
|
<span :class="['px-2 py-1 text-xs font-bold text-white rounded-full', getStatusClass(tarea.estado)]">
|
|
{{ tarea.estado || 'N/A' }}
|
|
</span>
|
|
</div>
|
|
<div class="text-sm text-gray-700 space-y-2">
|
|
<p><strong class="font-medium text-gray-900">Título:</strong> {{ tarea.titulo }}</p>
|
|
<p><strong class="font-medium text-gray-900">Empleado ID:</strong> {{ tarea.empleado_id }}</p>
|
|
<p><strong class="font-medium text-gray-900">Fecha:</strong> {{ formatDate(tarea.fecha) }}</p>
|
|
<p><strong class="font-medium text-gray-900">Tipo:</strong> {{ tarea.tipo || 'N/A' }}</p>
|
|
<p v-if="tarea.precio != null"><strong class="font-medium text-gray-900">Precio:</strong> {{ formatCurrency(tarea.precio) }}</p>
|
|
<p v-if="tarea.observacion" class="italic text-gray-600 bg-gray-50 p-2 border-l-3 rounded" :style="{ borderColor: 'var(--accent-color-tareas)' }">
|
|
<strong class="font-medium text-gray-900">Observación:</strong> {{ tarea.observacion }}
|
|
</p>
|
|
</div>
|
|
<div class="mt-auto pt-3 md:pt-4 flex justify-end space-x-2 md:space-x-3">
|
|
<button
|
|
@click="editTarea"
|
|
class="px-3 py-1 md:px-4 md:py-2 text-xs md:text-sm font-medium rounded-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 text-white"
|
|
:style="{ backgroundColor: 'var(--accent-color-tareas)', borderColor: 'var(--accent-color-tareas)' }"
|
|
@mouseover="buttonHover($event, true)"
|
|
@mouseleave="buttonHover($event, false)"
|
|
:class="`focus:ring-[var(--accent-color-tareas)]`"
|
|
>Editar</button>
|
|
<button
|
|
@click="confirmDeleteTarea"
|
|
class="px-3 py-1 md:px-4 md:py-2 text-xs md:text-sm font-medium rounded-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 bg-red-600 hover:bg-red-700 text-white focus:ring-red-500"
|
|
>Eliminar</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits } from 'vue';
|
|
import { useTareasStore } from '../../stores/useTareas';
|
|
import { useUi } from '../../stores/useUi.js';
|
|
|
|
const ui = useUi();
|
|
|
|
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.toLocaleString('es-HN', { timeZone: 'America/Tegucigalpa', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' });
|
|
};
|
|
|
|
const formatCurrency = (value) => {
|
|
if (value == null) return '';
|
|
return Number(value).toLocaleString('es-PY', {
|
|
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}" (ID: ${props.tarea.id})?`)) {
|
|
deleteTareaInternal();
|
|
}
|
|
};
|
|
|
|
const deleteTareaInternal = async () => {
|
|
try {
|
|
await tareasStore.deleteTarea(props.tarea.id);
|
|
} catch (error) {
|
|
console.error('Error deleting tarea:', error);
|
|
alert('Ocurrió un error al eliminar la tarea. Por favor, intente de nuevo.');
|
|
}
|
|
};
|
|
|
|
const getStatusClass = (status) => {
|
|
if (!status) return 'bg-gray-400';
|
|
const statusNormalized = status.toLowerCase().replace(/\s+/g, '-');
|
|
switch (statusNormalized) {
|
|
case 'pendiente': return 'bg-yellow-500 text-gray-800';
|
|
case 'realizada':
|
|
case 'completada':
|
|
case 'hecho': return 'bg-green-500';
|
|
case 'en-progreso': return 'bg-blue-500';
|
|
case 'anulada':
|
|
case 'cancelada': return 'bg-red-500';
|
|
case 'archivada': return 'bg-gray-500';
|
|
default: return 'bg-gray-400';
|
|
}
|
|
};
|
|
|
|
const buttonHover = (event, isHovering) => {
|
|
if (isHovering) {
|
|
event.target.style.filter = 'brightness(90%)';
|
|
} else {
|
|
event.target.style.filter = 'brightness(100%)';
|
|
}
|
|
};
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Minimal scoped styles, mainly for complex status colors if not handled by Tailwind directly */
|
|
/* Or for :style bindings if preferred for dynamic properties like accent colors */
|
|
.border-l-3 {
|
|
border-left-width: 3px;
|
|
}
|
|
</style>
|