Merge pull request #64 from dderbentsov/UC-24

WIP Сделала позиционирование карточек
2022-10-25 19:23:40 +03:00
parent 3de26ec474 a748666641
commit 6233604d5c
7 changed files with 121 additions and 104 deletions
--- a/server.js
+++ b/server.js
@@ -515,8 +515,8 @@ export function clientsServer() {
        results: [
          {
            id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
-            start: "2022-10-24T20:23:49Z",
-            end: "2022-10-24T21:23:53Z",
+            start: "2022-10-25T11:15:49Z",
+            end: "2022-10-25T12:00:53Z",
            kind: "call",
            subkind: null,
            description: "",
@@ -542,7 +542,7 @@ export function clientsServer() {
                  first_name: "Ольга",
                  patronymic: "Александровна",
                },
-                role: null,
+                role: "owner",
              },
              {
                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
@@ -552,14 +552,14 @@ export function clientsServer() {
                  first_name: "Егор",
                  patronymic: "Сергеевич",
                },
-                role: "owner",
+                role: null,
              },
            ],
          },
          {
            id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
-            start: "2022-10-24T15:23:49Z",
-            end: "2022-10-24T16:23:53Z",
+            start: "2022-10-25T13:00:49Z",
+            end: "2022-10-25T13:30:53Z",
            kind: "call",
            subkind: null,
            description: "",
@@ -599,63 +599,10 @@ export function clientsServer() {
              },
            ],
          },
-          {
-            id: "7faa7bb7-2de6-422c-a401-1b35cd455303",
-            start: "2022-10-23T10:00:00Z",
-            end: "2022-10-23T11:10:00Z",
-            kind: "call",
-            subkind: null,
-            description: "",
-            location: null,
-            members: [
-              {
-                id: "b0509f9a-e824-4bb3-a260-2b32dae9bc81",
-                person: {
-                  id: "14ff401c-2b7b-4d9a-9159-720c74d8b23c",
-                  last_name: "Гагарин",
-                  first_name: "Юрий",
-                  patronymic: "Алексеевич",
-                },
-                role: null,
-              },
-              {
-                id: "a9239f9a-e824-4bb3-a260-2b32dae9bc76",
-                person: {
-                  id: "15ff465c-2b7b-4d9a-9159-720c74d8b56d",
-                  last_name: "Елесеевская",
-                  first_name: "Татьяна",
-                  patronymic: "Ивановна",
-                },
-                role: "primary",
-              },
-            ],
-            employees: [
-              {
-                id: "f941a0c6-c734-4f79-92c2-d7a5674459e422",
-                employee: {
-                  id: "db831a15-e876-481f-a658-6325de7c311e",
-                  last_name: "Константинопольская",
-                  first_name: "Юлия",
-                  patronymic: "Викторовна",
-                },
-                role: null,
-              },
-              {
-                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
-                employee: {
-                  id: "db541a67-e836-481f-a653-6325de7c567e",
-                  last_name: "Захарова",
-                  first_name: "Ольга",
-                  patronymic: "Александровна",
-                },
-                role: "owner",
-              },
-            ],
-          },
          {
            id: "2faa7bb2-2de6-422c-a401-1b35cd455223",
-            start: "2022-10-24T10:00:00Z",
-            end: "2022-10-24T11:10:00Z",
+            start: "2022-10-25T15:00:00Z",
+            end: "2022-10-25T16:10:00Z",
            kind: "call",
            subkind: null,
            description: "",
@@ -695,10 +642,11 @@ export function clientsServer() {
              },
            ],
          },
+
          {
-            id: "2faa7bb2-2de6-422c-a401-1b35cd455223",
-            start: "2022-10-24T10:00:00Z",
-            end: "2022-10-24T11:10:00Z",
+            id: "2faa5ff2-2de6-422c-a401-1b35cd455223",
+            start: "2022-10-25T17:10:00Z",
+            end: "2022-10-25T18:00:00Z",
            kind: "call",
            subkind: null,
            description: "",
@@ -717,14 +665,14 @@ export function clientsServer() {
            ],
            employees: [
              {
-                id: "f451a0c3-c734-4f73-91c2-d7a5674459e422",
+                id: "f941a0c6-c734-4f79-92c2-d7a5674459e422",
                employee: {
-                  id: "dv841a15-e867-331f-a658-6325de7c311e",
-                  last_name: "Коломойцев",
-                  first_name: "Илья",
-                  patronymic: "Петрович",
+                  id: "db831a15-e876-481f-a658-6325de7c311e",
+                  last_name: "Константинопольская",
+                  first_name: "Юлия",
+                  patronymic: "Викторовна",
                },
-                role: "owner",
+                role: null,
              },
              {
                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
@@ -734,7 +682,7 @@ export function clientsServer() {
                  first_name: "Ольга",
                  patronymic: "Александровна",
                },
-                role: null,
+                role: "owner",
              },
            ],
          },
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -26,8 +26,8 @@ export default {
      calendarLayout: "",
      currentDate: moment(),
      timeInformation: {
-        dayStartTime: "8:00",
-        dayEndTime: "18:00",
+        dayStartTime: "0:00",
+        dayEndTime: "20:00",
      },
      eventsData: [],
      team: [
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -1,22 +1,25 @@
 <template lang="pug">
  .calendar-background-wrapper.flex.flex-col(
    ref="backgroundWrapper"
-    :class="scrollPresence"
+    :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"
      )
-    .header(:style="backgroundExtendedWidth")
    .body.flex.flex-col(
      :style="backgroundExtendedWidth"
      )
      .line-wrapper
        .line.flex.items-center(
-          v-for="hour in hoursArray"
+          v-for="hour in timeCoil"
          :key="hour"
          )
          .middle-line
@@ -28,10 +31,12 @@ export default {
  name: "CalendarBackground",
  components: { CalendarColumn },
  props: {
-    hoursArray: Array,
+    timeCoil: Array,
    eventsData: Array,
    currentDate: Object,
    sidebarWidth: String,
+    dayStartTime: Number,
+    dayEndTime: Number,
  },
  data() {
    return {
@@ -56,11 +61,11 @@ export default {
      };
    },
    backgroundHeight() {
-      return (this.hoursArray.length - 1) * this.pixelsPerHour + 48;
+      return (this.timeCoil.length - 1) * this.pixelsPerHour + 48;
    },
-    scrollPresence() {
+    horizontalScrollPresence() {
      return {
-        scroll: this.ownersArrayLength > 3,
+        "scroll-x": this.ownersArrayLength > 3 && this.backgroundHeight < 855,
      };
    },
    filteredOwners() {
@@ -73,11 +78,11 @@ export default {
      };
      this.eventsData.forEach(({ employees }) => {
        let findedElement = employees.find((elem) => elem.role === "owner");
-        let emptyObjectPresence = this.findObjectInArray(
+        let emptyDataPresence = this.findObjectInArray(
          filteredArray,
          ownerAbsence
        );
-        if (!findedElement && !emptyObjectPresence) {
+        if (!findedElement && !emptyDataPresence) {
          filteredArray.push(ownerAbsence);
        }
        if (findedElement) {
@@ -147,13 +152,17 @@ export default {
 </script>

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

 .calendar-background-wrapper
  width: 100%
  position: relative

+.header-wrapper
+  position: relative
+
 .header
  height: 48px

--- a/src/pages/calendar/components/CalendarClockColumn.vue
+++ b/src/pages/calendar/components/CalendarClockColumn.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
  .calendar-clock-column.flex.flex-col.items-end.gap-y-43.pt-9.pb-45px.px-3
    span.text-base(
-      v-for="hour in hoursArray"
+      v-for="hour in timeCoil"
      :key="hour"
      :class="currentHourStyle(hour)"
      ) {{ hour }}
@@ -11,7 +11,7 @@
 export default {
  name: "CalendarClockColumn",
  props: {
-    hoursArray: Array,
+    timeCoil: Array,
    currentTime: String,
    currentDate: Object,
    dayEndTime: Number,
@@ -59,4 +59,6 @@ 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
@@ -6,11 +6,12 @@
        span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
        img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
      base-doc-ok-button
-    .px-1
+    .body
      calendar-event-card(
        v-for="event in dayEvents"
        :key="event.id"
        :ownerEvent="event"
+        :style="eventCardPosition(event.start, event.end)"
        )
 </template>

@@ -23,6 +24,13 @@ export default {
  props: {
    ownerData: Object,
    dayEvents: Array,
+    dayEndTime: Number,
+    dayStartTime: Number,
+  },
+  data() {
+    return {
+      pixelsPerHour: 62,
+    };
  },
  computed: {
    ownerName() {
@@ -34,6 +42,33 @@ export default {
      }
      return null;
    },
+    pixelsPerMinute() {
+      return this.pixelsPerHour / 60;
+    },
+  },
+  methods: {
+    eventCardPosition(startTime, endTime) {
+      let start = startTime
+        .slice(11, -4)
+        .split(":")
+        .map((elem) => parseInt(elem, 10));
+      let end = endTime.slice(11, -6);
+      let position =
+        (start[0] - this.dayStartTime) * this.pixelsPerHour +
+        start[1] * this.pixelsPerMinute;
+      if (
+        parseInt(start[0], 10) < this.dayStartTime ||
+        parseInt(end, 10) > this.dayEndTime
+      ) {
+        return {
+          top: "0px",
+          visibility: "hidden",
+        };
+      }
+      return {
+        top: `${position}px`,
+      };
+    },
  },
 };
 </script>
@@ -45,6 +80,16 @@ export default {

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

 .avatar-wrapper
  width: 32px
--- a/src/pages/calendar/components/CalendarEventCard.vue
+++ b/src/pages/calendar/components/CalendarEventCard.vue
@@ -47,8 +47,8 @@ export default {
  border-radius: 4px
  background-color: var(--bg-event-yellow-color)
  color: var(--font-black-color)
-  position: relative
-  z-index: 2
+  position: absolute
+  z-index: 3

 .header
  width: 100%
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .schedule.ml-2.w-full(:style="scheduleWidth")
+  .schedule.ml-2.pb-5.w-full(:style="scheduleWidth")
    calendar-header(
      :current-date="currentDate"
      :is-current-date="isCurrentDate"
@@ -7,19 +7,23 @@
      @next-date="nextDate"
      @selected-layout="selectedLayout"
      )
-    .schedule-body.flex
+    .schedule-body.flex(
+      :class="bodyVerticalScroll"
+      )
      div
        calendar-clock-column(
-          :hours-array="hoursArray"
+          :timeCoil="timeCoil"
          :current-time="currentTime"
          :is-current-date="isCurrentDate"
          :day-end-time="validateEndTime"
          )
      calendar-background(
        :current-date="currentDate"
-        :hours-array="hoursArray"
+        :time-coil="timeCoil"
        :events-data="eventsData"
        :sidebar-width="sidebarWidth"
+        :day-start-time="validateStartTime"
+        :day-end-time="validateEndTime"
        )
      .time-circle-indicator.left-74px(
        v-if="isShownIndicator"
@@ -67,7 +71,7 @@ export default {
  data() {
    return {
      currentTime: "",
-      hoursArray: [],
+      timeCoil: [],
      timer: null,
      isCurrentDate: true,
      isShownIndicator: true,
@@ -115,6 +119,11 @@ export default {
        "--sidebar-width": this.sidebarWidth,
      };
    },
+    bodyVerticalScroll() {
+      return {
+        "scroll-y": this.scheduleHeight > 855,
+      };
+    },
  },
  methods: {
    previousDate() {
@@ -133,7 +142,7 @@ export default {
      ) {
        this.timer = setInterval(() => {
          this.changeCurrentTime();
-          this.changeHoursArray();
+          this.changeTimeCoil();
        }, 5000);
      }
    },
@@ -144,20 +153,20 @@ export default {
    changeCurrentTime() {
      this.currentTime = moment().format("HH:mm:ss");
    },
-    hoursArrayInitialization() {
-      this.hoursArray = [];
+    timeCoilInitialization() {
+      this.timeCoil = [];
      for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
        if (
          i === this.hours &&
          this.hours !== this.validateEndTime &&
          this.isCurrentDate
        ) {
-          this.hoursArray.push(this.hoursMinutes);
-        } else this.hoursArray.push(`${i}:00`);
+          this.timeCoil.push(this.hoursMinutes);
+        } else this.timeCoil.push(`${i}:00`);
      }
    },
-    changeHoursArray() {
-      this.hoursArray = this.hoursArray.map((elem) => {
+    changeTimeCoil() {
+      this.timeCoil = this.timeCoil.map((elem) => {
        if (this.convertTime(elem, 0, -3) === this.hours) {
          return this.hoursMinutes;
        }
@@ -195,7 +204,7 @@ export default {
        this.timer
      ) {
        this.stopTimer();
-        this.hoursArrayInitialization();
+        this.timeCoilInitialization();
      }
    },
    currentDate: function () {
@@ -204,18 +213,18 @@ export default {
      this.isShownIndicator = this.isCurrentDate;
      if (this.timer) {
        this.stopTimer();
-        this.hoursArrayInitialization();
+        this.timeCoilInitialization();
      }
      if (this.isCurrentDate) {
        this.changeCurrentTime();
-        this.hoursArrayInitialization();
+        this.timeCoilInitialization();
        this.startTimer();
      }
    },
  },
  mounted() {
    this.changeCurrentTime();
-    this.hoursArrayInitialization();
+    this.timeCoilInitialization();
    this.startTimer();
  },
  beforeUnmount() {
@@ -229,6 +238,9 @@ export default {
  background-color: var(--default-white)
  width: calc(100% - (var(--sidebar-width) + 8px))

+.scroll-y
+  overflow-y: scroll
+
 .time-line-indicator
  width: calc(100% - 80px)
  border-top: 1px solid var(--bg-event-red-color)
@@ -243,4 +255,5 @@ export default {

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