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

<template lang="pug">
  .schedule.flex-1.flex.flex-col.relative(
    :style="{width: openSidebar ? 'calc(100vw - 320px)' : 'calc(100vw - 160px)'}"
  )
    calendar-header.w-full.mb-1(v-model="displayType")
    .schedule-body.h-full.bg-white.w-full
      .column-wrapper.flex.ml-20(:style="expandedDisplayType ? columnWrapperWidth : {}")
        calendar-column(
          v-for="date in dateRange",
          :key="date",
          :date="date",
          :style="columnSize",
          :expanded-display-type="expandedDisplayType"
        )
      .flex.relative(
        :style="expandedDisplayType ? backgroundWrapperWidth : {}",
        :class="{'border-bottom': expandedDisplayType}"
      )
        .time-coil-wrapper.left-0.-mt-12
          calendar-clock-column(:time-coil="timeCoil")
          .time-circle-indicator.left-74px.h-3.w-3.rounded-full.absolute.top-20(
            v-if="isShownIndicator"
          )
        span.time-line-indicator.block.left-20.absolute.w-full(
          v-if="isShownIndicator"
        )
        calendar-background.flex-1
    .w-full.h-3.bg-white.footer(v-if="expandedDisplayType")
</template>

<script>
import CalendarHeader from "@/pages/newCalendar/components/CalendarHeader";
import CalendarBackground from "@/pages/newCalendar/components/CalendarBackground.vue";
import CalendarClockColumn from "@/pages/newCalendar/components/CalendarClockColumn.vue";
import CalendarColumn from "@/pages/newCalendar/components/CalendarColumn.vue";
import { mapState } from "vuex";
import * as moment from "moment/moment";
export default {
  name: "CalendarWrapper",
  components: {
    CalendarHeader,
    CalendarBackground,
    CalendarClockColumn,
    CalendarColumn,
  },
  props: {
    openSidebar: Boolean,
  },
  data() {
    return {
      displayType: "expanded",
      currentTime: "",
      isCurrentWeek: true,
      isShownIndicator: true,
    };
  },
  computed: {
    ...mapState({
      workingHours: (state) => state.calendar.workingHours,
      selectedDates: (state) => state.calendar.selectedDates,
    }),
    hours() {
      return this.convertTime(this.currentTime, 0, -6);
    },
    minutes() {
      return this.convertTime(this.currentTime, 3, -3);
    },
    hoursMinutes() {
      return this.currentTime.slice(0, -3);
    },
    expandedDisplayType() {
      return this.displayType === "expanded";
    },
    dateRange() {
      let diff = this.selectedDates?.to.diff(this.selectedDates?.from, "days");
      let range = [];
      for (let i = 0; i <= diff; i++) {
        range.push(this.selectedDates?.from.clone().add(i, "day"));
      }
      return range;
    },
    validateStartTime() {
      return this.verifyTime(this.workingHours.start);
    },
    validateEndTime() {
      return this.verifyTime(this.workingHours.end);
    },
    timeCoil() {
      let time = [];
      for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
        time.push(`${i}:00`);
      }
      return time;
    },
    columnSize() {
      return this.expandedDisplayType
        ? {
            height: `${this.timeCoil.length * 76 + 60}px`,
          }
        : {
            height: `${this.timeCoil.length * 76 + 96}px`,
          };
    },
    columnWrapperWidth() {
      return {
        width: `${380 * this.dateRange.length}px`,
      };
    },
    backgroundWrapperWidth() {
      return {
        width: `${380 * this.dateRange.length + 80}px`,
      };
    },
  },
  methods: {
    verifyTime(dayTime) {
      let timeArray = dayTime.split(":").map((elem) => parseInt(elem, 10));
      let newTime = timeArray[1] > 30 ? timeArray[0] + 1 : timeArray[0];
      return newTime;
    },
    changeCurrentTime() {
      this.currentTime = moment().format("HH:mm:ss");
    },
    convertTime(str, startIndex, endIndex) {
      return parseInt(str.slice(startIndex, endIndex), 10);
    },
  },
  mounted() {
    this.changeCurrentTime();
  },
};
</script>

<style lang="sass" scoped>
.schedule-body
  overflow-x: auto
  border-top-left-radius: 4px
  border-top-right-radius: 4px
  &::-webkit-scrollbar-track:horizontal
    margin: 0 24px 0 24px

.background
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)

.time-coil-wrapper
  position: sticky
  z-index: 5
  background-color: var(--default-white)
  padding-top: 38px

.column-wrapper
  height: 60px
  position: relative
  background-color: var(--default-white)

.footer
  border-bottom-left-radius: 4px
  border-bottom-right-radius: 4px

.border-bottom
  border-bottom: 4px solid var(--bg-ligth-blue-color)

.records-count
  border-right: 1px solid var(--border-light-grey-color)
  &:last-child
    border-right: none

.border-top
  border-top: 1px solid var(--border-light-grey-color)

.time-circle-indicator
  background-color: var(--bg-event-red-color)
  z-index: 5

.time-line-indicator
  border-top: 1px solid var(--bg-event-red-color)
  z-index: 4
  width: calc(100% - 80px)
  top: 38px
</style>