138 lines
3.6 KiB
Vue
138 lines
3.6 KiB
Vue
<template lang="pug">
|
||
.wrapper.flex.w-full.relative.mx-2
|
||
.schedule-wrapper.relative.flex.flex-col.px-6.py-6.h-full.w-full.gap-y-5
|
||
schedule-header
|
||
schedule-body(
|
||
:employee-list="employeeList",
|
||
:schedules-employee="fetchSchedulesEmployee",
|
||
:schedule-list="scheduleList",
|
||
:serialized="serialized",
|
||
:data-schedule="dataSchedule",
|
||
:buttons="buttons"
|
||
)
|
||
schedule-bar(:data-schedule="dataSchedule", :select-work="selectWork", :buttons="buttons")
|
||
</template>
|
||
|
||
<script>
|
||
import ScheduleHeader from "@/pages/schedule/components/ScheduleHeader.vue";
|
||
import ScheduleBar from "@/pages/schedule/components/ScheduleBar.vue";
|
||
import ScheduleBody from "@/pages/schedule/components/ScheduleBody.vue";
|
||
import { fetchWrapper } from "@/shared/fetchWrapper.js";
|
||
export default {
|
||
name: "TheSchedule",
|
||
components: { ScheduleHeader, ScheduleBar, ScheduleBody },
|
||
data() {
|
||
return {
|
||
employeeList: [],
|
||
scheduleList: [],
|
||
serialized: [],
|
||
dataSchedule: {
|
||
status: "",
|
||
date: null,
|
||
startTime: "",
|
||
endTime: "",
|
||
},
|
||
buttons: [
|
||
{
|
||
class: "button-work",
|
||
name: "Работает",
|
||
work: "WORKS",
|
||
active: false,
|
||
color: "#55CD76",
|
||
text: "Р",
|
||
},
|
||
{
|
||
class: "button-status",
|
||
name: "Отпуск/больничный",
|
||
work: "VACATION",
|
||
active: false,
|
||
color: "#D7D9FF",
|
||
text: "О",
|
||
},
|
||
{
|
||
class: "button-free",
|
||
name: "Статусы",
|
||
work: "DAY_OFF",
|
||
active: false,
|
||
color: "#9294A7",
|
||
text: "В",
|
||
},
|
||
],
|
||
};
|
||
},
|
||
methods: {
|
||
fetchSchedules() {
|
||
fetchWrapper
|
||
.get("general/employee/")
|
||
.then((res) => {
|
||
this.employeeList = res.results;
|
||
})
|
||
.then(() => this.fetchSchedulesEmployee());
|
||
},
|
||
fetchSchedulesEmployee() {
|
||
this.employeeList.forEach((e) => {
|
||
fetchWrapper
|
||
.get(`accounts/schedules/?employee=${e.id}`)
|
||
.then((data) => {
|
||
this.scheduleList.push(...data.results);
|
||
})
|
||
.then(() => this.filterScheduleEmployee());
|
||
});
|
||
},
|
||
filterScheduleEmployee() {
|
||
let serialized = [];
|
||
this.scheduleList.forEach((e) => {
|
||
let foundedElem = serialized.find((elem) => elem.id === e.employee.id);
|
||
if (!foundedElem) {
|
||
serialized.push({
|
||
first_name: e.employee.first_name,
|
||
id: e.employee.id,
|
||
last_name: e.employee.last_name,
|
||
patronymic: e.employee.patronymic,
|
||
schedules: [
|
||
{
|
||
date: e.date,
|
||
end_time: e.end_time,
|
||
start_time: e.start_time,
|
||
status: e.status,
|
||
id: e.id,
|
||
title: e.title,
|
||
name: e.name,
|
||
},
|
||
],
|
||
});
|
||
} else {
|
||
foundedElem.schedules.push({
|
||
date: e.date,
|
||
end_time: e.end_time,
|
||
start_time: e.start_time,
|
||
status: e.status,
|
||
id: e.id,
|
||
title: e.title,
|
||
name: e.name,
|
||
});
|
||
}
|
||
});
|
||
this.serialized = serialized;
|
||
},
|
||
selectWork(work) {
|
||
this.dataSchedule.status = work;
|
||
},
|
||
},
|
||
mounted() {
|
||
this.fetchSchedules();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="sass" scoped>
|
||
.wrapper
|
||
overflow: auto
|
||
border-top-left-radius: 4px
|
||
border-top-right-radius: 4px
|
||
|
||
.schedule-wrapper
|
||
background-color: var(--default-white)
|
||
height: calc(100vh - 64px)
|
||
</style>
|