Merge pull request #68 from dderbentsov/UC-24

WIP Доделала скроллы, зафиксировала хедер
2022-10-26 16:03:32 +03:00
parent 2a511e8b95 7b8db909fc
commit 5b3d4759a9
5 changed files with 111 additions and 58 deletions
--- a/server.js
+++ b/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/**");
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/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;
-    },
-    findObjectInArray(array, object) {
-      return array.find(
-        (item) => JSON.stringify(item) === JSON.stringify(object)
-      );
+      this.backgroundWidth = this.$refs.backgroundWrapper.scrollWidth;
    },
    filterEventsByOwner(owner) {
      let filteredArray = [];
@@ -153,8 +118,7 @@ export default {

 <style lang="sass" scoped>
 .scroll-x
-  overflow-x: scroll
-  overflow-y: hidden
+  overflow-x: auto

 .calendar-background-wrapper
  width: 100%
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/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)
--- 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
+  .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)
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/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() {
-      return {
-        "scroll-y": this.scheduleHeight > 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)
+      );
    },
  },
  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))
-
-.scroll-y
-  overflow-y: scroll
+  height: calc(100vh - 56px - 8px)
+  overflow-y: auto
+  overflow-x: hidden

 .time-line-indicator
  width: calc(100% - 80px)
@@ -255,5 +298,4 @@ export default {

 .schedule-body
  position: relative
-  height: 855px
 </style>