Merge pull request #77 from dderbentsov/UC-24

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

server.js

@@ -459,8 +459,8 @@ export function clientsServer() {
         results: [
           {
             id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
-            start: "2022-10-25T11:15:49Z",
+            start: "2022-10-27T11:15:49Z",
-            end: "2022-10-25T12:00:53Z",
+            end: "2022-10-27T12:00:53Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -502,8 +502,8 @@ export function clientsServer() {
           },
           {
             id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
-            start: "2022-10-25T13:00:49Z",
+            start: "2022-10-27T13:00:49Z",
-            end: "2022-10-25T13:30:53Z",
+            end: "2022-10-27T13:30:53Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -545,8 +545,8 @@ export function clientsServer() {
           },
           {
             id: "2faa7bb2-2de6-422c-a401-1b35cd455223",
-            start: "2022-10-25T15:00:00Z",
+            start: "2022-10-27T15:00:00Z",
-            end: "2022-10-25T16:10:00Z",
+            end: "2022-10-27T16:10:00Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -631,8 +631,8 @@ export function clientsServer() {
           },
           {
             id: "2faa5ff2-2de6-422c-a401-1b35cd455223",
-            start: "2022-10-26T20:10:00Z",
+            start: "2022-10-27T20:10:00Z",
-            end: "2022-10-26T21:00:00Z",
+            end: "2022-10-27T21:00:00Z",
             kind: "call",
             subkind: null,
             description: "",

src/pages/calendar/TheCalendar.vue

@@ -25,8 +25,8 @@ export default {
       calendarLayout: "",
       currentDate: moment(),
       timeInformation: {
-        dayStartTime: "0:00",
+        dayStartTime: "8:00",
-        dayEndTime: "20:00",
+        dayEndTime: "24:00",
       },
       eventsData: [],
       teamData: [],

src/pages/calendar/components/CalendarBackground.vue

@@ -1,22 +1,9 @@
 <template lang="pug">
   .calendar-background-wrapper.flex.flex-col(
     ref="backgroundWrapper"
-    :class="horizontalScrollPresence"
-    )
-    .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

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-5.px-3
     span.text-base(
       v-for="hour in timeCoil"
       :key="hour"
@@ -59,6 +59,5 @@ export default {
   width: 80px
   height: 100%
   color: var(--font-dark-blue-color)
-  position: sticky
+  background-color: var(--default-white)
-  left: 0
 </style>

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

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

src/pages/calendar/components/CalendarSchedule.vue

@@ -1,7 +1,6 @@
 <template lang="pug">
   .schedule.ml-2(
     :style="scheduleWidth"
-    ref="shedule"
     )
     calendar-header(
       :current-date="currentDate"
@@ -10,24 +9,25 @@
       @next-date="nextDate"
       @selected-layout="selectedLayout"
       )
-    .schedule-body.flex(
+    .schedule-body
+      .column-wrapper.flex.ml-20.relative(: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"
         )
-      div
+      .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"
           )
-      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"
@@ -36,6 +36,16 @@
           v-if="isShownIndicator"
           :style="lineIndicatorLocation"
         )
+        .flex(:class="calendarBackgroundWidth")
+          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"
+            )
 </template>
 
 <script>
@@ -43,12 +53,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 +93,6 @@ export default {
       pixelsPerHour: 62,
       columnHeaderHeight: 48,
       defaultColumnWidth: 470,
-      sheduleHeight: 0,
     };
   },
   computed: {
@@ -101,19 +112,20 @@ export default {
       return this.verifyTime(this.timeInformation.dayEndTime);
     },
     lineIndicatorLocation() {
-      if (this.filteredOwners.length > 3 && this.timeCoil.length - 1 > 13) {
+      if (this.ownersCount > 3) {
         return {
-          width: `${this.filteredOwners.length * this.defaultColumnWidth}px`,
+          width: `${this.defaultColumnWidth * this.ownersCount}px`,
           top: `${this.calculateIndicatorLocation()}px`,
         };
       }
       return {
+        width: "calc(100% - 80px)",
         top: `${this.calculateIndicatorLocation()}px`,
       };
     },
     circleIndicatorLocation() {
       return {
-        top: `${this.calculateIndicatorLocation() - 6}px`,
+        top: `${this.calculateIndicatorLocation() + 6}px`,
       };
     },
     pixelsPerMinute() {
@@ -121,8 +133,7 @@ export default {
     },
     scheduleHeight() {
       return (
-        (this.validateEndTime - this.validateStartTime) * this.pixelsPerHour +
+        (this.validateEndTime - this.validateStartTime) * this.pixelsPerHour
-        this.columnHeaderHeight
       );
     },
     scheduleWidth() {
@@ -161,6 +172,48 @@ 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")
+      );
+    },
+    columnHeight() {
+      return (
+        (this.timeCoil.length - 1) * this.pixelsPerHour +
+        this.columnHeaderHeight
+      );
+    },
+    columnWidth() {
+      if (this.ownersCount > 3) {
+        return {
+          height: `${this.columnHeight}px`,
+          width: `${this.defaultColumnWidth}px`,
+        };
+      }
+      return {
+        height: `${this.columnHeight}px`,
+        width: `calc(100% / ${this.ownersCount})`,
+      };
+    },
+    columnWrapperWidth() {
+      if (this.ownersCount > 3) {
+        return {
+          width: `${this.defaultColumnWidth * this.ownersCount}px`,
+        };
+      }
+      return {
+        width: "calc(100% - 80px)",
+      };
+    },
+    calendarBackgroundWidth() {
+      return {
+        "w-full": this.ownersCount <= 3,
+      };
+    },
   },
   methods: {
     previousDate() {
@@ -224,8 +277,7 @@ export default {
         .map((elem) => parseInt(elem, 10));
       let result =
         (newTime[0] - this.validateStartTime) * this.pixelsPerHour +
-        newTime[1] * this.pixelsPerMinute +
+        newTime[1] * this.pixelsPerMinute;
-        this.columnHeaderHeight;
       if (result > this.scheduleHeight || result < 0) {
         this.isShownIndicator = false;
         return 0;
@@ -237,6 +289,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,13 +345,11 @@ 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)
   border-top: 1px solid var(--bg-event-red-color)
   position: absolute
+  z-index: 4
 
 .time-circle-indicator
   width: 12px
@@ -295,7 +357,19 @@ export default {
   background-color: var(--bg-event-red-color)
   border-radius: 50%
   position: absolute
+  z-index: 5
+
+.column-wrapper
+  height: 48px
+  background-color: var(--default-white)
+
+.time-coil-wrapper
+  position: sticky
+  z-index: 5
 
 .schedule-body
-  position: relative
+  width: 100%
+  height: calc(100vh - 56px - 8px - 56px)
+  overflow-y: auto
+  overflow-x: auto
 </style>