diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue index 0cc5df9..2ceda86 100644 --- a/src/components/base/BaseInput.vue +++ b/src/components/base/BaseInput.vue @@ -91,4 +91,5 @@ export default { border-radius: 50% z-index: 5 opacity: 0 + cursor: pointer diff --git a/src/components/base/BaseSelect.vue b/src/components/base/BaseSelect.vue index 87f2d48..1131d5a 100644 --- a/src/components/base/BaseSelect.vue +++ b/src/components/base/BaseSelect.vue @@ -5,11 +5,12 @@ v-model="value", :options="items", :disable="disable", - bg-color="var(--bg-disable-grey-color)" + :behavior="behavior", + bg-color="var(--bg-disable-grey-color)", outlined, dense, emit-value, - map-options, + map-options ) template(v-slot:selected) span {{ textSelect }} @@ -29,6 +30,10 @@ export default { type: Array, default: () => [], }, + behavior: { + type: String, + default: "menu", + }, disable: Boolean, label: String, }, diff --git a/src/pages/schedule/TheSchedule.vue b/src/pages/schedule/TheSchedule.vue index 27c9966..022b40b 100644 --- a/src/pages/schedule/TheSchedule.vue +++ b/src/pages/schedule/TheSchedule.vue @@ -96,7 +96,7 @@ export default { text: "'В'", }, ], - template: { item: { id: null, label: null } }, + template: { item: {} }, startMonth: moment().startOf("month"), showTime: false, schedulesDate: {}, @@ -147,6 +147,7 @@ export default { }, filterScheduleEmployee() { let serialized = []; + this.template.item = {}; this.scheduleList.forEach((e) => { let foundedElem = serialized.find((elem) => elem.id === e.employee.id); if (!foundedElem) { @@ -200,9 +201,11 @@ export default { end_time: this.times.end_time, status: this.buttons.find((e) => e.active)?.work, }; + if (this.template.item.label) + data.kind_template = this.template.item.name; if (this.insideSchedules?.length > 0) { this.postUpdateSchedule(); - if (this.outsideSchedules) + if (this.outsideSchedules) { this.outsideSchedules.forEach((el) => { fetchWrapper.post("accounts/schedules/create/", { ...data, @@ -210,6 +213,7 @@ export default { end_date: el.end_date, }); }); + } } else { fetchWrapper .post("accounts/schedules/create/", { diff --git a/src/pages/schedule/components/ScheduleBar.vue b/src/pages/schedule/components/ScheduleBar.vue index e391c25..d34b3ed 100644 --- a/src/pages/schedule/components/ScheduleBar.vue +++ b/src/pages/schedule/components/ScheduleBar.vue @@ -2,14 +2,14 @@ .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.p-7 - base-input( + base-input.items-center( type="time", v-model="times.start_time", label="Начало", outlined ) .flex.items-center.mt-6 — - base-input( + base-input.items-center( type="time", v-model="times.end_time", label="Конец", @@ -31,18 +31,11 @@ style="width: 200px" ) .graph-template.flex.flex-col.items-center.gap-y-4 - base-select( + base-select.w-52( :items="templateList", v-model="template.item", - placeholder="Шаблоны графиков" - ) - base-input.w-28( - v-if="template.item.id === 1" - mask="#/#", - placeholder="0/0", - label="Введите график", - v-model="template.item.label", - outlined + placeholder="Выберите шаблон" + label="Шаблоны графиков" ) .flex.justify-center.gap-x-6.h-10 q-btn( @@ -83,10 +76,9 @@ export default { data() { return { templateList: [ - { label: "Индивидуальный", id: 1 }, - { label: "2/2", id: 2 }, - { label: "3/2", id: 3 }, - { label: "5/2", id: 4 }, + { label: "2/2", name: "2/2", symbol: "'2/2'" }, + { label: "Дежурство", name: "DUTY", symbol: "'Д'" }, + { label: "Смена", name: "FirstEvenSecondOdd", symbol: "'С'" }, ], }; }, diff --git a/src/pages/schedule/components/ScheduleTable.vue b/src/pages/schedule/components/ScheduleTable.vue index 5c5cc85..89661bc 100644 --- a/src/pages/schedule/components/ScheduleTable.vue +++ b/src/pages/schedule/components/ScheduleTable.vue @@ -70,7 +70,9 @@ export default { this.setActiveButton(); return { "--bg-color-status": this.activeButton?.color, - "--text-status": this.activeButton?.text, + "--text-status": !this.template.item?.label + ? this.activeButton?.text + : this.template.item.symbol, }; }, }, @@ -81,13 +83,6 @@ export default { choiceCell(day, id, schedule) { if (this.showTime) return; let formatTime = day.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.id !== id) { this.dateInterval.start = ""; @@ -100,14 +95,18 @@ export default { this.dateInterval.id = id; } else if (day.isAfter(this.dateInterval.start)) { this.dateInterval.end = formatTime; - } else this.dateInterval.start = formatTime; + } else { + this.dateInterval.start = formatTime; + } this.$emit("schedule-employee", this.dateInterval, id); - if ( - !this.selectEmployee.label && - this.dateInterval.start && - this.dateInterval.end && - insideSchedules - ) + 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.selectEmployee.label && !!insideSchedules) this.rangeSchdedules(schedule, insideSchedules, id); }, rangeSchdedules(schedule, insideSchedules, id) { @@ -157,7 +156,8 @@ export default { if (resStart || resMiddle || resEnd) return { - status: !!this.activeButton, + "set-template": !!this.template.item?.label, + status: !!this.activeButton && !this.template.item, "set-date": !this.activeButton, }; }, @@ -212,13 +212,4 @@ export default { border-radius: 4px width: 400px height: 500px - -.status - background-color: var(--bg-color-status) !important - -.status::after - content: var(--text-status) - -.set-date - background-color: var(--btn-blue-color-4) !important diff --git a/src/pages/schedule/components/ScheduleTableBody.vue b/src/pages/schedule/components/ScheduleTableBody.vue index 9cdc1b4..29f027b 100644 --- a/src/pages/schedule/components/ScheduleTableBody.vue +++ b/src/pages/schedule/components/ScheduleTableBody.vue @@ -116,4 +116,7 @@ export default { .status::after content: var(--text-status) + +.set-template + background-color: var(--bg-event-orange-color) !important diff --git a/src/pages/schedule/components/ScheduleTableSelect.vue b/src/pages/schedule/components/ScheduleTableSelect.vue index 1a5daeb..c15d272 100644 --- a/src/pages/schedule/components/ScheduleTableSelect.vue +++ b/src/pages/schedule/components/ScheduleTableSelect.vue @@ -99,12 +99,15 @@ export default { &:last-child border-right: none -.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-date + background-color: var(--btn-blue-color-4) !important + +.set-template + background-color: var(--bg-event-orange-color) !important