From 4c2cce443bfd9661ae4df8af835025db5da8036c Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 28 Oct 2022 12:32:59 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D0=B8=D0=BB=D0=B0=20?=
 =?UTF-8?q?=D0=BB=D0=B8=D1=88=D0=BD=D0=B8=D0=B5=20=D0=BF=D1=80=D0=BE=D0=BF?=
 =?UTF-8?q?=D1=81=D1=8B=20=D0=B8=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/calendar/TheCalendar.vue            |  2 +-
 .../components/CalendarBackground.vue         | 57 +------------------
 .../calendar/components/CalendarColumn.vue    |  2 -
 .../calendar/components/CalendarSchedule.vue  | 14 ++---
 4 files changed, 8 insertions(+), 67 deletions(-)

diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 300368a..a4b66f5 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -26,7 +26,7 @@ export default {
       currentDate: moment(),
       timeInformation: {
         dayStartTime: "8:00",
-        dayEndTime: "24:00",
+        dayEndTime: "13:00",
       },
       eventsData: [],
       teamData: [],
diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue
index e201b61..b23d672 100644
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -1,9 +1,8 @@
 <template lang="pug">
-  .calendar-background-wrapper.flex.flex-col(
-    ref="backgroundWrapper"
+  .flex.flex-col(
     :style="backgroundExtendedWidth"
     )
-    .body.flex.flex-col
+    .flex.flex-col
       .line-wrapper
         .line.flex.items-center(
           v-for="hour in timeCoil"
@@ -17,26 +16,16 @@ export default {
   name: "CalendarBackground",
   props: {
     timeCoil: Array,
-    filteredOwners: Array,
-    eventsData: Array,
-    currentDate: Object,
-    sidebarWidth: String,
-    dayStartTime: Number,
-    dayEndTime: Number,
     ownersCount: Number,
   },
   data() {
     return {
-      backgroundWidth: 0,
       columnWidth: 0,
       defaultColumnWidth: 470,
       pixelsPerHour: 62,
     };
   },
   computed: {
-    ownersArrayLength() {
-      return this.filteredOwners.length;
-    },
     backgroundExtendedWidth() {
       if (this.ownersCount > 3) {
         return {
@@ -47,56 +36,14 @@ export default {
         width: "100%",
       };
     },
-    backgroundHeight() {
-      return (this.timeCoil.length - 1) * this.pixelsPerHour + 48;
-    },
-    horizontalScrollPresence() {
-      return {
-        "scroll-x": this.ownersArrayLength > 3,
-      };
-    },
-  },
-  methods: {
-    calculateColumnPosition(elemIndex) {
-      let deductible = parseInt(this.sidebarWidth.slice(0, -2), 10) - 72;
-      if (this.ownersArrayLength < 4) {
-        this.columnWidth =
-          (this.backgroundWidth - deductible) / this.ownersArrayLength;
-        return {
-          width: `${this.columnWidth}px`,
-          height: `${this.backgroundHeight}px`,
-          left: `${elemIndex * this.columnWidth}px`,
-        };
-      }
-      return {
-        width: `${this.defaultColumnWidth}px`,
-        height: `${this.backgroundHeight}px`,
-        left: `${elemIndex * this.defaultColumnWidth}px`,
-      };
-    },
-    calculateBackgroundWidth() {
-      this.backgroundWidth = this.$refs.backgroundWrapper.scrollWidth;
-    },
-  },
-  mounted() {
-    this.calculateBackgroundWidth();
   },
 };
 </script>
 
 <style lang="sass" scoped>
-.calendar-background-wrapper
-  position: relative
-
-.header-wrapper
-  position: relative
-
 .header
   height: 48px
 
-.body
-  position: relative
-
 .line
   border-bottom: 1px solid var(--border-light-grey-color)
   height: 62px
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index 95dc628..40973ee 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -76,8 +76,6 @@ export default {
 <style lang="sass" scoped>
 .calendar-column-wrapper
   border-right: 1px solid var(--border-light-grey-color)
-  &:nth-last-child(2) .header
-    border-right: none
   &:last-child
     border-right: none
 
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index ef47b5a..5ef74b3 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -10,7 +10,7 @@
       @selected-layout="selectedLayout"
       )
     .schedule-body
-      .column-wrapper.flex.ml-20.relative(:style="columnWrapperWidth")
+      .column-wrapper.flex.ml-20(:style="columnWrapperWidth")
         calendar-column(
           v-for="(owner, index) in filteredOwners"
           :key="owner.id"
@@ -18,7 +18,7 @@
           :day-events="filterEventsByOwner(owner)"
           :day-start-time="validateStartTime"
           :day-end-time="validateEndTime"
-          :style="columnWidth"
+          :style="columnSize"
         )
       .flex.w-full.relative
         .time-coil-wrapper.left-0.-mt-3
@@ -38,12 +38,7 @@
         )
         .flex(:class="calendarBackgroundWidth")
           calendar-background(
-            :current-date="currentDate"
             :time-coil="timeCoil"
-            :events-data="eventsData"
-            :sidebar-width="sidebarWidth"
-            :day-start-time="validateStartTime"
-            :day-end-time="validateEndTime"
             :owners-count="ownersCount"
             )
 </template>
@@ -187,7 +182,7 @@ export default {
         this.columnHeaderHeight
       );
     },
-    columnWidth() {
+    columnSize() {
       if (this.ownersCount > 3) {
         return {
           height: `${this.columnHeight}px`,
@@ -260,7 +255,7 @@ export default {
         if (this.convertTime(elem, 0, -3) === this.hours) {
           return this.hoursMinutes;
         }
-        return elem;
+        return elem.slice(0, -3) + ":00";
       });
     },
     verifyTime(dayTime) {
@@ -360,6 +355,7 @@ export default {
   z-index: 5
 
 .column-wrapper
+  position: relative
   height: 48px
   background-color: var(--default-white)