astra-frontend/src/pages/newCalendar/components/CalendarHeader.vue

<template lang="pug">
  .calendar-header-wrapper.w-full.flex.items-center.p-4.justify-between
    base-input.search(
      iconLeft,
      :width="280",
      size="M",
      placeholder="Найти ...",
      icon-left
    )
      template(v-slot:iconLeft)
        q-icon.search-icon(name="app: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.search(
        size="M"
        :width="300",
        v-model="currentWeek",
      )
        .h-5.w-5.flex.items-center.justify-center
          q-icon.calendar-icon.text.cursor-pointer(
            :name="calendarVisibility ? 'app:cancel-mini' : 'app:calendar'",
            size="20px",
          )
            q-menu(
              :style="{'margin-top': '8px !important'}"
              v-model="calendarVisibility",
              transition-show="scale",
              transition-hide="scale"
              self="top middle",
              :offset="[118, 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="0px"
      )
        template(v-slot:one)
          .w-12.h-8.flex.items-center.justify-center
            date-switcher-svg(name-svg="expanded", :active="value === 'expanded'")
        template(v-slot:two)
          .w-12.h-8.flex.items-center.justify-center
            date-switcher-svg(name-svg="compressed", :active="value === 'collapsed'")
</template>

<script>
import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
import { mapState, mapActions } from "vuex";
import { v_model } from "@/shared/mixins/v-model";
import DateSwitcherSvg from "@/pages/newCalendar/components/CalendarDateSwitcherSvg.vue";
import BaseInput from "@/components/base/BaseInput.vue";
export default {
  name: "CalendarHeader",
  mixins: [v_model],
  components: { BaseInput, BaseCalendar, DateSwitcherSvg },
  data() {
    return {
      displayTypesList: [
        {
          slot: "one",
          value: "expanded",
        },
        {
          slot: "two",
          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

.search :deep(.q-field__marginal)
  height: auto !important

.search :deep(.q-field__prepend)
  padding-right: 6px !important

.search-icon :deep(path)
  fill: var(--font-grey-color)

.calendar-icon :deep(path)
  fill: var(--font-dark-blue-color)
</style>
<style lang="sass">
.q-field--outlined.q-field--readonly .q-field__control:before
  border-style: solid !important
</style>