From be7c4fd8b6d5e38dfd85d640213e33f643cf4526 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 14 Oct 2022 13:44:55 +0300
Subject: [PATCH 1/8] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?=
 =?UTF-8?q?=D0=B0=20CalendarSchedule,=20=D0=BF=D1=80=D0=BE=D0=BA=D0=B8?=
 =?UTF-8?q?=D0=BD=D1=83=D0=BB=D0=B0=20=D0=BF=D1=80=D0=BE=D0=BF=D1=81=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/calendar/TheCalendar.vue            | 22 +++-----
 .../calendar/components/CalendarColumn.vue    | 35 ++++++++++++-
 .../calendar/components/CalendarHeader.vue    | 10 ++--
 .../calendar/components/CalendarSchedule.vue  | 51 +++++++++++++++++++
 4 files changed, 97 insertions(+), 21 deletions(-)
 create mode 100644 src/pages/calendar/components/CalendarSchedule.vue

diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index a08e224..e8b57ec 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/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: {
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index fba93bf..b87b024 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
+  .calendar-column-wrapper.flex.flex-col(@click="updateTime")
     .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,11 +7,13 @@
         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")
+      .line.flex.items-center(v-for="hour in hourArray" :key="hour")
+        span.self-start {{ hour}}
         .middle-line
 </template>
 
 <script>
+import * as moment from "moment/moment";
 import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
 export default {
   name: "CalendarColumn",
@@ -24,6 +26,33 @@ export default {
       },
     },
   },
+  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);
+    },
+  },
 };
 </script>
 
@@ -50,6 +79,8 @@ 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)
diff --git a/src/pages/calendar/components/CalendarHeader.vue b/src/pages/calendar/components/CalendarHeader.vue
index 930fc1a..7b6b7b7 100644
--- a/src/pages/calendar/components/CalendarHeader.vue
+++ b/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");
     },
   },
 };
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
new file mode 100644
index 0000000..5c799c1
--- /dev/null
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -0,0 +1,51 @@
+<template lang="pug">
+  .schedule.ml-2
+    calendar-header(
+      :currentDate="currentDate"
+      @previous-date="previousDate"
+      @next-date="nextDate"
+      @selected-layout="selectedLayout")
+    calendar-column(:info="columnInfo") 
+</template>
+
+<script>
+import CalendarHeader from "./CalendarHeader.vue";
+import CalendarColumn from "./CalendarColumn.vue";
+import teamMemberAvatar from "@/assets/images/team-member.svg";
+export default {
+  name: "CalendarSchedule",
+  components: { CalendarHeader, CalendarColumn },
+  props: {
+    currentDate: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      columnInfo: {
+        name: "Захарова А.О.",
+        avatar: teamMemberAvatar,
+      },
+    };
+  },
+  methods: {
+    previousDate() {
+      this.$emit("previous-date");
+    },
+    nextDate() {
+      this.$emit("next-date");
+    },
+    selectedLayout(option) {
+      this.$emit("selected-layout", option);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.schedule
+  width: 100%
+</style>

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 2/8] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B0?=
 =?UTF-8?q?=20CalendarClockColumn?=
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: [],

From 00ddeff84dd6e6c2cc0f9ec8ed8250635c8264c9 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 14 Oct 2022 16:10:27 +0300
Subject: [PATCH 3/8] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B0?=
 =?UTF-8?q?=20=D0=BB=D0=B8=D0=BD=D0=B8=D1=8E=20=D0=B8=D0=BD=D0=B4=D0=B8?=
 =?UTF-8?q?=D0=BA=D0=B0=D1=82=D0=BE=D1=80=D0=B0=20=D0=B2=D1=80=D0=B5=D0=BC?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=20=D0=B2=20=D0=BA=D0=B0=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B4=D0=B0=D1=80=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/sass/variables.sass                |  1 +
 .../calendar/components/CalendarColumn.vue    | 25 +++++++++++++++-
 .../calendar/components/CalendarSchedule.vue  | 29 +++++++++----------
 3 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index a3177c6..124a255 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -17,3 +17,4 @@
   --bg-hover-row-table: rgba(215, 217, 255, 0.25)
   --default-white: #fff
   --btn-red-color: #ff6f6f
+  --time-indicator-color: #E93131
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index 4b49368..e7d8d2f 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -6,7 +6,8 @@
         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
+    .flex.flex-col
+      span.block.time-indicator(:style="indicatorLocation")
       .line.flex.items-center(v-for="hour in hoursArray" :key="hour")
         .middle-line
 </template>
@@ -24,6 +25,22 @@ export default {
       },
     },
     hoursArray: Array,
+    currentTime: String,
+  },
+  computed: {
+    indicatorLocation() {
+      return {
+        top: `${this.calculateIndicatorLocation()}px`,
+      };
+    },
+  },
+  methods: {
+    calculateIndicatorLocation() {
+      let newTime = this.currentTime
+        .split(":")
+        .map((elem) => parseInt(elem, 10));
+      return (newTime[0] - 7) * 60 + newTime[1];
+    },
   },
 };
 </script>
@@ -31,6 +48,7 @@ export default {
 <style lang="sass" scoped>
 .calendar-column-wrapper
   width: 100%
+  position: relative
 
 .header
   height: 48px
@@ -56,4 +74,9 @@ export default {
 .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>
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 547437b..a70755f 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -7,7 +7,7 @@
       @selected-layout="selectedLayout")
     .schedule-body.flex
       calendar-clock-column(:hoursArray="hoursArray")
-      calendar-column(:info="columnInfo" :hoursArray="hoursArray")
+      calendar-column(:info="columnInfo" :hoursArray="hoursArray" :currentTime="currtentTime")
 </template>
 
 <script>
@@ -34,19 +34,7 @@ export default {
         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",
-      ],
+      hoursArray: [],
     };
   },
   methods: {
@@ -60,12 +48,21 @@ export default {
       this.$emit("selected-layout", option);
     },
     updateTime() {
-      setInterval(this.changeCurrentTime, 30000);
+      setInterval(this.changeCurrentTime, 5000);
     },
     changeCurrentTime() {
-      this.currtentTime = moment().format("h:mm:ss");
+      this.currtentTime = moment().format("HH:mm:ss");
       console.log(this.currtentTime);
     },
+    calculateHoursCount() {
+      for (let i = 8; i <= 18; i++) {
+        this.hoursArray.push(`${i}:00`);
+      }
+    },
+  },
+  mounted() {
+    this.calculateHoursCount();
+    this.updateTime();
   },
 };
 </script>

From 2ccb622243e754a3dd2923a7346747aa5aeac833 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 14 Oct 2022 19:20:31 +0300
Subject: [PATCH 4/8] =?UTF-8?q?WIP=20=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB?=
 =?UTF-8?q?=D0=B0=20=D0=B8=D0=BD=D0=B4=D0=B8=D0=BA=D0=B0=D1=82=D0=BE=D1=80?=
 =?UTF-8?q?,=20=D1=82=D0=B0=D0=B9=D0=BC=D0=B5=D1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../calendar/components/CalendarColumn.vue    | 14 ++++++-
 .../calendar/components/CalendarSchedule.vue  | 38 +++++++++++++++----
 2 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index e7d8d2f..120697a 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -7,7 +7,7 @@
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       base-doc-ok-button
     .flex.flex-col
-      span.block.time-indicator(:style="indicatorLocation")
+      span.block.time-indicator(v-if="isShownIndicator" :style="indicatorLocation")
       .line.flex.items-center(v-for="hour in hoursArray" :key="hour")
         .middle-line
 </template>
@@ -27,6 +27,11 @@ export default {
     hoursArray: Array,
     currentTime: String,
   },
+  data() {
+    return {
+      isShownIndicator: true,
+    };
+  },
   computed: {
     indicatorLocation() {
       return {
@@ -39,7 +44,12 @@ export default {
       let newTime = this.currentTime
         .split(":")
         .map((elem) => parseInt(elem, 10));
-      return (newTime[0] - 7) * 60 + newTime[1];
+      let result = (newTime[0] - 7) * 60.5 + newTime[1];
+      if (result > 666) {
+        this.isShownIndicator = false;
+        return 0;
+      }
+      return result;
     },
   },
 };
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index a70755f..e5c0246 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -7,7 +7,7 @@
       @selected-layout="selectedLayout")
     .schedule-body.flex
       calendar-clock-column(:hoursArray="hoursArray")
-      calendar-column(:info="columnInfo" :hoursArray="hoursArray" :currentTime="currtentTime")
+      calendar-column(:info="columnInfo" :hoursArray="hoursArray" :currentTime="currentTime")
 </template>
 
 <script>
@@ -33,8 +33,9 @@ export default {
         name: "Захарова А.О.",
         avatar: teamMemberAvatar,
       },
-      currtentTime: "",
+      currentTime: moment().format("HH:mm:ss"),
       hoursArray: [],
+      timer: null,
     };
   },
   methods: {
@@ -48,20 +49,41 @@ export default {
       this.$emit("selected-layout", option);
     },
     updateTime() {
-      setInterval(this.changeCurrentTime, 5000);
+      let currentHour = parseInt(this.currentTime.slice(0, -6), 10);
+      if (currentHour < 20 && currentHour > 8) {
+        this.timer = setInterval(() => {
+          this.changeCurrentTime();
+          this.changeHoursArray();
+        }, 5000);
+      }
     },
     changeCurrentTime() {
-      this.currtentTime = moment().format("HH:mm:ss");
-      console.log(this.currtentTime);
+      this.currentTime = moment().format("HH:mm:ss");
     },
-    calculateHoursCount() {
+    hoursArrayInitialization() {
       for (let i = 8; i <= 18; i++) {
-        this.hoursArray.push(`${i}:00`);
+        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.calculateHoursCount();
+    this.changeCurrentTime();
+    this.hoursArrayInitialization();
     this.updateTime();
   },
 };

From f212958f8698eb58e3d0016f4af9f70cc65592b4 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 14 Oct 2022 16:10:27 +0300
Subject: [PATCH 5/8] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B0?=
 =?UTF-8?q?=20=D0=BB=D0=B8=D0=BD=D0=B8=D1=8E=20=D0=B8=D0=BD=D0=B4=D0=B8?=
 =?UTF-8?q?=D0=BA=D0=B0=D1=82=D0=BE=D1=80=D0=B0=20=D0=B2=D1=80=D0=B5=D0=BC?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=20=D0=B2=20=D0=BA=D0=B0=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B4=D0=B0=D1=80=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/sass/variables.sass | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index 6941713..3d63507 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -19,3 +19,4 @@
   --btn-red-color: #ff6f6f
   --time-indicator-color: #E93131
   --br-grey-color: #D3D4DC
+  --time-indicator-color: #e93131

From b8f2caa04df272633b7afe6a84977a83d7fe9a21 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 14 Oct 2022 19:26:13 +0300
Subject: [PATCH 6/8] =?UTF-8?q?WIP=20=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D0=B8=D0=BD=D1=82=D0=B5=D1=80=D0=B2=D0=B0=D0=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/calendar/components/CalendarSchedule.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index e5c0246..f52cf70 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -54,7 +54,7 @@ export default {
         this.timer = setInterval(() => {
           this.changeCurrentTime();
           this.changeHoursArray();
-        }, 5000);
+        }, 30000);
       }
     },
     changeCurrentTime() {

From 70ca927f541af4af017d0409fe6bd8b5a601610f Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 14 Oct 2022 19:32:46 +0300
Subject: [PATCH 7/8] =?UTF-8?q?WIP=20=D0=A0=D0=B0=D0=B7=D1=80=D0=B5=D1=88?=
 =?UTF-8?q?=D0=B8=D0=BB=D0=B0=20=D0=BA=D0=BE=D0=BD=D1=84=D0=BB=D0=B8=D0=BA?=
 =?UTF-8?q?=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/calendar/components/CalendarSchedule.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index f52cf70..05deb49 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -33,7 +33,7 @@ export default {
         name: "Захарова А.О.",
         avatar: teamMemberAvatar,
       },
-      currentTime: moment().format("HH:mm:ss"),
+      currentTime: "",
       hoursArray: [],
       timer: null,
     };

From d0cc2e8196985104937e01aebd1a34c3ee356438 Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Mon, 17 Oct 2022 11:18:27 +0300
Subject: [PATCH 8/8] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20mock=20=D0=B4=D0=BB=D1=8F=20=D1=82=D0=B0=D0=B1=D0=BB?=
 =?UTF-8?q?=D0=B8=D1=86=D1=8B=20=D0=BA=D0=BB=D0=B8=D0=B5=D0=BD=D1=82=D0=BE?=
 =?UTF-8?q?=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 392 ++++++++++++++++++
 package.json                                  |   1 +
 server.js                                     |  40 ++
 src/main.js                                   |   5 +
 src/pages/clients/components/ClientsTable.vue |  41 +-
 .../clients/components/ClientsTableRow.vue    |   8 +-
 6 files changed, 455 insertions(+), 32 deletions(-)
 create mode 100644 server.js

diff --git a/package-lock.json b/package-lock.json
index 9260654..e2f7028 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-prettier": "^4.0.0",
         "eslint-plugin-vue": "^9.6.0",
+        "miragejs": "^0.1.45",
         "prettier": "^2.4.1",
         "sass": "^1.55.0",
         "sass-loader": "^13.0.2",
@@ -1912,6 +1913,12 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
+    "node_modules/@miragejs/pretender-node-polyfill": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@miragejs/pretender-node-polyfill/-/pretender-node-polyfill-0.1.2.tgz",
+      "integrity": "sha512-M/BexG/p05C5lFfMunxo/QcgIJnMT2vDVCd00wNqK2ImZONIlEETZwWJu1QtLxtmYlSHlCFl3JNzp0tLe7OJ5g==",
+      "dev": true
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -6651,6 +6658,12 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/fake-xml-http-request": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/fake-xml-http-request/-/fake-xml-http-request-2.1.2.tgz",
+      "integrity": "sha512-HaFMBi7r+oEC9iJNpc3bvcW7Z7iLmM26hPDmlb0mFwyANSsOQAtJxbdWsXITKOzZUyMYK0zYCv3h5yDj9TsiXg==",
+      "dev": true
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -7733,6 +7746,12 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/inflected": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/inflected/-/inflected-2.1.0.tgz",
+      "integrity": "sha512-hAEKNxvHf2Iq3H60oMBHkB4wl5jn3TPF3+fXek/sRwAB5gP9xWs4r7aweSF95f99HFoz69pnZTcu8f0SIHV18w==",
+      "dev": true
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -8359,6 +8378,30 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha512-hFuH8TY+Yji7Eja3mGiuAxBqLagejScbG8GbG0j6o9vzn0YL14My+ktnqtZgFTosKymC9/44wP6s7xyuLfnClw==",
+      "dev": true
+    },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
+      "dev": true
+    },
+    "node_modules/lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
+      "dev": true
+    },
+    "node_modules/lodash.compact": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.compact/-/lodash.compact-3.0.1.tgz",
+      "integrity": "sha512-2ozeiPi+5eBXW1CLtzjk8XQFhQOEMwwfxblqeq6EGyTxZJ1bPATqilY0e6g2SLQpP4KuMeuioBhEnWz5Pr7ICQ==",
+      "dev": true
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -8371,12 +8414,90 @@
       "integrity": "sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==",
       "dev": true
     },
+    "node_modules/lodash.find": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.find/-/lodash.find-4.6.0.tgz",
+      "integrity": "sha512-yaRZoAV3Xq28F1iafWN1+a0rflOej93l1DQUejs3SZ41h2O9UJBoS9aueGjPDgAl4B6tPC0NuuchLKaDQQ3Isg==",
+      "dev": true
+    },
+    "node_modules/lodash.flatten": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
+      "integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==",
+      "dev": true
+    },
+    "node_modules/lodash.forin": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.forin/-/lodash.forin-4.4.0.tgz",
+      "integrity": "sha512-APldePP4yvGhMcplVxv9L+exdLHMRHRhH1Q9O70zRJMm9HbTm6zxaihXtNl+ICOBApeFWoH7jNmFr/L4XfWeiQ==",
+      "dev": true
+    },
+    "node_modules/lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
+      "dev": true
+    },
+    "node_modules/lodash.has": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/lodash.has/-/lodash.has-4.5.2.tgz",
+      "integrity": "sha512-rnYUdIo6xRCJnQmbVFEwcxF144erlD+M3YcJUVesflU9paQaE8p+fJDcIQrlMYbxoANFL+AB9hZrzSBBk5PL+g==",
+      "dev": true
+    },
+    "node_modules/lodash.invokemap": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.invokemap/-/lodash.invokemap-4.6.0.tgz",
+      "integrity": "sha512-CfkycNtMqgUlfjfdh2BhKO/ZXrP8ePOX5lEU/g0R3ItJcnuxWDwokMGKx1hWcfOikmyOVx6X9IwWnDGlgKl61w==",
+      "dev": true
+    },
+    "node_modules/lodash.isempty": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
+      "integrity": "sha512-oKMuF3xEeqDltrGMfDxAPGIVMSSRv8tbRSODbrs4KGsRRLEhrW8N8Rd4DRgB2+621hY8A8XwwrTVhXWpxFvMzg==",
+      "dev": true
+    },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "dev": true
+    },
+    "node_modules/lodash.isfunction": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
+      "integrity": "sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==",
+      "dev": true
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "dev": true
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
     "node_modules/lodash.kebabcase": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
       "integrity": "sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==",
       "dev": true
     },
+    "node_modules/lodash.lowerfirst": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/lodash.lowerfirst/-/lodash.lowerfirst-4.3.1.tgz",
+      "integrity": "sha512-UUKX7VhP1/JL54NXg2aq/E1Sfnjjes8fNYTNkPU8ZmsaVeBvPHKdbNaN79Re5XRL01u6wbq3j0cbYZj71Fcu5w==",
+      "dev": true
+    },
+    "node_modules/lodash.map": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
+      "integrity": "sha512-worNHGKLDetmcEYDvh2stPCrrQRkP20E4l0iIS7F8EvzMqBBi7ltvFN5m1HvTf1P7Jk1txKhvFcmYsCr8O2F1Q==",
+      "dev": true
+    },
     "node_modules/lodash.mapvalues": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
@@ -8395,12 +8516,36 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/lodash.pick": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
+      "integrity": "sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q==",
+      "dev": true
+    },
+    "node_modules/lodash.snakecase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz",
+      "integrity": "sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==",
+      "dev": true
+    },
     "node_modules/lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
       "dev": true
     },
+    "node_modules/lodash.uniqby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
+      "integrity": "sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww==",
+      "dev": true
+    },
+    "node_modules/lodash.values": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.values/-/lodash.values-4.3.0.tgz",
+      "integrity": "sha512-r0RwvdCv8id9TUblb/O7rYPwVy6lerCbcawrfdo9iC/1t1wsNMJknO79WNBgwkH0hIeJ08jmvvESbFpNb4jH0Q==",
+      "dev": true
+    },
     "node_modules/log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@@ -9137,6 +9282,43 @@
         "node": ">= 8"
       }
     },
+    "node_modules/miragejs": {
+      "version": "0.1.45",
+      "resolved": "https://registry.npmjs.org/miragejs/-/miragejs-0.1.45.tgz",
+      "integrity": "sha512-NFdpFVXmBuQfErQh70yL44h4NhSZYHZVbg0qzrIxB5gRZYNZGH1sriduejbxpmKVdqCbmjPypaXvEgBgohqydQ==",
+      "dev": true,
+      "dependencies": {
+        "@miragejs/pretender-node-polyfill": "^0.1.0",
+        "inflected": "^2.0.4",
+        "lodash.assign": "^4.2.0",
+        "lodash.camelcase": "^4.3.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.compact": "^3.0.1",
+        "lodash.find": "^4.6.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.forin": "^4.4.0",
+        "lodash.get": "^4.4.2",
+        "lodash.has": "^4.5.2",
+        "lodash.invokemap": "^4.6.0",
+        "lodash.isempty": "^4.4.0",
+        "lodash.isequal": "^4.5.0",
+        "lodash.isfunction": "^3.0.9",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.lowerfirst": "^4.3.1",
+        "lodash.map": "^4.6.0",
+        "lodash.mapvalues": "^4.6.0",
+        "lodash.pick": "^4.4.0",
+        "lodash.snakecase": "^4.1.1",
+        "lodash.uniq": "^4.5.0",
+        "lodash.uniqby": "^4.7.0",
+        "lodash.values": "^4.3.0",
+        "pretender": "^3.4.7"
+      },
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -10818,6 +11000,16 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/pretender": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/pretender/-/pretender-3.4.7.tgz",
+      "integrity": "sha512-jkPAvt1BfRi0RKamweJdEcnjkeu7Es8yix3bJ+KgBC5VpG/Ln4JE3hYN6vJym4qprm8Xo5adhWpm3HCoft1dOw==",
+      "dev": true,
+      "dependencies": {
+        "fake-xml-http-request": "^2.1.2",
+        "route-recognizer": "^0.3.3"
+      }
+    },
     "node_modules/prettier": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
@@ -11558,6 +11750,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/route-recognizer": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/route-recognizer/-/route-recognizer-0.3.4.tgz",
+      "integrity": "sha512-2+MhsfPhvauN1O8KaXpXAOfR/fwe8dnUXVM+xw7yt40lJRfPVQxV6yryZm0cgRvAj5fMF/mdRZbL2ptwbs5i2g==",
+      "dev": true
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -15399,6 +15597,12 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
+    "@miragejs/pretender-node-polyfill": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@miragejs/pretender-node-polyfill/-/pretender-node-polyfill-0.1.2.tgz",
+      "integrity": "sha512-M/BexG/p05C5lFfMunxo/QcgIJnMT2vDVCd00wNqK2ImZONIlEETZwWJu1QtLxtmYlSHlCFl3JNzp0tLe7OJ5g==",
+      "dev": true
+    },
     "@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -19037,6 +19241,12 @@
       "optional": true,
       "peer": true
     },
+    "fake-xml-http-request": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/fake-xml-http-request/-/fake-xml-http-request-2.1.2.tgz",
+      "integrity": "sha512-HaFMBi7r+oEC9iJNpc3bvcW7Z7iLmM26hPDmlb0mFwyANSsOQAtJxbdWsXITKOzZUyMYK0zYCv3h5yDj9TsiXg==",
+      "dev": true
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -19858,6 +20068,12 @@
       "optional": true,
       "peer": true
     },
+    "inflected": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/inflected/-/inflected-2.1.0.tgz",
+      "integrity": "sha512-hAEKNxvHf2Iq3H60oMBHkB4wl5jn3TPF3+fXek/sRwAB5gP9xWs4r7aweSF95f99HFoz69pnZTcu8f0SIHV18w==",
+      "dev": true
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -20359,6 +20575,30 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha512-hFuH8TY+Yji7Eja3mGiuAxBqLagejScbG8GbG0j6o9vzn0YL14My+ktnqtZgFTosKymC9/44wP6s7xyuLfnClw==",
+      "dev": true
+    },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
+      "dev": true
+    },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
+      "dev": true
+    },
+    "lodash.compact": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.compact/-/lodash.compact-3.0.1.tgz",
+      "integrity": "sha512-2ozeiPi+5eBXW1CLtzjk8XQFhQOEMwwfxblqeq6EGyTxZJ1bPATqilY0e6g2SLQpP4KuMeuioBhEnWz5Pr7ICQ==",
+      "dev": true
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -20371,12 +20611,90 @@
       "integrity": "sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==",
       "dev": true
     },
+    "lodash.find": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.find/-/lodash.find-4.6.0.tgz",
+      "integrity": "sha512-yaRZoAV3Xq28F1iafWN1+a0rflOej93l1DQUejs3SZ41h2O9UJBoS9aueGjPDgAl4B6tPC0NuuchLKaDQQ3Isg==",
+      "dev": true
+    },
+    "lodash.flatten": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
+      "integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==",
+      "dev": true
+    },
+    "lodash.forin": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.forin/-/lodash.forin-4.4.0.tgz",
+      "integrity": "sha512-APldePP4yvGhMcplVxv9L+exdLHMRHRhH1Q9O70zRJMm9HbTm6zxaihXtNl+ICOBApeFWoH7jNmFr/L4XfWeiQ==",
+      "dev": true
+    },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
+      "dev": true
+    },
+    "lodash.has": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/lodash.has/-/lodash.has-4.5.2.tgz",
+      "integrity": "sha512-rnYUdIo6xRCJnQmbVFEwcxF144erlD+M3YcJUVesflU9paQaE8p+fJDcIQrlMYbxoANFL+AB9hZrzSBBk5PL+g==",
+      "dev": true
+    },
+    "lodash.invokemap": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.invokemap/-/lodash.invokemap-4.6.0.tgz",
+      "integrity": "sha512-CfkycNtMqgUlfjfdh2BhKO/ZXrP8ePOX5lEU/g0R3ItJcnuxWDwokMGKx1hWcfOikmyOVx6X9IwWnDGlgKl61w==",
+      "dev": true
+    },
+    "lodash.isempty": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
+      "integrity": "sha512-oKMuF3xEeqDltrGMfDxAPGIVMSSRv8tbRSODbrs4KGsRRLEhrW8N8Rd4DRgB2+621hY8A8XwwrTVhXWpxFvMzg==",
+      "dev": true
+    },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "dev": true
+    },
+    "lodash.isfunction": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
+      "integrity": "sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==",
+      "dev": true
+    },
+    "lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "dev": true
+    },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
     "lodash.kebabcase": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
       "integrity": "sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==",
       "dev": true
     },
+    "lodash.lowerfirst": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/lodash.lowerfirst/-/lodash.lowerfirst-4.3.1.tgz",
+      "integrity": "sha512-UUKX7VhP1/JL54NXg2aq/E1Sfnjjes8fNYTNkPU8ZmsaVeBvPHKdbNaN79Re5XRL01u6wbq3j0cbYZj71Fcu5w==",
+      "dev": true
+    },
+    "lodash.map": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
+      "integrity": "sha512-worNHGKLDetmcEYDvh2stPCrrQRkP20E4l0iIS7F8EvzMqBBi7ltvFN5m1HvTf1P7Jk1txKhvFcmYsCr8O2F1Q==",
+      "dev": true
+    },
     "lodash.mapvalues": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
@@ -20395,12 +20713,36 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "lodash.pick": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
+      "integrity": "sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q==",
+      "dev": true
+    },
+    "lodash.snakecase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz",
+      "integrity": "sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==",
+      "dev": true
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
       "dev": true
     },
+    "lodash.uniqby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
+      "integrity": "sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww==",
+      "dev": true
+    },
+    "lodash.values": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.values/-/lodash.values-4.3.0.tgz",
+      "integrity": "sha512-r0RwvdCv8id9TUblb/O7rYPwVy6lerCbcawrfdo9iC/1t1wsNMJknO79WNBgwkH0hIeJ08jmvvESbFpNb4jH0Q==",
+      "dev": true
+    },
     "log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@@ -20959,6 +21301,40 @@
         "yallist": "^4.0.0"
       }
     },
+    "miragejs": {
+      "version": "0.1.45",
+      "resolved": "https://registry.npmjs.org/miragejs/-/miragejs-0.1.45.tgz",
+      "integrity": "sha512-NFdpFVXmBuQfErQh70yL44h4NhSZYHZVbg0qzrIxB5gRZYNZGH1sriduejbxpmKVdqCbmjPypaXvEgBgohqydQ==",
+      "dev": true,
+      "requires": {
+        "@miragejs/pretender-node-polyfill": "^0.1.0",
+        "inflected": "^2.0.4",
+        "lodash.assign": "^4.2.0",
+        "lodash.camelcase": "^4.3.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.compact": "^3.0.1",
+        "lodash.find": "^4.6.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.forin": "^4.4.0",
+        "lodash.get": "^4.4.2",
+        "lodash.has": "^4.5.2",
+        "lodash.invokemap": "^4.6.0",
+        "lodash.isempty": "^4.4.0",
+        "lodash.isequal": "^4.5.0",
+        "lodash.isfunction": "^3.0.9",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.lowerfirst": "^4.3.1",
+        "lodash.map": "^4.6.0",
+        "lodash.mapvalues": "^4.6.0",
+        "lodash.pick": "^4.4.0",
+        "lodash.snakecase": "^4.1.1",
+        "lodash.uniq": "^4.5.0",
+        "lodash.uniqby": "^4.7.0",
+        "lodash.values": "^4.3.0",
+        "pretender": "^3.4.7"
+      }
+    },
     "mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -22141,6 +22517,16 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true
     },
+    "pretender": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/pretender/-/pretender-3.4.7.tgz",
+      "integrity": "sha512-jkPAvt1BfRi0RKamweJdEcnjkeu7Es8yix3bJ+KgBC5VpG/Ln4JE3hYN6vJym4qprm8Xo5adhWpm3HCoft1dOw==",
+      "dev": true,
+      "requires": {
+        "fake-xml-http-request": "^2.1.2",
+        "route-recognizer": "^0.3.3"
+      }
+    },
     "prettier": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
@@ -22743,6 +23129,12 @@
         "glob": "^7.1.3"
       }
     },
+    "route-recognizer": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/route-recognizer/-/route-recognizer-0.3.4.tgz",
+      "integrity": "sha512-2+MhsfPhvauN1O8KaXpXAOfR/fwe8dnUXVM+xw7yt40lJRfPVQxV6yryZm0cgRvAj5fMF/mdRZbL2ptwbs5i2g==",
+      "dev": true
+    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
diff --git a/package.json b/package.json
index 14c9cb5..821fc0e 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^9.6.0",
+    "miragejs": "^0.1.45",
     "prettier": "^2.4.1",
     "sass": "^1.55.0",
     "sass-loader": "^13.0.2",
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..5dbe441
--- /dev/null
+++ b/server.js
@@ -0,0 +1,40 @@
+import { createServer } from "miragejs";
+
+export function clientsServer() {
+  createServer({
+    routes() {
+      this.get("/api/clients", () => ({
+        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",
+            },
+          },
+        ],
+      }));
+    },
+  });
+}
diff --git a/src/main.js b/src/main.js
index 8f81c95..9e70808 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,11 @@ import "./assets/sass/fonts.sass";
 import "./assets/sass/tailwind.sass";
 import "./assets/sass/variables.sass";
 import "./assets/css/iconfonts.css";
+import { clientsServer } from "../server.js";
+
+if (process.env.NODE_ENV === "development") {
+  clientsServer({ environment: "development" });
+}
 
 moment.locale("ru");
 
diff --git a/src/pages/clients/components/ClientsTable.vue b/src/pages/clients/components/ClientsTable.vue
index faf6a10..140d4c4 100644
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -64,39 +64,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;
@@ -117,6 +95,9 @@ export default {
       }
     },
   },
+  mounted() {
+    this.fetchDataClients();
+  },
 };
 </script>
 
diff --git a/src/pages/clients/components/ClientsTableRow.vue b/src/pages/clients/components/ClientsTableRow.vue
index a286dd9..cdb4b6a 100644
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/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>