Cursos coordinador
This commit is contained in:
parent
d30de7bec2
commit
bc71bf62e2
@ -155,6 +155,7 @@ export default {
|
||||
show: 'Más detalles',
|
||||
import: 'Importación'
|
||||
},
|
||||
currency: 'Moneda',
|
||||
dashboard: 'Dashboard',
|
||||
date: 'Fecha',
|
||||
date_expiration: 'Fecha de expiración',
|
||||
|
||||
@ -83,11 +83,6 @@ onMounted(() => {
|
||||
to="admin.courses.index"
|
||||
:collapsed="true"
|
||||
>
|
||||
<Link
|
||||
icon="grid_view"
|
||||
name="Solicitud de Cursos"
|
||||
to="admin.courses.request"
|
||||
/>
|
||||
<Link
|
||||
icon="grid_view"
|
||||
name="Calendario de Cursos"
|
||||
|
||||
@ -48,6 +48,11 @@ onMounted(() => {
|
||||
name="Vacaciones"
|
||||
to="vacations.coordinator.index"
|
||||
/>
|
||||
<Link
|
||||
icon="info"
|
||||
name="Solicitud de Cursos"
|
||||
to="courses.coordinator.index"
|
||||
/>
|
||||
</Section>
|
||||
<Section
|
||||
:name="$t('admin.title')"
|
||||
|
||||
@ -137,6 +137,7 @@ onMounted(() => {
|
||||
Asignar a usuarios
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
@click="selectAllUsers"
|
||||
class="text-sm text-[#2563eb] hover:text-[#1e40af] font-medium"
|
||||
>
|
||||
@ -62,12 +62,12 @@ onMounted(() => {
|
||||
<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">
|
||||
<span class="inline-block bg-blue-100 text-blue-800 text-sm 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>{{ model.cost }} {{ model.cost_currency }}</td>
|
||||
<td>
|
||||
<a
|
||||
v-if="model.url"
|
||||
@ -81,11 +81,11 @@ onMounted(() => {
|
||||
</td>
|
||||
<td class="py-6">
|
||||
<span
|
||||
class="inline-block px-3 py-1 rounded-full text-xs font-semibold"
|
||||
class="inline-block 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'
|
||||
'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>
|
||||
111
src/pages/Courses/Coordinator/Index.vue
Normal file
111
src/pages/Courses/Coordinator/Index.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useSearcher } from '@Services/Api';
|
||||
import { apiTo, viewTo } 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';
|
||||
import Adding from '@Holos/Button/ButtonRh.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>
|
||||
<RouterLink :to="viewTo({ name: 'request' })">
|
||||
<Adding text="Nuevo Curso" />
|
||||
</RouterLink>
|
||||
</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('cost')" />
|
||||
<th v-text="$t('url')" />
|
||||
<th v-text="$t('status')" />
|
||||
<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.name }}</td>
|
||||
<td>{{ model.cost }} {{ model.cost_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 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>
|
||||
</td>
|
||||
<td>
|
||||
<div class="table-actions">
|
||||
<IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
|
||||
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/Coordinator/Modals/Show.vue
Normal file
114
src/pages/Courses/Coordinator/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/Coordinator/Module.js
Normal file
21
src/pages/Courses/Coordinator/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.coordinator.${name}`, params)
|
||||
|
||||
// Ruta visual
|
||||
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `courses.coordinator.${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
|
||||
}
|
||||
267
src/pages/Courses/Coordinator/Request.vue
Normal file
267
src/pages/Courses/Coordinator/Request.vue
Normal file
@ -0,0 +1,267 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { apiTo, viewTo } from './Module';
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import PageHeader from '@Holos/PageHeader.vue';
|
||||
import IconButton from '@Holos/Button/Icon.vue';
|
||||
import Input from '@Holos/Form/Input.vue';
|
||||
import Textarea from '@Holos/Form/Textarea.vue';
|
||||
import Selectable from '@Holos/Form/Selectable.vue';
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
|
||||
/** Definiciones */
|
||||
const router = useRouter();
|
||||
|
||||
/** Propiedades */
|
||||
const form = useForm({
|
||||
name: '',
|
||||
cost: '',
|
||||
cost_currency: '',
|
||||
description: '',
|
||||
certification_name: '',
|
||||
certification_type: '',
|
||||
duration: '',
|
||||
url: '',
|
||||
department_id: '',
|
||||
users: []
|
||||
});
|
||||
|
||||
// Lista de departamentos y usuarios
|
||||
const departments = ref([]);
|
||||
const users = ref([]);
|
||||
const currencies = ref([]);
|
||||
|
||||
// Computed para contar usuarios seleccionados
|
||||
const selectedUsersCount = computed(() => {
|
||||
return users.value.filter(u => u.selected).length;
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
form.transform(data => ({
|
||||
...data,
|
||||
department_id: form.department_id?.id,
|
||||
cost_currency: form.cost_currency?.id,
|
||||
users: form.users = users.value.map(u => u.id)
|
||||
})).post(apiTo('store'), {
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('register.create.onSuccess'))
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Función para cargar usuarios cuando se seleccione un departamento
|
||||
const loadUsersByDepartment = () => {
|
||||
api.catalog({
|
||||
'user:byDepartment': form.department_id?.id
|
||||
}, {
|
||||
onSuccess: (r) => users.value = r['user:byDepartment'] ?? []
|
||||
});
|
||||
};
|
||||
|
||||
// Funciones para manejar selección de usuarios
|
||||
const toggleUser = (user) => {
|
||||
user.selected = !user.selected;
|
||||
};
|
||||
|
||||
const selectAllUsers = () => {
|
||||
const allSelected = users.value.every(u => u.selected);
|
||||
users.value.forEach(u => u.selected = !allSelected);
|
||||
};
|
||||
|
||||
// Watcher para cargar usuarios automáticamente cuando cambie el departamento
|
||||
watch(() => form.department_id, () => {
|
||||
loadUsersByDepartment();
|
||||
});
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
api.catalog({
|
||||
'department:all': null,
|
||||
'currency:all': null
|
||||
}, {
|
||||
onSuccess: (r) => {
|
||||
departments.value = r['department:all'] ?? []
|
||||
currencies.value = r['currency:all'] ?? []
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeader
|
||||
title="Solicitud de Nuevo Curso"
|
||||
>
|
||||
<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">Completa la información para solicitar un nuevo curso de capacitación</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">
|
||||
|
||||
<!-- Formulario -->
|
||||
<form @submit.prevent="submit" class="space-y-6">
|
||||
|
||||
<!-- Campos del formulario en dos columnas -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
|
||||
<!-- Columna izquierda -->
|
||||
<div class="space-y-6">
|
||||
<Input
|
||||
v-model="form.name"
|
||||
id="name"
|
||||
title="name"
|
||||
:onError="form.errors.name"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.cost"
|
||||
id="cost"
|
||||
title="cost"
|
||||
:onError="form.errors.cost"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
required
|
||||
/>
|
||||
<Selectable
|
||||
v-model="form.cost_currency"
|
||||
id="cost_currency"
|
||||
title="currency"
|
||||
:onError="form.errors.cost_currency"
|
||||
:options="currencies"
|
||||
/>
|
||||
<Textarea
|
||||
v-model="form.description"
|
||||
id="description"
|
||||
title="description"
|
||||
:onError="form.errors.description"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.certification_name"
|
||||
id="certification_name"
|
||||
title="certification_name"
|
||||
:onError="form.errors.certification_name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Columna derecha -->
|
||||
<div class="space-y-6">
|
||||
<Selectable
|
||||
v-model="form.department_id"
|
||||
id="department_id"
|
||||
title="department"
|
||||
:onError="form.errors.department_id"
|
||||
:options="departments"
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.certification_type"
|
||||
id="certification_type"
|
||||
title="certification_type"
|
||||
:onError="form.errors.certification_type"
|
||||
/>
|
||||
<Input
|
||||
v-model="form.duration"
|
||||
id="duration"
|
||||
title="duration"
|
||||
:onError="form.errors.duration"
|
||||
type="number"
|
||||
min="1"
|
||||
/>
|
||||
<Input
|
||||
v-model="form.url"
|
||||
id="url"
|
||||
title="url"
|
||||
:onError="form.errors.url"
|
||||
type="url"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sección de Personal a Capacitar -->
|
||||
<div class="mt-8">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt">
|
||||
Personal a capacitar
|
||||
</label>
|
||||
<button
|
||||
v-if="users.length > 0"
|
||||
type="button"
|
||||
@click="selectAllUsers"
|
||||
class="text-sm text-[#2563eb] hover:text-[#1e40af] font-medium"
|
||||
>
|
||||
{{ users.every(u => u.selected) ? 'Deseleccionar todo' : 'Seleccionar todo' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="users.length > 0" 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="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>
|
||||
<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>
|
||||
|
||||
<div v-else class="border border-gray-300 rounded-lg p-4 dark:bg-primary-d dark:border-primary/20">
|
||||
<div class="text-center text-gray-500 dark:text-primary-dt/70">
|
||||
<GoogleIcon class="w-8 h-8 mx-auto mb-2 text-gray-400" name="people" />
|
||||
<p>Selecciona un departamento para ver el personal disponible</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="users.length > 0" class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
|
||||
{{ selectedUsersCount }} usuario(s) seleccionado(s)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botón de Enviar -->
|
||||
<div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
:processing="form.processing"
|
||||
>
|
||||
Enviar Solicitud
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
@ -1,232 +0,0 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
// Estado del formulario
|
||||
const formData = ref({
|
||||
courseName: '',
|
||||
cost: '',
|
||||
description: '',
|
||||
certificationName: '',
|
||||
certificationType: '',
|
||||
duration: '',
|
||||
courseUrl: ''
|
||||
});
|
||||
|
||||
// Lista de personal a capacitar
|
||||
const personnelToTrain = ref([
|
||||
{ name: 'Ana García', department: 'Desarrollo' },
|
||||
{ name: 'Luis Martínez', department: 'Redes' },
|
||||
{ name: 'Carla Torres', department: 'Sistemas' },
|
||||
{ name: 'Pedro Ramírez', department: 'Seguridad' },
|
||||
{ name: 'Sofía Hernandez', department: 'Ventas' }
|
||||
]);
|
||||
|
||||
// Función para enviar la solicitud
|
||||
const submitRequest = () => {
|
||||
console.log('Enviar solicitud:', formData.value);
|
||||
|
||||
// Validación básica
|
||||
if (!formData.value.courseName || !formData.value.cost || !formData.value.description) {
|
||||
alert('Por favor, completa todos los campos obligatorios');
|
||||
return;
|
||||
}
|
||||
|
||||
// Aquí implementarías la lógica para enviar la solicitud
|
||||
alert('Solicitud enviada correctamente');
|
||||
|
||||
// Limpiar formulario
|
||||
formData.value = {
|
||||
courseName: '',
|
||||
cost: '',
|
||||
description: '',
|
||||
certificationName: '',
|
||||
certificationType: '',
|
||||
duration: '',
|
||||
courseUrl: ''
|
||||
};
|
||||
};
|
||||
|
||||
// Función para validar URL
|
||||
const isValidUrl = (url) => {
|
||||
if (!url) return true; // Campo opcional
|
||||
try {
|
||||
new URL(url);
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
</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">Solicitud de Nuevo Curso</h1>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Completa la información para solicitar un nuevo curso de capacitación</p>
|
||||
</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">
|
||||
|
||||
<!-- Formulario -->
|
||||
<form @submit.prevent="submitRequest" class="space-y-6">
|
||||
|
||||
<!-- Campos del formulario en dos columnas -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
|
||||
<!-- Columna izquierda -->
|
||||
<div class="space-y-6">
|
||||
|
||||
<!-- Nombre del Curso -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||
Nombre del Curso *
|
||||
</label>
|
||||
<input
|
||||
v-model="formData.courseName"
|
||||
type="text"
|
||||
required
|
||||
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"
|
||||
placeholder="Ingresa el nombre del curso"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Costo (USD) -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||
Costo (USD) *
|
||||
</label>
|
||||
<input
|
||||
v-model="formData.cost"
|
||||
type="number"
|
||||
required
|
||||
min="0"
|
||||
step="0.01"
|
||||
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"
|
||||
placeholder="0.00"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Breve descripción del curso -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||
Breve descripción del curso *
|
||||
</label>
|
||||
<textarea
|
||||
v-model="formData.description"
|
||||
required
|
||||
rows="4"
|
||||
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 resize-vertical dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
||||
placeholder="Describe brevemente el contenido y objetivos del curso"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Nombre de la certificación a obtener -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||
Nombre de la certificación a obtener
|
||||
</label>
|
||||
<input
|
||||
v-model="formData.certificationName"
|
||||
type="text"
|
||||
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"
|
||||
placeholder="Ej: Certificación AWS Solutions Architect"
|
||||
>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Columna derecha -->
|
||||
<div class="space-y-6">
|
||||
|
||||
<!-- Tipo de Certificación -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||
Tipo de Certificación
|
||||
</label>
|
||||
<input
|
||||
v-model="formData.certificationType"
|
||||
type="text"
|
||||
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"
|
||||
placeholder="Ej: Técnica, Profesional, Oficial"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Duración (días) -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||
Duración (días)
|
||||
</label>
|
||||
<input
|
||||
v-model="formData.duration"
|
||||
type="number"
|
||||
min="1"
|
||||
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"
|
||||
placeholder="Número de días"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- URL del curso -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
|
||||
URL del curso
|
||||
</label>
|
||||
<input
|
||||
v-model="formData.courseUrl"
|
||||
type="url"
|
||||
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"
|
||||
placeholder="https://ejemplo.com/curso"
|
||||
>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sección de Personal a Capacitar -->
|
||||
<div class="mt-8">
|
||||
<h3 class="text-lg font-medium text-gray-800 mb-4 flex items-center gap-2 dark:text-primary-dt">
|
||||
<GoogleIcon class="text-black dark:text-primary-dt text-xl" name="people" />
|
||||
Personal a capacitar
|
||||
</h3>
|
||||
|
||||
<div class="bg-gray-50 rounded-lg p-4 dark:bg-primary/5">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
<div
|
||||
v-for="person in personnelToTrain"
|
||||
:key="person.name"
|
||||
class="flex items-center justify-between p-3 bg-white rounded-lg border border-gray-200 dark:bg-primary-d dark:border-primary/20"
|
||||
>
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 dark:text-primary-dt">{{ person.name }}</div>
|
||||
<div class="text-sm text-gray-500 dark:text-primary-dt/70">{{ person.department }}</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">
|
||||
{{ person.department }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botón de Enviar -->
|
||||
<div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
|
||||
<button
|
||||
type="submit"
|
||||
class="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-[#7c3aed] hover:bg-[#6d28d9] text-white font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:ring-offset-2 transition-colors"
|
||||
>
|
||||
<GoogleIcon class="text-white text-xl" name="send" />
|
||||
Enviar Solicitud
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,181 +0,0 @@
|
||||
<script setup>
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { apiTo, viewTo } from './Module'
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Form from './Form.vue';
|
||||
|
||||
/** Definidores */
|
||||
const router = useRouter();
|
||||
|
||||
const form = useForm({
|
||||
periods: [
|
||||
{
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
number_of_days: 0,
|
||||
}
|
||||
],
|
||||
comments: ''
|
||||
});
|
||||
|
||||
const availableDays = ref(0);
|
||||
const formRef = ref(null);
|
||||
|
||||
// Calcular días restantes
|
||||
const remainingDays = computed(() => {
|
||||
if (!formRef.value) return availableDays.value;
|
||||
return availableDays.value - formRef.value.totalSelectedDays;
|
||||
});
|
||||
|
||||
// Calcular total de días seleccionados
|
||||
const totalSelectedDays = computed(() => {
|
||||
if (!formRef.value) return 0;
|
||||
return formRef.value.totalSelectedDays;
|
||||
});
|
||||
|
||||
// Obtener períodos con datos
|
||||
const periodsWithData = computed(() => {
|
||||
return form.periods.filter(period => period.start_date && period.end_date && period.number_of_days > 0);
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
form.post(apiTo('store'), {
|
||||
onSuccess: (res) => {
|
||||
Notify.success(Lang('created'));
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
api.get(route('resources.available-days'), {
|
||||
onSuccess: (res) => {
|
||||
availableDays.value = res.available_days;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<button class="flex items-center justify-center w-10 h-10 rounded-lg bg-slate-100 hover:bg-slate-200 with-transition dark:bg-slate-800 dark:hover:bg-slate-700">
|
||||
<GoogleIcon name="arrow_back" class="text-slate-600 dark:text-slate-300" />
|
||||
</button>
|
||||
</RouterLink>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Solicitar Vacaciones</h1>
|
||||
<p class="text-slate-600 dark:text-slate-400">Completa el formulario para solicitar tus días de vacaciones.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Layout de dos columnas -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Formulario - Columna izquierda (2/3) -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
|
||||
<h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Detalles de la Solicitud</h2>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Selecciona las fechas y proporciona información adicional.</p>
|
||||
|
||||
<Form
|
||||
ref="formRef"
|
||||
:form="form"
|
||||
@submit="submit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resumen - Columna derecha (1/3) -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Resumen de Solicitud</h3>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Revisa los detalles antes de enviar.</p>
|
||||
|
||||
<!-- Días disponibles -->
|
||||
<div class="text-center mb-6 p-4 bg-slate-50 rounded-lg dark:bg-slate-700/50">
|
||||
<div class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ availableDays }}</div>
|
||||
<div class="text-sm text-slate-600 dark:text-slate-400">Días Disponibles</div>
|
||||
</div>
|
||||
|
||||
<!-- Detalles de períodos -->
|
||||
<div v-if="periodsWithData.length > 0" class="space-y-4 mb-6">
|
||||
<div v-for="(period, index) in periodsWithData" :key="index" class="space-y-2">
|
||||
<h4 class="font-medium text-slate-900 dark:text-slate-100">
|
||||
Período {{ index + 1 }}:
|
||||
</h4>
|
||||
<div class="space-y-1 text-sm text-slate-600 dark:text-slate-400">
|
||||
<div>Inicio: {{ period.start_date }}</div>
|
||||
<div>Fin: {{ period.end_date }}</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span>Días en período {{ index + 1 }}:</span>
|
||||
<span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
|
||||
{{ period.number_of_days }} día{{ period.number_of_days > 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resumen de días -->
|
||||
<div v-if="totalSelectedDays > 0" class="space-y-3 mb-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">Total de días:</span>
|
||||
<span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
|
||||
{{ totalSelectedDays }} día{{ totalSelectedDays > 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400">Días restantes:</span>
|
||||
<span class="px-2 py-1 rounded-full text-xs font-medium"
|
||||
:class="remainingDays < 0 ? 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400' : 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400'">
|
||||
{{ remainingDays }} día{{ remainingDays !== 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advertencia si se excede el límite -->
|
||||
<div v-if="remainingDays < 0" class="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-red-500/10 dark:border-red-500/20">
|
||||
<div class="flex items-center gap-2">
|
||||
<GoogleIcon name="warning" class="w-4 h-4 text-red-600 dark:text-red-400" />
|
||||
<span class="text-sm text-red-600 dark:text-red-400 font-medium">
|
||||
Excedes tus días disponibles por {{ Math.abs(remainingDays) }} día{{ Math.abs(remainingDays) > 1 ? 's' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recordatorios -->
|
||||
<div class="space-y-3">
|
||||
<h4 class="font-medium text-slate-900 dark:text-slate-100">Recordatorios:</h4>
|
||||
<div class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Las solicitudes deben hacerse con 15 días de anticipación</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Tu coordinador revisará y aprobará la solicitud</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Recibirás una notificación con la decisión</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span>Los días se descontarán una vez aprobados</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,236 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, watch, computed } from 'vue';
|
||||
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||
import '@vuepic/vue-datepicker/dist/main.css';
|
||||
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
import Input from '@Holos/Form/Input.vue';
|
||||
import Textarea from '@Holos/Form/Textarea.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits([
|
||||
'submit'
|
||||
])
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
form: Object
|
||||
})
|
||||
|
||||
/** Métodos */
|
||||
function submit() {
|
||||
emit('submit')
|
||||
}
|
||||
|
||||
function addPeriod() {
|
||||
props.form.periods.push({
|
||||
start_date: '',
|
||||
end_date: '',
|
||||
number_of_days: 0,
|
||||
});
|
||||
}
|
||||
|
||||
function removePeriod(index) {
|
||||
if (props.form.periods.length > 1) {
|
||||
props.form.periods.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
function calculateDays(startDate, endDate) {
|
||||
if (!startDate || !endDate) return 0;
|
||||
|
||||
const start = new Date(startDate);
|
||||
const end = new Date(endDate);
|
||||
|
||||
// Validar que la fecha de inicio no sea posterior a la de fin
|
||||
if (start > end) return 0;
|
||||
|
||||
// Calcular la diferencia en días (incluyendo ambos días)
|
||||
const timeDiff = end.getTime() - start.getTime();
|
||||
const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
|
||||
|
||||
return daysDiff;
|
||||
}
|
||||
|
||||
function updatePeriodDays(index) {
|
||||
const period = props.form.periods[index];
|
||||
if (period.start_date && period.end_date) {
|
||||
period.number_of_days = calculateDays(period.start_date, period.end_date);
|
||||
} else {
|
||||
period.number_of_days = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function getMinDate() {
|
||||
const today = new Date();
|
||||
let daysToAdd = 15;
|
||||
let currentDate = new Date(today);
|
||||
|
||||
while (daysToAdd > 0) {
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
// Si no es domingo (0), contar el día
|
||||
if (currentDate.getDay() !== 0) {
|
||||
daysToAdd--;
|
||||
}
|
||||
}
|
||||
|
||||
return currentDate.toISOString().split('T')[0];
|
||||
}
|
||||
|
||||
// Función para desactivar domingos
|
||||
function isDisabled(date) {
|
||||
return date.getDay() === 0; // 0 = domingo
|
||||
}
|
||||
|
||||
// Función para formatear fecha a Y-m-d
|
||||
function formatDate(date) {
|
||||
if (!date) return '';
|
||||
|
||||
// Si la fecha ya es un string en formato correcto, devolverla
|
||||
if (typeof date === 'string' && date.match(/^\d{4}-\d{2}-\d{2}$/)) {
|
||||
return date;
|
||||
}
|
||||
|
||||
let d;
|
||||
if (date instanceof Date) {
|
||||
d = date;
|
||||
} else {
|
||||
d = new Date(date);
|
||||
}
|
||||
|
||||
// Verificar que la fecha es válida
|
||||
if (isNaN(d.getTime())) {
|
||||
console.warn('Fecha inválida recibida:', date);
|
||||
return '';
|
||||
}
|
||||
|
||||
const year = d.getFullYear();
|
||||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(d.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
// Watcher para detectar cambios en las fechas
|
||||
watch(() => props.form.periods, (newPeriods) => {
|
||||
newPeriods.forEach((period, index) => {
|
||||
if (period.start_date && period.end_date) {
|
||||
updatePeriodDays(index);
|
||||
}
|
||||
});
|
||||
}, { deep: true });
|
||||
|
||||
// Calcular total de días seleccionados
|
||||
const totalSelectedDays = computed(() => {
|
||||
return props.form.periods.reduce((total, period) => {
|
||||
return total + (period.number_of_days || 0);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
// Exponer el total para el componente padre
|
||||
defineExpose({
|
||||
totalSelectedDays
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form @submit.prevent="submit" class="space-y-6">
|
||||
<!-- Períodos de vacaciones -->
|
||||
<div class="space-y-4">
|
||||
<div v-for="(period, index) in form.periods" :key="index" class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h4 class="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
Período {{ index + 1 }}
|
||||
</h4>
|
||||
<button
|
||||
v-if="form.periods.length > 1"
|
||||
type="button"
|
||||
@click="removePeriod(index)"
|
||||
class="flex items-center gap-1 px-2 py-1 text-xs font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-md with-transition dark:text-red-400 dark:hover:bg-red-500/10"
|
||||
>
|
||||
<GoogleIcon name="delete" class="w-4 h-4" />
|
||||
Eliminar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div class="relative">
|
||||
<VueDatePicker
|
||||
v-model="period.start_date"
|
||||
class="w-full"
|
||||
placeholder="Fecha de inicio"
|
||||
format="dd/MM/yyyy"
|
||||
locale="es"
|
||||
:min-date="getMinDate()"
|
||||
:disabled-dates="isDisabled"
|
||||
:enable-time-picker="false"
|
||||
:auto-apply="true"
|
||||
:close-on-auto-apply="true"
|
||||
@update:model-value="(date) => {
|
||||
console.log('Fecha seleccionada (inicio):', date);
|
||||
period.start_date = formatDate(date);
|
||||
console.log('Fecha formateada (inicio):', period.start_date);
|
||||
updatePeriodDays(index);
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="relative">
|
||||
<VueDatePicker
|
||||
v-model="period.end_date"
|
||||
class="w-full"
|
||||
placeholder="Fecha de fin"
|
||||
format="dd/MM/yyyy"
|
||||
locale="es"
|
||||
:min-date="getMinDate()"
|
||||
:disabled-dates="isDisabled"
|
||||
:enable-time-picker="false"
|
||||
:auto-apply="true"
|
||||
:close-on-auto-apply="true"
|
||||
@update:model-value="(date) => {
|
||||
console.log('Fecha seleccionada (fin):', date);
|
||||
period.end_date = formatDate(date);
|
||||
console.log('Fecha formateada (fin):', period.end_date);
|
||||
updatePeriodDays(index);
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botón añadir período -->
|
||||
<button
|
||||
type="button"
|
||||
@click="addPeriod"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg with-transition dark:text-blue-400 dark:hover:bg-blue-500/10"
|
||||
>
|
||||
<GoogleIcon name="add" />
|
||||
Añadir período
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Comentarios -->
|
||||
<div>
|
||||
<Textarea
|
||||
v-model="form.comments"
|
||||
id="comments"
|
||||
rows="4"
|
||||
class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
|
||||
placeholder="Agrega cualquier información adicional sobre tu solicitud..."
|
||||
:onError="form.errors.comments"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Botón de envío -->
|
||||
<div class="col-span-1 md:col-span-2 flex justify-center">
|
||||
<PrimaryButton
|
||||
v-text="$t('request')"
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@ -107,19 +107,33 @@ const router = createRouter({
|
||||
},
|
||||
{
|
||||
path: 'vacations',
|
||||
name: 'vacations.coordinator',
|
||||
name: 'vacations.coordinator.index',
|
||||
meta: {
|
||||
title: 'Vacaciones',
|
||||
icon: 'calendar_month',
|
||||
},
|
||||
component: () => import('@Pages/Vacations/Coordinator/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'courses',
|
||||
name: 'courses.coordinator',
|
||||
meta: {
|
||||
title: 'Capacitaciones',
|
||||
icon: 'info',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'vacations.coordinator.index',
|
||||
component: () => import('@Pages/Vacations/Coordinator/Index.vue'),
|
||||
name: 'courses.coordinator.index',
|
||||
component: () => import('@Pages/Courses/Coordinator/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'request',
|
||||
name: 'courses.coordinator.request',
|
||||
component: () => import('@Pages/Courses/Coordinator/Request.vue'),
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -169,22 +183,17 @@ const router = createRouter({
|
||||
{
|
||||
path: '',
|
||||
name: 'admin.courses.index',
|
||||
component: () => import('@Pages/Courses/Index.vue'),
|
||||
component: () => import('@Pages/Courses/Admin/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: ':id/assignamment',
|
||||
name: 'admin.courses.assignamment',
|
||||
component: () => import('@Pages/Courses/Assignamment.vue'),
|
||||
},
|
||||
{
|
||||
path: 'request',
|
||||
name: 'admin.courses.request',
|
||||
component: () => import('@Pages/Courses/Request.vue'),
|
||||
component: () => import('@Pages/Courses/Admin/Assignamment.vue'),
|
||||
},
|
||||
{
|
||||
path: 'calendar',
|
||||
name: 'admin.courses.calendar',
|
||||
component: () => import('@Pages/Courses/Calendar.vue'),
|
||||
component: () => import('@Pages/Courses/Admin/Calendar.vue'),
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user