courses #7
@ -48,6 +48,11 @@ onMounted(() => {
|
||||
name="Vacaciones"
|
||||
to="vacations.index"
|
||||
/>
|
||||
<Link
|
||||
icon="info"
|
||||
name="Cursos"
|
||||
to="courses.index"
|
||||
/>
|
||||
<Link
|
||||
icon="person"
|
||||
name="Perfil"
|
||||
|
||||
93
src/pages/Courses/Employee/Index.vue
Normal file
93
src/pages/Courses/Employee/Index.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useSearcher } from '@Services/Api';
|
||||
import { apiTo } from './Module'
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.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';
|
||||
|
||||
/** Propiedades */
|
||||
const models = ref([]);
|
||||
|
||||
/** Referencias */
|
||||
const showModal = ref(false);
|
||||
|
||||
/** Métodos */
|
||||
const searcher = useSearcher({
|
||||
url: apiTo('index'),
|
||||
onSuccess: (r) => models.value = r.models,
|
||||
onError: () => models.value = []
|
||||
});
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
searcher.search();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Header -->
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<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>
|
||||
|
||||
<!-- Search Card -->
|
||||
<div class="pt-2 w-full">
|
||||
<Searcher @search="(x) => searcher.search(x)">
|
||||
</Searcher>
|
||||
</div>
|
||||
|
||||
<!-- 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('name')" />
|
||||
<th v-text="$t('url')" />
|
||||
<th class="w-32 text-center" v-text="$t('actions')" />
|
||||
</template>
|
||||
|
||||
<template #body="{ items }">
|
||||
<tr v-for="model in items" class="table-row">
|
||||
<td>{{ model.course.name }}</td>
|
||||
<td>
|
||||
<a
|
||||
v-if="model.course.url"
|
||||
:href="model.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>
|
||||
<span v-else>-</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="table-actions">
|
||||
<IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model.course)"
|
||||
outline />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
|
||||
<ShowView ref="showModal" />
|
||||
</div>
|
||||
</template>
|
||||
114
src/pages/Courses/Employee/Modals/Show.vue
Normal file
114
src/pages/Courses/Employee/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/Employee/Module.js
Normal file
21
src/pages/Courses/Employee/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.employee.${name}`, params)
|
||||
|
||||
// Ruta visual
|
||||
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `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
|
||||
}
|
||||
@ -58,6 +58,15 @@ const router = createRouter({
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'courses',
|
||||
name: 'courses.index',
|
||||
meta: {
|
||||
title: 'Cursos',
|
||||
icon: 'info',
|
||||
},
|
||||
component: () => import('@Pages/Courses/Employee/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'profile',
|
||||
name: 'profile.show',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user