From 2604d22471a27ff0820ce00986764e9b1d5a045f Mon Sep 17 00:00:00 2001 From: megavrilinvv Date: Mon, 9 Jan 2023 17:20:20 +0300 Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20delete,=20=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD?= =?UTF-8?q?=D0=BE=D1=81=D1=82=D1=8C=20=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD?= =?UTF-8?q?=D0=B8=D1=8F=20=D1=81=D0=BE=D0=B1=D1=8B=D1=82=D0=B8=D1=8F=20?= =?UTF-8?q?=D0=BD=D0=B0=201=20=D0=B4=D0=B5=D0=BD=D1=8C,=20=D0=BF=D0=BE?= =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=20=D1=81=D1=82=D0=B8=D0=BB?= =?UTF-8?q?=D0=B8,=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=B4=D0=BD=D0=B5=D0=B9=20=D0=BF=D1=80?= =?UTF-8?q?=D0=B8=20=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8=D0=B8?= =?UTF-8?q?=20=D0=BC=D0=B5=D1=81=D1=8F=D1=86=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/schedule/TheSchedule.vue | 40 ++++++-- src/pages/schedule/components/ScheduleBar.vue | 20 +++- .../schedule/components/ScheduleTable.vue | 93 +++++++++---------- 3 files changed, 87 insertions(+), 66 deletions(-) diff --git a/src/pages/schedule/TheSchedule.vue b/src/pages/schedule/TheSchedule.vue index bbe8dde..46f7d31 100644 --- a/src/pages/schedule/TheSchedule.vue +++ b/src/pages/schedule/TheSchedule.vue @@ -17,6 +17,8 @@ :start-month="startMonth", :clear-employee="clearEmployee", :show-time="showTime", + :clear-select="clearSelect", + :select-employee="selectEmployee", @schedule-employee="createScheduleEmployee", @schedules="distributeRequest" ) @@ -24,6 +26,7 @@ :buttons="buttons", :times="times", :create-schedules="postCreateSchedules", + :delete-schedule="deleteSchedule" ) @@ -43,6 +46,10 @@ export default { scheduleList: [], clearEmployee: [], serialized: [], + selectEmployee: { + label: "", + id: null, + }, times: { start_time: "", end_time: "" }, timesShift: { start_time: "", end_time: "" }, buttons: [ @@ -59,7 +66,7 @@ export default { name: "Отпуск/больничный", work: "VACATION", active: false, - color: "#D7D9FF", + color: "var(--btn-blue-color-2)", text: "'О'", }, { @@ -73,7 +80,6 @@ export default { ], startMonth: moment().startOf("month"), showTime: false, - currentEmployee: {}, schedulesDate: {}, }; }, @@ -86,6 +92,15 @@ export default { changeShowTime() { this.showTime = !this.showTime; }, + clearSelect(employee) { + if (employee) { + employee.label = ""; + employee.id = null; + } else { + this.selectEmployee.label = ""; + this.selectEmployeeid = null; + } + }, fetchSchedules() { fetchWrapper .get("general/employee/") @@ -96,6 +111,7 @@ export default { }, fetchSchedulesEmployee() { this.scheduleList = []; + this.clearSelect(); fetchWrapper .get( `accounts/schedules/?date_after=${this.startMonth.format( @@ -150,10 +166,9 @@ export default { this.serialized.every((el) => el.id !== item.id) ); }, - distributeRequest(inside, outside, currentEmployee) { + distributeRequest(inside, outside) { this.insideSchedules = inside; this.outsideSchedules = outside; - this.currentEmployee = currentEmployee; }, postCreateSchedules() { let data = { @@ -198,16 +213,21 @@ export default { .then(() => this.fetchSchedules()); }, createScheduleEmployee(e, id) { - let schedules = { - start_date: e.start, - end_date: e.end, - }; this.schedulesDate = { start_date: e.start, - end_date: e.end, + end_date: e.end ? e.end : e.start, id: id, }; - this.serialized.find((elem) => elem.id === e.id).schedule = schedules; + }, + deleteSchedule() { + let ids = ""; + if (this.insideSchedules.length > 0) { + this.insideSchedules.forEach((e) => (ids += e.id + ",")); + ids = ids.slice(0, -1); + fetchWrapper + .del(`accounts/schedules/${ids}/delete/`) + .then(() => this.fetchSchedules()); + } }, switchPreviousMonth() { this.startMonth = this.startMonth.clone().subtract(1, "M"); diff --git a/src/pages/schedule/components/ScheduleBar.vue b/src/pages/schedule/components/ScheduleBar.vue index b5df582..f02c3dd 100644 --- a/src/pages/schedule/components/ScheduleBar.vue +++ b/src/pages/schedule/components/ScheduleBar.vue @@ -15,13 +15,17 @@ :style="{minWidth: '190px', minHeight: '43px', border: item.active ? '1.5px solid #5E5E5E' : 'none'}", @click="choiceSchedule(item.class)" ) {{item.name}} - .graph-template.flex + .graph-template.flex.flex-col.justify-between base-custom-select( :items="scheduleList", center, v-model="schedule", placeholder="Шаблоны графиков" ) + base-button.delete-button.font-semibold( + :size="40", + @click="deleteSchedule" + ) Удалить .flex.justify-center base-button.font-semibold(:size="40", @click="createSchedules") Сохранить @@ -38,6 +42,7 @@ export default { buttons: Array, times: Object, createSchedules: Function, + deleteSchedule: Function, }, data() { return { @@ -108,14 +113,15 @@ export default { border: none .button-vacation - background: #D7D9FF + background: var(--btn-blue-color-2) border: none + opacity: 1 &:active - background-color: #D7D9FF + background: var(--btn-blue-color-2) opacity: 1 border: none &:hover - background-color: #D7D9FF + background: var(--btn-blue-color-2) opacity: 0.8 border: none @@ -133,5 +139,9 @@ export default { .graph-template width: 218px - height: 40px + height: 102px + +.delete-button + background-color: var(--bg-event-red-color) + border: none diff --git a/src/pages/schedule/components/ScheduleTable.vue b/src/pages/schedule/components/ScheduleTable.vue index 38edb31..e4c594b 100644 --- a/src/pages/schedule/components/ScheduleTable.vue +++ b/src/pages/schedule/components/ScheduleTable.vue @@ -26,42 +26,41 @@ v-for="day in result", :key="day", :id="schedule.id + day", - @click="choiceCell(day, schedule.id, schedule); clearData()", + @click="choiceCell(day, schedule.id, schedule); clearSelect(selectEmployee)", :class="choiceState(day, schedule.id)", :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : ''}" ) .flex( :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") + .edit.flex.items-center.justify-center.h-11.w-11(v-if="selectEmployee.label") + .flex.icon-edit(v-if="selectEmployee.label") //- base-button( //- confirm, //- rounded, //- outlined, //- :size="20", //- @click="saveEmployee", - //- v-if="currentEmployee.label" + //- v-if="selectEmployee.label" //- ) //- .icon-ok.text-xsm(class="pt-[3px]") - .text.flex.justify-center.items-center.cursor-pointer(:class="{'select-name': currentEmployee.label}") + .text.flex.justify-center.items-center.cursor-pointer(:class="{'select-name': selectEmployee.label}") base-custom-select( - v-if="!currentEmployee.label", + v-if="!selectEmployee.label", :items="ownersList", - v-model="currentEmployee", + v-model="selectEmployee", placeholder="Добавить сотрудника", :style="{border: 'none', justifyContent: 'center'}" ) - .flex.justify-center(v-else) {{currentEmployee.label}} + .flex.justify-center(v-else) {{selectEmployee.label}} .cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer( - v-if="currentEmployee.label", + v-if="selectEmployee.label", v-for="day in result", :key="day", - :id="currentEmployee.id + day", - @click="choiceCell(day, currentEmployee.id)", - :class="choiceState(day, currentEmployee.id)" + :id="selectEmployee.id + day", + @click="choiceCell(day, selectEmployee.id)", + :class="choiceState(day, selectEmployee.id)" ) @@ -81,16 +80,14 @@ export default { startMonth: Object, clearEmployee: Array, showTime: Boolean, + clearSelect: Function, + selectEmployee: Object, }, data() { return { days: "", result: [], employee: [], - currentEmployee: { - label: "", - id: null, - }, dateInterval: { id: "", start: "", @@ -98,6 +95,7 @@ export default { text: "", }, activeButton: null, + choiceMonth: null, }; }, computed: { @@ -143,9 +141,9 @@ export default { setActiveButton() { this.activeButton = this.buttons.find((e) => e.active); }, - choiceCell(time, id, schedule) { + choiceCell(day, id, schedule) { if (this.showTime) return; - let formatTime = time.format("YYYY-MM-DD"); + let formatTime = day.format("YYYY-MM-DD"); let insideSchedules = schedule?.schedules.filter( (el) => (el.date > this.dateInterval.start && @@ -154,11 +152,7 @@ export default { el.date === this.dateInterval.end ); - if ( - this.dateInterval.start && - this.dateInterval.end && - this.dateInterval.id !== id - ) { + if (this.dateInterval.id !== id) { this.dateInterval.start = ""; this.dateInterval.end = ""; this.dateInterval.id = ""; @@ -167,13 +161,14 @@ export default { if (!this.dateInterval.start) { this.dateInterval.start = formatTime; this.dateInterval.id = id; - } else if (time.isAfter(this.dateInterval.start)) { + this.$emit("schedule-employee", this.dateInterval, id); + } else if (day.isAfter(this.dateInterval.start)) { this.dateInterval.end = formatTime; this.$emit("schedule-employee", this.dateInterval, id); } else this.dateInterval.start = formatTime; if ( - !this.currentEmployee.label && + !this.selectEmployee.label && this.dateInterval.start && this.dateInterval.end && insideSchedules @@ -206,12 +201,7 @@ export default { start_date: moment(lastDate).add(1, "d").format("YYYY-MM-DD"), end_date: this.dateInterval.end, }); - this.$emit( - "schedules", - insideSchedules, - outsideSchedules, - this.currentEmployee - ); + this.$emit("schedules", insideSchedules, outsideSchedules); }, choiceState(day, id) { let formatDay = day.format("YYYY-MM-DD"); @@ -232,16 +222,11 @@ 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, + "set-date": + (!!resStart || !!resMiddle || !!resEnd) && !this.activeButton, }; }, - clearData() { - this.currentEmployee.label = ""; - this.currentEmployee.id = null; - }, + choiceWorks(day, employee) { if (this.showTime) { return this.choiceTime(employee, day); @@ -259,9 +244,10 @@ export default { return this.buttons.find((e) => e.work === res)?.color; }, changeDays() { - this.days = moment().daysInMonth(); + this.days = moment(this.choiceMonth, "YYYY-MM-DD").daysInMonth(); }, pushMonth() { + this.result = []; this.result.push(this.startMonth); for (let i = 2; i <= this.days; i++) { this.result.push(this.startMonth.clone().add(i - 1, "d")); @@ -285,7 +271,18 @@ export default { : "1"; }, }, - + watch: { + startMonth: { + immediate: true, + handler(newMonth) { + if (newMonth) { + this.choiceMonth = newMonth.format("YYYY-MM-DD"); + this.changeDays(); + this.pushMonth(); + } + }, + }, + }, mounted() { this.changeDays(); this.pushMonth(); @@ -318,7 +315,6 @@ export default { border-top-right-radius: 2px .schedule-select - border-top: 1.5px solid var(--border-light-grey-color-1) &:hover background-color: var(--border-light-grey-color-1) @@ -339,6 +335,7 @@ export default { .select-name width: 25% border-right: 1.5px solid var(--border-light-grey-color-1) + border-bottom: 1.5px solid var(--border-light-grey-color-1) .name-employee width: 25% @@ -369,12 +366,6 @@ export default { .status::after content: var(--text-status) -.from-date - background-color: limegreen !important - -.to-date - background-color: red !important - -.middle-dates - background-color: yellow !important +.set-date + background-color: var(--btn-blue-color-4) !important