vue datepicker y layouts separados
This commit is contained in:
parent
91eb3f5be8
commit
b402991ac7
26
package-lock.json
generated
26
package-lock.json
generated
@ -12,6 +12,7 @@
|
|||||||
"@tailwindcss/postcss": "^4.0.9",
|
"@tailwindcss/postcss": "^4.0.9",
|
||||||
"@tailwindcss/vite": "^4.0.9",
|
"@tailwindcss/vite": "^4.0.9",
|
||||||
"@vitejs/plugin-vue": "^5.2.1",
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
|
"@vuepic/vue-datepicker": "^11.0.2",
|
||||||
"apexcharts": "^5.3.5",
|
"apexcharts": "^5.3.5",
|
||||||
"axios": "^1.8.1",
|
"axios": "^1.8.1",
|
||||||
"laravel-echo": "^2.0.2",
|
"laravel-echo": "^2.0.2",
|
||||||
@ -1507,6 +1508,31 @@
|
|||||||
"integrity": "sha512-CabR+UN630VnsJO/jHWYBC1YVXyMq94KKp6iF5MQgZJs5I8cmjw6oVMO1oDbtBkENSHSSn/UadWlW/OAgdmKrg==",
|
"integrity": "sha512-CabR+UN630VnsJO/jHWYBC1YVXyMq94KKp6iF5MQgZJs5I8cmjw6oVMO1oDbtBkENSHSSn/UadWlW/OAgdmKrg==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@vuepic/vue-datepicker": {
|
||||||
|
"version": "11.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-11.0.2.tgz",
|
||||||
|
"integrity": "sha512-uHh78mVBXCEjam1uVfTzZ/HkyDwut/H6b2djSN9YTF+l/EA+XONfdCnOVSi1g+qVGSy65DcQAwyBNidAssnudQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"date-fns": "^4.1.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18.12.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"vue": ">=3.3.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@vuepic/vue-datepicker/node_modules/date-fns": {
|
||||||
|
"version": "4.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
|
||||||
|
"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"funding": {
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/kossnocorp"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@yr/monotone-cubic-spline": {
|
"node_modules/@yr/monotone-cubic-spline": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
|
||||||
|
|||||||
@ -14,6 +14,7 @@
|
|||||||
"@tailwindcss/postcss": "^4.0.9",
|
"@tailwindcss/postcss": "^4.0.9",
|
||||||
"@tailwindcss/vite": "^4.0.9",
|
"@tailwindcss/vite": "^4.0.9",
|
||||||
"@vitejs/plugin-vue": "^5.2.1",
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
|
"@vuepic/vue-datepicker": "^11.0.2",
|
||||||
"apexcharts": "^5.3.5",
|
"apexcharts": "^5.3.5",
|
||||||
"axios": "^1.8.1",
|
"axios": "^1.8.1",
|
||||||
"laravel-echo": "^2.0.2",
|
"laravel-echo": "^2.0.2",
|
||||||
|
|||||||
191
src/components/Holos/Calendar.vue
Normal file
191
src/components/Holos/Calendar.vue
Normal file
@ -0,0 +1,191 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, computed, watch } from 'vue';
|
||||||
|
import { Calendar } from 'v-calendar';
|
||||||
|
import 'v-calendar/style.css';
|
||||||
|
|
||||||
|
// Props del componente
|
||||||
|
const props = defineProps({
|
||||||
|
// Días de conflicto a pintar en rojo
|
||||||
|
conflictDays: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
// Configuración adicional
|
||||||
|
locale: {
|
||||||
|
type: String,
|
||||||
|
default: 'es'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Emits
|
||||||
|
const emit = defineEmits(['monthChanged']);
|
||||||
|
|
||||||
|
// Variables reactivas
|
||||||
|
const currentMonth = ref(new Date());
|
||||||
|
const fromPage = ref(null);
|
||||||
|
|
||||||
|
// Atributos para el calendario (eventos, vacaciones, etc.)
|
||||||
|
const attributes = computed(() => {
|
||||||
|
const attrs = [];
|
||||||
|
|
||||||
|
|
||||||
|
// Agregar días de conflicto (pintarlos en rojo)
|
||||||
|
if (props.conflictDays && props.conflictDays.length > 0) {
|
||||||
|
props.conflictDays.forEach((day) => {
|
||||||
|
const currentYear = currentMonth.value.getFullYear();
|
||||||
|
const currentMonthNumber = currentMonth.value.getMonth();
|
||||||
|
const conflictDate = new Date(currentYear, currentMonthNumber, day);
|
||||||
|
|
||||||
|
attrs.push({
|
||||||
|
key: `conflict-${day}`,
|
||||||
|
dates: conflictDate,
|
||||||
|
highlight: {
|
||||||
|
color: 'red',
|
||||||
|
fillMode: 'solid'
|
||||||
|
},
|
||||||
|
popover: {
|
||||||
|
label: `Día con conflictos de vacaciones`,
|
||||||
|
visibility: 'hover'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return attrs;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Configuración del calendario
|
||||||
|
const calendarConfig = computed(() => ({
|
||||||
|
locale: props.locale,
|
||||||
|
firstDayOfWeek: 2, // Lunes
|
||||||
|
masks: {
|
||||||
|
weekdays: 'WWW',
|
||||||
|
navMonths: 'MMMM',
|
||||||
|
title: 'MMMM YYYY'
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
isDark: false
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Métodos
|
||||||
|
const onPageChanged = (page) => {
|
||||||
|
// Actualizar el mes actual cuando se cambia de página
|
||||||
|
currentMonth.value = new Date(page[0].year, page[0].month - 1, 1);
|
||||||
|
emit('monthChanged', page[0].month);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Watch para re-renderizar cuando cambien los días de conflicto o el mes actual
|
||||||
|
watch([() => props.conflictDays, currentMonth], () => {
|
||||||
|
// Los attributes se recalcularán automáticamente al cambiar estas dependencias
|
||||||
|
}, { deep: true });
|
||||||
|
|
||||||
|
// Exponer métodos para uso externo
|
||||||
|
defineExpose({
|
||||||
|
currentMonth
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="calendar-container bg-white rounded-lg shadow-md p-4">
|
||||||
|
<!-- Header del calendario -->
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h3 class="text-lg font-semibold text-gray-900">Calendario</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Calendario principal -->
|
||||||
|
<div class="calendar-wrapper">
|
||||||
|
<Calendar
|
||||||
|
v-model="currentMonth"
|
||||||
|
:attributes="attributes"
|
||||||
|
:locale="calendarConfig.locale"
|
||||||
|
:first-day-of-week="calendarConfig.firstDayOfWeek"
|
||||||
|
:masks="calendarConfig.masks"
|
||||||
|
class="custom-calendar"
|
||||||
|
v-model:from-page="fromPage"
|
||||||
|
@update:from-page="onPageChanged"
|
||||||
|
@did-move="onPageChanged"
|
||||||
|
expanded
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Estilos personalizados para el calendario */
|
||||||
|
.calendar-container {
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-calendar {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Personalización de v-calendar */
|
||||||
|
:deep(.vc-container) {
|
||||||
|
--vc-border-radius: 0.5rem;
|
||||||
|
--vc-weekday-color: #6B7280;
|
||||||
|
--vc-popover-content-bg: white;
|
||||||
|
--vc-popover-content-border: 1px solid #E5E7EB;
|
||||||
|
border: none;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-header) {
|
||||||
|
padding: 1rem 1rem 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-title) {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1F2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-weekday) {
|
||||||
|
color: #6B7280;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-day) {
|
||||||
|
min-height: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-day-content) {
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
border: none;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-day-content:hover) {
|
||||||
|
background-color: #EFF6FF;
|
||||||
|
color: #2563EB;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-day-content.vc-day-content-today) {
|
||||||
|
background-color: #DBEAFE;
|
||||||
|
color: #1D4ED8;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-highlights .vc-highlight) {
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.vc-dots) {
|
||||||
|
margin-bottom: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.calendar-container {
|
||||||
|
min-width: auto;
|
||||||
|
margin: 0 -1rem;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -71,6 +71,13 @@ onMounted(() => {
|
|||||||
to="admin.additional.index"
|
to="admin.additional.index"
|
||||||
/>
|
/>
|
||||||
</Section>
|
</Section>
|
||||||
|
<Section name="Vacaciones">
|
||||||
|
<Link
|
||||||
|
icon="grid_view"
|
||||||
|
name="Vacaciones"
|
||||||
|
to="admin.vacations.index"
|
||||||
|
/>
|
||||||
|
</Section>
|
||||||
<Section name="Capacitaciones">
|
<Section name="Capacitaciones">
|
||||||
<Link
|
<Link
|
||||||
icon="grid_view"
|
icon="grid_view"
|
||||||
|
|||||||
@ -43,6 +43,11 @@ onMounted(() => {
|
|||||||
name="Dashboard"
|
name="Dashboard"
|
||||||
to="dashboard.index"
|
to="dashboard.index"
|
||||||
/>
|
/>
|
||||||
|
<Link
|
||||||
|
icon="calendar_month"
|
||||||
|
name="Vacaciones"
|
||||||
|
to="vacations.index"
|
||||||
|
/>
|
||||||
<Link
|
<Link
|
||||||
icon="person"
|
icon="person"
|
||||||
name="Perfil"
|
name="Perfil"
|
||||||
|
|||||||
@ -43,6 +43,11 @@ onMounted(() => {
|
|||||||
name="Dashboard"
|
name="Dashboard"
|
||||||
to="coordinator.dashboard.index"
|
to="coordinator.dashboard.index"
|
||||||
/>
|
/>
|
||||||
|
<Link
|
||||||
|
icon="calendar_month"
|
||||||
|
name="Vacaciones"
|
||||||
|
to="vacations.coordinator.index"
|
||||||
|
/>
|
||||||
</Section>
|
</Section>
|
||||||
<Section
|
<Section
|
||||||
:name="$t('admin.title')"
|
:name="$t('admin.title')"
|
||||||
|
|||||||
@ -44,7 +44,7 @@ const redirectBasedOnRole = (userRoles) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Verificar si tiene el rol coordinador
|
// Verificar si tiene el rol coordinador
|
||||||
const hasCoordinatorRole = userRoles.some(role => role.name === 'coordinador')
|
const hasCoordinatorRole = userRoles.some(role => role.name === 'coordinator')
|
||||||
if (hasCoordinatorRole) {
|
if (hasCoordinatorRole) {
|
||||||
router.push('/coordinator')
|
router.push('/coordinator')
|
||||||
return
|
return
|
||||||
|
|||||||
16
src/pages/Dashboard/Module.js
Normal file
16
src/pages/Dashboard/Module.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { lang } from '@Lang/i18n';
|
||||||
|
|
||||||
|
// Ruta API
|
||||||
|
const apiTo = (name, params = {}) => route(`dashboard.${name}`, params)
|
||||||
|
|
||||||
|
// Ruta visual
|
||||||
|
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `dashboard.${name}`, params, query })
|
||||||
|
|
||||||
|
// Obtener traducción del componente
|
||||||
|
const transl = (str) => lang(`dashboard.${str}`)
|
||||||
|
|
||||||
|
export {
|
||||||
|
viewTo,
|
||||||
|
apiTo,
|
||||||
|
transl
|
||||||
|
}
|
||||||
181
src/pages/Vacations/Admin/Create.vue
Normal file
181
src/pages/Vacations/Admin/Create.vue
Normal file
@ -0,0 +1,181 @@
|
|||||||
|
<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>
|
||||||
236
src/pages/Vacations/Admin/Form.vue
Normal file
236
src/pages/Vacations/Admin/Form.vue
Normal file
@ -0,0 +1,236 @@
|
|||||||
|
<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>
|
||||||
129
src/pages/Vacations/Admin/Index.vue
Normal file
129
src/pages/Vacations/Admin/Index.vue
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { api } from '@Services/Api';
|
||||||
|
import { getDate } from '@Controllers/DateController';
|
||||||
|
import { apiTo } from './Module'
|
||||||
|
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
|
||||||
|
/** Propiedades */
|
||||||
|
const vacationRequests = ref([]);
|
||||||
|
|
||||||
|
/** Metodos */
|
||||||
|
const generateConstance = (vacationId) => {
|
||||||
|
api.get(route('vacation-requests-public.generate-route', { vacation: vacationId }), {
|
||||||
|
onSuccess: (res) => {
|
||||||
|
Notify.success('Constancia generada correctamente');
|
||||||
|
openNewTab(res.route);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusClasses = (status) => {
|
||||||
|
const statusMap = {
|
||||||
|
'Pendiente': 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
|
||||||
|
'Aprobado': 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
|
||||||
|
'Rechazado': 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
|
||||||
|
'Agendado': 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
|
||||||
|
'Cancelado': 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
|
||||||
|
'Concluido': 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300'
|
||||||
|
};
|
||||||
|
|
||||||
|
return statusMap[status] || 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusIcon = (status) => {
|
||||||
|
const iconMap = {
|
||||||
|
'Pendiente': { name: 'schedule', classes: 'text-amber-600 dark:text-amber-400' },
|
||||||
|
'Aprobado': { name: 'check_circle', classes: 'text-blue-600 dark:text-blue-400' },
|
||||||
|
'Rechazado': { name: 'cancel', classes: 'text-orange-600 dark:text-orange-400' },
|
||||||
|
'Agendado': { name: 'event', classes: 'text-green-600 dark:text-green-400' },
|
||||||
|
'Cancelado': { name: 'block', classes: 'text-red-600 dark:text-red-400' },
|
||||||
|
'Concluido': { name: 'task_alt', classes: 'text-cyan-600 dark:text-cyan-400' }
|
||||||
|
};
|
||||||
|
|
||||||
|
return iconMap[status] || { name: 'help', classes: 'text-gray-600 dark:text-gray-400' };
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusIconContainer = (status) => {
|
||||||
|
const containerMap = {
|
||||||
|
'Pendiente': 'bg-amber-100 dark:bg-amber-900/30',
|
||||||
|
'Aprobado': 'bg-blue-100 dark:bg-blue-900/30',
|
||||||
|
'Rechazado': 'bg-orange-100 dark:bg-orange-900/30',
|
||||||
|
'Agendado': 'bg-green-100 dark:bg-green-900/30',
|
||||||
|
'Cancelado': 'bg-red-100 dark:bg-red-900/30',
|
||||||
|
'Concluido': 'bg-cyan-100 dark:bg-cyan-900/30'
|
||||||
|
};
|
||||||
|
|
||||||
|
return containerMap[status] || 'bg-gray-100 dark:bg-gray-900/30';
|
||||||
|
};
|
||||||
|
|
||||||
|
const openNewTab = (url) => {
|
||||||
|
window.open(url, '_blank');
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Ciclos */
|
||||||
|
onMounted(() => {
|
||||||
|
api.get(apiTo('index'), {
|
||||||
|
onSuccess: (r) => {
|
||||||
|
vacationRequests.value = r.vacation_requests.data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-center justify-between mb-8">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||||
|
Solicitudes
|
||||||
|
</h1>
|
||||||
|
<p class="text-slate-600 dark:text-slate-400">Gestión completa de todas las solicitudes de vacaciones del sistema.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Lista de solicitudes -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div v-for="vacation in vacationRequests" class="bg-white rounded-xl border border-slate-200 p-6 shadow-sm dark:bg-slate-800 dark:border-slate-700">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div :class="`flex items-center justify-center w-10 h-10 rounded-lg ${getStatusIconContainer(vacation.status)}`">
|
||||||
|
<GoogleIcon :name="getStatusIcon(vacation.status).name" :class="getStatusIcon(vacation.status).classes" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 v-if="vacation.vacation_periods.length > 1" class="font-semibold text-slate-900 dark:text-slate-100">{{ vacation.vacation_periods.length }} periodos</h3>
|
||||||
|
<h3 v-else class="font-semibold text-slate-900 dark:text-slate-100">{{ getDate(vacation.vacation_periods[0].start_date) }} - {{ getDate(vacation.vacation_periods[0].end_date) }}</h3>
|
||||||
|
<p class="text-sm text-slate-600 dark:text-slate-400">{{ vacation.total_days }} días</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span :class="`px-3 py-1 rounded-full text-sm font-medium ${getStatusClasses(vacation.status)}`">
|
||||||
|
{{ vacation.status }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-for="(period, index) in vacation.vacation_periods" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-medium text-slate-700 dark:text-slate-300">Período {{ index + 1 }}:</p>
|
||||||
|
<p class="text-sm text-slate-600 dark:text-slate-400">{{ getDate(period.start_date) }} - {{ getDate(period.end_date) }} ({{ period.number_of_days }} días)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-end gap-3">
|
||||||
|
<button @click="generateConstance(vacation.id)" type="button" class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-800 hover:bg-slate-100 rounded-lg with-transition dark:text-slate-400 dark:hover:text-slate-200 dark:hover:bg-slate-700">
|
||||||
|
<GoogleIcon name="clinical_notes" />
|
||||||
|
Generar Constancia de disfrute de vacaciones
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Estado vacío cuando no hay solicitudes -->
|
||||||
|
<div v-if="vacationRequests.length == 0" class="text-center py-12">
|
||||||
|
<GoogleIcon name="event_busy" class="text-slate-300 text-6xl mb-4 dark:text-slate-600" />
|
||||||
|
<h3 class="text-lg font-medium text-slate-900 dark:text-slate-100 mb-2">No hay solicitudes</h3>
|
||||||
|
<p class="text-slate-600 dark:text-slate-400 mb-6">No se han encontrado solicitudes de vacaciones en el sistema.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
16
src/pages/Vacations/Admin/Module.js
Normal file
16
src/pages/Vacations/Admin/Module.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { lang } from '@Lang/i18n';
|
||||||
|
|
||||||
|
// Ruta API
|
||||||
|
const apiTo = (name, params = {}) => route(`vacation-requests.admin.${name}`, params)
|
||||||
|
|
||||||
|
// Ruta visual
|
||||||
|
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `vacations.admin.${name}`, params, query })
|
||||||
|
|
||||||
|
// Obtener traducción del componente
|
||||||
|
const transl = (str) => lang(`vacations.${str}`)
|
||||||
|
|
||||||
|
export {
|
||||||
|
viewTo,
|
||||||
|
apiTo,
|
||||||
|
transl
|
||||||
|
}
|
||||||
181
src/pages/Vacations/Coordinator/Create.vue
Normal file
181
src/pages/Vacations/Coordinator/Create.vue
Normal file
@ -0,0 +1,181 @@
|
|||||||
|
<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>
|
||||||
236
src/pages/Vacations/Coordinator/Form.vue
Normal file
236
src/pages/Vacations/Coordinator/Form.vue
Normal file
@ -0,0 +1,236 @@
|
|||||||
|
<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>
|
||||||
295
src/pages/Vacations/Coordinator/Index.vue
Normal file
295
src/pages/Vacations/Coordinator/Index.vue
Normal file
@ -0,0 +1,295 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { api } from '@Services/Api';
|
||||||
|
import { apiTo } from './Module';
|
||||||
|
|
||||||
|
import Calendar from '@Components/Holos/Calendar.vue';
|
||||||
|
|
||||||
|
/** Propiedades */
|
||||||
|
const applicationsForCoordinator = ref([]);
|
||||||
|
const conflictDays = ref([]);
|
||||||
|
const calendarRef = ref(null);
|
||||||
|
|
||||||
|
/** Metodos */
|
||||||
|
const formatDate = (dateString) => {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toLocaleDateString('es-ES', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: '2-digit',
|
||||||
|
day: '2-digit'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Función para calcular el total de días
|
||||||
|
const calculateTotalDays = (vacationPeriods) => {
|
||||||
|
return vacationPeriods.reduce((total, period) => total + period.number_of_days, 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Función para obtener el color del estado
|
||||||
|
const getStatusColor = (status) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'Pendiente':
|
||||||
|
return 'bg-yellow-100 text-yellow-800';
|
||||||
|
case 'Aprobada':
|
||||||
|
return 'bg-green-100 text-green-800';
|
||||||
|
case 'Rechazada':
|
||||||
|
return 'bg-red-100 text-red-800';
|
||||||
|
default:
|
||||||
|
return 'bg-gray-100 text-gray-800';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Método para obtener los días de conflicto del mes
|
||||||
|
const fetchConflictDays = (month) => {
|
||||||
|
// Limpiar inmediatamente los días de conflicto para evitar el parpadeo visual
|
||||||
|
conflictDays.value = [];
|
||||||
|
|
||||||
|
api.get(apiTo('calendar-month', { month: month }), {
|
||||||
|
onSuccess: (r) => {
|
||||||
|
// El backend puede retornar un array vacío o un array con los días de conflicto
|
||||||
|
conflictDays.value = r.conflict_days || [];
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const approvePeriod = (periodId) => {
|
||||||
|
api.put(apiTo('approve-period', { period: periodId }), {
|
||||||
|
onSuccess: (r) => {
|
||||||
|
Notify.success('Periodo aprobado correctamente');
|
||||||
|
// recargar la página
|
||||||
|
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const approveAll = (applicationId) => {
|
||||||
|
api.put(apiTo('approve-request', { vacationRequest: applicationId }), {
|
||||||
|
onSuccess: (r) => {
|
||||||
|
Notify.success('Solicitud aprobada correctamente');
|
||||||
|
// recargar la página
|
||||||
|
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Ciclos */
|
||||||
|
onMounted(() => {
|
||||||
|
// Cargar los días de conflicto del mes actual al montar el componente
|
||||||
|
const initialMonth = new Date().getMonth() + 1;
|
||||||
|
fetchConflictDays(initialMonth);
|
||||||
|
|
||||||
|
// Cargar las solicitudes para coordinador
|
||||||
|
api.get(apiTo('index'), {
|
||||||
|
onSuccess: (r) => {
|
||||||
|
applicationsForCoordinator.value = r.applications_for_coordinator;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between my-4 sm:my-8 gap-3 sm:gap-0">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-xl sm:text-2xl font-bold text-slate-900 dark:text-slate-100">Gestión de Solicitudes</h1>
|
||||||
|
<p class="text-sm sm:text-base text-slate-600 dark:text-slate-400">Revisa y gestiona las solicitudes de vacaciones de tu equipo</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4 lg:gap-6">
|
||||||
|
<div class="order-2 lg:order-1 lg:col-span-8">
|
||||||
|
<!-- Lista de solicitudes -->
|
||||||
|
<div v-for="application in applicationsForCoordinator" :key="application.id" class="bg-white rounded-lg shadow-md p-4 sm:p-6 mb-4 sm:mb-6">
|
||||||
|
<!-- Información del empleado -->
|
||||||
|
<div class="flex flex-col sm:flex-row sm:items-center mb-4 sm:mb-6 gap-3 sm:gap-0">
|
||||||
|
<div class="flex items-center flex-1">
|
||||||
|
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-gray-200 rounded-full flex items-center justify-center mr-3 sm:mr-4 overflow-hidden flex-shrink-0">
|
||||||
|
<img v-if="application.user.profile_photo_url"
|
||||||
|
:src="application.user.profile_photo_url"
|
||||||
|
:alt="application.user.full_name"
|
||||||
|
class="w-full h-full object-cover">
|
||||||
|
<svg v-else class="w-5 h-5 sm:w-6 sm:h-6 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
|
||||||
|
clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-1">
|
||||||
|
<h2 class="text-base sm:text-lg font-semibold text-gray-900 truncate">{{ application.user.full_name }}</h2>
|
||||||
|
<span :class="`px-2 py-1 text-xs rounded-full font-medium ${getStatusColor(application.status)} flex-shrink-0`">
|
||||||
|
{{ application.status }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-500 text-sm">{{ application.user.department.name }}</p>
|
||||||
|
<p class="text-gray-400 text-xs">Días disponibles: {{ application.user.vacation_days_available }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-left sm:text-right text-sm text-gray-500 flex-shrink-0">
|
||||||
|
<p>Solicitado: {{ formatDate(application.created_at) }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Conflicto -->
|
||||||
|
<div v-if="application.have_conflict && application.status == 'Pendiente'" class="mb-4 sm:mb-6">
|
||||||
|
<div class="bg-red-50 border border-red-200 rounded-lg p-3 sm:p-4">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<svg class="w-4 h-4 sm:w-5 sm:h-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="ml-2 sm:ml-3 flex-1">
|
||||||
|
<h3 class="text-sm font-medium text-red-800">
|
||||||
|
Conflicto detectado
|
||||||
|
</h3>
|
||||||
|
<div class="mt-2 text-sm text-red-700">
|
||||||
|
<p class="mb-3">Las siguientes fechas presentan conflictos con otras solicitudes:</p>
|
||||||
|
<div class="space-y-2 sm:space-y-3">
|
||||||
|
<div v-for="conflict in application.have_conflict" :key="conflict.request_id"
|
||||||
|
class="bg-white border border-red-200 rounded-md p-2 sm:p-3">
|
||||||
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-2 gap-1 sm:gap-0">
|
||||||
|
<span class="font-medium text-red-800">{{ conflict.user.name }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-xs text-red-600 space-y-2">
|
||||||
|
<div class="flex flex-col sm:flex-row sm:justify-between gap-1 sm:gap-2">
|
||||||
|
<span class="font-medium">Período aprobado:</span>
|
||||||
|
<span class="break-all sm:break-normal">{{ formatDate(conflict.conflicting_period.start_date) }} - {{ formatDate(conflict.conflicting_period.end_date) }} ({{ conflict.conflicting_period.number_of_days }} días)</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col sm:flex-row sm:justify-between gap-1 sm:gap-2">
|
||||||
|
<span class="font-medium">Período solicitado:</span>
|
||||||
|
<span class="break-all sm:break-normal">{{ formatDate(conflict.target_period.start_date) }} - {{ formatDate(conflict.target_period.end_date) }} ({{ conflict.target_period.number_of_days }} días)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Períodos solicitados -->
|
||||||
|
<div class="mb-4 sm:mb-6">
|
||||||
|
<h3 class="text-sm font-medium text-gray-700 mb-3">Períodos solicitados:</h3>
|
||||||
|
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div v-for="period in application.vacation_periods" :key="period.id"
|
||||||
|
class="flex flex-col sm:flex-row sm:items-center p-3 bg-gray-50 rounded-lg gap-3 sm:gap-0">
|
||||||
|
<div class="flex items-center flex-1">
|
||||||
|
<div class="w-6 h-6 sm:w-8 sm:h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2 sm:mr-3 flex-shrink-0">
|
||||||
|
<svg class="w-3 h-3 sm:w-4 sm:h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd"
|
||||||
|
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
|
||||||
|
clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col sm:flex-row sm:items-center sm:flex-1 gap-2">
|
||||||
|
<span class="text-gray-700 text-sm">
|
||||||
|
{{ formatDate(period.start_date) }} - {{ formatDate(period.end_date) }}
|
||||||
|
</span>
|
||||||
|
<span class="px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded-full font-medium self-start sm:self-auto">
|
||||||
|
{{ period.number_of_days }} {{ period.number_of_days === 1 ? 'día' : 'días' }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Botones de acción para períodos individuales -->
|
||||||
|
<div v-if="application.status === 'Pendiente'" class="flex gap-2 justify-start sm:justify-end">
|
||||||
|
<button
|
||||||
|
class="flex items-center justify-center gap-1 bg-green-500 hover:bg-green-600 text-white font-medium py-1.5 px-3 rounded text-xs transition-colors"
|
||||||
|
@click="application.vacation_periods.length > 1 ? approvePeriod(period.id) : approveAll(application.id)"
|
||||||
|
>
|
||||||
|
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd"
|
||||||
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||||
|
clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
Aprobar
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="flex items-center justify-center gap-1 bg-red-500 hover:bg-red-600 text-white font-medium py-1.5 px-3 rounded text-xs transition-colors">
|
||||||
|
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd"
|
||||||
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
Rechazar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Total -->
|
||||||
|
<div class="mt-3 text-right">
|
||||||
|
<span class="text-sm font-medium text-gray-700">
|
||||||
|
Total: {{ calculateTotalDays(application.vacation_periods) }} días
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Comentarios -->
|
||||||
|
<div v-if="application.comments" class="mb-4 sm:mb-6">
|
||||||
|
<h3 class="text-sm font-medium text-gray-700 mb-2">Comentarios:</h3>
|
||||||
|
<div class="p-3 bg-gray-50 rounded-lg">
|
||||||
|
<span class="text-gray-700 text-sm">{{ application.comments }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Motivo de rechazo -->
|
||||||
|
<div v-if="application.rejection_reason" class="mb-4 sm:mb-6">
|
||||||
|
<h3 class="text-sm font-medium text-red-700 mb-2">Motivo de rechazo:</h3>
|
||||||
|
<div class="p-3 bg-red-50 rounded-lg border border-red-200">
|
||||||
|
<span class="text-red-700 text-sm">{{ application.rejection_reason }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Botones de acción -->
|
||||||
|
<div v-if="application.status === 'Pendiente' && application.vacation_periods.length > 1" class="flex flex-col sm:flex-row gap-2 sm:gap-3">
|
||||||
|
<button
|
||||||
|
class="flex items-center justify-center gap-2 bg-green-500 hover:bg-green-600 text-white font-medium py-2.5 sm:py-2 px-4 rounded-lg transition-colors"
|
||||||
|
@click="approveAll(application.id)"
|
||||||
|
>
|
||||||
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd"
|
||||||
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||||
|
clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
Aprobar todo
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="flex items-center justify-center gap-2 bg-red-500 hover:bg-red-600 text-white font-medium py-2.5 sm:py-2 px-4 rounded-lg transition-colors">
|
||||||
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd"
|
||||||
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
Rechazar todo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mensaje cuando no hay solicitudes -->
|
||||||
|
<div v-if="!applicationsForCoordinator || applicationsForCoordinator.length === 0"
|
||||||
|
class="text-center py-8 sm:py-12 px-4">
|
||||||
|
<div class="w-12 h-12 sm:w-16 sm:h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<svg class="w-6 h-6 sm:w-8 sm:h-8 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-base sm:text-lg font-medium text-gray-900 mb-2">No hay solicitudes pendientes</h3>
|
||||||
|
<p class="text-sm sm:text-base text-gray-500">Tu equipo no tiene solicitudes de vacaciones que requieran revisión.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="order-1 lg:order-2 lg:col-span-4">
|
||||||
|
<Calendar
|
||||||
|
ref="calendarRef"
|
||||||
|
:conflictDays="conflictDays"
|
||||||
|
@monthChanged="fetchConflictDays"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
16
src/pages/Vacations/Coordinator/Module.js
Normal file
16
src/pages/Vacations/Coordinator/Module.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { lang } from '@Lang/i18n';
|
||||||
|
|
||||||
|
// Ruta API
|
||||||
|
const apiTo = (name, params = {}) => route(`vacation-requests.coordinator.${name}`, params)
|
||||||
|
|
||||||
|
// Ruta visual
|
||||||
|
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `vacations.coordinator.${name}`, params, query })
|
||||||
|
|
||||||
|
// Obtener traducción del componente
|
||||||
|
const transl = (str) => lang(`vacations.${str}`)
|
||||||
|
|
||||||
|
export {
|
||||||
|
viewTo,
|
||||||
|
apiTo,
|
||||||
|
transl
|
||||||
|
}
|
||||||
181
src/pages/Vacations/Employee/Create.vue
Normal file
181
src/pages/Vacations/Employee/Create.vue
Normal file
@ -0,0 +1,181 @@
|
|||||||
|
<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>
|
||||||
236
src/pages/Vacations/Employee/Form.vue
Normal file
236
src/pages/Vacations/Employee/Form.vue
Normal file
@ -0,0 +1,236 @@
|
|||||||
|
<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>
|
||||||
136
src/pages/Vacations/Employee/Index.vue
Normal file
136
src/pages/Vacations/Employee/Index.vue
Normal file
@ -0,0 +1,136 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { api } from '@Services/Api';
|
||||||
|
import { getDate } from '@Controllers/DateController';
|
||||||
|
import { apiTo, viewTo } from './Module'
|
||||||
|
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||||
|
|
||||||
|
/** Propiedades */
|
||||||
|
const vacationRequests = ref([]);
|
||||||
|
|
||||||
|
/** Metodos */
|
||||||
|
const getStatusClasses = (status) => {
|
||||||
|
const statusMap = {
|
||||||
|
'Pendiente': 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
|
||||||
|
'Aprobado': 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
|
||||||
|
'Rechazado': 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
|
||||||
|
'Agendado': 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
|
||||||
|
'Cancelado': 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
|
||||||
|
'Concluido': 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300'
|
||||||
|
};
|
||||||
|
|
||||||
|
return statusMap[status] || 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusIcon = (status) => {
|
||||||
|
const iconMap = {
|
||||||
|
'Pendiente': { name: 'schedule', classes: 'text-amber-600 dark:text-amber-400' },
|
||||||
|
'Aprobado': { name: 'check_circle', classes: 'text-blue-600 dark:text-blue-400' },
|
||||||
|
'Rechazado': { name: 'cancel', classes: 'text-orange-600 dark:text-orange-400' },
|
||||||
|
'Agendado': { name: 'event', classes: 'text-green-600 dark:text-green-400' },
|
||||||
|
'Cancelado': { name: 'block', classes: 'text-red-600 dark:text-red-400' },
|
||||||
|
'Concluido': { name: 'task_alt', classes: 'text-cyan-600 dark:text-cyan-400' }
|
||||||
|
};
|
||||||
|
|
||||||
|
return iconMap[status] || { name: 'help', classes: 'text-gray-600 dark:text-gray-400' };
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusIconContainer = (status) => {
|
||||||
|
const containerMap = {
|
||||||
|
'Pendiente': 'bg-amber-100 dark:bg-amber-900/30',
|
||||||
|
'Aprobado': 'bg-blue-100 dark:bg-blue-900/30',
|
||||||
|
'Rechazado': 'bg-orange-100 dark:bg-orange-900/30',
|
||||||
|
'Agendado': 'bg-green-100 dark:bg-green-900/30',
|
||||||
|
'Cancelado': 'bg-red-100 dark:bg-red-900/30',
|
||||||
|
'Concluido': 'bg-cyan-100 dark:bg-cyan-900/30'
|
||||||
|
};
|
||||||
|
|
||||||
|
return containerMap[status] || 'bg-gray-100 dark:bg-gray-900/30';
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Ciclos */
|
||||||
|
onMounted(() => {
|
||||||
|
api.get(apiTo('index'), {
|
||||||
|
onSuccess: (r) => {
|
||||||
|
vacationRequests.value = r.vacation_requests.data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-center justify-between mb-8">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||||
|
Mis Solicitudes
|
||||||
|
</h1>
|
||||||
|
<p class="text-slate-600 dark:text-slate-400">Historial completo de todas tus solicitudes de vacaciones.</p>
|
||||||
|
</div>
|
||||||
|
<RouterLink :to="viewTo({ name: 'create' })">
|
||||||
|
<PrimaryButton
|
||||||
|
type="button"
|
||||||
|
class="flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<GoogleIcon name="calendar_month" />
|
||||||
|
Nueva Solicitud
|
||||||
|
</PrimaryButton>
|
||||||
|
</RouterLink>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Lista de solicitudes -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div v-for="vacation in vacationRequests" class="bg-white rounded-xl border border-slate-200 p-6 shadow-sm dark:bg-slate-800 dark:border-slate-700">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div :class="`flex items-center justify-center w-10 h-10 rounded-lg ${getStatusIconContainer(vacation.status)}`">
|
||||||
|
<GoogleIcon :name="getStatusIcon(vacation.status).name" :class="getStatusIcon(vacation.status).classes" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 v-if="vacation.vacation_periods.length > 1" class="font-semibold text-slate-900 dark:text-slate-100">{{ vacation.vacation_periods.length }} periodos</h3>
|
||||||
|
<h3 v-else class="font-semibold text-slate-900 dark:text-slate-100">{{ getDate(vacation.vacation_periods[0].start_date) }} - {{ getDate(vacation.vacation_periods[0].end_date) }}</h3>
|
||||||
|
<p class="text-sm text-slate-600 dark:text-slate-400">{{ vacation.total_days }} días</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span :class="`px-3 py-1 rounded-full text-sm font-medium ${getStatusClasses(vacation.status)}`">
|
||||||
|
{{ vacation.status }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-for="(period, index) in vacation.vacation_periods" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-medium text-slate-700 dark:text-slate-300">Período {{ index + 1 }}:</p>
|
||||||
|
<p class="text-sm text-slate-600 dark:text-slate-400">{{ getDate(period.start_date) }} - {{ getDate(period.end_date) }} ({{ period.number_of_days }} días)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-end gap-3">
|
||||||
|
<button class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-800 hover:bg-slate-100 rounded-lg with-transition dark:text-slate-400 dark:hover:text-slate-200 dark:hover:bg-slate-700">
|
||||||
|
<GoogleIcon name="visibility" />
|
||||||
|
Ver detalles
|
||||||
|
</button>
|
||||||
|
<button class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-lg with-transition dark:text-red-400 dark:hover:bg-red-900/20">
|
||||||
|
<GoogleIcon name="cancel" />
|
||||||
|
Cancelar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Estado vacío cuando no hay solicitudes -->
|
||||||
|
<div v-if="vacationRequests.length == 0" class="text-center py-12">
|
||||||
|
<GoogleIcon name="event_busy" class="text-slate-300 text-6xl mb-4 dark:text-slate-600" />
|
||||||
|
<h3 class="text-lg font-medium text-slate-900 dark:text-slate-100 mb-2">No tienes más solicitudes</h3>
|
||||||
|
<p class="text-slate-600 dark:text-slate-400 mb-6">Cuando realices nuevas solicitudes de vacaciones aparecerán aquí.</p>
|
||||||
|
<RouterLink :to="viewTo({ name: 'create' })">
|
||||||
|
<PrimaryButton>
|
||||||
|
<GoogleIcon name="add" class="mr-2" />
|
||||||
|
Nueva Solicitud
|
||||||
|
</PrimaryButton>
|
||||||
|
</RouterLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
16
src/pages/Vacations/Employee/Module.js
Normal file
16
src/pages/Vacations/Employee/Module.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { lang } from '@Lang/i18n';
|
||||||
|
|
||||||
|
// Ruta API
|
||||||
|
const apiTo = (name, params = {}) => route(`vacation-requests.employee.${name}`, params)
|
||||||
|
|
||||||
|
// Ruta visual
|
||||||
|
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `vacations.${name}`, params, query })
|
||||||
|
|
||||||
|
// Obtener traducción del componente
|
||||||
|
const transl = (str) => lang(`vacations.${str}`)
|
||||||
|
|
||||||
|
export {
|
||||||
|
viewTo,
|
||||||
|
apiTo,
|
||||||
|
transl
|
||||||
|
}
|
||||||
@ -38,6 +38,26 @@ const router = createRouter({
|
|||||||
icon: 'grid_view',
|
icon: 'grid_view',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'vacations',
|
||||||
|
name: 'vacations',
|
||||||
|
meta: {
|
||||||
|
title: 'Vacaciones',
|
||||||
|
icon: 'calendar_month',
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
name: 'vacations.index',
|
||||||
|
component: () => import('@Pages/Vacations/Employee/Index.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'create',
|
||||||
|
name: 'vacations.create',
|
||||||
|
component: () => import('@Pages/Vacations/Employee/Create.vue'),
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'profile',
|
path: 'profile',
|
||||||
name: 'profile.show',
|
name: 'profile.show',
|
||||||
@ -85,6 +105,21 @@ const router = createRouter({
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'vacations',
|
||||||
|
name: 'vacations.coordinator',
|
||||||
|
meta: {
|
||||||
|
title: 'Vacaciones',
|
||||||
|
icon: 'calendar_month',
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
name: 'vacations.coordinator.index',
|
||||||
|
component: () => import('@Pages/Vacations/Coordinator/Index.vue'),
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -194,6 +229,22 @@ const router = createRouter({
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'vacations',
|
||||||
|
name: 'admin.vacations',
|
||||||
|
meta: {
|
||||||
|
title: 'Vacaciones',
|
||||||
|
icon: 'calendar_month',
|
||||||
|
},
|
||||||
|
redirect: '/admin/vacations',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
name: 'admin.vacations.index',
|
||||||
|
component: () => import('@Pages/Vacations/Admin/Index.vue'),
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'courses',
|
path: 'courses',
|
||||||
name: 'admin.courses',
|
name: 'admin.courses',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user