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

[WIP] Добавил отображение рабочего времени, фикс create and update

Browse Source
This commit is contained in:
megavrilinvv
2022-12-30 17:17:11 +03:00
parent 2b13957fe2
commit ee538bc2b5
3 changed files with 94 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,17 +4,19 @@
schedule-header(
:start-month="startMonth",
:times-shift="timesShift",
:change-show-time="changeShowTime",
:show-time="showTime"
@switch-previous-month="switchPreviousMonth",
@switch-next-month="switchNextMonth"
)
schedule-body(
schedule-table(
:schedules-employee="fetchSchedulesEmployee",
:schedule-list="scheduleList",
:serialized="serialized",
:buttons="buttons",
:start-month="startMonth",
:clear-employee="clearEmployee",
@new-schedule-employee="createNewScheduleEmployee",
:show-time="showTime",
@schedule-employee="createScheduleEmployee",
@schedules="distributeRequest"
)
@@ -29,11 +31,12 @@
import * as moment from "moment";
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 ScheduleTable from "@/pages/schedule/components/ScheduleTable.vue";
import { fetchWrapper } from "@/shared/fetchWrapper.js";
export default {
name: "TheSchedule",
components: { ScheduleHeader, ScheduleBar, ScheduleBody },
components: { ScheduleHeader, ScheduleBar, ScheduleTable },
data() {
return {
employeeList: [],
@@ -69,6 +72,9 @@ export default {
},
],
startMonth: moment().startOf("month"),
showTime: false,
currentEmployee: {},
schedulesDate: {},
};
},
computed: {
@@ -77,6 +83,9 @@ export default {
},
},
methods: {
changeShowTime() {
this.showTime = !this.showTime;
},
fetchSchedules() {
fetchWrapper
.get("general/employee/")
@@ -111,8 +120,8 @@ export default {
schedules: [
{
date: e.date,
end_time: e.end_time,
start_time: e.start_time,
end_time: e.end_time ? e.end_time.slice(0, -3) : "",
start_time: e.start_time ? e.start_time.slice(0, -3) : "",
status: e.status,
id: e.id,
title: e.title,
@@ -123,8 +132,8 @@ export default {
} else {
foundedElem.schedules.push({
date: e.date,
end_time: e.end_time,
start_time: e.start_time,
end_time: e.end_time ? e.end_time.slice(0, -3) : "",
start_time: e.start_time ? e.start_time.slice(0, -3) : "",
status: e.status,
id: e.id,
title: e.title,
@@ -138,67 +147,65 @@ export default {
filterEmployee() {
this.clearEmployee = [];
this.clearEmployee = this.employeeList.filter((item) =>
this.serialized.every((item2) => item2.id !== item.id)
this.serialized.every((el) => el.id !== item.id)
);
},
distributeRequest(inside, outside) {
distributeRequest(inside, outside, currentEmployee) {
this.insideSchedules = inside;
this.outsideSchedules = outside;
this.currentEmployee = currentEmployee;
},
postCreateSchedules() {
let newSchedule = null;
if (this.clearEmployee.find((e) => e.schedules))
newSchedule = this.clearEmployee.find((e) => e.schedules);
else newSchedule = this.serialized.find((e) => e.schedule);
let data = {
employee: newSchedule.id,
employee: this.schedulesDate.id,
active_flg: true,
start_time: this.times.start_time,
end_time: this.times.end_time,
status: this.buttons.find((e) => e.active).work,
};
if (this.insideSchedules.length > 0) {
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,
if (this.outsideSchedules)
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:
newSchedule.schedules.start_date || newSchedule.schedule.start_date,
end_date:
newSchedule.schedules.end_date || newSchedule.schedule.end_date,
});
fetchWrapper
.post("accounts/schedules/create/", {
...data,
start_date: this.schedulesDate.start_date,
end_date: this.schedulesDate.end_date,
})
.then(() => this.fetchSchedules());
}
},
postUpdateSchedule() {
let ids = "";
this.insideSchedules.forEach((e) => (ids += e.id + ","));
ids = ids.slice(0, -1);
fetchWrapper.post(`accounts/schedules/${ids}/update/`, {
employee: this.insideSchedules[0].employeeId,
active_flg: true,
start_time: this.insideSchedules[0].start_time,
end_time: this.insideSchedules[0].end_time,
status: this.buttons.find((e) => e.active).work,
});
fetchWrapper
.post(`accounts/schedules/${ids}/update/`, {
employee: this.insideSchedules[0].employeeId,
active_flg: true,
start_time: this.times.start_time,
end_time: this.times.end_time,
status: this.buttons.find((e) => e.active).work,
})
.then(() => this.fetchSchedules());
},
createNewScheduleEmployee(e) {
createScheduleEmployee(e, id) {
let schedules = {
start_date: e.start,
end_date: e.end,
};
this.clearEmployee.find((elem) => elem.id === e.id).schedules = schedules;
},
createScheduleEmployee(e) {
let schedules = {
this.schedulesDate = {
start_date: e.start,
end_date: e.end,
id: id,
};
this.serialized.find((elem) => elem.id === e.id).schedule = schedules;
},

13
src/pages/schedule/components/ScheduleHeader.vue
View File

@@ -29,7 +29,13 @@
.text.flex.items-center
.text.font-medium.text-base {{ dateString }}
.opacity-50.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
base-button.font-semibold(:size="40", @click="openForm") Замена смен
.flex.gap-x-4
base-button.font-semibold(
:size="40",
:style="{minWidth: '176px'}",
@click="changeShowTime"
) {{textButton}}
base-button.font-semibold(:size="40", @click="openForm") Замена смен
</template>
<script>
@@ -43,6 +49,8 @@ export default {
props: {
startMonth: Object,
timesShift: Object,
changeShowTime: Function,
showTime: Boolean,
},
data() {
return {
@@ -61,6 +69,9 @@ export default {
})
.join(" ");
},
textButton() {
return this.showTime ? "Скрыть время" : "Показать время";
},
},
methods: {
openForm() {

48
src/pages/schedule/components/ScheduleBody.vue → src/pages/schedule/components/ScheduleTable.vue
View File

@@ -26,13 +26,14 @@
v-for="day in result",
:key="day",
:id="schedule.id + day",
@click="choiceCell(day, schedule.id, schedule); saveEmployee()",
@click="choiceCell(day, schedule.id, schedule); clearData()",
:class="choiceState(day, schedule.id)",
:style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : ''}"
)
.flex(
:class="{'cell-work': choiceState(day, schedule.id).status}"
:class="{'cell-work': choiceState(day, schedule.id).status, 'show-time': showTime}"
) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : ''}}
.schedule-select.flex.w-full.pr-2(v-if="clearEmployee")
.edit.flex.items-center.justify-center.h-11.w-11(v-if="currentEmployee.label")
.flex.icon-edit(v-if="currentEmployee.label")
@@ -45,7 +46,7 @@
//- v-if="currentEmployee.label"
//- )
//- .icon-ok.text-xsm(class="pt-[3px]")
.name.flex.justify-center.items-center.cursor-pointer(:class="{'select-name': currentEmployee.label}")
.text.flex.justify-center.items-center.cursor-pointer(:class="{'select-name': currentEmployee.label}")
base-custom-select(
v-if="!currentEmployee.label",
:items="ownersList",
@@ -71,7 +72,7 @@ import BaseButton from "@/components/base/BaseButton.vue";
import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
export default {
name: "ScheduleBody",
name: "ScheduleTable",
components: { BaseModal, BaseButton, BaseCustomSelect },
props: {
scheduleList: Array,
@@ -79,6 +80,7 @@ export default {
buttons: Array,
startMonth: Object,
clearEmployee: Array,
showTime: Boolean,
},
data() {
return {
@@ -125,6 +127,14 @@ export default {
},
},
methods: {
choiceTime(schedule, day) {
let currentDay = day.format("YYYY-MM-DD");
let start = schedule.schedules.find(
(e) => e.date === currentDay
)?.start_time;
let end = schedule.schedules.find((e) => e.date === currentDay)?.end_time;
return `${start} ${end}`;
},
changelColumnColor(day) {
return day.format("ddd") === "сб" || day.format("ddd") === "вс"
? true
@@ -134,6 +144,7 @@ export default {
this.activeButton = this.buttons.find((e) => e.active);
},
choiceCell(time, id, schedule) {
if (this.showTime) return;
let formatTime = time.format("YYYY-MM-DD");
let insideSchedules = schedule?.schedules.filter(
(el) =>
@@ -158,9 +169,7 @@ export default {
this.dateInterval.id = id;
} else if (time.isAfter(this.dateInterval.start)) {
this.dateInterval.end = formatTime;
if (this.currentEmployee.label) {
this.$emit("new-schedule-employee", this.dateInterval);
} else this.$emit("schedule-employee", this.dateInterval);
this.$emit("schedule-employee", this.dateInterval, id);
} else this.dateInterval.start = formatTime;
if (
@@ -197,7 +206,12 @@ export default {
start_date: moment(lastDate).add(1, "d").format("YYYY-MM-DD"),
end_date: this.dateInterval.end,
});
this.$emit("schedules", insideSchedules, outsideSchedules);
this.$emit(
"schedules",
insideSchedules,
outsideSchedules,
this.currentEmployee
);
},
choiceState(day, id) {
let formatDay = day.format("YYYY-MM-DD");
@@ -218,16 +232,20 @@ export default {
return {
status: (resStart || resMiddle || resEnd) && !!this.activeButton,
"set-time": this.showTime,
"from-date": !!resStart && !this.activeButton,
"to-date": !!resEnd && !this.activeButton,
"middle-dates": !!resMiddle && !this.activeButton,
};
},
saveEmployee() {
clearData() {
this.currentEmployee.label = "";
this.currentEmployee.id = null;
},
choiceWorks(day, employee) {
if (this.showTime) {
return this.choiceTime(employee, day);
}
let currentDay = day.format("YYYY-MM-DD");
let res = employee.schedules.find((e) => e.date === currentDay)?.status;
return this.buttons.find((e) => e.work === res)?.text[1];
@@ -235,6 +253,9 @@ export default {
choiceColor(day, employee) {
let currentDay = day.format("YYYY-MM-DD");
let res = employee.schedules.find((e) => e.date === currentDay)?.status;
if (res !== "WORKS" && this.showTime) {
return "var(--default-white)";
}
return this.buttons.find((e) => e.work === res)?.color;
},
changeDays() {
@@ -315,11 +336,6 @@ export default {
border-right: 1.5px solid var(--border-light-grey-color-1)
border-bottom: 1.5px solid var(--border-light-grey-color-1)
.name
color: var(--btn-blue-color)
border-bottom: 1.5px solid var(--border-light-grey-color-1)
border-right: 1.5px solid var(--border-light-grey-color-1)
.select-name
width: 25%
border-right: 1.5px solid var(--border-light-grey-color-1)
@@ -334,6 +350,10 @@ export default {
border-right: 1.5px solid var(--border-light-grey-color-1)
border-bottom: 1.5px solid var(--border-light-grey-color-1)
.show-time
text-align: center
font-size: 12px
.modal-wrapper
border: 1.5px solid var(--border-light-grey-color-1)
border-radius: 4px