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

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