123 lines
3.7 KiB
Vue
123 lines
3.7 KiB
Vue
<template lang="pug">
|
|
.schedule-wrapper.flex.w-full.flex-col
|
|
.flex.w-full(v-for="schedule in serialized", :key="schedule.id")
|
|
.edit.flex.items-center.justify-center.h-11.w-11
|
|
.flex.icon-edit
|
|
.name-employee.flex.justify-center.items-center.cursor-pointer
|
|
span {{trimOwnerName(schedule.last_name, schedule.first_name, schedule.patronymic)}}
|
|
.row.flex
|
|
.cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer.transition(
|
|
v-for="day in result",
|
|
:key="day",
|
|
:id="schedule.id + day",
|
|
@click="choiceCell(day, schedule.id, schedule); clearSelect(selectEmployee)",
|
|
:class="choiceState(day, schedule.id)",
|
|
:style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : '', width: `calc(100% / ${result.length})`}"
|
|
)
|
|
.flex(
|
|
:class="{'cell-work': choiceState(day, schedule.id)?.status, 'show-time': showTime}"
|
|
) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : ''}}
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "ScheduleTableBody",
|
|
props: {
|
|
serialized: Array,
|
|
trimOwnerName: Function,
|
|
result: Array,
|
|
choiceCell: Function,
|
|
clearSelect: Function,
|
|
selectEmployee: Object,
|
|
choiceState: Function,
|
|
buttons: Array,
|
|
showTime: Boolean,
|
|
scheduleList: Array,
|
|
},
|
|
methods: {
|
|
choiceDay(day, employee) {
|
|
let current = day.format("YYYY-MM-DD");
|
|
return this.scheduleList.find(
|
|
(e) => current === e.date && e.employee.id === employee
|
|
)?.date;
|
|
},
|
|
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;
|
|
},
|
|
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];
|
|
},
|
|
choiceTime(schedule, day) {
|
|
let currentDay = day.format("YYYY-MM-DD");
|
|
let start = schedule.schedules.find(
|
|
(e) => e.date === currentDay && e.status === "WORKS"
|
|
)?.start_time;
|
|
let end = schedule.schedules.find(
|
|
(e) => e.date === currentDay && e.status === "WORKS"
|
|
)?.end_time;
|
|
if (start && end) return `${start} ${end}`;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.schedule-wrapper
|
|
overflow-y: scroll
|
|
max-height: 351px
|
|
border-bottom: 1.5px solid var(--border-light-grey-color-1)
|
|
&::-webkit-scrollbar-track
|
|
border-radius: 0
|
|
|
|
.edit
|
|
border-right: 1.5px solid var(--border-light-grey-color-1)
|
|
border-bottom: 1.5px solid var(--border-light-grey-color-1)
|
|
border-left: 1.5px solid var(--border-light-grey-color-1)
|
|
|
|
.name-employee
|
|
width: 25%
|
|
border-right: 1.5px solid var(--border-light-grey-color-1)
|
|
border-bottom: 1.5px solid var(--border-light-grey-color-1)
|
|
color: var(--btn-blue-color)
|
|
|
|
.row
|
|
width: calc(75% - 44px)
|
|
|
|
.cell
|
|
border-right: 1.5px solid var(--border-light-grey-color-1)
|
|
border-bottom: 1.5px solid var(--border-light-grey-color-1)
|
|
&:hover
|
|
background-color: var(--border-light-grey-color-1)
|
|
&:last-child
|
|
border-right: none
|
|
|
|
.cell-work
|
|
display: none
|
|
|
|
.show-time
|
|
text-align: center
|
|
font-size: 12px
|
|
|
|
.set-date
|
|
background-color: var(--btn-blue-color-4) !important
|
|
|
|
.status
|
|
background-color: var(--bg-color-status) !important
|
|
|
|
.status::after
|
|
content: var(--text-status)
|
|
|
|
.set-template
|
|
background-color: var(--bg-event-orange-color) !important
|
|
</style>
|