forked from verdnatura/salix-front
Create worker calendar submodule
This commit is contained in:
Kevin Martinez
parent
3d1e34a5b0
commit
0dee7e8cc9
|
|
@ -0,0 +1,95 @@
|
|||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import WorkerCalendarFilter from 'pages/Worker/Card/WorkerCalendarFilter.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { ref } from 'vue';
|
||||
import WorkerCalendarItem from "pages/Worker/Card/WorkerCalendarItem.vue";
|
||||
|
||||
const stateStore = useStateStore();
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
||||
const businessFk = ref(null);
|
||||
const absenceType = ref(null);
|
||||
const hasWorkCenter = ref(false);
|
||||
const isSubordinate = ref(false);
|
||||
const year = ref(Date.vnNew().getFullYear());
|
||||
|
||||
const onFetchActiveContract = (data) => {
|
||||
businessFk.value = data?.businessFk;
|
||||
hasWorkCenter.value = Boolean(data?.workCenterFk);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
:url="`Workers/${route.params.id}/activeContract`"
|
||||
@on-fetch="onFetchActiveContract"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
:url="`Workers/${route.params.id}/isSubordinate`"
|
||||
@on-fetch="(data) => (isSubordinate = data)"
|
||||
auto-load
|
||||
/>
|
||||
<template v-if="stateStore.isHeaderMounted()">
|
||||
<Teleport to="#actions-append">
|
||||
<div class="row q-gutter-x-sm">
|
||||
<QBtn
|
||||
flat
|
||||
@click="stateStore.toggleRightDrawer()"
|
||||
round
|
||||
dense
|
||||
icon="menu"
|
||||
>
|
||||
<QTooltip bottom anchor="bottom right">
|
||||
{{ t('globals.collapseMenu') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<WorkerCalendarFilter
|
||||
v-model:business-fk="businessFk"
|
||||
v-model:year="year"
|
||||
v-model:absence-type="absenceType"
|
||||
/>
|
||||
</QScrollArea>
|
||||
</QDrawer>
|
||||
<QPage class="column items-center q-pa-md">
|
||||
<QCard v-if="!hasWorkCenter">
|
||||
<QCardSection class="text-center">
|
||||
{{ t('Autonomous worker') }}
|
||||
</QCardSection>
|
||||
</QCard>
|
||||
<QCard class="full-width">
|
||||
<QCardSection class="card-calendar">
|
||||
<WorkerCalendarItem
|
||||
class="full-width"
|
||||
show-work-weeks
|
||||
animated
|
||||
bordered
|
||||
mini-mode
|
||||
:year="year"
|
||||
month="1"
|
||||
/>
|
||||
</QCardSection>
|
||||
</QCard>
|
||||
</QPage>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.card-calendar{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Search worker: Buscar trabajador
|
||||
You can search by worker id or name: Puedes buscar por id o nombre del trabajador
|
||||
</i18n>
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
<script setup>
|
||||
import WorkerDateLabel from 'pages/Worker/Card/WorkerDateLabel.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { toDateFormat } from '../../../filters/date';
|
||||
import axios from 'axios';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
const props = defineProps({
|
||||
businessFk: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
year: {
|
||||
type: [Number, String],
|
||||
default: null,
|
||||
},
|
||||
absenceType: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:businessFk', 'update:year', 'update:absenceType']);
|
||||
|
||||
const selectedBusinessFk = computed({
|
||||
get: () => props.businessFk,
|
||||
set: (value) => {
|
||||
console.log('businessFk', value);
|
||||
emit('update:businessFk', value);
|
||||
},
|
||||
});
|
||||
const selectedYear = computed({
|
||||
get: () => props.year,
|
||||
set: (value) => emit('update:year', value),
|
||||
});
|
||||
const selectedAbsenceType = computed({
|
||||
get: () => props.absenceType,
|
||||
set: (value) => emit('update:absenceType', value),
|
||||
});
|
||||
|
||||
const generateYears = () => {
|
||||
const now = Date.vnNew();
|
||||
const maxYear = now.getFullYear() + 1;
|
||||
|
||||
return Array.from({ length: 5 }, (_, i) => String(maxYear - i));
|
||||
};
|
||||
|
||||
const absenceTypeList = ref([]);
|
||||
const contractList = ref([]);
|
||||
const yearList = ref(generateYears());
|
||||
|
||||
const contractHolidays = ref(null);
|
||||
const yearHolidays = ref(null);
|
||||
|
||||
const getHolidays = async (params) => {
|
||||
return axios
|
||||
.get(`Workers/${route.params.id}/holidays`, { params })
|
||||
.then((res) => res.data);
|
||||
};
|
||||
|
||||
const updateContractHolidays = async () => {
|
||||
contractHolidays.value = await getHolidays({
|
||||
businessFk: selectedBusinessFk.value,
|
||||
year: selectedYear.value,
|
||||
});
|
||||
};
|
||||
|
||||
const updateYearHolidays = async () => {
|
||||
yearHolidays.value = await getHolidays({ year: selectedYear.value });
|
||||
};
|
||||
|
||||
watch(selectedYear, () => {
|
||||
updateYearHolidays();
|
||||
updateContractHolidays();
|
||||
});
|
||||
|
||||
watch(selectedBusinessFk, () => {
|
||||
updateYearHolidays();
|
||||
updateContractHolidays();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
url="AbsenceTypes"
|
||||
@on-fetch="(data) => (absenceTypeList = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
v-if="businessFk"
|
||||
:url="`Workers/${route.params.id}/contracts`"
|
||||
:filter="{
|
||||
fields: ['businessFk', 'businessFk', 'started', 'ended'],
|
||||
where: { businessFk },
|
||||
}"
|
||||
@on-fetch="(data) => (contractList = data)"
|
||||
auto-load
|
||||
/>
|
||||
<QItem v-if="contractHolidays" class="q-py-md">
|
||||
<QItemSection class="text-center">
|
||||
<p class="holiday-title q-mb-sm">
|
||||
{{ t('Contract') }} #{{ selectedBusinessFk }}
|
||||
</p>
|
||||
<div>
|
||||
{{ t('Used') }} {{ contractHolidays.holidaysEnjoyed || 0 }} {{ t('of') }}
|
||||
{{ contractHolidays.totalHolidays || 0 }}
|
||||
{{ t('days') }}
|
||||
</div>
|
||||
<div>
|
||||
{{ t('Spent') }} {{ contractHolidays.hoursEnjoyed || 0 }} {{ t('of') }}
|
||||
{{ contractHolidays.totalHours || 0 }} {{ t('hours') }}
|
||||
</div>
|
||||
<div>
|
||||
{{ t('Paid holidays') }}
|
||||
{{ contractHolidays.payedHolidays || 0 }}
|
||||
{{ t('days') }}
|
||||
</div>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QSeparator />
|
||||
<QItem v-if="yearHolidays" class="q-py-md">
|
||||
<QItemSection class="text-center">
|
||||
<p class="holiday-title q-mb-sm">{{ t('Year') }} {{ selectedYear }}</p>
|
||||
<div>
|
||||
{{ t('Used') }} {{ yearHolidays.holidaysEnjoyed || 0 }} {{ t('of') }}
|
||||
{{ yearHolidays.totalHolidays || 0 }} {{ t('days') }}
|
||||
</div>
|
||||
<div>
|
||||
{{ t('Spent') }} {{ yearHolidays.hoursEnjoyed || 0 }} {{ t('of') }}
|
||||
{{ yearHolidays.totalHours || 0 }} {{ t('hours') }}
|
||||
</div>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QSeparator />
|
||||
<QList dense class="list q-gutter-y-sm q-my-lg">
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<VnSelectFilter
|
||||
:label="t('Year')"
|
||||
v-model="selectedYear"
|
||||
:options="yearList || []"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
use-input
|
||||
:is-clearable="false"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<VnSelectFilter
|
||||
:label="t('Contract')"
|
||||
v-model="selectedBusinessFk"
|
||||
:options="contractList || []"
|
||||
option-value="businessFk"
|
||||
option-label="businessFk"
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
use-input
|
||||
:is-clearable="false"
|
||||
>
|
||||
<template #option="scope">
|
||||
<QItem v-bind="scope.itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel># {{ scope.opt?.businessFk }}</QItemLabel>
|
||||
<QItemLabel caption>
|
||||
{{ toDateFormat(scope.opt?.started) }} -
|
||||
{{
|
||||
scope.opt?.ended
|
||||
? toDateFormat(scope.opt?.ended)
|
||||
: 'Indef.'
|
||||
}}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectFilter>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QList>
|
||||
<QList dense class="list q-gutter-y-sm q-my-lg">
|
||||
<QItem v-for="type in absenceTypeList" :key="type.id">
|
||||
<WorkerDateLabel
|
||||
:color="type.rgb"
|
||||
:selected="selectedAbsenceType === type.id"
|
||||
@click="selectedAbsenceType = type.id"
|
||||
>
|
||||
{{ type.name }}
|
||||
</WorkerDateLabel>
|
||||
</QItem>
|
||||
</QList>
|
||||
<QSeparator />
|
||||
<QList dense class="list q-my-lg">
|
||||
<QItem>
|
||||
<WorkerDateLabel avatar-class="worker-calendar-festive">
|
||||
Festive
|
||||
</WorkerDateLabel>
|
||||
<WorkerDateLabel avatar-class="worker-calendar-today">
|
||||
Current day
|
||||
</WorkerDateLabel>
|
||||
</QItem>
|
||||
</QList>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.worker-calendar-festive {
|
||||
border: 2px solid $negative;
|
||||
}
|
||||
|
||||
.worker-calendar-today {
|
||||
border: 2px solid $info;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.holiday-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Used: Utilizados
|
||||
Spent: Utilizadas
|
||||
Paid holidays: Vacaciones pagadas
|
||||
of: de
|
||||
days: días
|
||||
hours: horas
|
||||
Year: Año
|
||||
Contract: Contrato
|
||||
Festive: Festivo
|
||||
Current day: Día actual
|
||||
</i18n>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<script setup>
|
||||
import {onBeforeMount, ref} from 'vue';
|
||||
import { QCalendarMonth, today } from '@quasar/quasar-ui-qcalendar/src/index.js';
|
||||
import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass';
|
||||
import '@quasar/quasar-ui-qcalendar/src/QCalendarTransitions.sass';
|
||||
import '@quasar/quasar-ui-qcalendar/src/QCalendarMonth.sass';
|
||||
|
||||
const props = defineProps({
|
||||
year: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
month: {
|
||||
type: Number,
|
||||
required: true,
|
||||
}
|
||||
})
|
||||
const calendarRef = ref(null);
|
||||
const selectedDate = ref(today());
|
||||
|
||||
onBeforeMount(() => {
|
||||
const date = Date.vnNew()
|
||||
date.setFullYear(props.year)
|
||||
date.setMonth(props.month - 1)
|
||||
selectedDate.value = date.toDateString()
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
{{selectedDate}}
|
||||
<QCalendarMonth
|
||||
ref="calendarRef"
|
||||
v-model="selectedDate"
|
||||
v-bind="$attrs"
|
||||
show-work-weeks
|
||||
no-outside-days
|
||||
:disabled-weekdays="[0,6]"
|
||||
animated
|
||||
bordered
|
||||
mini-mode
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -12,7 +12,7 @@ export default {
|
|||
redirect: { name: 'WorkerMain' },
|
||||
menus: {
|
||||
main: ['WorkerList', 'WorkerDepartment'],
|
||||
card: ['WorkerNotificationsManager', 'WorkerPda'],
|
||||
card: ['WorkerNotificationsManager', 'WorkerCalendar', 'WorkerPda'],
|
||||
departmentCard: ['BasicData'],
|
||||
},
|
||||
children: [
|
||||
|
|
@ -76,6 +76,15 @@ export default {
|
|||
component: () =>
|
||||
import('src/pages/Worker/Card/WorkerNotificationsManager.vue'),
|
||||
},
|
||||
{
|
||||
name: 'WorkerCalendar',
|
||||
path: 'calendar',
|
||||
meta: {
|
||||
title: 'calendar',
|
||||
icon: 'calendar_today',
|
||||
},
|
||||
component: () => import('src/pages/Worker/Card/WorkerCalendar.vue'),
|
||||
},
|
||||
{
|
||||
name: 'WorkerPda',
|
||||
path: 'pda',
|
||||
|
|
|
|||
Loading…
Reference in New Issue