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

[WIP] добавил адаптив расписания и бара, исправил апдейт

Browse Source
This commit is contained in:
megavrilinvv
2023-01-10 18:27:59 +03:00
parent 252d15f5bf
commit 6984b360f6
3 changed files with 83 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,33 +1,46 @@
<template lang="pug">
.wrapper-bar.flex.flex-col.gap-y-4
.flex.px-5.py-5.w-full.justify-around.gap-x-4
.wrapper-bar.flex.flex-col.gap-y-4.p-5.justify-between
.flex.w-full.justify-around.gap-x-4
.time-wrapper.flex.justify-between
base-input-time.py-14px.px-4(v-model="times.start_time", label="Начало")
base-input-time.py-14px.px-4(v-model="times.end_time", label="Конец")
.status-wrapper.flex.flex-col
base-input-time.py-14px.px-4.justify-around.items-center(
v-model="times.start_time",
label="Начало"
)
base-input-time.py-14px.px-4.justify-around.items-center(
v-model="times.end_time",
label="Конец"
)
.status-wrapper.flex.flex-col.gap-y-3.p-3
.flex.justify-center.items-center.h-10
span.font-semibold Статусы
.flex.justify-around(class="py-2.5")
base-button.font-semibold(
.flex.justify-around.gap-x-4(class="py-2.5")
base-button.font-semibold.border-none(
v-for="item in buttons",
:class="item.class",
:key="item",
:style="{minWidth: '190px', minHeight: '43px', border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
@click="choiceSchedule(item.class)"
) {{item.name}}
.graph-template.flex.flex-col.justify-between
.graph-template.flex.flex-col.items-center.gap-y-4
base-custom-select(
:items="scheduleList",
:items="templateList",
center,
v-model="schedule",
v-model="template.item",
placeholder="Шаблоны графиков"
)
base-button.delete-button.font-semibold(
:size="40",
@click="deleteSchedule"
) Удалить
.flex.justify-center
base-button.font-semibold(:size="40", @click="createSchedules") Сохранить
base-input.w-28(
v-if="template.item.id === 1"
v-mask="'#/#'",
placeholder="0/0",
label="Введите график",
v-model="template.item.label"
)
.flex.justify-center.gap-x-6
base-button.font-semibold.w-36(:size="40", @click="createSchedules") Сохранить
base-button.delete-button.font-semibold.w-36(
:size="40",
@click="deleteSchedule"
) Удалить
</template>
<script>
@@ -35,24 +48,34 @@ import BaseButton from "@/components/base/BaseButton.vue";
import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
import BaseInputTime from "@/components/base/BaseInputTime.vue";
import BaseInputDate from "@/components/base/BaseInputDate.vue";
import BaseInput from "@/components/base/BaseInput.vue";
import { mask } from "vue-the-mask";
export default {
name: "ScheduleBar",
components: { BaseButton, BaseCustomSelect, BaseInputTime, BaseInputDate },
components: {
BaseButton,
BaseInput,
BaseCustomSelect,
BaseInputTime,
BaseInputDate,
},
props: {
buttons: Array,
template: Object,
times: Object,
createSchedules: Function,
deleteSchedule: Function,
},
directives: { mask },
data() {
return {
scheduleList: [
templateList: [
{ label: "Индивидуальный", id: 1 },
{ label: "2/2", id: 2 },
{ label: "3/2", id: 3 },
{ label: "5/2", id: 4 },
],
schedule: {},
};
},
methods: {
@@ -72,7 +95,7 @@ export default {
width: calc(100vw - 136px)
.time-wrapper
height: 102px
height: 120px
border: 1.5px solid var(--border-light-grey-color-1)
border-radius: 4px
@@ -95,14 +118,13 @@ export default {
color: var(--font-grey-color)
.status-wrapper
min-width: 690px
height: 102px
min-width: 540px
height: 120px
border: 1.5px solid var(--border-light-grey-color-1)
border-radius: 4px
.button-work
background: #55CD76
border: none
&:active
background-color: #55CD76
opacity: 1
@@ -114,7 +136,6 @@ export default {
.button-vacation
background: var(--btn-blue-color-2)
border: none
opacity: 1
&:active
background: var(--btn-blue-color-2)
@@ -127,7 +148,6 @@ export default {
.button-free
background: #9294A7
border: none
&:active
background-color: #9294A7
opacity: 1
@@ -139,7 +159,7 @@ export default {
.graph-template
width: 218px
height: 102px
height: 120px
.delete-button
background-color: var(--bg-event-red-color)

60
src/pages/schedule/components/ScheduleTable.vue
View File

@@ -16,9 +16,9 @@
) {{day.format("D")}}
.text.flex.font-bold(
:style="{opacity: changeOpacity(day)}"
) {{day.format("ddd")}}
) {{day.format("ddd")}}
.schedule-wrapper.flex.w-full.flex-col
.schedule-body.flex.w-full(v-for="schedule in serialized", :key="schedule.id")
.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
@@ -33,9 +33,12 @@
: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}"
:class="{'cell-work': choiceState(day, schedule.id)?.status, 'show-time': showTime}"
) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : ''}}
.schedule-select.flex.w-full(v-if="clearEmployee")
.flex.w-full.mt-4(
v-if="clearEmployee.length > 0",
:class="{'schedule-select': selectEmployee.label}"
)
.edit.flex.items-center.justify-center.h-11.w-11(v-if="selectEmployee.label")
.flex.icon-edit(v-if="selectEmployee.label")
//- base-button(
@@ -47,7 +50,9 @@
//- v-if="selectEmployee.label"
//- )
//- .icon-ok.text-xsm(class="pt-[3px]")
.text.flex.justify-center.items-center.cursor-pointer(:class="{'select-name': selectEmployee.label}")
.text.flex.justify-center.items-center.cursor-pointer(
:class="{'select-name': selectEmployee.label}"
)
base-custom-select(
v-if="!selectEmployee.label",
:items="ownersList",
@@ -81,11 +86,12 @@ export default {
scheduleList: Array,
serialized: Array,
buttons: Array,
startMonth: Object,
template: Object,
clearEmployee: Array,
showTime: Boolean,
clearSelect: Function,
selectEmployee: Object,
startMonth: Object,
},
data() {
return {
@@ -132,10 +138,12 @@ export default {
choiceTime(schedule, day) {
let currentDay = day.format("YYYY-MM-DD");
let start = schedule.schedules.find(
(e) => e.date === currentDay
(e) => e.date === currentDay && e.status === "WORKS"
)?.start_time;
let end = schedule.schedules.find((e) => e.date === currentDay)?.end_time;
return `${start} ${end}`;
let end = schedule.schedules.find(
(e) => e.date === currentDay && e.status === "WORKS"
)?.end_time;
if (start && end) return `${start} ${end}`;
},
changelColumnColor(day) {
return day.format("ddd") === "сб" || day.format("ddd") === "вс"
@@ -165,12 +173,10 @@ export default {
if (!this.dateInterval.start) {
this.dateInterval.start = formatTime;
this.dateInterval.id = id;
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;
this.$emit("schedule-employee", this.dateInterval, id);
if (
!this.selectEmployee.label &&
this.dateInterval.start &&
@@ -224,13 +230,13 @@ export default {
this.dateInterval.id === id &&
day.isAfter(this.dateInterval.start);
return {
status: (resStart || resMiddle || resEnd) && !!this.activeButton,
"set-date":
(!!resStart || !!resMiddle || !!resEnd) && !this.activeButton,
};
if (resStart || resMiddle || resEnd)
return {
status: !!this.activeButton,
"set-date": !this.activeButton,
"set-template": !this.activeButton && this.template.item.label,
};
},
choiceWorks(day, employee) {
if (this.showTime) {
return this.choiceTime(employee, day);
@@ -296,23 +302,18 @@ export default {
<style lang="sass" scoped>
.schedule
border: 1.5px solid var(--border-light-grey-color-1)
border-top: 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
border-bottom: 1.5px solid var(--border-light-grey-color-1)
&::-webkit-scrollbar-track
border-radius: 0
.schedule-body
&:hover
background-color: var(--border-light-grey-color-1)
.table-header
height: 50px
background-color: #D7D9FF
@@ -322,8 +323,7 @@ export default {
.schedule-select
border-right: 8px solid var(--bg-ligth-blue-color)
&:hover
background-color: var(--border-light-grey-color-1)
border-top: 1.5px solid var(--border-light-grey-color-1)
.column-wrapper
overflow: auto
@@ -339,6 +339,7 @@ export default {
.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)
.row
width: calc(75% - 44px)
@@ -357,6 +358,8 @@ export default {
.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
@@ -381,4 +384,7 @@ export default {
.set-date
background-color: var(--btn-blue-color-4) !important
.set-template
background-color: var(--bg-event-orange-color) !important
</style>