From a2e5351743b0bc128877127355200403c36532db Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 14 Oct 2022 14:24:38 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B0=20Ca?=
 =?UTF-8?q?lendarClockColumn?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CalendarClockColumn.vue        | 20 +++++++++++
 .../calendar/components/CalendarColumn.vue    | 35 ++-----------------
 .../calendar/components/CalendarSchedule.vue  | 30 ++++++++++++++--
 tailwind.config.js                            |  3 ++
 4 files changed, 54 insertions(+), 34 deletions(-)
 create mode 100644 src/pages/calendar/components/CalendarClockColumn.vue

diff --git a/src/pages/calendar/components/CalendarClockColumn.vue b/src/pages/calendar/components/CalendarClockColumn.vue
new file mode 100644
index 0000000..d166fb1
--- /dev/null
+++ b/src/pages/calendar/components/CalendarClockColumn.vue
@@ -0,0 +1,20 @@
+<template lang="pug">
+  .calendar-clock-column.flex.flex-col.items-end.gap-y-43.pt-9.pb-12.px-3
+    span.font-medium.text-base(v-for="hour in hoursArray") {{ hour }}
+</template>
+
+<script>
+export default {
+  name: "CalendarClockColumn",
+  props: {
+    hoursArray: Array,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.calendar-clock-column
+  width: 80px
+  height: 100%
+  color: var(--font-dark-blue-color)
+</style>
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index b87b024..4b49368 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .calendar-column-wrapper.flex.flex-col(@click="updateTime")
+  .calendar-column-wrapper.flex.flex-col
     .header.flex.items-center.justify-between.py-2.px-6
       .flex.items-center
         img.avatar-wrapper.mr-2(:src="info.avatar" alt="Team member")
@@ -7,13 +7,11 @@
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       base-doc-ok-button
     .body.flex.flex-col
-      .line.flex.items-center(v-for="hour in hourArray" :key="hour")
-        span.self-start {{ hour}}
+      .line.flex.items-center(v-for="hour in hoursArray" :key="hour")
         .middle-line
 </template>
 
 <script>
-import * as moment from "moment/moment";
 import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
 export default {
   name: "CalendarColumn",
@@ -25,33 +23,7 @@ export default {
         return {};
       },
     },
-  },
-  data() {
-    return {
-      currtentTime: "",
-      hourArray: [
-        "8:00",
-        "9:00",
-        "10:00",
-        "11:00",
-        "12:00",
-        "13:00",
-        "14:00",
-        "15:00",
-        "16:00",
-        "17:00",
-        "18:00",
-      ],
-    };
-  },
-  methods: {
-    updateTime() {
-      setInterval(this.changeCurrentTime, 30000);
-    },
-    changeCurrentTime() {
-      this.currtentTime = moment().format("h:mm:ss");
-      console.log(this.currtentTime);
-    },
+    hoursArray: Array,
   },
 };
 </script>
@@ -59,7 +31,6 @@ export default {
 <style lang="sass" scoped>
 .calendar-column-wrapper
   width: 100%
-  background-color: var(--default-white)
 
 .header
   height: 48px
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 5c799c1..547437b 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -5,16 +5,20 @@
       @previous-date="previousDate"
       @next-date="nextDate"
       @selected-layout="selectedLayout")
-    calendar-column(:info="columnInfo") 
+    .schedule-body.flex
+      calendar-clock-column(:hoursArray="hoursArray")
+      calendar-column(:info="columnInfo" :hoursArray="hoursArray")
 </template>
 
 <script>
+import * as moment from "moment/moment";
 import CalendarHeader from "./CalendarHeader.vue";
 import CalendarColumn from "./CalendarColumn.vue";
+import CalendarClockColumn from "./CalendarClockColumn.vue";
 import teamMemberAvatar from "@/assets/images/team-member.svg";
 export default {
   name: "CalendarSchedule",
-  components: { CalendarHeader, CalendarColumn },
+  components: { CalendarHeader, CalendarColumn, CalendarClockColumn },
   props: {
     currentDate: {
       type: Object,
@@ -29,6 +33,20 @@ export default {
         name: "Захарова А.О.",
         avatar: teamMemberAvatar,
       },
+      currtentTime: "",
+      hoursArray: [
+        "8:00",
+        "9:00",
+        "10:00",
+        "11:00",
+        "12:00",
+        "13:00",
+        "14:00",
+        "15:00",
+        "16:00",
+        "17:00",
+        "18:00",
+      ],
     };
   },
   methods: {
@@ -41,6 +59,13 @@ export default {
     selectedLayout(option) {
       this.$emit("selected-layout", option);
     },
+    updateTime() {
+      setInterval(this.changeCurrentTime, 30000);
+    },
+    changeCurrentTime() {
+      this.currtentTime = moment().format("h:mm:ss");
+      console.log(this.currtentTime);
+    },
   },
 };
 </script>
@@ -48,4 +73,5 @@ export default {
 <style lang="sass" scoped>
 .schedule
   width: 100%
+  background-color: var(--default-white)
 </style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 4081d3a..ddeccba 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -19,6 +19,9 @@ module.exports = {
         "3xl": ["60px", { lineHeight: "70px" }],
         "4xl": ["44px", { lineHeight: "48px" }],
       },
+      gap: {
+        43: "43px",
+      },
     },
   },
   plugins: [],