180 lines
4.4 KiB
Vue
180 lines
4.4 KiB
Vue
<template lang="pug">
|
|
.calendar-header-wrapper.w-full.flex.items-center.p-4.justify-between
|
|
base-input(
|
|
iconLeft,
|
|
outlined,
|
|
:width="280",
|
|
placeholder="Найти ...",
|
|
fontSize="16px",
|
|
lineHeight="19px"
|
|
)
|
|
q-icon(name="app:icon-search", size="20px")
|
|
.flex.gap-x-4.items-center.justify-center
|
|
q-btn(
|
|
color="secondary",
|
|
round,
|
|
size="14px",
|
|
dense,
|
|
icon="arrow_back_ios_new",
|
|
text-color="primary",
|
|
padding="2px 11px 2px 8px",
|
|
@click="previousWeek"
|
|
)
|
|
base-input(
|
|
outlined,
|
|
:width="300",
|
|
fontSize="16px",
|
|
lineHeight="19px",
|
|
iconRight,
|
|
v-model="currentWeek",
|
|
readonly
|
|
)
|
|
.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="[122, 14]"
|
|
)
|
|
base-calendar(
|
|
v-model="dates",
|
|
range,
|
|
:range-count="7",
|
|
:save="saveDatesChange",
|
|
:start-year="2000"
|
|
)
|
|
q-btn(
|
|
color="secondary",
|
|
icon="arrow_forward_ios",
|
|
round,
|
|
size="14px",
|
|
text-color="primary",
|
|
dense,
|
|
@click="nextWeek"
|
|
)
|
|
.h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color.ml-52
|
|
q-btn-toggle(
|
|
v-model="value",
|
|
:options="displayTypesList",
|
|
no-caps,
|
|
toggle-color="light-blue-4",
|
|
padding="4px"
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import BaseInput from "@/components/base/BaseInput";
|
|
import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
|
|
import { mapState, mapActions } from "vuex";
|
|
import { v_model } from "@/shared/mixins/v-model";
|
|
export default {
|
|
name: "CalendarHeader",
|
|
mixins: [v_model],
|
|
components: { BaseInput, BaseCalendar },
|
|
data() {
|
|
return {
|
|
displayTypesList: [
|
|
{
|
|
label: "exp",
|
|
value: "expanded",
|
|
},
|
|
{
|
|
label: "col",
|
|
value: "collapsed",
|
|
},
|
|
],
|
|
dates: {
|
|
from: null,
|
|
to: null,
|
|
},
|
|
calendarVisibility: false,
|
|
};
|
|
},
|
|
computed: {
|
|
currentWeek() {
|
|
return `${this.dates?.from?.format(
|
|
"D MMMM YYYY"
|
|
)} - ${this.dates?.to?.format("D MMMM YYYY")}`;
|
|
},
|
|
...mapState({
|
|
selectedDates: (state) => state.calendar.selectedDates,
|
|
}),
|
|
},
|
|
methods: {
|
|
previousWeek() {
|
|
this.dates.from = this.dates.from.clone().subtract(1, "week");
|
|
this.dates.to = this.dates.to.clone().subtract(1, "week");
|
|
},
|
|
nextWeek() {
|
|
this.dates.from = this.dates.from.clone().add(1, "week");
|
|
this.dates.to = this.dates.to.clone().add(1, "week");
|
|
},
|
|
...mapActions({
|
|
changeSelectedDates: "changeSelectedDates",
|
|
}),
|
|
saveDatesChange() {
|
|
this.calendarVisibility = false;
|
|
},
|
|
initializeDates() {
|
|
this.dates = {
|
|
from: this.selectedDates.from.clone(),
|
|
to: this.selectedDates.to.clone(),
|
|
};
|
|
},
|
|
},
|
|
watch: {
|
|
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();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.calendar-header-wrapper
|
|
background-color: var(--default-white)
|
|
height: 72px
|
|
border-radius: 4px
|
|
z-index: 10
|
|
|
|
.text
|
|
color: var(--font-dark-blue-color)
|
|
|
|
.text-grey-color
|
|
color: var(--font-grey-color)
|
|
|
|
.text-primary
|
|
color: var(--font-dark-blue-color-0) !important
|
|
|
|
.bg-secondary
|
|
background: var(--bg-light-grey) !important
|
|
|
|
.q-btn--round
|
|
width: 32px !important
|
|
height: 32px !important
|
|
min-width: 32px !important
|
|
min-height: 32px !important
|
|
|
|
.q-btn-group :deep(.q-btn-item)
|
|
border-radius: 4px !important
|
|
</style>
|
|
<style lang="sass">
|
|
.q-field--outlined.q-field--readonly .q-field__control:before
|
|
border-style: solid !important
|
|
</style>
|