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' },
|
redirect: { name: 'WorkerMain' },
|
||||||
menus: {
|
menus: {
|
||||||
main: ['WorkerList', 'WorkerDepartment'],
|
main: ['WorkerList', 'WorkerDepartment'],
|
||||||
card: ['WorkerNotificationsManager', 'WorkerPda'],
|
card: ['WorkerNotificationsManager', 'WorkerCalendar', 'WorkerPda'],
|
||||||
departmentCard: ['BasicData'],
|
departmentCard: ['BasicData'],
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
|
|
@ -76,6 +76,15 @@ export default {
|
||||||
component: () =>
|
component: () =>
|
||||||
import('src/pages/Worker/Card/WorkerNotificationsManager.vue'),
|
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',
|
name: 'WorkerPda',
|
||||||
path: 'pda',
|
path: 'pda',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue