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

Merge branch 'UC-190' into 'master'

Browse Source 
Resolve UC-190

See merge request andrusyakka/urban-couscous!232
This commit is contained in:
Vasiliy Gavrilin
2022-12-28 16:04:26 +00:00
parent 3c6ca6a3c9 42e200e7b2
commit e8332c084d
4 changed files with 124 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,14 +16,15 @@
:start-month="startMonth",
:clear-employee="clearEmployee",
@new-schedule-employee="createNewScheduleEmployee",
@schedule-employee="createScheduleEmployee"
@schedule-employee="createScheduleEmployee",
@schedules="distributeRequest"
)
schedule-bar(
:data-schedule="dataSchedule",
:buttons="buttons",
:clear-employee="clearEmployee",
:times="times",
:create-schedule="postCreateSchedule"
:create-schedules="postCreateSchedules"
)
</template>
@@ -59,7 +60,7 @@ export default {
text: "'Р'",
},
{
class: "button-status",
class: "button-vacation",
name: "Отпуск/больничный",
work: "VACATION",
active: false,
@@ -140,6 +141,7 @@ export default {
}
});
this.serialized = serialized;
this.filterEmployee();
},
filterEmployee() {
@@ -148,39 +150,52 @@ export default {
this.serialized.every((item2) => item2.id !== item.id)
);
},
postCreateSchedule() {
distributeRequest(inside, outside) {
this.insideSchedules = inside;
this.outsideSchedules = outside;
},
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);
fetchWrapper
.post("accounts/schedules/create/", {
let data = {
employee: newSchedule.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) {
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:
newSchedule.schedules.start_date || newSchedule.schedule.start_date,
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) {
let currentEmployee = this.clearEmployee.find((e) => e.schedules);
fetchWrapper
.post(`accounts/schedules/${id}/update/`, {
employee: currentEmployee.id,
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_date: currentEmployee.schedules.start_date,
end_date: currentEmployee.schedules.end_date,
start_time: this.times.start_time,
end_time: this.times.end_time,
start_time: this.insideSchedules[0].start_time,
end_time: this.insideSchedules[0].end_time,
status: this.buttons.find((e) => e.active).work,
})
.then(() => this.fetchSchedules());
});
},
createNewScheduleEmployee(e) {
let schedules = {
@@ -222,5 +237,4 @@ export default {
.schedule-wrapper
background-color: var(--default-white)
height: calc(100vh - 64px)
</style>

5
src/pages/schedule/components/FormChangeShift.vue
View File

@@ -9,7 +9,7 @@
.flex.flex-col.gap-y-6
.flex.flex-col.gap-y-2
span.text-smm.font-semibold Дата
base-input-date.input-date
base-input-date
.flex.flex-col(class="gap-y-1.5")
span.text-smm.font-semibold Текущий сотрудник
base-custom-select.h-10(v-model="currentEmployee")
@@ -58,7 +58,4 @@ export default {
height: 40px
border: 1.5px solid var(--border-light-grey-color)
border-radius: 4px
.input-date
border: 1.5px solid var(--border-light-grey-color)
</style>

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

@@ -27,7 +27,7 @@
placeholder="Шаблоны графиков"
)
.flex.justify-center
base-button.font-semibold(:size="40", @click="createSchedule") Сохранить
base-button.font-semibold(:size="40", @click="createSchedules") Сохранить
</template>
<script>
@@ -43,7 +43,7 @@ export default {
buttons: Array,
clearEmployee: Array,
times: Object,
createSchedule: Function,
createSchedules: Function,
},
data() {
return {
@@ -70,6 +70,7 @@ export default {
height: 224px
border: 1.5px solid var(--border-light-grey-color-1)
border-radius: 4px
width: calc(100vw - 136px)
.time-wrapper
height: 102px
@@ -112,7 +113,7 @@ export default {
opacity: 0.8
border: none
.button-status
.button-vacation
background: #D7D9FF
border: none
&:active

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

@@ -1,12 +1,14 @@
<template lang="pug">
.schedule.flex-col(:style="themeCell")
.table-header.flex.w-full
.flex.items-center.justify-center.pl-11(:style="{width: 'calc(25% + 44px)'}")
.table-header.flex.w-full.pr-2
.flex.items-center.justify-center.pl-11(
:style="{width: 'calc(25% + 40px)'}"
)
.text.font-bold Сотрудник
.column-wrapper.flex
.schedule-column.flex.flex-col.items-center.justify-center.w-11(
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(
:style="{opacity: changeOpacity(day)}"
@@ -14,7 +16,7 @@
.text.flex.font-bold(
:style="{opacity: changeOpacity(day)}"
) {{day.format("ddd")}}
.flex.w-full.flex-col(:style="{overflowY: 'scroll', maxHeight: '351px'}")
.schedule-wrapper.flex.w-full.flex-col
.schedule-body.flex.w-full(v-for="schedule in serialized", :key="schedule.id")
.edit.flex.items-center.justify-center.h-11.w-11
.flex.icon-edit
@@ -25,12 +27,14 @@
:key="day",
:id="schedule.id + day",
@click="choiceCell(day, schedule.id, schedule)",
:class="selectTime(day, schedule.id)",
:style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day) : ''}"
:class="choiceState(day, schedule.id)",
:style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : ''}"
)
.flex {{choiceDay(day, schedule.id) ? choiceWorks(day) : ''}}
.schedule-body.flex.w-full(v-if="clearEmployee", :style="{height: '44px'}", v-click-outside="saveEmployee")
.edit.flex.items-center.justify-center.h-11.w-11(:style="{borderBottom: 'none'}")
.flex(
:class="{'cell-work': choiceState(day, schedule.id).status}"
) {{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")
//- base-button(
//- confirm,
@@ -41,25 +45,22 @@
//- v-if="currentEmployee.label"
//- )
//- .icon-ok.text-xsm(class="pt-[3px]")
.name.flex.justify-center.items-center.cursor-pointer(
v-if="currentEmployee.label"
)
span {{currentEmployee.label}}
.name.flex(v-if="!currentEmployee.label")
.name.flex.justify-center.items-center.cursor-pointer(:class="{'select-name': currentEmployee.label}")
base-custom-select(
v-if="!currentEmployee.label",
:items="ownersList",
v-model="currentEmployee",
placeholder="Добавить сотрудника",
:style="{border: 'none', justifyContent: 'center'}"
)
.flex.justify-center(v-else) {{currentEmployee.label}}
.cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer(
v-if="currentEmployee.label",
v-for="day in result",
:key="day",
:id="currentEmployee.id + day",
@click="choiceCell(day, currentEmployee.id)",
:class="selectTime(day, currentEmployee.id)",
:style="{borderBottom: 'none'}"
:class="choiceState(day, currentEmployee.id)"
)
</template>
@@ -133,11 +134,24 @@ export default {
},
},
methods: {
changelColumnColor(day) {
return day.format("ddd") === "сб" || day.format("ddd") === "вс"
? true
: false;
},
setActiveButton() {
this.activeButton = this.buttons.find((e) => e.active);
},
choiceCell(time, id, schedule) {
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 (
this.dateInterval.start &&
this.dateInterval.end &&
@@ -147,6 +161,7 @@ export default {
this.dateInterval.end = "";
this.dateInterval.id = "";
}
if (!this.dateInterval.start) {
this.dateInterval.start = formatTime;
this.dateInterval.id = id;
@@ -156,43 +171,44 @@ export default {
this.$emit("new-schedule-employee", this.dateInterval);
} else this.$emit("schedule-employee", this.dateInterval);
} else this.dateInterval.start = formatTime;
if (
!this.currentEmployee.label &&
this.dateInterval.start &&
this.dateInterval.end
this.dateInterval.end &&
insideSchedules
)
this.rangeSchdedules(schedule);
this.rangeSchdedules(schedule, insideSchedules, id);
},
rangeSchdedules(schedule) {
let insideSchedules = schedule.schedules.filter(
rangeSchdedules(schedule, insideSchedules, id) {
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 (insideSchedules.length > 0) insideSchedules[0].employeeId = id;
let keys = Object.keys(insideSchedules);
let outsideSchedules = [];
let firstDate = insideSchedules[keys[0]].date;
let lastDate = insideSchedules[keys.length - 1].date;
let firstDate = insideSchedules[keys[0]]?.date;
let lastDate = insideSchedules[keys.length - 1]?.date;
if (this.dateInterval.start < firstDate) {
outsideSchedules.push({
before: {
start_date: this.dateInterval.start,
end_date: moment(firstDate).subtract(1, "d").format("YYYY-MM-DD"),
},
});
}
if (this.dateInterval.end > lastDate)
outsideSchedules.push({
after: {
start_date: moment(lastDate).add(1, "d").format("YYYY-MM-DD"),
end_date: this.dateInterval.end,
},
});
this.$emit("schedules", insideSchedules, outsideSchedules);
},
selectTime(day, id) {
choiceState(day, id) {
let formatDay = day.format("YYYY-MM-DD");
let resStart =
this.dateInterval.start &&
@@ -210,7 +226,7 @@ export default {
day.isAfter(this.dateInterval.start);
return {
status: !(!resStart && !resMiddle && !resEnd && !!this.activeButton),
status: (resStart || resMiddle || resEnd) && !!this.activeButton,
"from-date": !!resStart && !this.activeButton,
"to-date": !!resEnd && !this.activeButton,
"middle-dates": !!resMiddle && !this.activeButton,
@@ -220,19 +236,15 @@ export default {
this.currentEmployee.label = "";
this.currentEmployee.id = null;
},
choiceWorks(day) {
choiceWorks(day, employee) {
let currentDay = day.format("YYYY-MM-DD");
let res = this.scheduleList.find((e) => e.date === currentDay).status;
// if (this.activeButton) {
// return this.buttons.find((e) => e.work === this.activeButton?.text[1])
// ?.text[1];
// }
return this.buttons.find((e) => e.work === res).text[1];
let res = employee.schedules.find((e) => e.date === currentDay)?.status;
return this.buttons.find((e) => e.work === res)?.text[1];
},
choiceColor(day) {
choiceColor(day, employee) {
let currentDay = day.format("YYYY-MM-DD");
let res = this.scheduleList.find((e) => e.date === currentDay).status;
if (res) return this.buttons.find((e) => e.work === res).color;
let res = employee.schedules.find((e) => e.date === currentDay)?.status;
return this.buttons.find((e) => e.work === res)?.color;
},
changeDays() {
this.days = moment().daysInMonth();
@@ -274,9 +286,14 @@ export default {
border: 1.5px solid var(--border-light-grey-color-1)
border-radius: 4px
border-right: none
border-bottom: none
min-height: 87px
width: calc(100vw - 136px)
.schedule-wrapper
overflow-y: scroll
max-height: 351px
.schedule-body
&:hover
background-color: var(--border-light-grey-color-1)
@@ -288,8 +305,17 @@ export default {
border-top-left-radius: 2px
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)
.column-wrapper
overflow: auto
overflow-x: hidden
.column-color
background-color: var(--bg-white-color-1)
.text
color: var(--btn-blue-color)
@@ -299,9 +325,13 @@ export default {
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)
color: var(--btn-blue-color)
.name-employee
width: 25%
@@ -320,7 +350,10 @@ export default {
height: 500px
.status
background-color: var(--bg-color-status)
background-color: var(--bg-color-status) !important
.cell-work
display: none
.status::after
content: var(--text-status)