Merge branch 'master' into UC-21

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,8 @@ export default {
   props: {
     hoursArray: Array,
     eventsData: Array,
+    currentDate: Object,
+    sidebarWidth: String,
   },
   data() {
     return {
@@ -91,11 +94,19 @@ 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) {
+      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`,
@@ -116,6 +127,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();

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() {

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>

src/pages/calendar/components/CalendarSchedule.vue

@@ -16,8 +16,10 @@
           :day-end-time="validateEndTime"
           )
       calendar-background(
+        :current-date="currentDate"
         :hours-array="hoursArray"
         :events-data="eventsData"
+        :sidebar-width="sidebarWidth"
         )
       .time-circle-indicator.left-74px(
         v-if="isShownIndicator"