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

[WIP] Добавил отображение текста при выборе даты и выбор employee

Browse Source
This commit is contained in:
megavrilinvv
2022-12-26 13:31:03 +03:00
parent f8e82c64b4
commit 1dd0c79360
3 changed files with 95 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,9 +13,11 @@
:serialized="serialized",
:data-schedule="dataSchedule",
:buttons="buttons",
:start-month="startMonth"
:start-month="startMonth",
:clear-employee="clearEmployee",
@new-date="createNewDate"
)
schedule-bar(:data-schedule="dataSchedule", :select-work="selectWork", :buttons="buttons")
schedule-bar(:data-schedule="dataSchedule", :buttons="buttons")
</template>
<script>
@@ -31,6 +33,7 @@ export default {
return {
employeeList: [],
scheduleList: [],
clearEmployee: [],
serialized: [],
dataSchedule: {
status: "",
@@ -45,7 +48,7 @@ export default {
work: "WORKS",
active: false,
color: "#55CD76",
text: "Р",
text: "'Р'",
},
{
class: "button-status",
@@ -53,7 +56,7 @@ export default {
work: "VACATION",
active: false,
color: "#D7D9FF",
text: "О",
text: "'О'",
},
{
class: "button-free",
@@ -61,7 +64,7 @@ export default {
work: "DAY_OFF",
active: false,
color: "#9294A7",
text: "В",
text: "'В'",
},
],
startMonth: moment().startOf("month"),
@@ -94,6 +97,14 @@ export default {
)
.then((data) => {
this.scheduleList.push(...data.results);
if (!data.count)
this.clearEmployee.push({
first_name: e.first_name,
id: e.id,
last_name: e.last_name,
patronymic: e.patronymic,
schedules: [],
});
})
.then(() => this.filterScheduleEmployee());
});
@@ -134,8 +145,29 @@ export default {
});
this.serialized = serialized;
},
selectWork(work) {
this.dataSchedule.status = work;
postCreateSchedule() {
fetchWrapper
.post("accounts/schedules/create/", {
employee: "582b6557-33f4-480f-b578-984bbca0a925",
active_flg: true,
start_date: "2019-08-24",
end_date: "2019-08-24",
title: "string",
name: "string",
start_time: "string",
end_time: "string",
status: "string",
work_template: 0,
holiday_template: 0,
})
.then(() => this.fetchSchedules());
},
createNewDate(e) {
let res = this.clearEmployee.find((elem) => elem.id === e.id);
res.schedules.push({
start_date: e.start,
end_date: e.end,
});
},
switchPreviousMonth() {
this.startMonth = this.startMonth.clone().subtract(1, "M");

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

@@ -1,6 +1,6 @@
<template lang="pug">
.wrapper-bar.flex.flex-col.gap-y-4
.flex.px-5.py-5.w-full.justify-around
.flex.px-5.py-5.w-full.justify-around.gap-x-4
.time-wrapper.flex.justify-between
.flex.flex-col.items-center.py-14px.px-4.gap-y-14px
.text.text-smm Начало
@@ -14,7 +14,7 @@
.flex.justify-around(class="py-2.5")
base-button.font-semibold(
v-for="item in buttons",
:class="item.class" ,
:class="item.class",
:key="item",
:style="{minWidth: '190px', minHeight: '43px', border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
@click="choiceSchedule(item.class)"
@@ -38,7 +38,7 @@ import BaseInputDate from "@/components/base/BaseInputDate.vue";
export default {
name: "ScheduleBar",
components: { BaseButton, BaseCustomSelect, BaseInputTime, BaseInputDate },
props: { dataSchedule: Object, selectWork: Function, buttons: Array },
props: { dataSchedule: Object, buttons: Array },
data() {
return {
scheduleList: [
@@ -90,7 +90,7 @@ export default {
color: var(--font-grey-color)
.status-wrapper
width: 690px
min-width: 690px
height: 102px
border: 1.5px solid var(--border-light-grey-color-1)
border-radius: 4px

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

@@ -16,11 +16,11 @@
:style="{opacity: changeOpacity(day)}"
) {{day.format("ddd")}}
.schedule-body.flex.w-full(v-for="schedule in serialized", :key="schedule.id")
.edit.flex.items-center.justify-center.h-9.w-9
.edit.flex.items-center.justify-center.h-11.w-11
.flex.icon-edit
.name-employee.flex.justify-center.items-center.cursor-pointer(@click="openSelect(schedule)")
span {{trimOwnerName(schedule.last_name, schedule.first_name, schedule.patronymic)}}
.cell.flex.flex-col.items-center.justify-center.w-11.cursor-pointer(
.cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer(
v-for="day in result",
:key="day",
:id="schedule.id + day",
@@ -29,30 +29,40 @@
:style="{backgroundColor: day.format('YYYY-MM-DD') === choiceDay(day, schedule.id) ? choiceColor(day) : ''}"
)
.flex {{day.format("YYYY-MM-DD") === choiceDay(day, schedule.id) ? choiceWorks(day) : ''}}
//- .schedule-body.flex.w-full
//- .edit.flex.items-center.justify-center.h-9.w-9
//- .flex.items-center.gap-x-8
//- base-button(
//- confirm,
//- rounded,
//- outlined,
//- :size="20",
//- @click="saveEmployee",
//- v-if="currentEmployee.label"
//- )
//- .icon-ok.text-xsm(class="pt-[3px]")
//- .name.flex.justify-center.items-center.cursor-pointer(
//- v-if="currentEmployee.label",
//- @click="openSelect"
//- )
//- span {{currentEmployee.label}}
//- .name.flex(v-if="!currentEmployee.label")
//- base-custom-select(
//- :items="ownersList",
//- v-model="currentEmployee",
//- placeholder="Добавить сотрудника",
//- :style="{border: 'none'}"
.schedule-body.flex.w-full(v-if="clearEmployee")
.edit.flex.items-center.justify-center.h-11.w-11(:style="{borderBottom: 'none'}")
.flex.icon-edit(v-if="currentEmployee.label")
//- base-button(
//- confirm,
//- rounded,
//- outlined,
//- :size="20",
//- @click="saveEmployee",
//- v-if="currentEmployee.label"
//- )
//- .icon-ok.text-xsm(class="pt-[3px]")
.name.flex.justify-center.items-center.cursor-pointer(
v-if="currentEmployee.label",
@click="openSelect"
)
span {{currentEmployee.label}}
.name.flex(v-if="!currentEmployee.label")
base-custom-select(
:items="ownersList",
v-model="currentEmployee",
placeholder="Добавить сотрудника",
:style="{border: 'none'}"
)
.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="{backgroundColor: day.format('YYYY-MM-DD') === choiceDay(day, currentEmployee.id) ? choiceColor(day) : '', borderBottom: 'none'}"
)
.flex {{day.format("YYYY-MM-DD") === choiceDay(day, currentEmployee.id) ? choiceWorks(day) : ''}}
</template>
<script>
@@ -76,6 +86,7 @@ export default {
dataSchedule: Object,
buttons: Array,
startMonth: Object,
clearEmployee: Array,
},
data() {
return {
@@ -99,9 +110,9 @@ export default {
},
computed: {
ownersList() {
if (this.employeeList) {
if (this.clearEmployee) {
let filteredArray = [];
this.employeeList.forEach((elem) => {
this.clearEmployee.forEach((elem) => {
filteredArray.push({
id: elem.id,
label: this.trimOwnerName(
@@ -119,6 +130,7 @@ export default {
this.setActiveButton();
return {
"--bg-color-status": this.activeButton?.color,
"--text-status": this.activeButton?.text,
};
},
},
@@ -142,6 +154,7 @@ export default {
this.dateInterval.id = id;
} else if (time.isAfter(this.dateInterval.start)) {
this.dateInterval.end = formatTime;
this.$emit("new-date", this.dateInterval);
} else this.dateInterval.start = formatTime;
},
selectTime(day, id) {
@@ -175,7 +188,7 @@ export default {
choiceWorks(day) {
let currentDay = day.format("YYYY-MM-DD");
let a = this.scheduleList.find((e) => e.date === currentDay).status;
return this.buttons.find((e) => e.work === a).text;
return this.buttons.find((e) => e.work === a).text[1];
},
choiceColor(day) {
let currentDay = day.format("YYYY-MM-DD");
@@ -203,11 +216,12 @@ export default {
// }
// },
choiceDay(day, employee) {
let currentDay = day.format("YYYY-MM-DD");
let current = day.format("YYYY-MM-DD");
return this.scheduleList.find(
(e) => currentDay === e.date && e.employee.id === employee
(e) => current === e.date && e.employee.id === employee
)?.date;
},
changeOpacity(day) {
return day.format("ddd") === "сб" || day.format("ddd") === "вс"
? "0.6"
@@ -233,6 +247,7 @@ export default {
border: 1.5px solid var(--border-light-grey-color-1)
border-radius: 4px
min-height: 87px
width: fit-content
.schedule-body
&:hover
@@ -256,14 +271,14 @@ export default {
border-bottom: 1.5px solid var(--border-light-grey-color-1)
.name
min-width: 255px
max-width: 255px
min-width: 247px
max-width: 247px
border-right: 1.5px solid var(--border-light-grey-color-1)
color: var(--btn-blue-color)
.name-employee
min-width: 255px
max-width: 255px
min-width: 247px
max-width: 247px
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)
@@ -281,6 +296,9 @@ export default {
.status
background-color: var(--bg-color-status)
.status::before
content: var(--text-status)
.from-date
background: limegreen