Merge pull request #68 from dderbentsov/UC-24

WIP Доделала скроллы, зафиксировала хедер

server.js

@@ -642,7 +642,6 @@ export function clientsServer() {
               },
             ],
           },
-
           {
             id: "2faa5ff2-2de6-422c-a401-1b35cd455223",
             start: "2022-10-25T17:10:00Z",
@@ -686,6 +685,49 @@ export function clientsServer() {
               },
             ],
           },
+          {
+            id: "2faa5ff2-2de6-422c-a401-1b35cd455223",
+            start: "2022-10-26T20:10:00Z",
+            end: "2022-10-26T21:00:00Z",
+            kind: "call",
+            subkind: null,
+            description: "",
+            location: null,
+            members: [
+              {
+                id: "a9239f9a-e824-4bb3-a260-2b32dae9bc76",
+                person: {
+                  id: "15ff465c-2b7b-4d9a-9159-720c74d8b56d",
+                  last_name: "Елесеевская",
+                  first_name: "Татьяна",
+                  patronymic: "Ивановна",
+                },
+                role: null,
+              },
+            ],
+            employees: [
+              {
+                id: "f941a0c6-c734-4f79-92c2-d7a5674459e422",
+                employee: {
+                  id: "db831a15-e876-481f-a658-6325de7c311e",
+                  last_name: "Константинопольская",
+                  first_name: "Юлия",
+                  patronymic: "Викторовна",
+                },
+                role: null,
+              },
+              {
+                id: "f541a0c7-c750-4f79-92c0-d7a19354e422",
+                employee: {
+                  id: "db938a67-e756-481f-a653-6325de7c567e",
+                  last_name: "Коломойцев",
+                  first_name: "Илья",
+                  patronymic: "Константинович",
+                },
+                role: "owner",
+              },
+            ],
+          },
         ],
       }));
       this.passthrough("http://45.84.227.122:8080/**");

src/pages/calendar/components/CalendarBackground.vue

@@ -32,6 +32,7 @@ export default {
   components: { CalendarColumn },
   props: {
     timeCoil: Array,
+    filteredOwners: Array,
     eventsData: Array,
     currentDate: Object,
     sidebarWidth: String,
@@ -63,48 +64,17 @@ export default {
     backgroundHeight() {
       return (this.timeCoil.length - 1) * this.pixelsPerHour + 48;
     },
-    horizontalScrollPresence() {
-      return {
-        "scroll-x": this.ownersArrayLength > 3 && this.backgroundHeight < 855,
-      };
-    },
-    filteredOwners() {
-      let filteredArray = [];
-      let ownerAbsence = {
-        id: null,
-        last_name: null,
-        first_name: null,
-        patronymic: null,
-      };
-      this.eventsData.forEach(({ employees }) => {
-        let findedElement = employees.find((elem) => elem.role === "owner");
-        let emptyDataPresence = this.findObjectInArray(
-          filteredArray,
-          ownerAbsence
-        );
-        if (!findedElement && !emptyDataPresence) {
-          filteredArray.push(ownerAbsence);
-        }
-        if (findedElement) {
-          let ownerPresence = this.findObjectInArray(
-            filteredArray,
-            findedElement.employee
-          );
-          if (!ownerPresence) {
-            filteredArray.push(findedElement.employee);
-          }
-        }
-      });
-      return filteredArray.sort(
-        (previous, subsequent) => Boolean(subsequent.id) - Boolean(previous.id)
-      );
-    },
     filteredEventsByDate() {
       return this.eventsData.filter(
         ({ start }) =>
           start.slice(0, 10) === this.currentDate.format("YYYY-MM-DD")
       );
     },
+    horizontalScrollPresence() {
+      return {
+        "scroll-x": this.ownersArrayLength > 3,
+      };
+    },
   },
   methods: {
     calculateColumnPosition(elemIndex) {
@@ -125,12 +95,7 @@ export default {
       };
     },
     calculateBackgroundWidth() {
-      this.backgroundWidth = this.$refs.backgroundWrapper.offsetWidth;
+      this.backgroundWidth = this.$refs.backgroundWrapper.scrollWidth;
-    },
-    findObjectInArray(array, object) {
-      return array.find(
-        (item) => JSON.stringify(item) === JSON.stringify(object)
-      );
     },
     filterEventsByOwner(owner) {
       let filteredArray = [];
@@ -153,8 +118,7 @@ export default {
 
 <style lang="sass" scoped>
 .scroll-x
-  overflow-x: scroll
+  overflow-x: auto
-  overflow-y: hidden
 
 .calendar-background-wrapper
   width: 100%

src/pages/calendar/components/CalendarColumn.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .calendar-column-wrapper.flex.flex-col
-    .header.flex.items-center.justify-between.py-2.px-6
+    .header.flex.items-center.justify-between.py-2.px-6.top-0
       .flex.items-center
         img.avatar-wrapper.mr-2(src="@/assets/images/team-member.svg" alt="Team member")
         span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
@@ -58,7 +58,7 @@ export default {
         start[1] * this.pixelsPerMinute;
       if (
         parseInt(start[0], 10) < this.dayStartTime ||
-        parseInt(end, 10) > this.dayEndTime
+        parseInt(end, 10) >= this.dayEndTime
       ) {
         return {
           top: "0px",
@@ -77,11 +77,14 @@ export default {
 .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)
+    border-right: none
 
 .header
   height: 48px
   position: sticky
-  top: 0px
   z-index: 5
   width: inherit
   border-right: 1px solid var(--border-light-grey-color)

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
+  .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6.top-0
     .flex
       base-arrow-button.left-arrow.mr-4(@click="previousHandler")
       base-arrow-button.right-arrow.mr-6(@click="nextHandler")
@@ -51,6 +51,8 @@ export default {
   background-color: var(--default-white)
   height: 56px
   border-radius: 4px
+  position: sticky
+  z-index: 10
 
 .left-arrow
   transform: rotate(90deg)

src/pages/calendar/components/CalendarSchedule.vue

@@ -1,5 +1,8 @@
 <template lang="pug">
-  .schedule.ml-2.pb-5.w-full(:style="scheduleWidth")
+  .schedule.ml-2(
+    :style="scheduleWidth"
+    ref="shedule"
+    )
     calendar-header(
       :current-date="currentDate"
       :is-current-date="isCurrentDate"
@@ -8,7 +11,6 @@
       @selected-layout="selectedLayout"
       )
     .schedule-body.flex(
-      :class="bodyVerticalScroll"
       )
       div
         calendar-clock-column(
@@ -21,6 +23,7 @@
         :current-date="currentDate"
         :time-coil="timeCoil"
         :events-data="eventsData"
+        :filtered-owners="filteredOwners"
         :sidebar-width="sidebarWidth"
         :day-start-time="validateStartTime"
         :day-end-time="validateEndTime"
@@ -77,6 +80,8 @@ export default {
       isShownIndicator: true,
       pixelsPerHour: 62,
       columnHeaderHeight: 48,
+      defaultColumnWidth: 470,
+      sheduleHeight: 0,
     };
   },
   computed: {
@@ -96,6 +101,12 @@ export default {
       return this.verifyTime(this.timeInformation.dayEndTime);
     },
     lineIndicatorLocation() {
+      if (this.filteredOwners.length > 3 && this.timeCoil.length - 1 > 13) {
+        return {
+          width: `${this.filteredOwners.length * this.defaultColumnWidth}px`,
+          top: `${this.calculateIndicatorLocation()}px`,
+        };
+      }
       return {
         top: `${this.calculateIndicatorLocation()}px`,
       };
@@ -119,10 +130,36 @@ export default {
         "--sidebar-width": this.sidebarWidth,
       };
     },
-    bodyVerticalScroll() {
+    filteredOwners() {
-      return {
+      let filteredArray = [];
-        "scroll-y": this.scheduleHeight > 855,
+      let ownerAbsence = {
+        id: null,
+        last_name: null,
+        first_name: null,
+        patronymic: null,
       };
+      this.eventsData.forEach(({ employees }) => {
+        let findedElement = employees.find((elem) => elem.role === "owner");
+        let emptyDataPresence = this.findObjectInArray(
+          filteredArray,
+          ownerAbsence
+        );
+        if (!findedElement && !emptyDataPresence) {
+          filteredArray.push(ownerAbsence);
+        }
+        if (findedElement) {
+          let ownerPresence = this.findObjectInArray(
+            filteredArray,
+            findedElement.employee
+          );
+          if (!ownerPresence) {
+            filteredArray.push(findedElement.employee);
+          }
+        }
+      });
+      return filteredArray.sort(
+        (previous, subsequent) => Boolean(subsequent.id) - Boolean(previous.id)
+      );
     },
   },
   methods: {
@@ -195,6 +232,11 @@ export default {
       }
       return result;
     },
+    findObjectInArray(array, object) {
+      return array.find(
+        (item) => JSON.stringify(item) === JSON.stringify(object)
+      );
+    },
   },
   watch: {
     currentTime() {
@@ -235,11 +277,12 @@ export default {
 
 <style lang="sass" scoped>
 .schedule
+  position: relative
   background-color: var(--default-white)
   width: calc(100% - (var(--sidebar-width) + 8px))
-
+  height: calc(100vh - 56px - 8px)
-.scroll-y
+  overflow-y: auto
-  overflow-y: scroll
+  overflow-x: hidden
 
 .time-line-indicator
   width: calc(100% - 80px)
@@ -255,5 +298,4 @@ export default {
 
 .schedule-body
   position: relative
-  height: 855px
 </style>