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

Merge branch 'ASTRA-98' into 'master'

Browse Source 
WIP Добавила выделение диапазона

See merge request andrusyakka/urban-couscous!397
This commit is contained in:
Daria Golova
2023-05-30 16:09:30 +00:00
parent 63020d67da 317ed18e5c
commit 5cc8c44401
3 changed files with 140 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/sass/variables.sass
View File

@@ -17,6 +17,7 @@
--btn-blue-color-2: rgba(65, 105, 225, 0.5)
--btn-blue-color-3: rgba(65, 105, 225, 0.2)
--btn-blue-color-4: rgba(65, 105, 225, 0.8)
--btn-blue-color-5: rgba(65, 105, 225, 0.4)
--bg-btn-icons-color: rgba(215, 217, 255, 0.6)
--font-grey-color: #9294a7
--font-grey-color-0: #85858b

161
src/components/base/BaseCalendar.vue
View File

@@ -1,7 +1,7 @@
<template lang="pug">
.calendar-wrapper.bg-white
.header.px-6.pt-5.pb-18px.flex.items-center.justify-between
.text-smm.font-semibold {{ month }}
.text-smm.font-semibold {{ internalMonth }}
.arrows.flex.items-center.justify-center.gap-x-6
q-btn(
flat,
@@ -21,14 +21,18 @@
round,
@click="nextMonth"
)
.week.py-4.px-18px.grid.grid-rows-1.grid-cols-7.gap-x-1
.flex.items-center.justify-center.week-item.text-xsx.py-1.px-2(v-for="day of week", :key="day") {{ day }}
.body.pb-6.px-6.grid.grid-rows-6.grid-cols-7.gap-x-1.gap-y-2
.flex.items-center.justify-center.h-8.w-8.rounded-full(
v-for="date of dates",
:style="calculateCurrentMonth(date)",
.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
.flex.items-center.justify-center.cursor-pointer.w-full.h-full(
v-for="date of internalDatesList",
@click="selectDate(date)",
:key="date",
) {{ date.format("DD") }}
:style="calculateRangeStyle(date)"
)
.flex.items-center.justify-center.rounded-full.w-full.h-full(
:class="calculateCellClasses(date)",
) {{ date.format("D") }}
</template>
<script>
@@ -39,11 +43,14 @@ export default {
props: {
modelValue: Object,
range: Boolean,
rangeCount: Number,
},
data() {
return {
week: ["ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ", "ВС"],
currentDate: moment(),
internalDate: moment(),
selectedDate: null,
datesRange: [],
};
},
computed: {
@@ -58,50 +65,129 @@ export default {
...mapState({
today: (state) => state.calendar.currentDate,
}),
month() {
let formattedMonth = this.currentDate.format("MMMM");
internalMonth() {
let formattedMonth = this.internalDate.format("MMMM");
return `${
formattedMonth[0].toUpperCase() + formattedMonth.slice(1)
} ${this.currentDate.format("YYYY")}`;
} ${this.internalDate.format("YYYY")}`;
},
startDate() {
return this.currentDate
internalStartDate() {
return this.internalDate
.clone()
.startOf("month")
.startOf("week")
.subtract(1, "day");
},
dates() {
return [...Array(42)].map(() => this.startDate.add(1, "day").clone());
internalDatesList() {
return [...Array(42)].map(() =>
this.internalStartDate.add(1, "day").clone()
);
},
},
methods: {
previousMonth() {
this.currentDate = this.currentDate.clone().subtract(1, "month");
this.internalDate = this.internalDate.clone().subtract(1, "month");
},
nextMonth() {
this.currentDate = this.currentDate.clone().add(1, "month");
this.internalDate = this.internalDate.clone().add(1, "month");
},
calculateCurrentMonth(date) {
calculateCellClasses(date) {
if (date.isSame(this.today, "day"))
return {
"date-today": true,
};
if (this.defineDateRange(date))
return {
"date-active": true,
};
if (
date.isSame(this.today, "day") ||
date.isSame(this.currentDate, "day")
this.calculateRangeStyle(date) &&
Object.keys(this.calculateRangeStyle(date) === 1)
)
return {
color: "var(--default-white)",
"background-color": "var(--btn-blue-color)",
"text-white": true,
};
if (date.isSame(this.currentDate, "month"))
if (date.isSame(this.internalDate, "month"))
return {
color: "var(--font-black-color)",
"date-month": true,
};
return {
color: "var(--font-grey-color)",
"date-other": true,
};
},
calculateRangeStyle(date) {
if (this.range && this.value?.from && this.value?.to) {
if (date.isSame(this.value?.from?.format("YYYY-MM-DD")))
return {
"border-top-left-radius": "9999px",
"border-bottom-left-radius": "9999px",
"background-color": "var(--btn-blue-color-5)",
};
if (date.isSame(this.value?.to?.format("YYYY-MM-DD")))
return {
"border-top-right-radius": "9999px",
"border-bottom-right-radius": "9999px",
"background-color": "var(--btn-blue-color-5)",
};
if (date.isAfter(this.value?.from) && date.isBefore(this.value?.to))
return {
"background-color": "var(--btn-blue-color-5)",
};
}
},
selectDate(date) {
if (!this.range) {
this.value = date;
return;
}
if (this.rangeCount) {
this.value.from = date;
this.value.to = this.value.from.clone().add(this.rangeCount - 1, "day");
return;
}
if (this.value?.to) {
this.value.from = date;
this.value.to = null;
return;
}
if (date.isAfter(this.value?.from)) {
this.value.to = date;
return;
}
this.value.to = this.value.from;
this.value.from = date;
return;
},
defineDateRange(date) {
if (!this.range) {
return date.isSame(this.value?.format("YYYY-MM-DD"));
}
return (
date.isSame(this.value?.from?.format("YYYY-MM-DD")) ||
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) this.currentDate = this.value.clone();
if (this.value) {
if (this.range) {
this.internalDate = this.value?.from?.clone();
} else this.internalDate = this.value?.clone();
}
},
};
</script>
@@ -115,4 +201,25 @@ export default {
color: var(--font-grey-color)
.week-item:nth-last-child(-n+2)
color: var(--border-red-color)
.date-active
color: var(--default-white),
background-color: var(--btn-blue-color)
.date-active:hover
opacity: 0.5
.date-other
color: var(--font-grey-color)
.date-month
color: var(--font-black-color)
.date-other:hover, .date-month:hover, .date-today:hover
background-color: var(--border-light-grey-color)
.date-today
border: 1px dashed var(--btn-blue-color)
color: var(--btn-blue-color)
.body
display: grid
grid-template-columns: repeat(7, 35px)
grid-template-rows: repeat(6, 35px)
row-gap: 4px
justify-content: center
align-items: center
</style>

7
src/pages/newCalendar/components/CalendarHeader.vue
View File

@@ -51,7 +51,7 @@
anchor="bottom middle",
self="top middle"
)
base-calendar(v-model="date")
base-calendar(v-model="date", range)
q-btn(
color="secondary",
icon="arrow_forward_ios",
@@ -90,7 +90,10 @@ export default {
value: "expanded",
},
],
date: moment().clone().add(1, "month").add(15, "day"),
date: {
from: moment().clone().add(1, "month"),
to: moment().clone().add(2, "month"),
},
calendarVisibility: false,
};
},