Изменила архитектуру

2022-10-27 16:05:40 +03:00
parent 7b8db909fc
commit 614ec74338
6 changed files with 106 additions and 85 deletions
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -26,7 +26,7 @@ export default {
      currentDate: moment(),
      timeInformation: {
        dayStartTime: "0:00",
-        dayEndTime: "20:00",
+        dayEndTime: "22:00",
      },
      eventsData: [],
      teamData: [],
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -1,22 +1,9 @@
 <template lang="pug">
  .calendar-background-wrapper.flex.flex-col(
    ref="backgroundWrapper"
-    :class="horizontalScrollPresence"
+    :style="backgroundExtendedWidth"
    )
-    .header-wrapper
-      .header(:style="backgroundExtendedWidth")
-    calendar-column(
-      v-for="(owner, index) in filteredOwners"
-      :key="owner.id"
-      :owner-data="owner"
-      :style="calculateColumnPosition(index)"
-      :day-events="filterEventsByOwner(owner)"
-      :day-start-time="dayStartTime"
-      :day-end-time="dayEndTime"
-      )
-    .body.flex.flex-col(
-      :style="backgroundExtendedWidth"
-      )
+    .body.flex.flex-col
      .line-wrapper
        .line.flex.items-center(
          v-for="hour in timeCoil"
@@ -26,10 +13,8 @@
 </template>

 <script>
-import CalendarColumn from "./CalendarColumn.vue";
 export default {
  name: "CalendarBackground",
-  components: { CalendarColumn },
  props: {
    timeCoil: Array,
    filteredOwners: Array,
@@ -38,6 +23,7 @@ export default {
    sidebarWidth: String,
    dayStartTime: Number,
    dayEndTime: Number,
+    ownersCount: Number,
  },
  data() {
    return {
@@ -52,24 +38,18 @@ export default {
      return this.filteredOwners.length;
    },
    backgroundExtendedWidth() {
-      if (this.ownersArrayLength > 3) {
+      if (this.ownersCount > 3) {
        return {
-          width: `${this.defaultColumnWidth * this.ownersArrayLength}px`,
+          width: `${this.defaultColumnWidth * this.ownersCount}px`,
        };
      }
      return {
-        width: "auto",
+        width: "100%",
      };
    },
    backgroundHeight() {
      return (this.timeCoil.length - 1) * this.pixelsPerHour + 48;
    },
-    filteredEventsByDate() {
-      return this.eventsData.filter(
-        ({ start }) =>
-          start.slice(0, 10) === this.currentDate.format("YYYY-MM-DD")
-      );
-    },
    horizontalScrollPresence() {
      return {
        "scroll-x": this.ownersArrayLength > 3,
@@ -97,18 +77,6 @@ export default {
    calculateBackgroundWidth() {
      this.backgroundWidth = this.$refs.backgroundWrapper.scrollWidth;
    },
-    filterEventsByOwner(owner) {
-      let filteredArray = [];
-      this.filteredEventsByDate.forEach((item) => {
-        let foundEvent = item.employees.find(
-          (elem) =>
-            JSON.stringify(elem.employee) === JSON.stringify(owner) &&
-            elem.role === "owner"
-        );
-        if (foundEvent) filteredArray.push(item);
-      });
-      return filteredArray;
-    },
  },
  mounted() {
    this.calculateBackgroundWidth();
@@ -117,11 +85,7 @@ export default {
 </script>

 <style lang="sass" scoped>
-.scroll-x
-  overflow-x: auto
-
 .calendar-background-wrapper
-  width: 100%
  position: relative

 .header-wrapper
--- a/src/pages/calendar/components/CalendarClockColumn.vue
+++ b/src/pages/calendar/components/CalendarClockColumn.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .calendar-clock-column.flex.flex-col.items-end.gap-y-43.pt-9.pb-45px.px-3
+  .calendar-clock-column.flex.flex-col.items-end.gap-y-43.pb-45px.px-3
    span.text-base(
      v-for="hour in timeCoil"
      :key="hour"
@@ -59,6 +59,4 @@ export default {
  width: 80px
  height: 100%
  color: var(--font-dark-blue-color)
-  position: sticky
-  left: 0
 </style>
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -75,19 +75,15 @@ export default {

 <style lang="sass" scoped>
 .calendar-column-wrapper
-  position: absolute
  border-right: 1px solid var(--border-light-grey-color)
  &:nth-last-child(2) .header
    border-right: none
-  &:nth-last-child(2)
+  &:last-child
    border-right: none

 .header
-  height: 48px
  position: sticky
  z-index: 5
-  width: inherit
-  border-right: 1px solid var(--border-light-grey-color)
  background-color: var(--default-white)

 .body
--- a/src/pages/calendar/components/CalendarHeader.vue
+++ b/src/pages/calendar/components/CalendarHeader.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6.top-0
+  .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
    .flex
      base-arrow-button.left-arrow.mr-4(@click="previousHandler")
      base-arrow-button.right-arrow.mr-6(@click="nextHandler")
@@ -51,7 +51,6 @@ export default {
  background-color: var(--default-white)
  height: 56px
  border-radius: 4px
-  position: sticky
  z-index: 10

 .left-arrow
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -10,32 +10,43 @@
      @next-date="nextDate"
      @selected-layout="selectedLayout"
      )
-    .schedule-body.flex(
-      )
-      div
-        calendar-clock-column(
-          :timeCoil="timeCoil"
-          :current-time="currentTime"
-          :is-current-date="isCurrentDate"
+    .schedule-body
+      .column-wrapper.flex.ml-20.absolute(:style="columnWrapperWidth")
+        calendar-column(
+          v-for="(owner, index) in filteredOwners"
+          :key="owner.id"
+          :owner-data="owner"
+          :day-events="filterEventsByOwner(owner)"
+          :day-start-time="validateStartTime"
          :day-end-time="validateEndTime"
+          :style="columnWidth"
+        )
+      .flex.w-full.relative
+        .time-coil-wrapper.left-0.-mt-3
+          calendar-clock-column(
+            :timeCoil="timeCoil"
+            :current-time="currentTime"
+            :is-current-date="isCurrentDate"
+            :day-end-time="validateEndTime"
+          )
+        .flex
+          calendar-background(
+            :current-date="currentDate"
+            :time-coil="timeCoil"
+            :events-data="eventsData"
+            :sidebar-width="sidebarWidth"
+            :day-start-time="validateStartTime"
+            :day-end-time="validateEndTime"
+            :owners-count="ownersCount"
+            )
+        .time-circle-indicator.left-74px(
+          v-if="isShownIndicator"
+          :style="circleIndicatorLocation"
+          )
+        span.time-line-indicator.block.left-20(
+          v-if="isShownIndicator"
+          :style="lineIndicatorLocation"
          )  
-      calendar-background(
-        :current-date="currentDate"
-        :time-coil="timeCoil"
-        :events-data="eventsData"
-        :filtered-owners="filteredOwners"
-        :sidebar-width="sidebarWidth"
-        :day-start-time="validateStartTime"
-        :day-end-time="validateEndTime"
-        )
-      .time-circle-indicator.left-74px(
-        v-if="isShownIndicator"
-        :style="circleIndicatorLocation"
-        )
-      span.time-line-indicator.block.left-20(
-        v-if="isShownIndicator"
-        :style="lineIndicatorLocation"
-        )  
 </template>

 <script>
@@ -43,12 +54,14 @@ import * as moment from "moment/moment";
 import CalendarHeader from "./CalendarHeader.vue";
 import CalendarBackground from "./CalendarBackground.vue";
 import CalendarClockColumn from "./CalendarClockColumn.vue";
+import CalendarColumn from "./CalendarColumn.vue";
 export default {
  name: "CalendarSchedule",
  components: {
    CalendarHeader,
    CalendarBackground,
    CalendarClockColumn,
+    CalendarColumn,
  },
  props: {
    currentDate: {
@@ -81,7 +94,6 @@ export default {
      pixelsPerHour: 62,
      columnHeaderHeight: 48,
      defaultColumnWidth: 470,
-      sheduleHeight: 0,
    };
  },
  computed: {
@@ -101,9 +113,9 @@ export default {
      return this.verifyTime(this.timeInformation.dayEndTime);
    },
    lineIndicatorLocation() {
-      if (this.filteredOwners.length > 3 && this.timeCoil.length - 1 > 13) {
+      if (this.ownersCount > 3 && this.timeCoil.length - 1 > 13) {
        return {
-          width: `${this.filteredOwners.length * this.defaultColumnWidth}px`,
+          width: `${this.ownersCount * this.defaultColumnWidth}px`,
          top: `${this.calculateIndicatorLocation()}px`,
        };
      }
@@ -161,6 +173,37 @@ export default {
        (previous, subsequent) => Boolean(subsequent.id) - Boolean(previous.id)
      );
    },
+    ownersCount() {
+      return this.filteredOwners.length;
+    },
+    filteredEventsByDate() {
+      return this.eventsData.filter(
+        ({ start }) =>
+          start.slice(0, 10) === this.currentDate.format("YYYY-MM-DD")
+      );
+    },
+    columnWidth() {
+      if (this.ownersCount > 3) {
+        console.log(this.defaultColumnWidth * this.ownersCount);
+        return {
+          width: `${this.defaultColumnWidth}px`,
+        };
+      }
+      return {
+        width: `calc(100% / ${this.ownersCount})`,
+      };
+    },
+    columnWrapperWidth() {
+      if (this.ownersCount > 3) {
+        console.log(this.defaultColumnWidth * this.ownersCount);
+        return {
+          width: `${this.defaultColumnWidth * this.ownersCount}px`,
+        };
+      }
+      return {
+        width: "100%",
+      };
+    },
  },
  methods: {
    previousDate() {
@@ -224,8 +267,7 @@ export default {
        .map((elem) => parseInt(elem, 10));
      let result =
        (newTime[0] - this.validateStartTime) * this.pixelsPerHour +
-        newTime[1] * this.pixelsPerMinute +
-        this.columnHeaderHeight;
+        newTime[1] * this.pixelsPerMinute;
      if (result > this.scheduleHeight || result < 0) {
        this.isShownIndicator = false;
        return 0;
@@ -237,6 +279,18 @@ export default {
        (item) => JSON.stringify(item) === JSON.stringify(object)
      );
    },
+    filterEventsByOwner(owner) {
+      let filteredArray = [];
+      this.filteredEventsByDate.forEach((item) => {
+        let foundEvent = item.employees.find(
+          (elem) =>
+            JSON.stringify(elem.employee) === JSON.stringify(owner) &&
+            elem.role === "owner"
+        );
+        if (foundEvent) filteredArray.push(item);
+      });
+      return filteredArray;
+    },
  },
  watch: {
    currentTime() {
@@ -281,8 +335,6 @@ export default {
  background-color: var(--default-white)
  width: calc(100% - (var(--sidebar-width) + 8px))
  height: calc(100vh - 56px - 8px)
-  overflow-y: auto
-  overflow-x: hidden

 .time-line-indicator
  width: calc(100% - 80px)
@@ -296,6 +348,18 @@ export default {
  border-radius: 50%
  position: absolute

+.column-wrapper
+  height: 48px
+  background-color: var(--default-white)
+
+.time-coil-wrapper
+  position: sticky
+  z-index: 5
+  background-color: var(--default-white)
+
 .schedule-body
-  position: relative
+  width: 100%
+  height: calc(100vh - 56px - 8px - 56px)
+  overflow-y: auto
+  overflow-x: auto
 </style>