132 lines
6.9 KiB
Vue
132 lines
6.9 KiB
Vue
<template>
|
|
<div class="p-4 sm:p-6 rounded-lg overflow-x-auto" :style="{ backgroundColor: ui.tableBgColorEmpleados }">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50 dark:bg-slate-700">
|
|
<tr>
|
|
<th scope="col" class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
|
|
Avatar
|
|
</th>
|
|
<th scope="col" class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
|
|
Nombre
|
|
</th>
|
|
<th scope="col" class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
|
|
Cédula
|
|
</th>
|
|
<th scope="col" class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
|
|
Teléfono
|
|
</th>
|
|
<th scope="col" class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
|
|
Ubicación
|
|
</th>
|
|
<th scope="col" class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
|
|
ID CIAT
|
|
</th>
|
|
<th scope="col" class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
|
|
Acciones
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
|
|
<tr v-if="!employees || employees.length === 0">
|
|
<td colspan="7" class="px-6 py-10 text-center text-gray-500 dark:text-slate-400 text-lg">
|
|
No hay empleados para mostrar.
|
|
</td>
|
|
</tr>
|
|
<tr v-for="employee in employees" :key="employee.id" class="transition-colors duration-150 ease-in-out hover:bg-[var(--accent-color-empleados)]/10 dark:hover:bg-[var(--accent-color-empleados)]/20">
|
|
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap">
|
|
<img
|
|
:src="employee.avatar_url || 'https://via.placeholder.com/40'"
|
|
alt="Avatar"
|
|
class="w-10 h-10 rounded-full object-cover border border-gray-300 shadow-sm"
|
|
/>
|
|
</td>
|
|
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
|
|
<div class="text-sm font-semibold text-gray-800 dark:text-slate-200">{{ employee.name }}</div>
|
|
<div v-if="employee.grupo_estudio" class="text-xs text-gray-500 dark:text-slate-400">
|
|
Grupo: {{ employee.grupo_estudio }}
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">
|
|
{{ employee.cedula }}
|
|
</td>
|
|
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">
|
|
{{ employee.telefono || '-' }}
|
|
</td>
|
|
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">
|
|
{{ employee.ubicacion }}
|
|
</td>
|
|
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">
|
|
{{ employee.idciat || '-' }}
|
|
</td>
|
|
<td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm font-medium">
|
|
<div class="flex items-center space-x-2">
|
|
<button @click="handleEdit(employee.id)" class="p-1.5 sm:p-2 rounded-md transition-all duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-600/20 focus:ring-blue-500 dark:focus:ring-blue-400" title="Editar Empleado">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /></svg>
|
|
</button>
|
|
<button @click="handleViewDetails(employee.id)" class="p-1.5 sm:p-2 rounded-md transition-all duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 hover:bg-green-100 dark:hover:bg-green-600/20 focus:ring-green-500 dark:focus:ring-green-400" title="Ver Detalles">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { PropType } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useUi } from '../../stores/useUi.js';
|
|
|
|
const ui = useUi();
|
|
|
|
// Interface for Employee object structure, aligning with prisma model (excluding sensitive or large fields for table view)
|
|
interface Employee {
|
|
id: string | number; // Primary key for navigation and :key
|
|
name: string;
|
|
cedula: number; // Assuming cedula is a number; adjust if it's a string
|
|
avatar_url?: string;
|
|
telefono?: string;
|
|
ubicacion: string; // As per schema, this has a default and likely always present
|
|
idciat?: string;
|
|
grupo_estudio?: string;
|
|
// Omitting created_at, updated_at, empleado boolean for brevity in table
|
|
}
|
|
|
|
const props = defineProps({
|
|
employees: {
|
|
type: Array as PropType<Employee[]>,
|
|
required: true,
|
|
default: () => [], // Provides a default empty array if no prop is passed
|
|
},
|
|
});
|
|
|
|
const router = useRouter();
|
|
|
|
const handleEdit = (employeeId: string | number) => {
|
|
router.push(`/empleados/edit/${employeeId}`);
|
|
};
|
|
|
|
const handleViewDetails = (employeeId: string | number) => {
|
|
// This could navigate to a dedicated detail view or the edit view itself
|
|
router.push(`/empleados/view/${employeeId}`); // Adjust route as per application structure
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Scoped styles can be minimized or removed if Tailwind covers all needs */
|
|
|
|
.rounded-full {
|
|
object-fit: cover; /* Ensures avatar images are displayed nicely */
|
|
}
|
|
|
|
/* Optional: Keep icon transition if not handled by Tailwind's transition utilities on the button */
|
|
button svg {
|
|
transition: transform 0.15s ease-in-out;
|
|
}
|
|
button:hover svg {
|
|
transform: scale(1.1); /* Adjusted scale for a subtler effect */
|
|
}
|
|
</style>
|