Merge pull request #51 from dderbentsov/UC-20

Распределила из events владельцев событий

server.js

@@ -132,7 +132,7 @@ export function clientsServer() {
         dataClients,
       }));
       this.get("/registry/event/", () => ({
-        count: 1,
+        count: 4,
         next: null,
         previous: null,
         results: [
@@ -157,6 +157,16 @@ export function clientsServer() {
               },
             ],
             employees: [
+              {
+                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
+                employee: {
+                  id: "db541a67-e836-481f-a653-6325de7c567e",
+                  last_name: "Захарова",
+                  first_name: "Ольга",
+                  patronymic: "Александровна",
+                },
+                role: null,
+              },
               {
                 id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
                 employee: {
@@ -169,6 +179,135 @@ export function clientsServer() {
               },
             ],
           },
+          {
+            id: "7faa7bb7-2de6-422c-a401-1b35cd455303",
+            start: "2022-10-20T10:00:00Z",
+            end: "2022-10-20T11: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,
+              },
+            ],
+            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-20T10:00:00Z",
+            end: "2022-10-20T11: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,
+              },
+            ],
+            employees: [
+              {
+                id: "f941a0c6-c734-4f79-92c2-d7a5674459e422",
+                employee: {
+                  id: "db831a15-e876-481f-a658-6325de7c311e",
+                  last_name: "Константинопольская",
+                  first_name: "Юлия",
+                  patronymic: "Викторовна",
+                },
+                role: "owner",
+              },
+              {
+                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
+                employee: {
+                  id: "db541a67-e836-481f-a653-6325de7c567e",
+                  last_name: "Захарова",
+                  first_name: "Ольга",
+                  patronymic: "Александровна",
+                },
+                role: null,
+              },
+            ],
+          },
+          {
+            id: "6faa6bb2-1de4-425c-a401-1b35cd455303",
+            start: "2022-10-20T20:23:49Z",
+            end: "2022-10-20T21:23:53Z",
+            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,
+              },
+            ],
+            employees: [
+              {
+                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
+                employee: {
+                  id: "db541a67-e836-481f-a653-6325de7c567e",
+                  last_name: "Захарова",
+                  first_name: "Ольга",
+                  patronymic: "Александровна",
+                },
+                role: null,
+              },
+              {
+                id: "f941a0c6-c750-4f79-92c0-d7a19354e422",
+                employee: {
+                  id: "db831a14-e836-481f-a653-6325de7c311e",
+                  last_name: "Жмыхов",
+                  first_name: "Егор",
+                  patronymic: "Сергеевич",
+                },
+                role: null,
+              },
+            ],
+          },
         ],
       }));
       this.passthrough("http://45.84.227.122:8080/**");

src/pages/calendar/TheCalendar.vue

@@ -4,7 +4,7 @@
     calendar-schedule(
       :current-date="currentDate"
       :time-information="timeInformation"
-      :column-information="columnInformation"
+      :events-data="eventsData"
       @previous-date="switchPreviousDate"
       @next-date="switchNextDate"
       @selected-layout="changeCalendarLayout"
@@ -27,14 +27,6 @@ export default {
         dayEndTime: "18:00",
       },
       eventsData: [],
-      columnInformation: {
-        owners: [
-          "Захарова А.О.",
-          "Константинопольская Ю.В.",
-          "Коломойцев И.К.",
-          "Зайцев В.С.",
-        ],
-      },
     };
   },
   methods: {
@@ -64,5 +56,5 @@ export default {
 
 <style lang="sass" scoped>
 .calendar-container
-  width: calc(100% - 80px)
+  width: calc(100vw - 80px)
 </style>

src/pages/calendar/components/CalendarBackground.vue

@@ -1,11 +1,12 @@
 <template lang="pug">
   .calendar-background-wrapper.flex.flex-col(
     ref="backgroundWrapper"
+    :class="scrollPresence"
     )
     calendar-column(
-      v-for="(owner, index) in columnInformation.owners"
+      v-for="(owner, index) in filteredOwners"
-      :key="owner"
+      :key="owner.id"
-      :column-information="owner"
+      :owner-data="owner"
       :style="calculateColumnPosition(index)"
       )
     .header(:style="backgroundExtendedWidth")
@@ -27,7 +28,7 @@ export default {
   components: { CalendarColumn },
   props: {
     hoursArray: Array,
-    columnInformation: Object,
+    eventsData: Array,
   },
   data() {
     return {
@@ -39,7 +40,7 @@ export default {
   },
   computed: {
     ownersArrayLength() {
-      return this.columnInformation.owners.length;
+      return this.filteredOwners.length;
     },
     backgroundExtendedWidth() {
       if (this.ownersArrayLength > 3) {
@@ -54,6 +55,42 @@ export default {
     backgroundHeight() {
       return (this.hoursArray.length - 1) * this.pixelsPerHour + 48;
     },
+    scrollPresence() {
+      return {
+        scroll: this.ownersArrayLength > 3,
+      };
+    },
+    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 emptyObjectPresence = this.findObjectInArray(
+          filteredArray,
+          ownerAbsence
+        );
+        if (!findedElement && !emptyObjectPresence) {
+          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: {
     calculateColumnPosition(elemIndex) {
@@ -74,6 +111,11 @@ export default {
     calculateBackgroundWidth() {
       this.backgroundWidth = this.$refs.backgroundWrapper.offsetWidth;
     },
+    findObjectInArray(array, object) {
+      return array.find(
+        (item) => JSON.stringify(item) === JSON.stringify(object)
+      );
+    },
   },
   mounted() {
     this.calculateBackgroundWidth();
@@ -82,10 +124,12 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.scroll
+  overflow-x: scroll
+
 .calendar-background-wrapper
   width: 100%
   position: relative
-  overflow-x: scroll
 
 .header
   height: 48px

src/pages/calendar/components/CalendarColumn.vue

@@ -3,7 +3,7 @@
     .header.flex.items-center.justify-between.py-2.px-6
       .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 {{ columnInformation }}
+        span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       base-doc-ok-button
     div
@@ -15,7 +15,18 @@ export default {
   name: "CalendarColumn",
   components: { BaseDocOkButton },
   props: {
-    columnInformation: String,
+    ownerData: Object,
+  },
+  computed: {
+    ownerName() {
+      if (this.ownerData.id) {
+        return `${this.ownerData.last_name} ${this.ownerData.first_name.slice(
+          0,
+          1
+        )}.${this.ownerData.patronymic.slice(0, 1)}.`;
+      }
+      return null;
+    },
   },
 };
 </script>

src/pages/calendar/components/CalendarSchedule.vue

@@ -17,7 +17,7 @@
           )
       calendar-background(
         :hours-array="hoursArray"
-        :column-information="columnInformation"
+        :events-data="eventsData"
         )
       .time-circle-indicator.left-74px(
         v-if="isShownIndicator"
@@ -54,10 +54,10 @@ export default {
         return {};
       },
     },
-    columnInformation: {
+    eventsData: {
-      type: Object,
+      type: Array,
       default() {
-        return {};
+        return [];
       },
     },
   },
@@ -219,7 +219,7 @@ export default {
 <style lang="sass" scoped>
 .schedule
   background-color: var(--default-white)
-  width: calc(100% - 8px)
+  width: calc(100% - 80px)
 
 .time-line-indicator
   width: calc(100% - 80px)