From fa16cfd5e8401d9408f130f0c339a23af635489b Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Tue, 25 Oct 2022 17:34:03 +0300
Subject: [PATCH 01/10] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20=D0=BF=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B5=D0=BB=D0=B8=20=D1=81=D0=B0=D0=B9=D0=B4=D0=B1=D0=B0?=
 =?UTF-8?q?=D1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/sass/variables.sass                |  1 +
 src/components/base/BaseInput.vue             |  4 +-
 .../base/buttons/BaseCreateButton.vue         | 27 ++++++++++--
 .../calendar/components/CalendarSidebar.vue   | 44 ++++++++++++++++---
 4 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index 3ff0f4a..dee537e 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -28,3 +28,4 @@
   --btn-green-color: rgba(60, 217, 75, 1)
   --btn-light-green-color: rgba(60, 217, 75, 0.2)
   --border-light-grey-color-1: rgba(211, 212, 220, 0.5)
+  --bg-white-color-0: rgba(255, 255, 255, 0.3)
diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index ededb78..0825780 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   .input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5" :style="{ minWidth: widthInput + 'px' }")
-    input.w-full.outline-0.text-base.not-italic(:style="{ backgroundColor: backgroundInput, fontSize: fontSizeInput }" :value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
+    input.w-full.outline-0.text-base.not-italic(:value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
     .slot(v-if="withIcon" :class="iconPosition")
       slot.cursor-pointer
 </template>
@@ -24,8 +24,6 @@ export default {
       default: "Поиск",
     },
     widthInput: Number,
-    backgroundInput: String,
-    fontSizeInput: String,
   },
 };
 </script>
diff --git a/src/components/base/buttons/BaseCreateButton.vue b/src/components/base/buttons/BaseCreateButton.vue
index e68ddd2..5e671ac 100644
--- a/src/components/base/buttons/BaseCreateButton.vue
+++ b/src/components/base/buttons/BaseCreateButton.vue
@@ -1,8 +1,8 @@
 <template lang="pug">
   button.button.flex.w-fit.gap-x-2.text-base.pt-3.pb-2.px-6
-    .flex.text-xs.w-fit.pt-1(v-if="withIcon")
-      span.icon-plus
-    span.text-base.font-semibold {{text}}
+    .flex.text-xs.w-fit.pt-1(v-if="withIcon" :class="iconPosition")
+      span.icon-plus(:style="{fontSize:iconSize + 'px'}")
+    span.text-base.font-semibold(:class="textStyled") {{text}}
 </template>
 
 <script>
@@ -15,6 +15,15 @@ export default {
     withIcon: {
       default: false,
     },
+    iconPosition: {
+      default: "left",
+    },
+    iconSize: {
+      default: 13,
+    },
+    textStyled: {
+      default: "normal",
+    },
   },
 };
 </script>
@@ -30,4 +39,16 @@ export default {
   &:active
     opacity: 1
     background-color: var(--font-dark-blue-color)
+.left
+  order: -1
+.right
+  order: 1
+  padding-top: 1px
+  border-left: 1px solid var(--bg-white-color-0)
+  padding-left: 14px
+  height: 24px
+  align-items: center
+.createEvent
+  font-weight: 500
+  padding-right: 2px
 </style>
diff --git a/src/pages/calendar/components/CalendarSidebar.vue b/src/pages/calendar/components/CalendarSidebar.vue
index 31de909..6a70318 100644
--- a/src/pages/calendar/components/CalendarSidebar.vue
+++ b/src/pages/calendar/components/CalendarSidebar.vue
@@ -4,7 +4,7 @@
       .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
         base-button-plus(:size="40" v-if="!isOpen")
         .create-event.flex.items-center.justify-center(v-else)
-          base-create-button.font-medium.pl-15px.py-10.5px(text="Создать событие" :withIcon="true")
+          base-create-button.pl-15px.pb-2.pr-3.pt-2.items-center.h-10(text-styled="createEvent" :icon-size="10" text="Создать событие" :with-icon="true" icon-position="right")
         .flex.flex-col.items-center(v-if="!isOpen")
           base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
           .flex.flex-col.gap-y-2.items-center.mt-4
@@ -15,8 +15,8 @@
             .flex {{ "Виды событий" }}
             base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
           .flex.flex-col.gap-y-2
-            .relative.flex.items-center.gap-x-3(v-for="event in events")
-              base-input.py-2.pl-6(:placeholder="event.name" :key="event.id" :backgroundInput="red" background-input="transparent" font-size-input="12px")
+            .relative.flex.items-center.gap-x-3.h-8(v-for="event in events")
+              input.custom-input.py-2.pl-6.h-full.not-italic.font-medium.text-xxs(:placeholder="event.name" :key="event.id")
               .event-type(:style="{ background: event.color }")
               span.icon-edit.cursor-pointer
         .flex.flex-col.items-center.gap-y-2.justify-center(v-if="!isOpen")
@@ -28,11 +28,11 @@
             .flex {{ "Команды" }}
             base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
           .box-team.flex.flex-col.gap-y-2
-            .team-card.flex.items-center.justify-between(v-for="teammate in team" :key="teammate.id")
+            .team-card.flex.items-center.justify-between.cursor-pointer(v-for="teammate in team" :key="teammate.id")
               .flex.items-center
                 img.avatar-wrapper(:src="teammate.avatar" alt="Team member")
                 .flex.ml-2.not-italic.font-medium.text-xxs {{ changeLastName(teammate.last_name) + changeInitials(teammate.first_name, teammate.patronymic) }}
-              .span.icon-change-place.cursor-pointer
+              span.icon-change-place.cursor-pointer.w-5
         base-open-button.mt-148px(@click="changeSize" :style="{ transform: `rotate(${turnButton})` }")
 </template>
 
@@ -40,14 +40,12 @@
 import BaseButtonPlus from "../../../components/base/buttons/BaseButtonPlus.vue";
 import BaseOpenButton from "../../../components/base/buttons/BaseOpenButton.vue";
 import BaseCreateButton from "../../../components/base/buttons/BaseCreateButton.vue";
-import BaseInput from "../../../components/base/BaseInput.vue";
 export default {
   name: "CalendarSidebar",
   components: {
     BaseButtonPlus,
     BaseOpenButton,
     BaseCreateButton,
-    BaseInput,
   },
   props: {
     team: Array,
@@ -113,30 +111,37 @@ export default {
 <style lang="sass" scoped>
 .sidebar-wrapper
   border-left: 2px solid var(--btn-blue-color-3)
+
 .button-plus
   max-height: 40px
   background: var(--btn-blue-color)
   color: var(--default-white)
+
 .event
   width: 32px
   height: 32px
   background: var(--bg-event-box-color)
   border-radius: 4px
+
 .event-type
   width: 16px
   height: 16px
   border-radius: 2px
+
 .avatar-wrapper
   width: 32px
   height: 32px
+
 .open-button
   width: 40px
   height: 40px
   max-height: 40px
+
 .button-styled
   max-height: 24px
   background: var(--btn-blue-color-1)
   color: var(--btn-blue-color)
+
 .open-sidebar
   .sidebar-content
     align-items: flex-end
@@ -147,15 +152,40 @@ export default {
     height: 16px
     top: 8px
     left: 8px
+
 .create-event
   width: 200px
   height: 40px
   border-radius: 4px
+
 .events-wrapper
   width: 200px
+
 .input-wrapper
   border: none
   background: var(--bg-event-box-color)
   height: 32px
   width: 169px
+
+.team-card
+  border-radius:16px
+  &:hover
+    background: var(--font-dark-blue-color)
+    color: var(--default-white)
+
+.button
+  width: 200px
+
+.custom-input
+  border-radius: 4px
+  width: 169px
+  outline: none
+  background-color: var(--bg-event-box-color)
+  &::placeholder
+    color: var(--font-dark-blue-color)
+  &:focus
+    background-color: var(--font-dark-blue-color)
+    color: var(--default-white)
+    &::placeholder
+      color: var(--default-white)
 </style>

From ba9f8a36bf2a490afe670dc88ee77f2db520dbaf Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Tue, 25 Oct 2022 15:43:50 +0300
Subject: [PATCH 02/10] =?UTF-8?q?=D0=9D=D0=B0=D0=BB=D0=B0=D0=B4=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D1=81=D0=BA=D1=80=D0=BE=D0=BB=D0=BB=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/calendar/TheCalendar.vue            |  4 ++--
 .../components/CalendarBackground.vue         | 14 ++++++++-----
 .../components/CalendarClockColumn.vue        |  2 ++
 .../calendar/components/CalendarColumn.vue    | 12 ++++++++++-
 .../calendar/components/CalendarEventCard.vue |  2 +-
 .../calendar/components/CalendarSchedule.vue  | 20 +++++++++++++++++--
 6 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 80b3176..993f61d 100644
--- 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: [
diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue
index 8f8521b..030ee5f 100644
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -1,8 +1,10 @@
 <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"
@@ -10,7 +12,6 @@
       :style="calculateColumnPosition(index)"
       :day-events="filterEventsByOwner(owner)"
       )
-    .header(:style="backgroundExtendedWidth")
     .body.flex.flex-col(
       :style="backgroundExtendedWidth"
       )
@@ -58,9 +59,9 @@ export default {
     backgroundHeight() {
       return (this.hoursArray.length - 1) * this.pixelsPerHour + 48;
     },
-    scrollPresence() {
+    horizontalScrollPresence() {
       return {
-        scroll: this.ownersArrayLength > 3,
+        "scroll-x": this.ownersArrayLength > 3 && this.backgroundHeight < 855,
       };
     },
     filteredOwners() {
@@ -147,13 +148,16 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.scroll
+.scroll-x
   overflow-x: scroll
 
 .calendar-background-wrapper
   width: 100%
   position: relative
 
+.header-wrapper
+  position: relative
+
 .header
   height: 48px
 
diff --git a/src/pages/calendar/components/CalendarClockColumn.vue b/src/pages/calendar/components/CalendarClockColumn.vue
index f289571..5e6c424 100644
--- a/src/pages/calendar/components/CalendarClockColumn.vue
+++ b/src/pages/calendar/components/CalendarClockColumn.vue
@@ -59,4 +59,6 @@ export default {
   width: 80px
   height: 100%
   color: var(--font-dark-blue-color)
+  position: sticky
+  left: 0
 </style>
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index 70f5148..e5c566a 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -6,7 +6,7 @@
         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"
@@ -45,6 +45,16 @@ export default {
 
 .header
   height: 48px
+  position: sticky
+  top: 0px
+  z-index: 3
+  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
diff --git a/src/pages/calendar/components/CalendarEventCard.vue b/src/pages/calendar/components/CalendarEventCard.vue
index f68a318..46984e1 100644
--- a/src/pages/calendar/components/CalendarEventCard.vue
+++ b/src/pages/calendar/components/CalendarEventCard.vue
@@ -48,7 +48,7 @@ export default {
   background-color: var(--bg-event-yellow-color)
   color: var(--font-black-color)
   position: relative
-  z-index: 2
+  z-index: 3
 
 .header
   width: 100%
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index ccf047e..685c3be 100644
--- 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,7 +7,9 @@
       @next-date="nextDate"
       @selected-layout="selectedLayout"
       )
-    .schedule-body.flex
+    .schedule-body.flex(
+      :class="bodyVerticalScroll"
+      )
       div
         calendar-clock-column(
           :hours-array="hoursArray"
@@ -115,6 +117,11 @@ export default {
         "--sidebar-width": this.sidebarWidth,
       };
     },
+    bodyVerticalScroll() {
+      return {
+        "scroll-y": this.scheduleHeight > 855,
+      };
+    },
   },
   methods: {
     previousDate() {
@@ -186,6 +193,11 @@ export default {
       }
       return result;
     },
+    bodyScheduleHeight() {
+      if (this.scheduleHeight > 855) {
+        return this.scheduleHeight;
+      }
+    },
   },
   watch: {
     currentTime() {
@@ -229,6 +241,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 +258,5 @@ export default {
 
 .schedule-body
   position: relative
+  height: 855px
 </style>

From 86b0cb66bcf761bd65a33a85be2fa6c5c14fd437 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Tue, 25 Oct 2022 16:49:48 +0300
Subject: [PATCH 03/10] =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D0=BD=D0=B5=D0=B9=D0=BC=D0=B8=D0=BD=D0=B3=20?=
 =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=BC=D0=B5=D0=BD=D0=BD=D1=8B=D1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CalendarBackground.vue         | 10 +++----
 .../components/CalendarClockColumn.vue        |  4 +--
 .../calendar/components/CalendarSchedule.vue  | 28 +++++++++----------
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue
index 030ee5f..648f7ba 100644
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -17,7 +17,7 @@
       )
       .line-wrapper
         .line.flex.items-center(
-          v-for="hour in hoursArray"
+          v-for="hour in timeCoil"
           :key="hour"
           )
           .middle-line
@@ -29,7 +29,7 @@ export default {
   name: "CalendarBackground",
   components: { CalendarColumn },
   props: {
-    hoursArray: Array,
+    timeCoil: Array,
     eventsData: Array,
     currentDate: Object,
     sidebarWidth: String,
@@ -57,7 +57,7 @@ export default {
       };
     },
     backgroundHeight() {
-      return (this.hoursArray.length - 1) * this.pixelsPerHour + 48;
+      return (this.timeCoil.length - 1) * this.pixelsPerHour + 48;
     },
     horizontalScrollPresence() {
       return {
@@ -74,11 +74,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) {
diff --git a/src/pages/calendar/components/CalendarClockColumn.vue b/src/pages/calendar/components/CalendarClockColumn.vue
index 5e6c424..8abc504 100644
--- 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,
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 685c3be..304e2bd 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -12,14 +12,14 @@
       )
       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"
         )
@@ -69,7 +69,7 @@ export default {
   data() {
     return {
       currentTime: "",
-      hoursArray: [],
+      timeCoil: [],
       timer: null,
       isCurrentDate: true,
       isShownIndicator: true,
@@ -140,7 +140,7 @@ export default {
       ) {
         this.timer = setInterval(() => {
           this.changeCurrentTime();
-          this.changeHoursArray();
+          this.changeTimeCoil();
         }, 5000);
       }
     },
@@ -151,20 +151,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;
         }
@@ -207,7 +207,7 @@ export default {
         this.timer
       ) {
         this.stopTimer();
-        this.hoursArrayInitialization();
+        this.timeCoilInitialization();
       }
     },
     currentDate: function () {
@@ -216,18 +216,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() {

From a7486666415c7054e03495384ee66e3780cadd9f Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Tue, 25 Oct 2022 19:19:19 +0300
Subject: [PATCH 04/10] =?UTF-8?q?WIP=20=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D0=BF=D0=BE=D0=B7=D0=B8=D1=86=D0=B8=D0=BE=D0=BD?=
 =?UTF-8?q?=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=BA=D0=B0?=
 =?UTF-8?q?=D1=80=D1=82=D0=BE=D1=87=D0=B5=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server.js                                     | 90 ++++---------------
 .../components/CalendarBackground.vue         |  5 ++
 .../calendar/components/CalendarColumn.vue    | 37 +++++++-
 .../calendar/components/CalendarEventCard.vue |  2 +-
 .../calendar/components/CalendarSchedule.vue  |  7 +-
 5 files changed, 63 insertions(+), 78 deletions(-)

diff --git a/server.js b/server.js
index 54901f7..aa803bc 100644
--- 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",
               },
             ],
           },
diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue
index 648f7ba..8417ee5 100644
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -11,6 +11,8 @@
       :owner-data="owner"
       :style="calculateColumnPosition(index)"
       :day-events="filterEventsByOwner(owner)"
+      :day-start-time="dayStartTime"
+      :day-end-time="dayEndTime"
       )
     .body.flex.flex-col(
       :style="backgroundExtendedWidth"
@@ -33,6 +35,8 @@ export default {
     eventsData: Array,
     currentDate: Object,
     sidebarWidth: String,
+    dayStartTime: Number,
+    dayEndTime: Number,
   },
   data() {
     return {
@@ -150,6 +154,7 @@ export default {
 <style lang="sass" scoped>
 .scroll-x
   overflow-x: scroll
+  overflow-y: hidden
 
 .calendar-background-wrapper
   width: 100%
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index e5c566a..02c256c 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -11,6 +11,7 @@
         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>
@@ -47,7 +82,7 @@ export default {
   height: 48px
   position: sticky
   top: 0px
-  z-index: 3
+  z-index: 5
   width: inherit
   border-right: 1px solid var(--border-light-grey-color)
   background-color: var(--default-white)
diff --git a/src/pages/calendar/components/CalendarEventCard.vue b/src/pages/calendar/components/CalendarEventCard.vue
index 46984e1..b698740 100644
--- a/src/pages/calendar/components/CalendarEventCard.vue
+++ b/src/pages/calendar/components/CalendarEventCard.vue
@@ -47,7 +47,7 @@ export default {
   border-radius: 4px
   background-color: var(--bg-event-yellow-color)
   color: var(--font-black-color)
-  position: relative
+  position: absolute
   z-index: 3
 
 .header
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 304e2bd..99848d9 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -22,6 +22,8 @@
         :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"
@@ -193,11 +195,6 @@ export default {
       }
       return result;
     },
-    bodyScheduleHeight() {
-      if (this.scheduleHeight > 855) {
-        return this.scheduleHeight;
-      }
-    },
   },
   watch: {
     currentTime() {

From ac8b6a04c27ae0bde92055a12cf894d714722ba0 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Wed, 26 Oct 2022 11:32:18 +0300
Subject: [PATCH 05/10] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D1=81=D0=BF=D0=B8=D1=81=D0=BE=D0=BA=20=D1=81=D0=BE?=
 =?UTF-8?q?=D1=82=D1=80=D1=83=D0=B4=D0=BD=D0=B8=D0=BA=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/calendar/TheCalendar.vue            | 40 ++++--------------
 .../calendar/components/CalendarSidebar.vue   | 42 ++++++++++++-------
 2 files changed, 36 insertions(+), 46 deletions(-)

diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 80b3176..40ff09a 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   .calendar-container.flex
-    calendar-sidebar(@width="changeWidth" :team="team")
+    calendar-sidebar(@width="changeWidth" :team-data="teamData")
     calendar-schedule(
       :current-date="currentDate"
       :time-information="timeInformation"
@@ -16,7 +16,6 @@
 import * as moment from "moment/moment";
 import CalendarSchedule from "./components/CalendarSchedule.vue";
 import CalendarSidebar from "./components/CalendarSidebar.vue";
-import img from "../../assets/images/team-member.svg";
 export default {
   name: "TheCalendar",
   components: { CalendarSchedule, CalendarSidebar },
@@ -30,36 +29,7 @@ export default {
         dayEndTime: "18:00",
       },
       eventsData: [],
-      team: [
-        {
-          id: 1,
-          last_name: "Гагарин",
-          first_name: "Юрий",
-          patronymic: "Алексеевич",
-          avatar: img,
-        },
-        {
-          id: 2,
-          last_name: "Константинопольская",
-          first_name: "Юлия",
-          patronymic: "Витальевна",
-          avatar: img,
-        },
-        {
-          id: 3,
-          last_name: "Коломойцев",
-          first_name: "Игорь",
-          patronymic: "Константинович",
-          avatar: img,
-        },
-        {
-          id: 4,
-          last_name: "Зайцев",
-          first_name: "Валерий",
-          patronymic: "Сергеевич",
-          avatar: img,
-        },
-      ],
+      teamData: [],
     };
   },
   methods: {
@@ -75,10 +45,16 @@ export default {
     saveEventsData(res) {
       this.eventsData = res.results;
     },
+    saveTeamData(res) {
+      this.teamData = res.results;
+    },
     fetchEventsData() {
       fetch("/registry/event/")
         .then((res) => res.json())
         .then((res) => this.saveEventsData(res));
+      fetch("http://45.84.227.122:8080/general/employee/")
+        .then((res) => res.json())
+        .then((res) => this.saveTeamData(res));
     },
     changeWidth(value) {
       this.sidebarWidth = value;
diff --git a/src/pages/calendar/components/CalendarSidebar.vue b/src/pages/calendar/components/CalendarSidebar.vue
index 6a70318..8b53443 100644
--- a/src/pages/calendar/components/CalendarSidebar.vue
+++ b/src/pages/calendar/components/CalendarSidebar.vue
@@ -4,7 +4,12 @@
       .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
         base-button-plus(:size="40" v-if="!isOpen")
         .create-event.flex.items-center.justify-center(v-else)
-          base-create-button.pl-15px.pb-2.pr-3.pt-2.items-center.h-10(text-styled="createEvent" :icon-size="10" text="Создать событие" :with-icon="true" icon-position="right")
+          base-create-button.pl-15px.pb-2.pr-3.pt-2.items-center.h-10(
+            text-styled="createEvent"
+            :icon-size="10"
+            text="Создать событие"
+            :with-icon="true"
+            icon-position="right")
         .flex.flex-col.items-center(v-if="!isOpen")
           base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
           .flex.flex-col.gap-y-2.items-center.mt-4
@@ -16,22 +21,26 @@
             base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
           .flex.flex-col.gap-y-2
             .relative.flex.items-center.gap-x-3.h-8(v-for="event in events")
-              input.custom-input.py-2.pl-6.h-full.not-italic.font-medium.text-xxs(:placeholder="event.name" :key="event.id")
+              input.custom-input.py-2.pl-6.h-full.not-italic.font-medium.text-xxs(
+                :placeholder="event.name"
+                :key="event.id")
               .event-type(:style="{ background: event.color }")
               span.icon-edit.cursor-pointer
         .flex.flex-col.items-center.gap-y-2.justify-center(v-if="!isOpen")
           base-button-plus.mb-2(:class="buttonStyled" :size="24" :icon-size="10")
-          .team-card(v-for="teammate in team" :key="teammate.id")
-            img.avatar-wrapper(:src="teammate.avatar" alt="Team member")
+          .team-card(v-for="teammate in teamData" :key="teammate.id")
+            img.avatar-wrapper(:src="avatar" alt="Team member")
         .flex.flex-col.gap-y-4(v-else)
           .events-wrapper.flex.items-center.justify-between
             .flex {{ "Команды" }}
             base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
           .box-team.flex.flex-col.gap-y-2
-            .team-card.flex.items-center.justify-between.cursor-pointer(v-for="teammate in team" :key="teammate.id")
+            .team-card.flex.items-center.justify-between.cursor-pointer(
+              v-for="teammate in teamData"
+              :key="teammate.id")
               .flex.items-center
-                img.avatar-wrapper(:src="teammate.avatar" alt="Team member")
-                .flex.ml-2.not-italic.font-medium.text-xxs {{ changeLastName(teammate.last_name) + changeInitials(teammate.first_name, teammate.patronymic) }}
+                img.avatar-wrapper(:src="avatar" alt="Team member")
+                .flex.ml-2.not-italic.font-medium.text-xxs {{ changeName(teammate.last_name, teammate.first_name, teammate.patronymic) }}
               span.icon-change-place.cursor-pointer.w-5
         base-open-button.mt-148px(@click="changeSize" :style="{ transform: `rotate(${turnButton})` }")
 </template>
@@ -40,6 +49,8 @@
 import BaseButtonPlus from "../../../components/base/buttons/BaseButtonPlus.vue";
 import BaseOpenButton from "../../../components/base/buttons/BaseOpenButton.vue";
 import BaseCreateButton from "../../../components/base/buttons/BaseCreateButton.vue";
+import img from "../../../assets/images/team-member.svg";
+
 export default {
   name: "CalendarSidebar",
   components: {
@@ -48,7 +59,7 @@ export default {
     BaseCreateButton,
   },
   props: {
-    team: Array,
+    teamData: Array,
   },
   data() {
     return {
@@ -63,6 +74,7 @@ export default {
       isOpen: false,
       turnButton: "180deg",
       maxLengthLastName: 13,
+      avatar: img,
     };
   },
   computed: {
@@ -96,13 +108,15 @@ export default {
       );
       this.turnButton = this.isOpen ? "0deg" : "180deg";
     },
-    changeLastName(lastName) {
+    changeName(lastName, fitstName, patronymic) {
       return lastName.length > this.maxLengthLastName
-        ? lastName.substr(0, this.maxLengthLastName) + "... "
-        : lastName + " ";
-    },
-    changeInitials(firstName, patronymic) {
-      return firstName.substr(0, 1) + "." + patronymic.substr(0, 1) + ".";
+        ? lastName.slice(0, this.maxLengthLastName) + "... "
+        : lastName +
+            " " +
+            fitstName.slice(0, 1) +
+            "." +
+            patronymic.slice(0, 1) +
+            ".";
     },
   },
 };

From 8649690256b919cbf7328bd2505988d898619550 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Wed, 26 Oct 2022 11:38:50 +0300
Subject: [PATCH 06/10] =?UTF-8?q?Revert=20"=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D1=81=D0=BF=D0=B8=D1=81=D0=BE=D0=BA=20=D1=81?=
 =?UTF-8?q?=D0=BE=D1=82=D1=80=D1=83=D0=B4=D0=BD=D0=B8=D0=BA=D0=BE=D0=B2"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit ac8b6a04c27ae0bde92055a12cf894d714722ba0.
---
 src/pages/calendar/TheCalendar.vue            | 40 ++++++++++++++----
 .../calendar/components/CalendarSidebar.vue   | 42 +++++++------------
 2 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 40ff09a..80b3176 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   .calendar-container.flex
-    calendar-sidebar(@width="changeWidth" :team-data="teamData")
+    calendar-sidebar(@width="changeWidth" :team="team")
     calendar-schedule(
       :current-date="currentDate"
       :time-information="timeInformation"
@@ -16,6 +16,7 @@
 import * as moment from "moment/moment";
 import CalendarSchedule from "./components/CalendarSchedule.vue";
 import CalendarSidebar from "./components/CalendarSidebar.vue";
+import img from "../../assets/images/team-member.svg";
 export default {
   name: "TheCalendar",
   components: { CalendarSchedule, CalendarSidebar },
@@ -29,7 +30,36 @@ export default {
         dayEndTime: "18:00",
       },
       eventsData: [],
-      teamData: [],
+      team: [
+        {
+          id: 1,
+          last_name: "Гагарин",
+          first_name: "Юрий",
+          patronymic: "Алексеевич",
+          avatar: img,
+        },
+        {
+          id: 2,
+          last_name: "Константинопольская",
+          first_name: "Юлия",
+          patronymic: "Витальевна",
+          avatar: img,
+        },
+        {
+          id: 3,
+          last_name: "Коломойцев",
+          first_name: "Игорь",
+          patronymic: "Константинович",
+          avatar: img,
+        },
+        {
+          id: 4,
+          last_name: "Зайцев",
+          first_name: "Валерий",
+          patronymic: "Сергеевич",
+          avatar: img,
+        },
+      ],
     };
   },
   methods: {
@@ -45,16 +75,10 @@ export default {
     saveEventsData(res) {
       this.eventsData = res.results;
     },
-    saveTeamData(res) {
-      this.teamData = res.results;
-    },
     fetchEventsData() {
       fetch("/registry/event/")
         .then((res) => res.json())
         .then((res) => this.saveEventsData(res));
-      fetch("http://45.84.227.122:8080/general/employee/")
-        .then((res) => res.json())
-        .then((res) => this.saveTeamData(res));
     },
     changeWidth(value) {
       this.sidebarWidth = value;
diff --git a/src/pages/calendar/components/CalendarSidebar.vue b/src/pages/calendar/components/CalendarSidebar.vue
index 8b53443..6a70318 100644
--- a/src/pages/calendar/components/CalendarSidebar.vue
+++ b/src/pages/calendar/components/CalendarSidebar.vue
@@ -4,12 +4,7 @@
       .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
         base-button-plus(:size="40" v-if="!isOpen")
         .create-event.flex.items-center.justify-center(v-else)
-          base-create-button.pl-15px.pb-2.pr-3.pt-2.items-center.h-10(
-            text-styled="createEvent"
-            :icon-size="10"
-            text="Создать событие"
-            :with-icon="true"
-            icon-position="right")
+          base-create-button.pl-15px.pb-2.pr-3.pt-2.items-center.h-10(text-styled="createEvent" :icon-size="10" text="Создать событие" :with-icon="true" icon-position="right")
         .flex.flex-col.items-center(v-if="!isOpen")
           base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
           .flex.flex-col.gap-y-2.items-center.mt-4
@@ -21,26 +16,22 @@
             base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
           .flex.flex-col.gap-y-2
             .relative.flex.items-center.gap-x-3.h-8(v-for="event in events")
-              input.custom-input.py-2.pl-6.h-full.not-italic.font-medium.text-xxs(
-                :placeholder="event.name"
-                :key="event.id")
+              input.custom-input.py-2.pl-6.h-full.not-italic.font-medium.text-xxs(:placeholder="event.name" :key="event.id")
               .event-type(:style="{ background: event.color }")
               span.icon-edit.cursor-pointer
         .flex.flex-col.items-center.gap-y-2.justify-center(v-if="!isOpen")
           base-button-plus.mb-2(:class="buttonStyled" :size="24" :icon-size="10")
-          .team-card(v-for="teammate in teamData" :key="teammate.id")
-            img.avatar-wrapper(:src="avatar" alt="Team member")
+          .team-card(v-for="teammate in team" :key="teammate.id")
+            img.avatar-wrapper(:src="teammate.avatar" alt="Team member")
         .flex.flex-col.gap-y-4(v-else)
           .events-wrapper.flex.items-center.justify-between
             .flex {{ "Команды" }}
             base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
           .box-team.flex.flex-col.gap-y-2
-            .team-card.flex.items-center.justify-between.cursor-pointer(
-              v-for="teammate in teamData"
-              :key="teammate.id")
+            .team-card.flex.items-center.justify-between.cursor-pointer(v-for="teammate in team" :key="teammate.id")
               .flex.items-center
-                img.avatar-wrapper(:src="avatar" alt="Team member")
-                .flex.ml-2.not-italic.font-medium.text-xxs {{ changeName(teammate.last_name, teammate.first_name, teammate.patronymic) }}
+                img.avatar-wrapper(:src="teammate.avatar" alt="Team member")
+                .flex.ml-2.not-italic.font-medium.text-xxs {{ changeLastName(teammate.last_name) + changeInitials(teammate.first_name, teammate.patronymic) }}
               span.icon-change-place.cursor-pointer.w-5
         base-open-button.mt-148px(@click="changeSize" :style="{ transform: `rotate(${turnButton})` }")
 </template>
@@ -49,8 +40,6 @@
 import BaseButtonPlus from "../../../components/base/buttons/BaseButtonPlus.vue";
 import BaseOpenButton from "../../../components/base/buttons/BaseOpenButton.vue";
 import BaseCreateButton from "../../../components/base/buttons/BaseCreateButton.vue";
-import img from "../../../assets/images/team-member.svg";
-
 export default {
   name: "CalendarSidebar",
   components: {
@@ -59,7 +48,7 @@ export default {
     BaseCreateButton,
   },
   props: {
-    teamData: Array,
+    team: Array,
   },
   data() {
     return {
@@ -74,7 +63,6 @@ export default {
       isOpen: false,
       turnButton: "180deg",
       maxLengthLastName: 13,
-      avatar: img,
     };
   },
   computed: {
@@ -108,15 +96,13 @@ export default {
       );
       this.turnButton = this.isOpen ? "0deg" : "180deg";
     },
-    changeName(lastName, fitstName, patronymic) {
+    changeLastName(lastName) {
       return lastName.length > this.maxLengthLastName
-        ? lastName.slice(0, this.maxLengthLastName) + "... "
-        : lastName +
-            " " +
-            fitstName.slice(0, 1) +
-            "." +
-            patronymic.slice(0, 1) +
-            ".";
+        ? lastName.substr(0, this.maxLengthLastName) + "... "
+        : lastName + " ";
+    },
+    changeInitials(firstName, patronymic) {
+      return firstName.substr(0, 1) + "." + patronymic.substr(0, 1) + ".";
     },
   },
 };

From 8f55985cb4b17991cfb54bc43df5660baa918201 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Wed, 26 Oct 2022 11:44:19 +0300
Subject: [PATCH 07/10] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D1=81=D0=BF=D0=B8=D1=81=D0=BE=D0=BA=20=D1=81=D0=BE?=
 =?UTF-8?q?=D1=82=D1=80=D1=83=D0=B4=D0=BD=D0=B8=D0=BA=D0=BE=D0=B2=20=D0=B2?=
 =?UTF-8?q?=20=D1=81=D0=B0=D0=B9=D0=B4=D0=B1=D0=B0=D1=80=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/calendar/TheCalendar.vue            | 40 ++++--------------
 .../calendar/components/CalendarSidebar.vue   | 42 ++++++++++++-------
 2 files changed, 36 insertions(+), 46 deletions(-)

diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 993f61d..ca8c7ee 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   .calendar-container.flex
-    calendar-sidebar(@width="changeWidth" :team="team")
+    calendar-sidebar(@width="changeWidth" :team-data="teamData")
     calendar-schedule(
       :current-date="currentDate"
       :time-information="timeInformation"
@@ -16,7 +16,6 @@
 import * as moment from "moment/moment";
 import CalendarSchedule from "./components/CalendarSchedule.vue";
 import CalendarSidebar from "./components/CalendarSidebar.vue";
-import img from "../../assets/images/team-member.svg";
 export default {
   name: "TheCalendar",
   components: { CalendarSchedule, CalendarSidebar },
@@ -30,36 +29,7 @@ export default {
         dayEndTime: "20:00",
       },
       eventsData: [],
-      team: [
-        {
-          id: 1,
-          last_name: "Гагарин",
-          first_name: "Юрий",
-          patronymic: "Алексеевич",
-          avatar: img,
-        },
-        {
-          id: 2,
-          last_name: "Константинопольская",
-          first_name: "Юлия",
-          patronymic: "Витальевна",
-          avatar: img,
-        },
-        {
-          id: 3,
-          last_name: "Коломойцев",
-          first_name: "Игорь",
-          patronymic: "Константинович",
-          avatar: img,
-        },
-        {
-          id: 4,
-          last_name: "Зайцев",
-          first_name: "Валерий",
-          patronymic: "Сергеевич",
-          avatar: img,
-        },
-      ],
+      teamData: [],
     };
   },
   methods: {
@@ -75,10 +45,16 @@ export default {
     saveEventsData(res) {
       this.eventsData = res.results;
     },
+    saveTeamData(res) {
+      this.teamData = res.results;
+    },
     fetchEventsData() {
       fetch("/registry/event/")
         .then((res) => res.json())
         .then((res) => this.saveEventsData(res));
+      fetch("http://45.84.227.122:8080/general/employee/")
+        .then((res) => res.json())
+        .then((res) => this.saveTeamData(res));
     },
     changeWidth(value) {
       this.sidebarWidth = value;
diff --git a/src/pages/calendar/components/CalendarSidebar.vue b/src/pages/calendar/components/CalendarSidebar.vue
index 6a70318..8b53443 100644
--- a/src/pages/calendar/components/CalendarSidebar.vue
+++ b/src/pages/calendar/components/CalendarSidebar.vue
@@ -4,7 +4,12 @@
       .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
         base-button-plus(:size="40" v-if="!isOpen")
         .create-event.flex.items-center.justify-center(v-else)
-          base-create-button.pl-15px.pb-2.pr-3.pt-2.items-center.h-10(text-styled="createEvent" :icon-size="10" text="Создать событие" :with-icon="true" icon-position="right")
+          base-create-button.pl-15px.pb-2.pr-3.pt-2.items-center.h-10(
+            text-styled="createEvent"
+            :icon-size="10"
+            text="Создать событие"
+            :with-icon="true"
+            icon-position="right")
         .flex.flex-col.items-center(v-if="!isOpen")
           base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
           .flex.flex-col.gap-y-2.items-center.mt-4
@@ -16,22 +21,26 @@
             base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
           .flex.flex-col.gap-y-2
             .relative.flex.items-center.gap-x-3.h-8(v-for="event in events")
-              input.custom-input.py-2.pl-6.h-full.not-italic.font-medium.text-xxs(:placeholder="event.name" :key="event.id")
+              input.custom-input.py-2.pl-6.h-full.not-italic.font-medium.text-xxs(
+                :placeholder="event.name"
+                :key="event.id")
               .event-type(:style="{ background: event.color }")
               span.icon-edit.cursor-pointer
         .flex.flex-col.items-center.gap-y-2.justify-center(v-if="!isOpen")
           base-button-plus.mb-2(:class="buttonStyled" :size="24" :icon-size="10")
-          .team-card(v-for="teammate in team" :key="teammate.id")
-            img.avatar-wrapper(:src="teammate.avatar" alt="Team member")
+          .team-card(v-for="teammate in teamData" :key="teammate.id")
+            img.avatar-wrapper(:src="avatar" alt="Team member")
         .flex.flex-col.gap-y-4(v-else)
           .events-wrapper.flex.items-center.justify-between
             .flex {{ "Команды" }}
             base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
           .box-team.flex.flex-col.gap-y-2
-            .team-card.flex.items-center.justify-between.cursor-pointer(v-for="teammate in team" :key="teammate.id")
+            .team-card.flex.items-center.justify-between.cursor-pointer(
+              v-for="teammate in teamData"
+              :key="teammate.id")
               .flex.items-center
-                img.avatar-wrapper(:src="teammate.avatar" alt="Team member")
-                .flex.ml-2.not-italic.font-medium.text-xxs {{ changeLastName(teammate.last_name) + changeInitials(teammate.first_name, teammate.patronymic) }}
+                img.avatar-wrapper(:src="avatar" alt="Team member")
+                .flex.ml-2.not-italic.font-medium.text-xxs {{ changeName(teammate.last_name, teammate.first_name, teammate.patronymic) }}
               span.icon-change-place.cursor-pointer.w-5
         base-open-button.mt-148px(@click="changeSize" :style="{ transform: `rotate(${turnButton})` }")
 </template>
@@ -40,6 +49,8 @@
 import BaseButtonPlus from "../../../components/base/buttons/BaseButtonPlus.vue";
 import BaseOpenButton from "../../../components/base/buttons/BaseOpenButton.vue";
 import BaseCreateButton from "../../../components/base/buttons/BaseCreateButton.vue";
+import img from "../../../assets/images/team-member.svg";
+
 export default {
   name: "CalendarSidebar",
   components: {
@@ -48,7 +59,7 @@ export default {
     BaseCreateButton,
   },
   props: {
-    team: Array,
+    teamData: Array,
   },
   data() {
     return {
@@ -63,6 +74,7 @@ export default {
       isOpen: false,
       turnButton: "180deg",
       maxLengthLastName: 13,
+      avatar: img,
     };
   },
   computed: {
@@ -96,13 +108,15 @@ export default {
       );
       this.turnButton = this.isOpen ? "0deg" : "180deg";
     },
-    changeLastName(lastName) {
+    changeName(lastName, fitstName, patronymic) {
       return lastName.length > this.maxLengthLastName
-        ? lastName.substr(0, this.maxLengthLastName) + "... "
-        : lastName + " ";
-    },
-    changeInitials(firstName, patronymic) {
-      return firstName.substr(0, 1) + "." + patronymic.substr(0, 1) + ".";
+        ? lastName.slice(0, this.maxLengthLastName) + "... "
+        : lastName +
+            " " +
+            fitstName.slice(0, 1) +
+            "." +
+            patronymic.slice(0, 1) +
+            ".";
     },
   },
 };

From 7ac16298e0068109bbb69cbc359f22d1427ba25e Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Wed, 26 Oct 2022 15:19:59 +0300
Subject: [PATCH 08/10] =?UTF-8?q?=D0=A4=D0=B8=D0=BA=D1=81=20=D0=BA=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=BF=D0=BA=D0=B8=20=D1=81=D0=B0=D0=B9=D0=B4=D0=B1=D0=B0?=
 =?UTF-8?q?=D1=80=D0=B0,=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20=D0=B2?=
 =?UTF-8?q?=20=D1=85=D0=B5=D0=B4=D0=B5=D1=80=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HeaderActiveClientPanel.vue    |  8 ++--
 src/components/TheHeader.vue                  |  2 +-
 .../calendar/components/CalendarSidebar.vue   | 37 +++++++++++--------
 tailwind.config.js                            |  1 +
 4 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/components/HeaderActiveClientPanel.vue b/src/components/HeaderActiveClientPanel.vue
index cab3cdb..bb780ee 100644
--- a/src/components/HeaderActiveClientPanel.vue
+++ b/src/components/HeaderActiveClientPanel.vue
@@ -4,15 +4,15 @@
       img.img-wrapper.mr-2(:src="info.avatarSrc" alt="Charge person avatar")
       span.font-bold.text-sm.mr-6px {{ info.name }}
       .dot.mr-4
-      .icon-wrapper.icon-down-arrow.flex.items-center.justify-center.text-xxs(@click="changeState")
+      .icon-wrapper.icon-down-arrow.flex.items-center.justify-center.text-xxs.cursor-pointer(@click="changeState")
     .options.flex.flex-col.p-4.mt-1.font-medium.text-sm.gap-y-3(v-if="isOpen")
-      .flex.items-center
+      .flex.items-center.cursor-pointer
         .options-icon-wrapper.icon-star-off.flex.items-center.justify-center.text-base.mr-2
         span Снять с ведения
-      .flex.items-center
+      .flex.items-center.cursor-pointer
         .options-icon-wrapper.icon-table.flex.items-center.justify-center.text-lg.mr-2.pb-px
         span Перейти в таблицу
-      .flex.items-center
+      .flex.items-center.cursor-pointer
         .options-icon-wrapper.flex.items-center.justify-center.icon-user-data.text-base.mr-2
         span Данные 
 </template>
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 52349a4..2a9223f 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -48,7 +48,7 @@ export default {
   height: 56px
   background-color: var(--default-white)
   position: relative
-  z-index: 2
+  z-index: 11
 
 .logo-img
   height: 32px
diff --git a/src/pages/calendar/components/CalendarSidebar.vue b/src/pages/calendar/components/CalendarSidebar.vue
index 8b53443..6eafc82 100644
--- a/src/pages/calendar/components/CalendarSidebar.vue
+++ b/src/pages/calendar/components/CalendarSidebar.vue
@@ -1,21 +1,26 @@
 <template lang="pug">
   .sidebar.flex.flex-col.bg-white(:class="openSidebar")
-    .sidebar-wrapper.h-full.my-13px(:style="sidebarWidth")
-      .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
-        base-button-plus(:size="40" v-if="!isOpen")
-        .create-event.flex.items-center.justify-center(v-else)
+    .sidebar-wrapper.h-full.my-13px.flex.flex-col.justify-between(:style="sidebarWidth")
+      .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px(v-if="!isOpen")
+        base-button-plus(:size="40")
+        .flex.flex-col.items-center(v-if="!isOpen")
+          base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
+          .flex.flex-col.gap-y-2.items-center.mt-4
+            .event.flex.items-center.justify-center(v-for="event in events" :key="event.id")
+              .event-type(:style="{ background: event.color }")
+        .flex.flex-col.items-center.gap-y-2.justify-center
+          base-button-plus.mb-2(:class="buttonStyled" :size="24" :icon-size="10")
+          .team-card(v-for="teammate in teamData" :key="teammate.id")
+            img.avatar-wrapper(:src="avatar" alt="Team member")
+      .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px(v-else)
+        .create-event.flex.items-center.justify-center
           base-create-button.pl-15px.pb-2.pr-3.pt-2.items-center.h-10(
             text-styled="createEvent"
             :icon-size="10"
             text="Создать событие"
             :with-icon="true"
             icon-position="right")
-        .flex.flex-col.items-center(v-if="!isOpen")
-          base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
-          .flex.flex-col.gap-y-2.items-center.mt-4
-            .event.flex.items-center.justify-center(v-for="event in events" :key="event.id")
-              .event-type(:style="{ background: event.color }")
-        .flex.items-center.flex-col.gap-y-4(v-else)
+        .flex.items-center.flex-col.gap-y-4
           .events-wrapper.flex.items-center.justify-between
             .flex {{ "Виды событий" }}
             base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
@@ -26,11 +31,7 @@
                 :key="event.id")
               .event-type(:style="{ background: event.color }")
               span.icon-edit.cursor-pointer
-        .flex.flex-col.items-center.gap-y-2.justify-center(v-if="!isOpen")
-          base-button-plus.mb-2(:class="buttonStyled" :size="24" :icon-size="10")
-          .team-card(v-for="teammate in teamData" :key="teammate.id")
-            img.avatar-wrapper(:src="avatar" alt="Team member")
-        .flex.flex-col.gap-y-4(v-else)
+        .flex.flex-col.gap-y-4
           .events-wrapper.flex.items-center.justify-between
             .flex {{ "Команды" }}
             base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
@@ -42,7 +43,8 @@
                 img.avatar-wrapper(:src="avatar" alt="Team member")
                 .flex.ml-2.not-italic.font-medium.text-xxs {{ changeName(teammate.last_name, teammate.first_name, teammate.patronymic) }}
               span.icon-change-place.cursor-pointer.w-5
-        base-open-button.mt-148px(@click="changeSize" :style="{ transform: `rotate(${turnButton})` }")
+      .button-wrapper.flex.justify-center.mb-23px
+        base-open-button(@click="changeSize" :style="{ transform: `rotate(${turnButton})`}")
 </template>
 
 <script>
@@ -166,6 +168,9 @@ export default {
     height: 16px
     top: 8px
     left: 8px
+  .button-wrapper
+    justify-content: end
+    padding-right: 16px
 
 .create-event
   width: 200px
diff --git a/tailwind.config.js b/tailwind.config.js
index b100f17..f245408 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -31,6 +31,7 @@ module.exports = {
         "13px": "13px",
         "15px": "15px",
         "19px": "19px",
+        "23px": "23px",
         "45px": "45px",
         "74px": "74px",
         "148px": "148px",

From 07df5098b7f58f91ccf086c6fa6bd5845455e87a Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 26 Oct 2022 12:53:47 +0300
Subject: [PATCH 09/10] =?UTF-8?q?=D0=9F=D0=BE=D0=B4=D1=81=D1=82=D1=80?=
 =?UTF-8?q?=D0=BE=D0=B8=D0=BB=D0=B0=20=D0=B8=D0=BD=D0=B4=D0=B8=D0=BA=D0=B0?=
 =?UTF-8?q?=D1=82=D0=BE=D1=80=20=D0=BF=D0=BE=D0=B4=20=D1=81=D0=BA=D1=80?=
 =?UTF-8?q?=D0=BE=D0=BB=D0=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server.js                                     | 44 ++++++++++++++-
 .../components/CalendarBackground.vue         | 37 +-----------
 .../calendar/components/CalendarColumn.vue    |  2 +-
 .../calendar/components/CalendarSchedule.vue  | 56 ++++++++++++++++++-
 4 files changed, 100 insertions(+), 39 deletions(-)

diff --git a/server.js b/server.js
index aa803bc..6968b29 100644
--- 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/**");
diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue
index 8417ee5..b6155f4 100644
--- 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,
@@ -68,37 +69,6 @@ export default {
         "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 }) =>
@@ -127,11 +97,6 @@ export default {
     calculateBackgroundWidth() {
       this.backgroundWidth = this.$refs.backgroundWrapper.offsetWidth;
     },
-    findObjectInArray(array, object) {
-      return array.find(
-        (item) => JSON.stringify(item) === JSON.stringify(object)
-      );
-    },
     filterEventsByOwner(owner) {
       let filteredArray = [];
       this.filteredEventsByDate.forEach((item) => {
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index 02c256c..9cfcfe1 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -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",
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 99848d9..bc9cdb5 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -9,6 +9,7 @@
       )
     .schedule-body.flex(
       :class="bodyVerticalScroll"
+      :style="setBodySize"
       )
       div
         calendar-clock-column(
@@ -21,6 +22,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 +79,7 @@ export default {
       isShownIndicator: true,
       pixelsPerHour: 62,
       columnHeaderHeight: 48,
+      defaultColumnWidth: 470,
     };
   },
   computed: {
@@ -96,6 +99,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`,
       };
@@ -124,6 +133,47 @@ export default {
         "scroll-y": this.scheduleHeight > 855,
       };
     },
+    setBodySize() {
+      if (this.validateEndTime - this.validateStartTime > 13) {
+        return {
+          height: "855px",
+        };
+      }
+      return {
+        width: "auto",
+      };
+    },
+    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: {
     previousDate() {
@@ -195,6 +245,11 @@ export default {
       }
       return result;
     },
+    findObjectInArray(array, object) {
+      return array.find(
+        (item) => JSON.stringify(item) === JSON.stringify(object)
+      );
+    },
   },
   watch: {
     currentTime() {
@@ -255,5 +310,4 @@ export default {
 
 .schedule-body
   position: relative
-  height: 855px
 </style>

From 7b8db909fc45e1bf69e847d311d0d8deadd16771 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 26 Oct 2022 16:01:39 +0300
Subject: [PATCH 10/10] =?UTF-8?q?=D0=94=D0=BE=D0=B4=D0=B5=D0=BB=D0=B0?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D1=81=D0=BA=D1=80=D0=BE=D0=BB=D0=BB=D1=8B,=20?=
 =?UTF-8?q?=D0=B7=D0=B0=D1=84=D0=B8=D0=BA=D1=81=D0=B8=D1=80=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=B0=D0=BB=D0=B0=20=D1=85=D0=B5=D0=B4=D0=B5=D1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CalendarBackground.vue         | 15 +++++-----
 .../calendar/components/CalendarColumn.vue    |  7 +++--
 .../calendar/components/CalendarHeader.vue    |  4 ++-
 .../calendar/components/CalendarSchedule.vue  | 30 ++++++-------------
 4 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue
index b6155f4..9b036ce 100644
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -64,17 +64,17 @@ export default {
     backgroundHeight() {
       return (this.timeCoil.length - 1) * this.pixelsPerHour + 48;
     },
-    horizontalScrollPresence() {
-      return {
-        "scroll-x": this.ownersArrayLength > 3 && this.backgroundHeight < 855,
-      };
-    },
     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) {
@@ -95,7 +95,7 @@ export default {
       };
     },
     calculateBackgroundWidth() {
-      this.backgroundWidth = this.$refs.backgroundWrapper.offsetWidth;
+      this.backgroundWidth = this.$refs.backgroundWrapper.scrollWidth;
     },
     filterEventsByOwner(owner) {
       let filteredArray = [];
@@ -118,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%
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index 9cfcfe1..732f9f8 100644
--- 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 }}
@@ -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)
diff --git a/src/pages/calendar/components/CalendarHeader.vue b/src/pages/calendar/components/CalendarHeader.vue
index 0c7a328..cf49d22 100644
--- 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)
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index bc9cdb5..fd23b45 100644
--- 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,8 +11,6 @@
       @selected-layout="selectedLayout"
       )
     .schedule-body.flex(
-      :class="bodyVerticalScroll"
-      :style="setBodySize"
       )
       div
         calendar-clock-column(
@@ -80,6 +81,7 @@ export default {
       pixelsPerHour: 62,
       columnHeaderHeight: 48,
       defaultColumnWidth: 470,
+      sheduleHeight: 0,
     };
   },
   computed: {
@@ -128,21 +130,6 @@ export default {
         "--sidebar-width": this.sidebarWidth,
       };
     },
-    bodyVerticalScroll() {
-      return {
-        "scroll-y": this.scheduleHeight > 855,
-      };
-    },
-    setBodySize() {
-      if (this.validateEndTime - this.validateStartTime > 13) {
-        return {
-          height: "855px",
-        };
-      }
-      return {
-        width: "auto",
-      };
-    },
     filteredOwners() {
       let filteredArray = [];
       let ownerAbsence = {
@@ -290,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)