From 546818ed85454d89b8bc9a49970d4aa39632189d Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 27 Oct 2022 20:06:37 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=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=B8=20=D1=80=D0=B0=D0=B7=D0=BC=D0=B5?=
 =?UTF-8?q?=D1=80=D1=8B=20=D0=BF=D0=BE=D0=B4=20owners=20<=3D3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server.js                                     | 16 +++---
 src/pages/calendar/TheCalendar.vue            |  4 +-
 .../components/CalendarClockColumn.vue        |  3 +-
 .../calendar/components/CalendarSchedule.vue  | 52 +++++++++++--------
 4 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/server.js b/server.js
index 6968b29..a30c3a2 100644
--- a/server.js
+++ b/server.js
@@ -515,8 +515,8 @@ export function clientsServer() {
         results: [
           {
             id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
-            start: "2022-10-25T11:15:49Z",
-            end: "2022-10-25T12:00:53Z",
+            start: "2022-10-27T11:15:49Z",
+            end: "2022-10-27T12:00:53Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -558,8 +558,8 @@ export function clientsServer() {
           },
           {
             id: "6faa6bb6-1de6-422c-a401-1b35cd455303",
-            start: "2022-10-25T13:00:49Z",
-            end: "2022-10-25T13:30:53Z",
+            start: "2022-10-27T13:00:49Z",
+            end: "2022-10-27T13:30:53Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -601,8 +601,8 @@ export function clientsServer() {
           },
           {
             id: "2faa7bb2-2de6-422c-a401-1b35cd455223",
-            start: "2022-10-25T15:00:00Z",
-            end: "2022-10-25T16:10:00Z",
+            start: "2022-10-27T15:00:00Z",
+            end: "2022-10-27T16:10:00Z",
             kind: "call",
             subkind: null,
             description: "",
@@ -687,8 +687,8 @@ export function clientsServer() {
           },
           {
             id: "2faa5ff2-2de6-422c-a401-1b35cd455223",
-            start: "2022-10-26T20:10:00Z",
-            end: "2022-10-26T21:00:00Z",
+            start: "2022-10-27T20:10:00Z",
+            end: "2022-10-27T21:00:00Z",
             kind: "call",
             subkind: null,
             description: "",
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 79dac15..300368a 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -25,8 +25,8 @@ export default {
       calendarLayout: "",
       currentDate: moment(),
       timeInformation: {
-        dayStartTime: "0:00",
-        dayEndTime: "22:00",
+        dayStartTime: "8:00",
+        dayEndTime: "24:00",
       },
       eventsData: [],
       teamData: [],
diff --git a/src/pages/calendar/components/CalendarClockColumn.vue b/src/pages/calendar/components/CalendarClockColumn.vue
index 7e56cfe..f4b93f6 100644
--- a/src/pages/calendar/components/CalendarClockColumn.vue
+++ b/src/pages/calendar/components/CalendarClockColumn.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .calendar-clock-column.flex.flex-col.items-end.gap-y-43.pb-45px.px-3
+  .calendar-clock-column.flex.flex-col.items-end.gap-y-43.pb-5.px-3
     span.text-base(
       v-for="hour in timeCoil"
       :key="hour"
@@ -59,4 +59,5 @@ export default {
   width: 80px
   height: 100%
   color: var(--font-dark-blue-color)
+  background-color: var(--default-white)
 </style>
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index fd87e1c..ef47b5a 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -1,7 +1,6 @@
 <template lang="pug">
   .schedule.ml-2(
     :style="scheduleWidth"
-    ref="shedule"
     )
     calendar-header(
       :current-date="currentDate"
@@ -11,7 +10,7 @@
       @selected-layout="selectedLayout"
       )
     .schedule-body
-      .column-wrapper.flex.ml-20.absolute(:style="columnWrapperWidth")
+      .column-wrapper.flex.ml-20.relative(:style="columnWrapperWidth")
         calendar-column(
           v-for="(owner, index) in filteredOwners"
           :key="owner.id"
@@ -29,7 +28,15 @@
             :is-current-date="isCurrentDate"
             :day-end-time="validateEndTime"
           )
-        .flex
+          .time-circle-indicator.left-74px(
+            v-if="isShownIndicator"
+            :style="circleIndicatorLocation"
+          )  
+        span.time-line-indicator.block.left-20(
+          v-if="isShownIndicator"
+          :style="lineIndicatorLocation"
+        )
+        .flex(:class="calendarBackgroundWidth")
           calendar-background(
             :current-date="currentDate"
             :time-coil="timeCoil"
@@ -39,14 +46,6 @@
             :day-end-time="validateEndTime"
             :owners-count="ownersCount"
             )
-        .time-circle-indicator.left-74px(
-          v-if="isShownIndicator"
-          :style="circleIndicatorLocation"
-          )
-        span.time-line-indicator.block.left-20(
-          v-if="isShownIndicator"
-          :style="lineIndicatorLocation"
-          )  
 </template>
 
 <script>
@@ -113,19 +112,20 @@ export default {
       return this.verifyTime(this.timeInformation.dayEndTime);
     },
     lineIndicatorLocation() {
-      if (this.ownersCount > 3 && this.timeCoil.length - 1 > 13) {
+      if (this.ownersCount > 3) {
         return {
-          width: `${this.ownersCount * this.defaultColumnWidth}px`,
+          width: `${this.defaultColumnWidth * this.ownersCount}px`,
           top: `${this.calculateIndicatorLocation()}px`,
         };
       }
       return {
+        width: "calc(100% - 80px)",
         top: `${this.calculateIndicatorLocation()}px`,
       };
     },
     circleIndicatorLocation() {
       return {
-        top: `${this.calculateIndicatorLocation() - 6}px`,
+        top: `${this.calculateIndicatorLocation() + 6}px`,
       };
     },
     pixelsPerMinute() {
@@ -133,8 +133,7 @@ export default {
     },
     scheduleHeight() {
       return (
-        (this.validateEndTime - this.validateStartTime) * this.pixelsPerHour +
-        this.columnHeaderHeight
+        (this.validateEndTime - this.validateStartTime) * this.pixelsPerHour
       );
     },
     scheduleWidth() {
@@ -182,26 +181,37 @@ export default {
           start.slice(0, 10) === this.currentDate.format("YYYY-MM-DD")
       );
     },
+    columnHeight() {
+      return (
+        (this.timeCoil.length - 1) * this.pixelsPerHour +
+        this.columnHeaderHeight
+      );
+    },
     columnWidth() {
       if (this.ownersCount > 3) {
-        console.log(this.defaultColumnWidth * this.ownersCount);
         return {
+          height: `${this.columnHeight}px`,
           width: `${this.defaultColumnWidth}px`,
         };
       }
       return {
+        height: `${this.columnHeight}px`,
         width: `calc(100% / ${this.ownersCount})`,
       };
     },
     columnWrapperWidth() {
       if (this.ownersCount > 3) {
-        console.log(this.defaultColumnWidth * this.ownersCount);
         return {
           width: `${this.defaultColumnWidth * this.ownersCount}px`,
         };
       }
       return {
-        width: "100%",
+        width: "calc(100% - 80px)",
+      };
+    },
+    calendarBackgroundWidth() {
+      return {
+        "w-full": this.ownersCount <= 3,
       };
     },
   },
@@ -337,9 +347,9 @@ export default {
   height: calc(100vh - 56px - 8px)
 
 .time-line-indicator
-  width: calc(100% - 80px)
   border-top: 1px solid var(--bg-event-red-color)
   position: absolute
+  z-index: 4
 
 .time-circle-indicator
   width: 12px
@@ -347,6 +357,7 @@ export default {
   background-color: var(--bg-event-red-color)
   border-radius: 50%
   position: absolute
+  z-index: 5
 
 .column-wrapper
   height: 48px
@@ -355,7 +366,6 @@ export default {
 .time-coil-wrapper
   position: sticky
   z-index: 5
-  background-color: var(--default-white)
 
 .schedule-body
   width: 100%