Gestion y Asignacion de cursos
This commit is contained in:
parent
1fef53f558
commit
d30de7bec2
@ -133,11 +133,18 @@ export default {
|
||||
title:'Historial de cambios',
|
||||
description: 'Lista de los cambios realizados al sistema.',
|
||||
},
|
||||
certification_name: 'Nombre de certificación',
|
||||
certification_type: 'Tipo de certificación',
|
||||
clear: 'Limpiar',
|
||||
close:"Cerrar",
|
||||
confirm:'Confirmar',
|
||||
copyright:'Todos los derechos reservados.',
|
||||
contact:'Contacto',
|
||||
cost: 'Costo',
|
||||
courses: {
|
||||
title: 'Cursos',
|
||||
description: 'Gestión de cursos de capacitación'
|
||||
},
|
||||
create: 'Crear',
|
||||
created: 'Registro creado',
|
||||
created_at: 'Fecha creación',
|
||||
@ -174,6 +181,7 @@ export default {
|
||||
degreeType: 'Tipo de grado',
|
||||
deleted:'Registro eliminado',
|
||||
description:'Descripción',
|
||||
duration: 'Duración',
|
||||
details:'Detalles',
|
||||
disable:'Deshabilitar',
|
||||
disabled:'Deshabilitado',
|
||||
@ -184,6 +192,7 @@ export default {
|
||||
title:'Correo',
|
||||
verification:'Verificar correo'
|
||||
},
|
||||
exam_date: 'Fecha de examen',
|
||||
employees: {
|
||||
create: {
|
||||
title: 'Crear empleado',
|
||||
@ -400,6 +409,7 @@ export default {
|
||||
updated_at:'Fecha actualización',
|
||||
updateFail:'Error al actualizar',
|
||||
unreaded:'No leído',
|
||||
url: 'URL',
|
||||
user:'Usuario',
|
||||
users:{
|
||||
academic: {
|
||||
|
||||
@ -88,11 +88,6 @@ onMounted(() => {
|
||||
name="Solicitud de Cursos"
|
||||
to="admin.courses.request"
|
||||
/>
|
||||
<Link
|
||||
icon="grid_view"
|
||||
name="Asignación de Cursos"
|
||||
to="admin.courses.assignamment"
|
||||
/>
|
||||
<Link
|
||||
icon="grid_view"
|
||||
name="Calendario de Cursos"
|
||||
|
||||
@ -51,7 +51,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 max-w-auto mx-auto">
|
||||
<div>
|
||||
<!-- Página: Header principal -->
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
|
||||
@ -1,281 +1,218 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { ref, computed, onMounted, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { apiTo, viewTo } from './Module';
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Input from '@Holos/Form/Input.vue';
|
||||
import PageHeader from '@Holos/PageHeader.vue';
|
||||
import IconButton from '@Holos/Button/Icon.vue';
|
||||
|
||||
// Datos de cursos aprobados
|
||||
const approvedCourses = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: 'React Avanzado y GraphQL',
|
||||
area: 'Desarrollo',
|
||||
cost: 499.00
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Certified Ethical Hacker (CEH)',
|
||||
area: 'Seguridad',
|
||||
cost: 1199.00
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Cisco CCNA 200-301',
|
||||
area: 'Redes',
|
||||
cost: 300.00
|
||||
}
|
||||
]);
|
||||
/** Definiciones */
|
||||
const router = useRouter();
|
||||
const vroute = useRoute();
|
||||
|
||||
// Lista de personal
|
||||
const personnel = ref([
|
||||
{ id: 1, name: 'Ana García', selected: false },
|
||||
{ id: 2, name: 'Carlos Mendoza', selected: false },
|
||||
{ id: 3, name: 'Laura Jiménez', selected: false },
|
||||
{ id: 4, name: 'Luis Martínez', selected: false },
|
||||
{ id: 5, name: 'Carla Torres', selected: false },
|
||||
{ id: 6, name: 'Pedro Ramírez', selected: false }
|
||||
]);
|
||||
|
||||
// Estado del formulario
|
||||
const selectedCourse = ref(approvedCourses.value[0]);
|
||||
const startDate = ref('');
|
||||
const endDate = ref('');
|
||||
const examDate = ref('');
|
||||
const showDropdown = ref(false);
|
||||
|
||||
// Computed para mostrar el curso seleccionado
|
||||
const selectedCourseDisplay = computed(() => {
|
||||
if (selectedCourse.value) {
|
||||
return `${selectedCourse.value.name} (${selectedCourse.value.area})`;
|
||||
}
|
||||
return 'Seleccionar curso...';
|
||||
/** Propiedades */
|
||||
const form = useForm({
|
||||
users: [],
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
exam_date: '',
|
||||
});
|
||||
|
||||
// Computed para contar personal seleccionado
|
||||
const selectedPersonnelCount = computed(() => {
|
||||
return personnel.value.filter(p => p.selected).length;
|
||||
const course = ref(null);
|
||||
const users = ref([]);
|
||||
|
||||
// Computed para contar usuarios seleccionados
|
||||
const selectedUsersCount = computed(() => {
|
||||
return users.value.filter(u => u.selected).length;
|
||||
});
|
||||
|
||||
// Funciones
|
||||
const togglePersonnel = (person) => {
|
||||
person.selected = !person.selected;
|
||||
const toggleUser = (user) => {
|
||||
user.selected = !user.selected;
|
||||
};
|
||||
|
||||
const selectAllPersonnel = () => {
|
||||
const allSelected = personnel.value.every(p => p.selected);
|
||||
personnel.value.forEach(p => p.selected = !allSelected);
|
||||
const selectAllUsers = () => {
|
||||
const allSelected = users.value.every(u => u.selected);
|
||||
users.value.forEach(u => u.selected = !allSelected);
|
||||
};
|
||||
|
||||
const selectCourse = (course) => {
|
||||
selectedCourse.value = course;
|
||||
showDropdown.value = false;
|
||||
// Función para calcular la fecha final del curso
|
||||
const calculateEndDate = () => {
|
||||
if (form.start_date && course.value?.duration) {
|
||||
const startDate = new Date(form.start_date);
|
||||
const duration = parseInt(course.value.duration);
|
||||
|
||||
// Agregar la duración en días a la fecha de inicio
|
||||
const endDate = new Date(startDate);
|
||||
endDate.setDate(startDate.getDate() + duration);
|
||||
|
||||
// Formatear la fecha como YYYY-MM-DD para el input
|
||||
const formattedDate = endDate.toISOString().split('T')[0];
|
||||
form.end_date = formattedDate;
|
||||
}
|
||||
};
|
||||
|
||||
const saveAssignment = () => {
|
||||
const selectedPersonnelList = personnel.value.filter(p => p.selected);
|
||||
console.log('Guardar asignación:', {
|
||||
course: selectedCourse.value,
|
||||
personnel: selectedPersonnelList,
|
||||
startDate: startDate.value,
|
||||
endDate: endDate.value,
|
||||
examDate: examDate.value
|
||||
// Watcher para calcular automáticamente la fecha final cuando cambie la fecha de inicio
|
||||
watch(() => form.start_date, () => {
|
||||
calculateEndDate();
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
form.transform(data => ({
|
||||
...data,
|
||||
users: form.users = users.value.map(u => u.id)
|
||||
})).post(apiTo('assign-course', { course: vroute.params.id }), {
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('register.assign.onSuccess'))
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
}
|
||||
});
|
||||
// Aquí implementarías la lógica para guardar
|
||||
};
|
||||
|
||||
const notifyPersonnel = () => {
|
||||
const selectedPersonnelList = personnel.value.filter(p => p.selected);
|
||||
console.log('Notificar personal:', {
|
||||
course: selectedCourse.value,
|
||||
personnel: selectedPersonnelList
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
api.get(apiTo('show', { course: vroute.params.id }), {
|
||||
onSuccess: (r) => {
|
||||
course.value = r.course
|
||||
|
||||
api.catalog({
|
||||
'user:byDepartment': r.course.department?.id || null
|
||||
}, {
|
||||
onSuccess: (r) => users.value = r['user:byDepartment'] ?? []
|
||||
});
|
||||
}
|
||||
});
|
||||
// Aquí implementarías la lógica para notificar
|
||||
};
|
||||
|
||||
const formatCurrency = (amount) => {
|
||||
return new Intl.NumberFormat('es-MX', {
|
||||
style: 'currency',
|
||||
currency: 'USD'
|
||||
}).format(amount);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 max-w-auto mx-auto">
|
||||
<!-- Header -->
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Asignación de Cursos a Personal</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Asigna cursos aprobados al personal seleccionado</p>
|
||||
<PageHeader
|
||||
title="Asignación de Cursos a Personal"
|
||||
>
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<IconButton
|
||||
class="text-white"
|
||||
icon="arrow_back"
|
||||
:title="$t('return')"
|
||||
filled
|
||||
/>
|
||||
</RouterLink>
|
||||
</PageHeader>
|
||||
|
||||
<div class="w-full pb-2">
|
||||
<p class="text-justify text-sm">Asigna cursos aprobados al personal seleccionado</p>
|
||||
</div>
|
||||
|
||||
<!-- Card principal -->
|
||||
<section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
|
||||
<!-- Información del Curso -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||
Curso Seleccionado
|
||||
</label>
|
||||
|
||||
<div v-if="course" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg dark:bg-primary-d dark:border-primary/20">
|
||||
<div class="font-medium text-gray-900 dark:text-primary-dt">{{ course.name }}</div>
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">
|
||||
{{ course.department?.name }} • {{ course.cost }} {{ course.cost_currency }}
|
||||
</div>
|
||||
<div v-if="course.description" class="text-sm text-gray-600 dark:text-primary-dt/80 mt-1">
|
||||
{{ course.description }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg dark:bg-primary-d dark:border-primary/20">
|
||||
<div class="text-gray-500 dark:text-primary-dt/70">Cargando información del curso...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card principal -->
|
||||
<section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
|
||||
<!-- Selección de Curso -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||
Seleccionar Curso Aprobado
|
||||
<!-- Asignación de Usuarios -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt">
|
||||
Asignar a usuarios
|
||||
</label>
|
||||
|
||||
<div class="relative">
|
||||
<button
|
||||
@click="showDropdown = !showDropdown"
|
||||
class="w-full px-4 py-3 text-left bg-white border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||
>
|
||||
<span class="block truncate">{{ selectedCourseDisplay }}</span>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@click="selectAllUsers"
|
||||
class="text-sm text-[#2563eb] hover:text-[#1e40af] font-medium"
|
||||
>
|
||||
{{ users.every(u => u.selected) ? 'Deseleccionar todo' : 'Seleccionar todo' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Dropdown -->
|
||||
<div
|
||||
v-if="showDropdown"
|
||||
class="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-primary-d dark:border-primary/20"
|
||||
<div class="border border-gray-300 rounded-lg p-4 max-h-48 overflow-y-auto dark:bg-primary-d dark:border-primary/20">
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
@click="toggleUser(user)"
|
||||
class="flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors"
|
||||
>
|
||||
<div class="max-h-60 overflow-auto">
|
||||
<div
|
||||
v-for="course in approvedCourses"
|
||||
:key="course.id"
|
||||
@click="selectCourse(course)"
|
||||
class="px-4 py-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-primary/10 border-b border-gray-100 dark:border-primary/20 last:border-b-0"
|
||||
<div class="flex items-center h-5">
|
||||
<input
|
||||
:checked="user.selected"
|
||||
type="checkbox"
|
||||
class="w-4 h-4 text-[#2563eb] bg-gray-100 border-gray-300 rounded focus:ring-[#2563eb] dark:focus:ring-[#2563eb] dark:ring-offset-gray-800 focus:ring-2 dark:bg-primary-d dark:border-primary/20"
|
||||
@click.stop
|
||||
@change="toggleUser(user)"
|
||||
>
|
||||
<div class="font-medium text-gray-900 dark:text-primary-dt">{{ course.name }}</div>
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">
|
||||
{{ course.area }} • {{ formatCurrency(course.cost) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label class="font-medium text-gray-900 dark:text-primary-dt cursor-pointer">
|
||||
{{ user.name }} {{ user.paternal }} {{ user.maternal }}
|
||||
</label>
|
||||
<div class="text-xs text-gray-500 dark:text-primary-dt/70">
|
||||
{{ user.email }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asignación de Personal -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt">
|
||||
Asignar a personal
|
||||
</label>
|
||||
<button
|
||||
@click="selectAllPersonnel"
|
||||
class="text-sm text-[#2563eb] hover:text-[#1e40af] font-medium"
|
||||
>
|
||||
{{ personnel.every(p => p.selected) ? 'Deseleccionar todo' : 'Seleccionar todo' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-300 rounded-lg p-4 max-h-48 overflow-y-auto dark:bg-primary-d dark:border-primary/20">
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
v-for="person in personnel"
|
||||
:key="person.id"
|
||||
@click="togglePersonnel(person)"
|
||||
class="flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors"
|
||||
>
|
||||
<div class="flex items-center h-5">
|
||||
<input
|
||||
:checked="person.selected"
|
||||
type="checkbox"
|
||||
class="w-4 h-4 text-[#2563eb] bg-gray-100 border-gray-300 rounded focus:ring-[#2563eb] dark:focus:ring-[#2563eb] dark:ring-offset-gray-800 focus:ring-2 dark:bg-primary-d dark:border-primary/20"
|
||||
@click.stop
|
||||
@change="togglePersonnel(person)"
|
||||
>
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label class="font-medium text-gray-900 dark:text-primary-dt cursor-pointer">
|
||||
{{ person.name }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
|
||||
{{ selectedPersonnelCount }} persona(s) seleccionada(s)
|
||||
</div>
|
||||
<div class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
|
||||
{{ selectedUsersCount }} usuario(s) seleccionado(s)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fechas -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||
<!-- Fecha de Inicio -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||
Fecha de Inicio
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
v-model="startDate"
|
||||
type="date"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||
>
|
||||
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
||||
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fechas -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||
<Input
|
||||
v-model="form.start_date"
|
||||
id="start_date"
|
||||
title="dates.start"
|
||||
type="date"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.end_date"
|
||||
id="end_date"
|
||||
title="dates.end"
|
||||
type="date"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.exam_date"
|
||||
id="exam_date"
|
||||
title="exam_date"
|
||||
type="date"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Fecha de Fin -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||
Fecha de Fin
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
v-model="endDate"
|
||||
type="date"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||
>
|
||||
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
||||
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Botones de Acción -->
|
||||
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-100 dark:border-primary/20">
|
||||
|
||||
<!-- Fecha de Examen -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||
Fecha de Examen
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
v-model="examDate"
|
||||
type="date"
|
||||
class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||
>
|
||||
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
||||
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@click="submit"
|
||||
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#7c3aed] hover:bg-[#6d28d9] text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:ring-offset-2"
|
||||
>
|
||||
<GoogleIcon class="text-white text-xl" name="notifications" />
|
||||
Notificar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Botones de Acción -->
|
||||
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-100 dark:border-primary/20">
|
||||
<button
|
||||
@click="saveAssignment"
|
||||
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-300 bg-white text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt dark:hover:bg-primary/10"
|
||||
>
|
||||
<GoogleIcon class="text-gray-600 dark:text-primary-dt text-xl" name="save" />
|
||||
Guardar
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="notifyPersonnel"
|
||||
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#7c3aed] hover:bg-[#6d28d9] text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:ring-offset-2"
|
||||
>
|
||||
<GoogleIcon class="text-white text-xl" name="notifications" />
|
||||
Notificar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@ -1,187 +1,124 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useSearcher } from '@Services/Api';
|
||||
import { apiTo, viewTo } from './Module'
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import DestroyView from '@Holos/Modal/Template/Destroy.vue';
|
||||
import Table from '@Holos/NewTable.vue';
|
||||
import ShowView from './Modals/Show.vue';
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Searcher from '@Holos/Searcher.vue';
|
||||
|
||||
// Datos de ejemplo de los cursos
|
||||
const courses = ref([
|
||||
{
|
||||
id: 1,
|
||||
area: 'Desarrollo',
|
||||
courseName: 'React Avanzado y GraphQL',
|
||||
unitCost: 499.00,
|
||||
url: 'https://example.com/react-avanzado',
|
||||
status: 'pending'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
area: 'Seguridad',
|
||||
courseName: 'Certified Ethical Hacker (CEH)',
|
||||
unitCost: 1199.00,
|
||||
url: 'https://example.com/ceh',
|
||||
status: 'pending'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
area: 'Redes',
|
||||
courseName: 'Cisco CCNA 200-301',
|
||||
unitCost: 300.00,
|
||||
url: 'https://example.com/ccna',
|
||||
status: 'pending'
|
||||
}
|
||||
]);
|
||||
/** Propiedades */
|
||||
const models = ref([]);
|
||||
|
||||
// Funciones para las acciones
|
||||
const viewCourse = (course) => {
|
||||
console.log('Ver curso:', course.courseName);
|
||||
// Aquí puedes implementar la lógica para ver el curso
|
||||
};
|
||||
/** Referencias */
|
||||
const showModal = ref(false);
|
||||
const destroyModal = ref(false);
|
||||
|
||||
const approveCourse = (course) => {
|
||||
console.log('Aprobar curso:', course.courseName);
|
||||
course.status = 'approved';
|
||||
// Aquí puedes implementar la lógica para aprobar el curso
|
||||
};
|
||||
/** Métodos */
|
||||
const searcher = useSearcher({
|
||||
url: apiTo('index'),
|
||||
onSuccess: (r) => models.value = r.models,
|
||||
onError: () => models.value = []
|
||||
});
|
||||
|
||||
const rejectCourse = (course) => {
|
||||
console.log('Rechazar curso:', course.courseName);
|
||||
course.status = 'rejected';
|
||||
// Aquí puedes implementar la lógica para rechazar el curso
|
||||
};
|
||||
|
||||
const formatCurrency = (amount) => {
|
||||
return new Intl.NumberFormat('es-MX', {
|
||||
style: 'currency',
|
||||
currency: 'USD'
|
||||
}).format(amount);
|
||||
};
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
searcher.search();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 max-w-auto mx-auto">
|
||||
<!-- Header -->
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Gestión de Solicitudes de Capacitación</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Administra y aprueba las solicitudes de cursos de capacitación</p>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('courses.title') }}</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('courses.description') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card principal con tabla -->
|
||||
<section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
||||
<!-- Tabla de cursos -->
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-100 dark:border-primary/20">
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Área</th>
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Nombre del Curso</th>
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Costo Unitario</th>
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Url</th>
|
||||
<th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Opciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="course in courses"
|
||||
:key="course.id"
|
||||
class="border-b border-gray-50 dark:border-primary/10 hover:bg-gray-50 dark:hover:bg-primary/5"
|
||||
>
|
||||
<!-- Área -->
|
||||
<td class="py-4 px-4">
|
||||
<span class="inline-block bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">
|
||||
{{ course.area }}
|
||||
</span>
|
||||
</td>
|
||||
<!-- Search Card -->
|
||||
<div class="pt-2 w-full">
|
||||
<Searcher @search="(x) => searcher.search(x)">
|
||||
</Searcher>
|
||||
</div>
|
||||
|
||||
<!-- Nombre del curso -->
|
||||
<td class="py-4 px-4">
|
||||
<div class="font-medium text-gray-900 dark:text-primary-dt">
|
||||
{{ course.courseName }}
|
||||
</div>
|
||||
</td>
|
||||
<!-- List Card -->
|
||||
<div class="pt-2 w-full">
|
||||
<Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
|
||||
<template #head>
|
||||
<th v-text="$t('department')" />
|
||||
<th v-text="$t('name')" />
|
||||
<th v-text="$t('cost')" />
|
||||
<th v-text="$t('url')" />
|
||||
<th v-text="$t('status')" />
|
||||
<th class="w-32 text-center" v-text="$t('actions')" />
|
||||
</template>
|
||||
|
||||
<!-- Costo unitario -->
|
||||
<td class="py-4 px-4">
|
||||
<div class="text-lg font-bold text-[#2563eb] dark:text-primary-dt">
|
||||
{{ formatCurrency(course.unitCost) }}
|
||||
</div>
|
||||
</td>
|
||||
<template #body="{ items }">
|
||||
<tr v-for="model in items" class="table-row">
|
||||
<td>
|
||||
<span class="inline-block bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">
|
||||
{{ model.department.name }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ model.name }}</td>
|
||||
<td>{{ model.cost }} {{ model.currency }}</td>
|
||||
<td>
|
||||
<a
|
||||
v-if="model.url"
|
||||
:href="model.url"
|
||||
target="_blank"
|
||||
class="text-blue-600 hover:text-blue-800 underline text-sm dark:text-blue-400 dark:hover:text-blue-300"
|
||||
>
|
||||
Ver curso
|
||||
</a>
|
||||
<span v-else>-</span>
|
||||
</td>
|
||||
<td class="py-6">
|
||||
<span
|
||||
class="inline-block px-3 py-1 rounded-full text-xs font-semibold"
|
||||
:class="{
|
||||
'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': model.status === 'pending',
|
||||
'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status === 'approved',
|
||||
'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status === 'rejected'
|
||||
}">
|
||||
{{ model.status_ek }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="table-actions">
|
||||
<IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
|
||||
outline />
|
||||
<RouterLink class="h-fit"
|
||||
:to="viewTo({ name: 'assignamment', params: { id: model.id } })">
|
||||
<IconButton icon="task_alt" :title="$t('crud.approve')" outline />
|
||||
</RouterLink>
|
||||
<IconButton icon="delete" :title="$t('crud.destroy')"
|
||||
@click="destroyModal.open(model)" outline />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<!-- URL -->
|
||||
<td class="py-4 px-4">
|
||||
<a
|
||||
:href="course.url"
|
||||
target="_blank"
|
||||
class="text-blue-600 hover:text-blue-800 underline text-sm dark:text-blue-400 dark:hover:text-blue-300"
|
||||
>
|
||||
Ver curso
|
||||
</a>
|
||||
</td>
|
||||
<template #empty>
|
||||
<td colspan="6" class="py-12 text-center">
|
||||
<div class="text-gray-500 dark:text-primary-dt/70">
|
||||
<GoogleIcon name="school" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
|
||||
<p class="text-lg font-medium">No se encontraron cursos</p>
|
||||
<p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<!-- Opciones -->
|
||||
<td class="py-4 px-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Botón Ver -->
|
||||
<button
|
||||
@click="viewCourse(course)"
|
||||
class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors dark:text-primary-dt/70 dark:hover:text-primary-dt dark:hover:bg-primary/10"
|
||||
title="Ver detalles"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<ShowView ref="showModal" />
|
||||
|
||||
<!-- Botón Aprobar -->
|
||||
<button
|
||||
@click="approveCourse(course)"
|
||||
class="p-2 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors dark:text-primary-dt/70 dark:hover:text-green-400 dark:hover:bg-green-900/20"
|
||||
title="Aprobar curso"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Botón Rechazar -->
|
||||
<button
|
||||
@click="rejectCourse(course)"
|
||||
class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors dark:text-primary-dt/70 dark:hover:text-red-400 dark:hover:bg-red-900/20"
|
||||
title="Rechazar curso"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Footer con estadísticas -->
|
||||
<div class="mt-6 border-t border-gray-100 pt-4 flex items-center justify-between dark:border-primary/20">
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">
|
||||
Mostrando {{ courses.length }} solicitudes
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<span class="w-3 h-3 bg-yellow-400 rounded-full"></span>
|
||||
<span class="text-gray-600 dark:text-primary-dt/70">Pendientes: {{ courses.filter(c => c.status === 'pending').length }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<span class="w-3 h-3 bg-green-400 rounded-full"></span>
|
||||
<span class="text-gray-600 dark:text-primary-dt/70">Aprobadas: {{ courses.filter(c => c.status === 'approved').length }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<span class="w-3 h-3 bg-red-400 rounded-full"></span>
|
||||
<span class="text-gray-600 dark:text-primary-dt/70">Rechazadas: {{ courses.filter(c => c.status === 'rejected').length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<DestroyView ref="destroyModal" subtitle="certification_type"
|
||||
:to="(course) => apiTo('destroy', { course })" @update="searcher.search()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
114
src/pages/Courses/Modals/Show.vue
Normal file
114
src/pages/Courses/Modals/Show.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { getDateTime } from '@Controllers/DateController';
|
||||
|
||||
import Header from '@Holos/Modal/Elements/Header.vue';
|
||||
import ShowModal from '@Holos/Modal/Show.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits([
|
||||
'close',
|
||||
'reload'
|
||||
]);
|
||||
|
||||
/** Propiedades */
|
||||
const model = ref(null);
|
||||
|
||||
/** Referencias */
|
||||
const modalRef = ref(null);
|
||||
|
||||
/** Métodos */
|
||||
function close() {
|
||||
model.value = null;
|
||||
|
||||
emit('close');
|
||||
}
|
||||
|
||||
/** Exposiciones */
|
||||
defineExpose({
|
||||
open: (data) => {
|
||||
model.value = data;
|
||||
modalRef.value.open();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ShowModal
|
||||
ref="modalRef"
|
||||
@close="close"
|
||||
>
|
||||
<div v-if="model">
|
||||
<Header
|
||||
:title="model.name"
|
||||
:subtitle="model.certification_type"
|
||||
>
|
||||
</Header>
|
||||
<div class="flex w-full p-4">
|
||||
<GoogleIcon
|
||||
class="text-xl text-success"
|
||||
name="school"
|
||||
/>
|
||||
<div class="pl-3">
|
||||
<p class="font-bold text-lg leading-none pb-2">
|
||||
{{ $t('details') }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('name') }}: </b>
|
||||
{{ model.name }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('certification_type') }}: </b>
|
||||
{{ model.certification_type ?? '-' }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('cost') }}: </b>
|
||||
{{ model.cost }} {{ model.cost_currency }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('duration') }}: </b>
|
||||
{{ model.duration ?? '-' }} días
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('description') }}: </b>
|
||||
{{ model.description ?? '-' }}
|
||||
</p>
|
||||
<p v-if="model.url">
|
||||
<b>{{ $t('url') }}: </b>
|
||||
<a :href="model.url" target="_blank" class="text-blue-600 hover:text-blue-800 underline">
|
||||
{{ model.url }}
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('certification_name') }}: </b>
|
||||
{{ model.certification_name ?? '-' }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('status') }}: </b>
|
||||
<span class="inline-block px-3 py-1 rounded-full text-xs font-semibold"
|
||||
:class="{
|
||||
'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': model.status_ek === 'Pendiente',
|
||||
'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status_ek === 'Aprobado',
|
||||
'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status_ek === 'Rechazado'
|
||||
}">
|
||||
{{ model.status_ek }}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('department') }}: </b>
|
||||
{{ model.department?.name ?? '-' }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('created_at') }}: </b>
|
||||
{{ getDateTime(model.created_at) }}
|
||||
</p>
|
||||
<p>
|
||||
<b>{{ $t('updated_at') }}: </b>
|
||||
{{ getDateTime(model.updated_at) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ShowModal>
|
||||
</template>
|
||||
21
src/pages/Courses/Module.js
Normal file
21
src/pages/Courses/Module.js
Normal file
@ -0,0 +1,21 @@
|
||||
import { lang } from '@Lang/i18n';
|
||||
import { hasPermission } from '@Plugins/RolePermission.js';
|
||||
|
||||
// Ruta API
|
||||
const apiTo = (name, params = {}) => route(`courses.admin.${name}`, params)
|
||||
|
||||
// Ruta visual
|
||||
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.courses.${name}`, params, query })
|
||||
|
||||
// Obtener traducción del componente
|
||||
const transl = (str) => lang(`courses.${str}`)
|
||||
|
||||
// Determina si un usuario puede hacer algo no en base a los permisos
|
||||
const can = (permission) => hasPermission(`courses.${permission}`)
|
||||
|
||||
export {
|
||||
can,
|
||||
viewTo,
|
||||
apiTo,
|
||||
transl
|
||||
}
|
||||
@ -172,7 +172,7 @@ const router = createRouter({
|
||||
component: () => import('@Pages/Courses/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'assignamment',
|
||||
path: ':id/assignamment',
|
||||
name: 'admin.courses.assignamment',
|
||||
component: () => import('@Pages/Courses/Assignamment.vue'),
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user