diff --git a/src/components/base/BaseCalendar.vue b/src/components/base/BaseCalendar.vue index f8bbfff..76926cc 100644 --- a/src/components/base/BaseCalendar.vue +++ b/src/components/base/BaseCalendar.vue @@ -23,12 +23,12 @@ ) .week.py-4.px-5.grid.grid-rows-1.grid-cols-7 .flex.items-center.justify-center.week-item.text-xsx.py-1(v-for="day of week", :key="day") {{ day }} - .body.pb-5.px-5 + .body.pb-7.px-5 .flex.items-center.justify-center.cursor-pointer.w-full.h-full( v-for="date of internalDatesList", @click="selectDate(date)", :key="date", - :style="calculateRangeStyle(date)" + :style="calculateRangeStyle(date)", ) .flex.items-center.justify-center.rounded-full.w-full.h-full( :class="calculateCellClasses(date)", @@ -92,10 +92,6 @@ export default { this.internalDate = this.internalDate.clone().add(1, "month"); }, calculateCellClasses(date) { - if (date.isSame(this.today, "day")) - return { - "date-today": true, - }; if (this.defineDateRange(date)) return { "date-active": true, @@ -106,6 +102,11 @@ export default { ) return { "text-white": true, + "date-range": true, + }; + if (date.isSame(this.today, "day")) + return { + "date-today": true, }; if (date.isSame(this.internalDate, "month")) return { @@ -116,7 +117,12 @@ export default { }; }, calculateRangeStyle(date) { - if (this.range && this.value?.from && this.value?.to) { + if ( + this.range && + this.value?.from && + this.value?.to && + !this.value?.from.isSame(this.value?.to?.format("YYYY-MM-DD")) + ) { if (date.isSame(this.value?.from?.format("YYYY-MM-DD"))) return { "border-top-left-radius": "9999px", @@ -167,21 +173,7 @@ export default { date.isSame(this.value?.to?.format("YYYY-MM-DD")) ); }, - calculateRange(start, end, count) { - let internalCount = count ? count : end.diff(start, "days"); - return [...Array(internalCount - 2)].map(() => - start.add(1, "day").clone() - ); - }, }, - // watch: { - // modelValue: { - // deep: true, - // handler(value) { - // console.log(value); - // }, - // }, - // }, mounted() { if (this.value) { if (this.range) { @@ -210,8 +202,10 @@ export default { color: var(--font-grey-color) .date-month color: var(--font-black-color) -.date-other:hover, .date-month:hover, .date-today:hover +.date-other:hover, .date-month:hover background-color: var(--border-light-grey-color) +.date-today:hover, .date-range:hover + background-color: var(--btn-blue-color-2) .date-today border: 1px dashed var(--btn-blue-color) color: var(--btn-blue-color) diff --git a/src/pages/newCalendar/components/CalendarHeader.vue b/src/pages/newCalendar/components/CalendarHeader.vue index ded3669..9df7aee 100644 --- a/src/pages/newCalendar/components/CalendarHeader.vue +++ b/src/pages/newCalendar/components/CalendarHeader.vue @@ -17,7 +17,8 @@ dense, icon="arrow_back_ios_new", text-color="primary", - padding="2px 11px 2px 8px" + padding="2px 11px 2px 8px", + @click="previousWeek" ) base-input( outlined, @@ -25,40 +26,30 @@ fontSize="16px", lineHeight="19px", iconRight, - id="calendarIcon" + v-model="currentWeek", + readonly ) - q-icon.text(name="app:calendar", size="20px", ref="calendarIcon", @click="changeCalendarVisibility(false)") - //q-popup-proxy( - cover, - transition-show="scale", - transition-hide="scale" - anchor="bottom middle", self="top middle" - //) - //q-date(v-model="date", minimal, range) - .flex.items-center.justify-end - q-btn( - v-close-popup, - label="Закрыть", - color="primary", - flat - ) - q-menu( - :style="{'margin-top': '4px !important'}" - target="#calendarIcon" - v-model="calendarVisibility", - transition-show="scale", - transition-hide="scale" - anchor="bottom middle", - self="top middle" - ) - base-calendar(v-model="date", range) + .h-5.w-5.flex.items-center.justify-center + q-icon.text.cursor-pointer(:name="calendarVisibility ? 'app:cancel' : 'app:calendar'", + :size="calendarVisibility ? '10px' : '16px'" + ) + q-menu( + :style="{'margin-top': '4px !important'}" + v-model="calendarVisibility", + transition-show="scale", + transition-hide="scale" + self="top middle", + :offset="[118, 14]" + ) + base-calendar(v-model="date", range, :range-count="7") q-btn( color="secondary", icon="arrow_forward_ios", round, size="14px", text-color="primary", - dense + dense, + @click="nextWeek" ) .h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color.ml-52 q-btn-toggle( @@ -91,18 +82,29 @@ export default { }, ], date: { - from: moment().clone().add(1, "month"), - to: moment().clone().add(2, "month"), + from: moment(), + to: moment().clone().add(6, "day"), }, calendarVisibility: false, }; }, - methods: { - changeCalendarVisibility(value) { - this.calendarVisibility = value; + computed: { + currentWeek() { + return `${this.date?.from?.format( + "D MMMM YYYY" + )} - ${this.date?.to?.format("D MMMM YYYY")}`; + }, + }, + methods: { + previousWeek() { + this.date.from = this.date.from.clone().subtract(1, "week"); + this.date.to = this.date.to.clone().subtract(1, "week"); + }, + nextWeek() { + this.date.from = this.date.from.clone().add(1, "week"); + this.date.to = this.date.to.clone().add(1, "week"); }, }, - watch: {}, }; @@ -134,3 +136,7 @@ export default { .q-btn-group :deep(.q-btn-item) border-radius: 4px !important +