Merge branch 'master' into UC-14

src/pages/calendar/TheCalendar.vue

@@ -1,29 +1,23 @@
 <template lang="pug">
-  .calendar-container.ml-2
-    calendar-header(
-      :currentDay="currentDate"
+  .calendar-container
+    calendar-schedule(
+      :currentDate="currentDate"
       @previous-date="switchPreviousDate"
       @next-date="switchNextDate"
-      @selectedLayout="changeCalendarLayout")
-    calendar-column(:info="columnInfo") 
+      @selected-layout="changeCalendarLayout"
+      )
 </template>
 
 <script>
 import * as moment from "moment/moment";
-import CalendarHeader from "./components/CalendarHeader.vue";
-import CalendarColumn from "./components/CalendarColumn.vue";
-import teamMemberAvatar from "@/assets/images/team-member.svg";
+import CalendarSchedule from "./components/CalendarSchedule.vue";
 export default {
   name: "TheCalendar",
-  components: { CalendarHeader, CalendarColumn },
+  components: { CalendarSchedule },
   data() {
     return {
-      currentDate: moment(),
       calendarLayout: "",
-      columnInfo: {
-        name: "Захарова А.О.",
-        avatar: teamMemberAvatar,
-      },
+      currentDate: moment(),
     };
   },
   methods: {

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>

src/pages/calendar/components/CalendarColumn.vue

@@ -6,8 +6,9 @@
         span.member-name.font-medium.text-base.mr-6 {{ info.name }}
         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 10" :key="hour")
+    .flex.flex-col
+      span.block.time-indicator(v-if="isShownIndicator" :style="indicatorLocation")
+      .line.flex.items-center(v-for="hour in hoursArray" :key="hour")
         .middle-line
 </template>
 
@@ -23,6 +24,33 @@ export default {
         return {};
       },
     },
+    hoursArray: Array,
+    currentTime: String,
+  },
+  data() {
+    return {
+      isShownIndicator: true,
+    };
+  },
+  computed: {
+    indicatorLocation() {
+      return {
+        top: `${this.calculateIndicatorLocation()}px`,
+      };
+    },
+  },
+  methods: {
+    calculateIndicatorLocation() {
+      let newTime = this.currentTime
+        .split(":")
+        .map((elem) => parseInt(elem, 10));
+      let result = (newTime[0] - 7) * 60.5 + newTime[1];
+      if (result > 666) {
+        this.isShownIndicator = false;
+        return 0;
+      }
+      return result;
+    },
   },
 };
 </script>
@@ -30,7 +58,7 @@ export default {
 <style lang="sass" scoped>
 .calendar-column-wrapper
   width: 100%
-  background-color: var(--default-white)
+  position: relative
 
 .header
   height: 48px
@@ -50,8 +78,15 @@ export default {
 .line
   border-bottom: 1px solid var(--border-light-grey-color)
   height: 62px
+  &:last-child
+    display: none
 
 .middle-line
   border-top: 1px dashed var(--border-light-grey-color)
   width: 100%
+
+.time-indicator
+  width: 100%
+  border-top: 1px solid var(--time-indicator-color)
+  position: absolute
 </style>

src/pages/calendar/components/CalendarHeader.vue

@@ -17,7 +17,7 @@ export default {
   name: "CalendarHeader",
   components: { BaseArrowButton, CalendarLayoutSwitch },
   props: {
-    currentDay: Object,
+    currentDate: Object,
   },
   data() {
     return {
@@ -26,7 +26,7 @@ export default {
   },
   computed: {
     dateString() {
-      let newStr = this.currentDay.format("D MMMM YYYY");
+      let newStr = this.currentDate.format("D MMMM YYYY");
       return newStr
         .split(" ")
         .map((elem, index) => {
@@ -38,7 +38,7 @@ export default {
   },
   methods: {
     changeSelectedLayout(option) {
-      this.$emit("selectedLayout", option);
+      this.$emit("selected-layout", option);
     },
     previousHandler() {
       this.$emit("previous-date");
@@ -48,9 +48,9 @@ export default {
     },
   },
   watch: {
-    currentDay: function () {
+    currentDate: function () {
       this.isToday =
-        this.currentDay.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
+        this.currentDate.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
     },
   },
 };

src/pages/calendar/components/CalendarSchedule.vue

@@ -0,0 +1,96 @@
+<template lang="pug">
+  .schedule.ml-2
+    calendar-header(
+      :currentDate="currentDate"
+      @previous-date="previousDate"
+      @next-date="nextDate"
+      @selected-layout="selectedLayout")
+    .schedule-body.flex
+      calendar-clock-column(:hoursArray="hoursArray")
+      calendar-column(:info="columnInfo" :hoursArray="hoursArray" :currentTime="currentTime")
+</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, CalendarClockColumn },
+  props: {
+    currentDate: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      columnInfo: {
+        name: "Захарова А.О.",
+        avatar: teamMemberAvatar,
+      },
+      currentTime: "",
+      hoursArray: [],
+      timer: null,
+    };
+  },
+  methods: {
+    previousDate() {
+      this.$emit("previous-date");
+    },
+    nextDate() {
+      this.$emit("next-date");
+    },
+    selectedLayout(option) {
+      this.$emit("selected-layout", option);
+    },
+    updateTime() {
+      let currentHour = parseInt(this.currentTime.slice(0, -6), 10);
+      if (currentHour < 20 && currentHour > 8) {
+        this.timer = setInterval(() => {
+          this.changeCurrentTime();
+          this.changeHoursArray();
+        }, 30000);
+      }
+    },
+    changeCurrentTime() {
+      this.currentTime = moment().format("HH:mm:ss");
+    },
+    hoursArrayInitialization() {
+      for (let i = 8; i <= 18; i++) {
+        let startTime = this.currentTime.slice(0, -3);
+        let currentHour = parseInt(startTime.slice(0, -3), 10);
+        if (i === currentHour) {
+          this.hoursArray.push(startTime);
+        } else this.hoursArray.push(`${i}:00`);
+      }
+    },
+    changeHoursArray() {
+      let newCurrentTime = this.currentTime.slice(0, -3);
+      let currentHour = parseInt(newCurrentTime.slice(0, -3), 10);
+      let newHoursArray = this.hoursArray.map((elem) => {
+        if (parseInt(elem.slice(0, -3), 10) === currentHour) {
+          return this.currentTime.slice(0, -3);
+        }
+        return elem;
+      });
+      this.hoursArray = newHoursArray;
+    },
+  },
+  mounted() {
+    this.changeCurrentTime();
+    this.hoursArrayInitialization();
+    this.updateTime();
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.schedule
+  width: 100%
+  background-color: var(--default-white)
+</style>

src/pages/clients/components/ClientsTable.vue

@@ -66,39 +66,17 @@ export default {
     return {
       selectAll: false,
       marked: [],
-      dataClients: [
-        {
-          id: "1",
-          fullName: "Вильгейльм Арнольд Витальевич",
-          age: "34",
-          jobTitle: "Менеджер",
-          priority: "Высокий",
-          phone: "+7 (915) 657–21–14",
-          email: "Superboyband@yandex.ru",
-          networks: [],
-          meetingTime: {
-            date: "02.06.22",
-            time: "18:30–19:30",
-          },
-        },
-        {
-          id: "2",
-          fullName: "Астафоркина Екатерина Геннадьевна",
-          age: "54",
-          jobTitle: "Менеджер",
-          priority: "-",
-          phone: "+7 (574) 364–53–36",
-          email: "antimag@gmail.com",
-          networks: [],
-          meetingTime: {
-            date: "14.07.22",
-            time: "17:30–21:30",
-          },
-        },
-      ],
+      dataClients: [],
     };
   },
   methods: {
+    saveDataClients(data) {
+      this.dataClients = data.dataClients;
+    },
+    fetchDataClients() {
+      // eslint-disable-next-line
+      fetch("/api/clients").then((res) => res.json()).then((data) => this.saveDataClients(data))
+    },
     selectedCheck(e) {
       if (e.target.id === "all") {
         this.selectAll = !this.selectAll;
@@ -119,6 +97,9 @@ export default {
       }
     },
   },
+  mounted() {
+    this.fetchDataClients();
+  },
 };
 </script>
 

src/pages/clients/components/ClientsTableRow.vue

@@ -26,7 +26,7 @@
         span.meeting-time.text-xs.leading-5 {{meetingTime.time}}
     td.py-5
       .px-4
-        .relative.dots-button.icon-dots.text-center.cursor-pointer.leading-6(@click="openPopup")
+        .relative.dots-button.icon-dots.text-center.cursor-pointer.leading-6(:tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
           clients-action-popup(v-if="isOpenPopup")
 </template>
 
@@ -55,9 +55,13 @@ export default {
     meetingTime: Object,
   },
   methods: {
-    openPopup() {
+    openPopup(e) {
+      e.target.focus();
       this.isOpenPopup = !this.isOpenPopup;
     },
+    handleUnFocusPopup() {
+      this.isOpenPopup = false;
+    },
   },
 };
 </script>