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();