From 47b4eddb918e29522cd06ad236d35ab706abda06 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Mon, 24 Oct 2022 18:08:16 +0300
Subject: [PATCH 1/2] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B0?=
 =?UTF-8?q?=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=BA=D1=83=20=D0=B8=20?=
 =?UTF-8?q?=D1=84=D0=B8=D0=BB=D1=8C=D1=82=D1=80=D0=B0=D1=86=D0=B8=D1=8E=20?=
 =?UTF-8?q?=D1=81=D0=BE=D0=B1=D1=8B=D1=82=D0=B8=D0=B9=20=D0=BF=D0=BE=20?=
 =?UTF-8?q?=D0=B4=D0=B0=D1=82=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server.js                                     | 118 ++++++++++--------
 .../components/CalendarBackground.vue         |  20 +++
 .../components/CalendarClockColumn.vue        |   2 +-
 .../calendar/components/CalendarColumn.vue    |  11 +-
 .../calendar/components/CalendarEventCard.vue |  55 ++++++++
 .../calendar/components/CalendarSchedule.vue  |   1 +
 6 files changed, 150 insertions(+), 57 deletions(-)
 create mode 100644 src/pages/calendar/components/CalendarEventCard.vue

diff --git a/server.js b/server.js
index e3ab194..bde4e1a 100644
--- a/server.js
+++ b/server.js
@@ -255,8 +255,8 @@ export function clientsServer() {
         results: [
           {
             id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
-            start: "2022-10-20T20:23:49Z",
-            end: "2022-10-20T21:23:53Z",
+            start: "2022-10-24T20:23:49Z",
+            end: "2022-10-24T21:23:53Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -296,10 +296,53 @@ export function clientsServer() {
               },
             ],
           },
+          {
+            id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
+            start: "2022-10-24T15:23:49Z",
+            end: "2022-10-24T16:23:53Z",
+            kind: "call",
+            subkind: null,
+            description: "",
+            location: null,
+            members: [
+              {
+                id: "f7648f9a-e824-4bb3-a260-2b32dae9bc74",
+                person: {
+                  id: "98dd401c-2b7b-4d9a-9159-720c74d8b23v",
+                  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: "owner",
+              },
+            ],
+          },
           {
             id: "7faa7bb7-2de6-422c-a401-1b35cd455303",
-            start: "2022-10-20T10:00:00Z",
-            end: "2022-10-20T11:10:00Z",
+            start: "2022-10-23T10:00:00Z",
+            end: "2022-10-23T11:10:00Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -315,6 +358,16 @@ export function clientsServer() {
                 },
                 role: null,
               },
+              {
+                id: "a9239f9a-e824-4bb3-a260-2b32dae9bc76",
+                person: {
+                  id: "15ff465c-2b7b-4d9a-9159-720c74d8b56d",
+                  last_name: "Елесеевская",
+                  first_name: "Татьяна",
+                  patronymic: "Ивановна",
+                },
+                role: "primary",
+              },
             ],
             employees: [
               {
@@ -341,20 +394,20 @@ export function clientsServer() {
           },
           {
             id: "2faa7bb2-2de6-422c-a401-1b35cd455223",
-            start: "2022-10-20T10:00:00Z",
-            end: "2022-10-20T11:10:00Z",
+            start: "2022-10-24T10:00:00Z",
+            end: "2022-10-24T11:10:00Z",
             kind: "call",
             subkind: null,
             description: "",
             location: null,
             members: [
               {
-                id: "b0509f9a-e824-4bb3-a260-2b32dae9bc81",
+                id: "a9239f9a-e824-4bb3-a260-2b32dae9bc76",
                 person: {
-                  id: "14ff401c-2b7b-4d9a-9159-720c74d8b23c",
-                  last_name: "Гагарин",
-                  first_name: "Юрий",
-                  patronymic: "Алексеевич",
+                  id: "15ff465c-2b7b-4d9a-9159-720c74d8b56d",
+                  last_name: "Елесеевская",
+                  first_name: "Татьяна",
+                  patronymic: "Ивановна",
                 },
                 role: null,
               },
@@ -382,49 +435,6 @@ export function clientsServer() {
               },
             ],
           },
-          {
-            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/**");
diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue
index 238cef4..cf2d670 100644
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -8,6 +8,7 @@
       :key="owner.id"
       :owner-data="owner"
       :style="calculateColumnPosition(index)"
+      :day-events="filterEventsByOwner(owner)"
       )
     .header(:style="backgroundExtendedWidth")
     .body.flex.flex-col(
@@ -29,6 +30,7 @@ export default {
   props: {
     hoursArray: Array,
     eventsData: Array,
+    currentDate: Object,
   },
   data() {
     return {
@@ -91,6 +93,12 @@ export default {
         (previous, subsequent) => Boolean(subsequent.id) - Boolean(previous.id)
       );
     },
+    filteredEventsByDate() {
+      return this.eventsData.filter(
+        ({ start }) =>
+          start.slice(0, 10) === this.currentDate.format("YYYY-MM-DD")
+      );
+    },
   },
   methods: {
     calculateColumnPosition(elemIndex) {
@@ -116,6 +124,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;
+    },
   },
   mounted() {
     this.calculateBackgroundWidth();
diff --git a/src/pages/calendar/components/CalendarClockColumn.vue b/src/pages/calendar/components/CalendarClockColumn.vue
index e56aa62..db06052 100644
--- a/src/pages/calendar/components/CalendarClockColumn.vue
+++ b/src/pages/calendar/components/CalendarClockColumn.vue
@@ -54,7 +54,7 @@ export default {
 
 <style lang="sass" scoped>
 .current-time
-  color: var(--time-indicator-color)
+  color: var(--bg-event-red-color)
 
 .calendar-clock-column
   width: 80px
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index 7789820..70f5148 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -6,16 +6,23 @@
         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
+    .px-1
+      calendar-event-card(
+        v-for="event in dayEvents"
+        :key="event.id"
+        :ownerEvent="event"
+        )
 </template>
 
 <script>
 import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
+import CalendarEventCard from "./CalendarEventCard.vue";
 export default {
   name: "CalendarColumn",
-  components: { BaseDocOkButton },
+  components: { BaseDocOkButton, CalendarEventCard },
   props: {
     ownerData: Object,
+    dayEvents: Array,
   },
   computed: {
     ownerName() {
diff --git a/src/pages/calendar/components/CalendarEventCard.vue b/src/pages/calendar/components/CalendarEventCard.vue
new file mode 100644
index 0000000..f68a318
--- /dev/null
+++ b/src/pages/calendar/components/CalendarEventCard.vue
@@ -0,0 +1,55 @@
+<template lang="pug">
+  .wrapper.flex.px-2.my-1.cursor-pointer
+    .header.flex.justify-between.items-center
+      .header-text
+        span.inline-block.align-middle.font-bold.text-base.mr-4 {{ eventTime }}
+        span.inline-block.align-middle.font-medium.text-base {{ eventMember }}
+  </template>
+
+<script>
+export default {
+  name: "CalendarEventCard",
+  props: {
+    ownerEvent: Object,
+  },
+  computed: {
+    eventTime() {
+      return `${this.trimTime(this.ownerEvent.start)} - ${this.trimTime(
+        this.ownerEvent.end
+      )}`;
+    },
+    eventMember() {
+      let membersArray = this.ownerEvent.members;
+      if (membersArray.length > 1) {
+        let primaryMember = membersArray.find(
+          (elem) => elem.role === "primary"
+        );
+        return this.composeFullName(primaryMember.person);
+      }
+      return this.composeFullName(membersArray[0].person);
+    },
+  },
+  methods: {
+    trimTime(time) {
+      return time.slice(11, -4);
+    },
+    composeFullName(object) {
+      return `${object.last_name} ${object.first_name} ${object.patronymic}`;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  width: 100%
+  height: 23px
+  border-radius: 4px
+  background-color: var(--bg-event-yellow-color)
+  color: var(--font-black-color)
+  position: relative
+  z-index: 2
+
+.header
+  width: 100%
+</style>
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 36d4fb2..5d5dbab 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -16,6 +16,7 @@
           :day-end-time="validateEndTime"
           )
       calendar-background(
+        :current-date="currentDate"
         :hours-array="hoursArray"
         :events-data="eventsData"
         )

From 3493ff67642078c7d8806ae2aa9b61ea11f23353 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Mon, 24 Oct 2022 18:52:09 +0300
Subject: [PATCH 2/2] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B0?=
 =?UTF-8?q?=20=D1=81=D0=B6=D0=B0=D1=82=D0=B8=D0=B5=20=D0=BA=D0=BE=D0=BB?=
 =?UTF-8?q?=D0=BE=D0=BD=D0=BE=D0=BA=20=D0=BF=D1=80=D0=B8=20=D0=BE=D1=82?=
 =?UTF-8?q?=D0=BA=D1=80=D1=8B=D1=82=D0=BE=D0=BC=20=D1=81=D0=B0=D0=B9=D0=B4?=
 =?UTF-8?q?=D0=B1=D0=B0=D1=80=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server.js                                     | 43 +++++++++++++++++++
 .../components/CalendarBackground.vue         |  5 ++-
 .../calendar/components/CalendarSchedule.vue  |  1 +
 3 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/server.js b/server.js
index bde4e1a..46c392d 100644
--- a/server.js
+++ b/server.js
@@ -435,6 +435,49 @@ export function clientsServer() {
               },
             ],
           },
+          {
+            id: "2faa7bb2-2de6-422c-a401-1b35cd455223",
+            start: "2022-10-24T10:00:00Z",
+            end: "2022-10-24T11:10: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: "f451a0c3-c734-4f73-91c2-d7a5674459e422",
+                employee: {
+                  id: "dv841a15-e867-331f-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,
+              },
+            ],
+          },
         ],
       }));
       this.passthrough("http://45.84.227.122:8080/**");
diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue
index cf2d670..8f8521b 100644
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -31,6 +31,7 @@ export default {
     hoursArray: Array,
     eventsData: Array,
     currentDate: Object,
+    sidebarWidth: String,
   },
   data() {
     return {
@@ -102,8 +103,10 @@ export default {
   },
   methods: {
     calculateColumnPosition(elemIndex) {
+      let deductible = parseInt(this.sidebarWidth.slice(0, -2), 10) - 72;
       if (this.ownersArrayLength < 4) {
-        this.columnWidth = this.backgroundWidth / this.ownersArrayLength;
+        this.columnWidth =
+          (this.backgroundWidth - deductible) / this.ownersArrayLength;
         return {
           width: `${this.columnWidth}px`,
           height: `${this.backgroundHeight}px`,
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 5d5dbab..ccf047e 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -19,6 +19,7 @@
         :current-date="currentDate"
         :hours-array="hoursArray"
         :events-data="eventsData"
+        :sidebar-width="sidebarWidth"
         )
       .time-circle-indicator.left-74px(
         v-if="isShownIndicator"