admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[WIP] Добавил аптейд на расписание, настроил отображение дней

Browse Source
This commit is contained in:
megavrilinvv
2022-12-28 16:28:29 +03:00
parent 7a1bfd45c4
commit e4f96924f8
3 changed files with 103 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/pages/schedule/TheSchedule.vue
View File

@@ -16,14 +16,15 @@
:start-month="startMonth", :start-month="startMonth",
:clear-employee="clearEmployee", :clear-employee="clearEmployee",
@new-schedule-employee="createNewScheduleEmployee", @new-schedule-employee="createNewScheduleEmployee",
@schedule-employee="createScheduleEmployee" @schedule-employee="createScheduleEmployee",
@schedules="distributeRequest"
) )
schedule-bar( schedule-bar(
:data-schedule="dataSchedule", :data-schedule="dataSchedule",
:buttons="buttons", :buttons="buttons",
:clear-employee="clearEmployee", :clear-employee="clearEmployee",
:times="times", :times="times",
:create-schedule="postCreateSchedule" :create-schedules="postCreateSchedules"
) )
</template> </template>
@@ -59,7 +60,7 @@ export default {
text: "'Р'", text: "'Р'",
}, },
{ {
class: "button-status", class: "button-vacation",
name: "Отпуск/больничный", name: "Отпуск/больничный",
work: "VACATION", work: "VACATION",
active: false, active: false,
@@ -140,6 +141,7 @@ export default {
} }
}); });
this.serialized = serialized; this.serialized = serialized;
this.filterEmployee(); this.filterEmployee();
}, },
filterEmployee() { filterEmployee() {
@@ -148,39 +150,52 @@ export default {
this.serialized.every((item2) => item2.id !== item.id) this.serialized.every((item2) => item2.id !== item.id)
); );
}, },
postCreateSchedule() { distributeRequest(inside, outside) {
this.insideSchedules = inside;
this.outsideSchedules = outside;
},
postCreateSchedules() {
let newSchedule = null; let newSchedule = null;
if (this.clearEmployee.find((e) => e.schedules)) if (this.clearEmployee.find((e) => e.schedules))
newSchedule = this.clearEmployee.find((e) => e.schedules); newSchedule = this.clearEmployee.find((e) => e.schedules);
else newSchedule = this.serialized.find((e) => e.schedule); else newSchedule = this.serialized.find((e) => e.schedule);
let data = {
fetchWrapper employee: newSchedule.id,
.post("accounts/schedules/create/", { active_flg: true,
employee: newSchedule.id, start_time: this.times.start_time,
active_flg: true, end_time: this.times.end_time,
status: this.buttons.find((e) => e.active).work,
};
if (this.insideSchedules.length > 0) {
this.postUpdateSchedule();
this.outsideSchedules.forEach((el) => {
fetchWrapper.post("accounts/schedules/create/", {
...data,
start_date: el.start_date,
end_date: el.end_date,
});
});
} else {
fetchWrapper.post("accounts/schedules/create/", {
...data,
start_date: start_date:
newSchedule.schedules.start_date || newSchedule.schedule.start_date, newSchedule.schedules.start_date || newSchedule.schedule.start_date,
end_date: end_date:
newSchedule.schedules.end_date || newSchedule.schedule.end_date, newSchedule.schedules.end_date || newSchedule.schedule.end_date,
start_time: this.times.start_time, });
end_time: this.times.end_time, }
status: this.buttons.find((e) => e.active).work,
})
.then(() => this.fetchSchedules());
}, },
postUpdateSchedule(id) { postUpdateSchedule() {
let currentEmployee = this.clearEmployee.find((e) => e.schedules); let ids = "";
fetchWrapper this.insideSchedules.forEach((e) => (ids += e.id + ","));
.post(`accounts/schedules/${id}/update/`, { ids = ids.slice(0, -1);
employee: currentEmployee.id, fetchWrapper.post(`accounts/schedules/${ids}/update/`, {
active_flg: true, employee: this.insideSchedules[0].employeeId,
start_date: currentEmployee.schedules.start_date, active_flg: true,
end_date: currentEmployee.schedules.end_date, start_time: this.insideSchedules[0].start_time,
start_time: this.times.start_time, end_time: this.insideSchedules[0].end_time,
end_time: this.times.end_time, status: this.buttons.find((e) => e.active).work,
status: this.buttons.find((e) => e.active).work, });
})
.then(() => this.fetchSchedules());
}, },
createNewScheduleEmployee(e) { createNewScheduleEmployee(e) {
let schedules = { let schedules = {

6
src/pages/schedule/components/ScheduleBar.vue
View File

@@ -27,7 +27,7 @@
placeholder="Шаблоны графиков" placeholder="Шаблоны графиков"
) )
.flex.justify-center .flex.justify-center
base-button.font-semibold(:size="40", @click="createSchedule") Сохранить base-button.font-semibold(:size="40", @click="createSchedules") Сохранить
</template> </template>
<script> <script>
@@ -43,7 +43,7 @@ export default {
buttons: Array, buttons: Array,
clearEmployee: Array, clearEmployee: Array,
times: Object, times: Object,
createSchedule: Function, createSchedules: Function,
}, },
data() { data() {
return { return {
@@ -112,7 +112,7 @@ export default {
opacity: 0.8 opacity: 0.8
border: none border: none
.button-status .button-vacation
background: #D7D9FF background: #D7D9FF
border: none border: none
&:active &:active

95
src/pages/schedule/components/ScheduleBody.vue
View File

@@ -1,12 +1,14 @@
<template lang="pug"> <template lang="pug">
.schedule.flex-col(:style="themeCell") .schedule.flex-col(:style="themeCell")
.table-header.flex.w-full .table-header.flex.w-full
.flex.items-center.justify-center.pl-11(:style="{width: 'calc(25% + 44px)'}") .flex.items-center.justify-center.pl-11(
:style="{width: 'calc(25% + 44px)'}"
)
.text.font-bold Сотрудник .text.font-bold Сотрудник
.column-wrapper.flex .column-wrapper.flex
.schedule-column.flex.flex-col.items-center.justify-center.w-11( .schedule-column.flex.flex-col.items-center.justify-center.w-11(
v-for="day in result", v-for="day in result",
:style="{backgroundColor: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? 'var(--bg-white-color-1)' : ''}" :class="{'column-color': changelColumnColor(day)}",
) )
.text.flex.font-bold( .text.flex.font-bold(
:style="{opacity: changeOpacity(day)}" :style="{opacity: changeOpacity(day)}"
@@ -25,11 +27,13 @@
:key="day", :key="day",
:id="schedule.id + day", :id="schedule.id + day",
@click="choiceCell(day, schedule.id, schedule)", @click="choiceCell(day, schedule.id, schedule)",
:class="selectTime(day, schedule.id)", :class="choiceState(day, schedule.id)",
:style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day) : ''}" :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : ''}"
) )
.flex {{choiceDay(day, schedule.id) ? choiceWorks(day) : ''}} .flex(
.schedule-body.flex.w-full(v-if="clearEmployee", :style="{height: '44px'}", v-click-outside="saveEmployee") :class="{'cell-work': choiceState(day, schedule.id).status}"
) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : ''}}
.schedule-body.flex.w-full(v-if="clearEmployee", :style="{height: '44px'}")
.edit.flex.items-center.justify-center.h-11.w-11(:style="{borderBottom: 'none'}") .edit.flex.items-center.justify-center.h-11.w-11(:style="{borderBottom: 'none'}")
.flex.icon-edit(v-if="currentEmployee.label") .flex.icon-edit(v-if="currentEmployee.label")
//- base-button( //- base-button(
@@ -58,7 +62,7 @@
:key="day", :key="day",
:id="currentEmployee.id + day", :id="currentEmployee.id + day",
@click="choiceCell(day, currentEmployee.id)", @click="choiceCell(day, currentEmployee.id)",
:class="selectTime(day, currentEmployee.id)", :class="choiceState(day, currentEmployee.id)",
:style="{borderBottom: 'none'}" :style="{borderBottom: 'none'}"
) )
</template> </template>
@@ -133,11 +137,24 @@ export default {
}, },
}, },
methods: { methods: {
changelColumnColor(day) {
return day.format("ddd") === "сб" || day.format("ddd") === "вс"
? true
: false;
},
setActiveButton() { setActiveButton() {
this.activeButton = this.buttons.find((e) => e.active); this.activeButton = this.buttons.find((e) => e.active);
}, },
choiceCell(time, id, schedule) { choiceCell(time, id, schedule) {
let formatTime = time.format("YYYY-MM-DD"); let formatTime = time.format("YYYY-MM-DD");
let insideSchedules = schedule?.schedules.filter(
(el) =>
(el.date > this.dateInterval.start &&
el.date < this.dateInterval.end) ||
el.date === this.dateInterval.start ||
el.date === this.dateInterval.end
);
if ( if (
this.dateInterval.start && this.dateInterval.start &&
this.dateInterval.end && this.dateInterval.end &&
@@ -147,6 +164,7 @@ export default {
this.dateInterval.end = ""; this.dateInterval.end = "";
this.dateInterval.id = ""; this.dateInterval.id = "";
} }
if (!this.dateInterval.start) { if (!this.dateInterval.start) {
this.dateInterval.start = formatTime; this.dateInterval.start = formatTime;
this.dateInterval.id = id; this.dateInterval.id = id;
@@ -156,43 +174,44 @@ export default {
this.$emit("new-schedule-employee", this.dateInterval); this.$emit("new-schedule-employee", this.dateInterval);
} else this.$emit("schedule-employee", this.dateInterval); } else this.$emit("schedule-employee", this.dateInterval);
} else this.dateInterval.start = formatTime; } else this.dateInterval.start = formatTime;
if ( if (
!this.currentEmployee.label && !this.currentEmployee.label &&
this.dateInterval.start && this.dateInterval.start &&
this.dateInterval.end this.dateInterval.end &&
insideSchedules
) )
this.rangeSchdedules(schedule); this.rangeSchdedules(schedule, insideSchedules, id);
}, },
rangeSchdedules(schedule) { rangeSchdedules(schedule, insideSchedules, id) {
let insideSchedules = schedule.schedules.filter( insideSchedules = schedule.schedules.filter(
(el) => (el) =>
(el.date > this.dateInterval.start && (el.date > this.dateInterval.start &&
el.date < this.dateInterval.end) || el.date < this.dateInterval.end) ||
el.date === this.dateInterval.start || el.date === this.dateInterval.start ||
el.date === this.dateInterval.end el.date === this.dateInterval.end
); );
if (insideSchedules.length > 0) insideSchedules[0].employeeId = id;
let keys = Object.keys(insideSchedules); let keys = Object.keys(insideSchedules);
let outsideSchedules = []; let outsideSchedules = [];
let firstDate = insideSchedules[keys[0]].date; let firstDate = insideSchedules[keys[0]]?.date;
let lastDate = insideSchedules[keys.length - 1].date; let lastDate = insideSchedules[keys.length - 1]?.date;
if (this.dateInterval.start < firstDate) { if (this.dateInterval.start < firstDate) {
outsideSchedules.push({ outsideSchedules.push({
before: { start_date: this.dateInterval.start,
start_date: this.dateInterval.start, end_date: moment(firstDate).subtract(1, "d").format("YYYY-MM-DD"),
end_date: moment(firstDate).subtract(1, "d").format("YYYY-MM-DD"),
},
}); });
} }
if (this.dateInterval.end > lastDate) if (this.dateInterval.end > lastDate)
outsideSchedules.push({ outsideSchedules.push({
after: { start_date: moment(lastDate).add(1, "d").format("YYYY-MM-DD"),
start_date: moment(lastDate).add(1, "d").format("YYYY-MM-DD"), end_date: this.dateInterval.end,
end_date: this.dateInterval.end,
},
}); });
this.$emit("schedules", insideSchedules, outsideSchedules);
}, },
selectTime(day, id) { choiceState(day, id) {
let formatDay = day.format("YYYY-MM-DD"); let formatDay = day.format("YYYY-MM-DD");
let resStart = let resStart =
this.dateInterval.start && this.dateInterval.start &&
@@ -210,7 +229,7 @@ export default {
day.isAfter(this.dateInterval.start); day.isAfter(this.dateInterval.start);
return { return {
status: !(!resStart && !resMiddle && !resEnd && !!this.activeButton), status: (resStart || resMiddle || resEnd) && !!this.activeButton,
"from-date": !!resStart && !this.activeButton, "from-date": !!resStart && !this.activeButton,
"to-date": !!resEnd && !this.activeButton, "to-date": !!resEnd && !this.activeButton,
"middle-dates": !!resMiddle && !this.activeButton, "middle-dates": !!resMiddle && !this.activeButton,
@@ -220,19 +239,15 @@ export default {
this.currentEmployee.label = ""; this.currentEmployee.label = "";
this.currentEmployee.id = null; this.currentEmployee.id = null;
}, },
choiceWorks(day) { choiceWorks(day, employee) {
let currentDay = day.format("YYYY-MM-DD"); let currentDay = day.format("YYYY-MM-DD");
let res = this.scheduleList.find((e) => e.date === currentDay).status; let res = employee.schedules.find((e) => e.date === currentDay)?.status;
// if (this.activeButton) { return this.buttons.find((e) => e.work === res)?.text[1];
// return this.buttons.find((e) => e.work === this.activeButton?.text[1])
// ?.text[1];
// }
return this.buttons.find((e) => e.work === res).text[1];
}, },
choiceColor(day) { choiceColor(day, employee) {
let currentDay = day.format("YYYY-MM-DD"); let currentDay = day.format("YYYY-MM-DD");
let res = this.scheduleList.find((e) => e.date === currentDay).status; let res = employee.schedules.find((e) => e.date === currentDay)?.status;
if (res) return this.buttons.find((e) => e.work === res).color; return this.buttons.find((e) => e.work === res)?.color;
}, },
changeDays() { changeDays() {
this.days = moment().daysInMonth(); this.days = moment().daysInMonth();
@@ -291,6 +306,9 @@ export default {
.column-wrapper .column-wrapper
overflow: auto overflow: auto
.column-color
background-color: var(--bg-white-color-1)
.text .text
color: var(--btn-blue-color) color: var(--btn-blue-color)
@@ -320,17 +338,20 @@ export default {
height: 500px height: 500px
.status .status
background-color: var(--bg-color-status) background-color: var(--bg-color-status) !important
.cell-work
display: none
.status::after .status::after
content: var(--text-status) content: var(--text-status)
.from-date .from-date
background-color: limegreen !important background-color: limegreen
.to-date .to-date
background-color: red !important background-color: red
.middle-dates .middle-dates
background-color: yellow !important background-color: yellow
</style> </style>