From 1915538ca284886ea89add4e0280db35fc4b9bc6 Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Wed, 21 Jun 2023 15:32:30 +0300 Subject: [PATCH 1/2] =?UTF-8?q?WIP=20=D0=9F=D1=80=D0=BE=D0=BC=D0=B5=D0=B6?= =?UTF-8?q?=D1=83=D1=82=D0=BE=D1=87=D0=BD=D1=8B=D0=B5=20=D0=B8=D0=B7=D0=BC?= =?UTF-8?q?=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/Calendar/BaseCalendar.vue | 99 +++++++++++++------ .../base/Calendar/CalendarDates.vue | 7 +- .../base/Calendar/CalendarMonths.vue | 79 +++++++++++++-- .../base/Calendar/CalendarYears.vue | 4 +- .../newCalendar/components/CalendarHeader.vue | 68 +++++++------ 5 files changed, 186 insertions(+), 71 deletions(-) diff --git a/src/components/base/Calendar/BaseCalendar.vue b/src/components/base/Calendar/BaseCalendar.vue index 43da3ce..dc31725 100644 --- a/src/components/base/Calendar/BaseCalendar.vue +++ b/src/components/base/Calendar/BaseCalendar.vue @@ -1,15 +1,14 @@ @@ -57,17 +56,36 @@ export default { type: Function, default: () => {}, }, - cancel: { - type: Function, - default: () => {}, - }, + // cancel: { + // type: Function, + // default: () => {}, + // }, }, data() { return { internalDate: moment(), - externalDate: null, - currentFormIndex: 0, - forms: ["CalendarDates", "CalendarYears", "CalendarMonths"], + currentForm: null, + forms: [ + { + component: "CalendarDates", + saveBtnLabel: "Сохранить", + cancelFunction: this.cancelExternalChanges, + saveFunction: this.saveExternalChanges, + }, + { + component: "CalendarYears", + saveBtnLabel: "Применить", + cancelFunction: this.cancelInternalChanges, + saveFunction: this.applyInternalChanges, + }, + { + component: "CalendarMonths", + saveBtnLabel: "Применить", + cancelFunction: this.cancelInternalChanges, + saveFunction: this.applyInternalChanges, + }, + ], + previousValue: null, }; }, computed: { @@ -79,9 +97,6 @@ export default { this.$emit("update:modelValue", value); }, }, - currentForm() { - return this.forms[this.currentFormIndex]; - }, internalMonth() { let formattedMonth = this.internalDate.format("MMMM"); return `${ @@ -90,38 +105,58 @@ export default { }, }, methods: { - nextForm() { - this.currentFormIndex += 1; + changeForm(form) { + this.currentForm = this.forms.find((elem) => elem.component === form); }, - previousForm() { - this.currentFormIndex -= 1; - }, - cancelChanges() { - this.cancel(); - }, - saveChanges() { - this.value = this.externalDate?.from + cancelExternalChanges() { + this.value = this.range ? { - from: this.externalDate?.from?.clone(), - to: this.externalDate?.to?.clone(), + from: this.previousValue?.from?.clone(), + to: this.previousValue?.to?.clone(), } - : this.externalDate.clone(); + : this.previousValue; + }, + cancelInternalChanges() { + if (this.range) { + this.value = { + from: this.previousValue?.from?.clone(), + to: this.previousValue?.to?.clone(), + }; + this.internalDate = this.previousValue?.from?.clone(); + } else { + this.value = this.previousValue; + this.internalDate = this.previousValue; + } + this.changeForm("CalendarDates"); + }, + saveExternalChanges() { this.save(); }, + applyInternalChanges() { + switch (this.currentForm.component) { + case "CalendarYears": + this.changeForm("CalendarMonths"); + break; + case "CalendarMonths": + this.changeForm("CalendarDates"); + break; + } + }, }, mounted() { if (this.value) { if (this.range) { this.internalDate = this.value?.from?.clone(); - this.externalDate = { + this.previousValue = { from: this.value?.from?.clone(), to: this.value?.to?.clone(), }; } else { this.internalDate = this.value?.clone(); - this.externalDate = this.value?.clone(); + this.previousValue = this.value?.clone(); } } + this.currentForm = this.forms[0]; }, }; diff --git a/src/components/base/Calendar/CalendarDates.vue b/src/components/base/Calendar/CalendarDates.vue index 2262142..9fc435e 100644 --- a/src/components/base/Calendar/CalendarDates.vue +++ b/src/components/base/Calendar/CalendarDates.vue @@ -8,7 +8,7 @@ :label="internalMonth" no-caps, padding="10px 12px" - @click="nextForm" + @click="switchForm" ) .arrows.flex.items-center.justify-center.gap-x-6 q-btn( @@ -53,7 +53,7 @@ export default { range: Boolean, rangeCount: Number, internalMonth: String, - nextForm: { + changeForm: { type: Function, default: () => {}, }, @@ -97,6 +97,9 @@ export default { }, }, methods: { + switchForm() { + this.changeForm("CalendarYears"); + }, previousMonth() { this.internalValue = this.internalValue.clone().subtract(1, "month"); }, diff --git a/src/components/base/Calendar/CalendarMonths.vue b/src/components/base/Calendar/CalendarMonths.vue index 3a843c8..a5e7ddd 100644 --- a/src/components/base/Calendar/CalendarMonths.vue +++ b/src/components/base/Calendar/CalendarMonths.vue @@ -1,17 +1,82 @@ - + diff --git a/src/components/base/Calendar/CalendarYears.vue b/src/components/base/Calendar/CalendarYears.vue index d2fea67..a339047 100644 --- a/src/components/base/Calendar/CalendarYears.vue +++ b/src/components/base/Calendar/CalendarYears.vue @@ -14,7 +14,7 @@ v-for="year in internalYearsList", :key="year", :id="year", - :class="activeCellClass(year), cellsClass", + :class="calculateActiveCell(year), cellsClass", @click="selectYear(year)", ) {{ year }} @@ -61,7 +61,7 @@ export default { }, }, methods: { - activeCellClass(year) { + calculateActiveCell(year) { return { "active-cell": parseInt(this.internalValue.format("YYYY"), 10) === year, }; diff --git a/src/pages/newCalendar/components/CalendarHeader.vue b/src/pages/newCalendar/components/CalendarHeader.vue index d81579d..9e82487 100644 --- a/src/pages/newCalendar/components/CalendarHeader.vue +++ b/src/pages/newCalendar/components/CalendarHeader.vue @@ -31,7 +31,7 @@ ) .h-5.w-5.flex.items-center.justify-center q-icon.text.cursor-pointer(:name="calendarVisibility ? 'app:cancel' : 'app:calendar'", - :size="calendarVisibility ? '10px' : '16px'" + :size="calendarVisibility ? '10px' : '16px'", ) q-menu( :style="{'margin-top': '4px !important'}" @@ -42,11 +42,10 @@ :offset="[122, 14]" ) base-calendar( - v-model="date", + v-model="dates", range, :range-count="7", - :save="saveNewDate", - :cancel="cancelDateChanges", + :save="saveDatesChange", ) q-btn( color="secondary", @@ -88,7 +87,7 @@ export default { value: "collapsed", }, ], - date: { + dates: { from: null, to: null, }, @@ -97,9 +96,9 @@ export default { }, computed: { currentWeek() { - return `${this.date?.from?.format( + return `${this.dates?.from?.format( "D MMMM YYYY" - )} - ${this.date?.to?.format("D MMMM YYYY")}`; + )} - ${this.dates?.to?.format("D MMMM YYYY")}`; }, ...mapState({ selectedDates: (state) => state.calendar.selectedDates, @@ -107,40 +106,53 @@ export default { }, methods: { previousWeek() { - this.date.from = this.date.from.clone().subtract(1, "week"); - this.date.to = this.date.to.clone().subtract(1, "week"); + this.dates.from = this.dates.from.clone().subtract(1, "week"); + this.dates.to = this.dates.to.clone().subtract(1, "week"); + this.changeSelectedDates(this.dates); }, nextWeek() { - this.date.from = this.date.from.clone().add(1, "week"); - this.date.to = this.date.to.clone().add(1, "week"); + this.dates.from = this.dates.from.clone().add(1, "week"); + this.dates.to = this.dates.to.clone().add(1, "week"); + this.changeSelectedDates(this.dates); }, ...mapActions({ changeSelectedDates: "changeSelectedDates", }), - saveNewDate() { + saveDatesChange() { + this.calendarVisibility = false; + if ( + !this.dates?.from.isSame(this.selectedDates?.from) && + !this.dates?.to.isSame(this.selectedDates?.to) + ) + this.changeSelectedDates(this.dates); + }, + cancelDatesChange() { this.calendarVisibility = false; }, - cancelDateChanges() { - this.calendarVisibility = false; + initializeDates() { + this.dates = { + from: this.selectedDates.from.clone(), + to: this.selectedDates.to.clone(), + }; }, }, watch: { - date: { - deep: true, - handler(val) { - if ( - !this.val?.from.isSame(this.selectedDates?.from) && - !this.val?.to.isSame(this.selectedDates?.to) - ) - this.changeSelectedDates(val); - }, - }, + // dates: { + // deep: true, + // handler(val) { + // if ( + // !this.val?.from.isSame(this.selectedDates?.from) && + // !this.val?.to.isSame(this.selectedDates?.to) + // ) + // this.changeSelectedDates(val); + // }, + // }, + // calendarVisibility(val) { + // if (val === false) this.initializeDates(); + // } }, mounted() { - this.date = { - from: this.selectedDates.from.clone(), - to: this.selectedDates.to.clone(), - }; + this.initializeDates(); }, }; From 16b5762883daa4e4aa6fd07f54903069649c2dcb Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Wed, 21 Jun 2023 16:32:25 +0300 Subject: [PATCH 2/2] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B0?= =?UTF-8?q?=20BaseCalendar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/base/Calendar/BaseCalendar.vue | 57 +++++++------------ .../base/Calendar/CalendarYears.vue | 12 ++-- .../newCalendar/components/CalendarHeader.vue | 34 ++++------- 3 files changed, 37 insertions(+), 66 deletions(-) diff --git a/src/components/base/Calendar/BaseCalendar.vue b/src/components/base/Calendar/BaseCalendar.vue index dc31725..88d86fc 100644 --- a/src/components/base/Calendar/BaseCalendar.vue +++ b/src/components/base/Calendar/BaseCalendar.vue @@ -3,7 +3,7 @@ component( v-bind:is="currentForm?.component", v-model:internal-date="internalDate", - v-model:external-date="value", + v-model:external-date="externalValue", :range="range", :start-year="startYear", :end-year="endYear", @@ -19,7 +19,7 @@ label="Отменить", size="14px", padding="10px 12px", - @click="currentForm?.cancelFunction" + @click="cancelChanges" ) q-btn( color="primary", @@ -56,10 +56,6 @@ export default { type: Function, default: () => {}, }, - // cancel: { - // type: Function, - // default: () => {}, - // }, }, data() { return { @@ -69,23 +65,20 @@ export default { { component: "CalendarDates", saveBtnLabel: "Сохранить", - cancelFunction: this.cancelExternalChanges, saveFunction: this.saveExternalChanges, }, { component: "CalendarYears", saveBtnLabel: "Применить", - cancelFunction: this.cancelInternalChanges, saveFunction: this.applyInternalChanges, }, { component: "CalendarMonths", saveBtnLabel: "Применить", - cancelFunction: this.cancelInternalChanges, saveFunction: this.applyInternalChanges, }, ], - previousValue: null, + externalValue: null, }; }, computed: { @@ -108,28 +101,29 @@ export default { changeForm(form) { this.currentForm = this.forms.find((elem) => elem.component === form); }, - cancelExternalChanges() { - this.value = this.range - ? { - from: this.previousValue?.from?.clone(), - to: this.previousValue?.to?.clone(), - } - : this.previousValue; - }, - cancelInternalChanges() { + changeDate() { if (this.range) { - this.value = { - from: this.previousValue?.from?.clone(), - to: this.previousValue?.to?.clone(), + this.internalDate = this.value?.from?.clone(); + this.externalValue = { + from: this.value?.from?.clone(), + to: this.value?.to?.clone(), }; - this.internalDate = this.previousValue?.from?.clone(); } else { - this.value = this.previousValue; - this.internalDate = this.previousValue; + this.internalDate = this.value?.clone(); + this.externalValue = this.value?.clone(); } + }, + cancelChanges() { + this.changeDate(); this.changeForm("CalendarDates"); }, saveExternalChanges() { + if (this.range) + this.value = { + from: this.externalValue?.from?.clone(), + to: this.externalValue?.to?.clone(), + }; + else this.value = this.externalValue?.clone(); this.save(); }, applyInternalChanges() { @@ -144,18 +138,7 @@ export default { }, }, mounted() { - if (this.value) { - if (this.range) { - this.internalDate = this.value?.from?.clone(); - this.previousValue = { - from: this.value?.from?.clone(), - to: this.value?.to?.clone(), - }; - } else { - this.internalDate = this.value?.clone(); - this.previousValue = this.value?.clone(); - } - } + if (this.value) this.changeDate(); this.currentForm = this.forms[0]; }, }; diff --git a/src/components/base/Calendar/CalendarYears.vue b/src/components/base/Calendar/CalendarYears.vue index a339047..695de22 100644 --- a/src/components/base/Calendar/CalendarYears.vue +++ b/src/components/base/Calendar/CalendarYears.vue @@ -28,11 +28,6 @@ export default { endYear: Number, internalMonth: String, }, - data() { - return { - previousDate: null, - }; - }, computed: { internalValue: { get() { @@ -69,9 +64,14 @@ export default { selectYear(year) { this.internalValue = this.internalValue.clone().year(year); }, + scrollToCurrentYear() { + document + .getElementById(parseInt(this.internalValue.format("YYYY"), 10)) + .scrollIntoView({ block: "center", behavior: "smooth" }); + }, }, mounted() { - this.previousDate = this.internalValue.clone(); + this.scrollToCurrentYear(); }, }; diff --git a/src/pages/newCalendar/components/CalendarHeader.vue b/src/pages/newCalendar/components/CalendarHeader.vue index 9e82487..8fa66ae 100644 --- a/src/pages/newCalendar/components/CalendarHeader.vue +++ b/src/pages/newCalendar/components/CalendarHeader.vue @@ -46,6 +46,7 @@ range, :range-count="7", :save="saveDatesChange", + :start-year="2000" ) q-btn( color="secondary", @@ -108,26 +109,16 @@ export default { previousWeek() { this.dates.from = this.dates.from.clone().subtract(1, "week"); this.dates.to = this.dates.to.clone().subtract(1, "week"); - this.changeSelectedDates(this.dates); }, nextWeek() { this.dates.from = this.dates.from.clone().add(1, "week"); this.dates.to = this.dates.to.clone().add(1, "week"); - this.changeSelectedDates(this.dates); }, ...mapActions({ changeSelectedDates: "changeSelectedDates", }), saveDatesChange() { this.calendarVisibility = false; - if ( - !this.dates?.from.isSame(this.selectedDates?.from) && - !this.dates?.to.isSame(this.selectedDates?.to) - ) - this.changeSelectedDates(this.dates); - }, - cancelDatesChange() { - this.calendarVisibility = false; }, initializeDates() { this.dates = { @@ -137,19 +128,16 @@ export default { }, }, watch: { - // dates: { - // deep: true, - // handler(val) { - // if ( - // !this.val?.from.isSame(this.selectedDates?.from) && - // !this.val?.to.isSame(this.selectedDates?.to) - // ) - // this.changeSelectedDates(val); - // }, - // }, - // calendarVisibility(val) { - // if (val === false) this.initializeDates(); - // } + dates: { + deep: true, + handler(val) { + if ( + !this.val?.from.isSame(this.selectedDates?.from) && + !this.val?.to.isSame(this.selectedDates?.to) + ) + this.changeSelectedDates(val); + }, + }, }, mounted() { this.initializeDates();