WIP Отображение нерабочего времени

src/pages/calendar/components/CalendarColumn.vue

@@ -12,7 +12,8 @@
         span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       column-header-checkbox
-    .body.pl-1.h-full(@dblclick="clickOnBackground")
+    .body(@dblclick="clickOnBackground")
+      .nonworking-time(:style="nonworkingStartTime")
       transition-group(name="card")
         calendar-event-card(
           v-for="event, index in dayEvents",
@@ -27,18 +28,23 @@
           @delete-event="transmitDeleteEvent",
           :schedule-body-ref="scheduleBodyRef",
         )
+      .nonworking-time.absolute(:style="nonworkingEndTime")
 </template>
 
 <script>
 import ColumnHeaderCheckbox from "./CalendarColumnHeaderCheckbox.vue";
 import BaseAvatar from "@/components/base/BaseAvatar";
 import CalendarEventCard from "./CalendarEventCard.vue";
+import * as moment from "moment/moment";
+import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
+import { addNotification } from "@/components/Notifications/notificationContext";
 export default {
   name: "CalendarColumn",
   components: {
     CalendarEventCard,
     BaseAvatar,
     ColumnHeaderCheckbox,
+    TheNotificationProvider,
   },
   props: {
     ownerData: Object,
@@ -63,6 +69,62 @@ export default {
     };
   },
   computed: {
+    workingShift() {
+      console.log(this.ownerData);
+      if (!this.ownerData.id) return null;
+      let foundedSchedule = this.ownerData.schedule.find(
+        (elem) => elem.date === this.currentDate.format("YYYY-MM-DD")
+      );
+      if (!foundedSchedule) return null;
+      let start = foundedSchedule.start_time.slice(
+        0,
+        foundedSchedule.start_time.length - 3
+      );
+      let end = foundedSchedule.end_time.slice(
+        0,
+        foundedSchedule.end_time.length - 3
+      );
+      return {
+        start: start.split(":"),
+        end: end.split(":"),
+        fulltime: `${start} - ${end}`,
+      };
+    },
+    nonworkingStartTime() {
+      if (!this.ownerData.id || !this.workingShift) return {};
+      let height =
+        (this.workingShift.start[0] - this.dayStartTime) * this.pixelsPerHour +
+        this.workingShift.start[1] * this.pixelsPerMinute;
+      if (height <= 0)
+        return {
+          height: 0,
+          display: "none",
+        };
+      return {
+        height: `${height}px`,
+      };
+    },
+    nonworkingEndTime() {
+      if (!this.ownerData.id || !this.workingShift) return {};
+      let time = moment()
+        .hour(this.dayEndTime)
+        .minute(0)
+        .subtract(parseInt(this.workingShift.end[0]), "hours")
+        .subtract(parseInt(this.workingShift.end[1]), "minutes")
+        .format("HH:mm")
+        .split(":");
+      let position =
+        time[0] * this.pixelsPerHour + time[1] * this.pixelsPerMinute;
+      if (position <= 0)
+        return {
+          bottom: 0,
+          display: "none",
+        };
+      return {
+        bottom: 0,
+        height: `${position}px`,
+      };
+    },
     ownerName() {
       if (this.ownerData.id) {
         let checkedFirstName =
@@ -120,24 +182,42 @@ export default {
     transmitDeleteEvent(eventData) {
       this.$emit("delete-event", eventData);
     },
+    addErrorNotification(title, message) {
+      addNotification(title, title, message, "error", 5000);
+    },
     clickOnBackground(e) {
       let res = String((e.offsetY / this.pixelsPerHour).toFixed(2)).split(".");
       let hours = parseInt(res[0]) + this.dayStartTime;
       let minuts = Math.round(res[1] * 0.6);
       if (minuts < 10) minuts = "0" + minuts;
       if (hours < 10) hours = "0" + hours;
-      this.$emit("selected-event", {
-        employees: [
-          {
-            employee: this.ownerData,
-            role: "owner",
-          },
-        ],
-        start: `${this.currentDate.format(
-          "YYYY-MM-DD"
-        )}T${hours}:${minuts}:00Z`,
-        end: `${this.currentDate.format("YYYY-MM-DD")}T${hours}:${minuts}:00Z`,
-      });
+      if (e.target.className !== "body")
+        this.addErrorNotification(
+          `Для сотрудника ${this.ownerName} рабочие часы: ${this.workingShift.fulltime}`,
+          "Вы пытаетесь добавить запись вне рабочего времени"
+        );
+      else
+        this.$emit("selected-event", {
+          employees: [
+            {
+              employee: {
+                id: this.ownerData.id,
+                last_name: this.ownerData.last_name,
+                first_name: this.ownerData.first_name,
+                patronymic: this.ownerData.patronymic,
+                color: this.ownerData.color,
+                photo: this.ownerData.photo,
+              },
+              role: "owner",
+            },
+          ],
+          start: `${this.currentDate.format(
+            "YYYY-MM-DD"
+          )}T${hours}:${minuts}:00Z`,
+          end: `${this.currentDate.format(
+            "YYYY-MM-DD"
+          )}T${hours}:${minuts}:00Z`,
+        });
     },
   },
 };
@@ -157,6 +237,7 @@ export default {
 .body
   position: relative
   z-index: 3
+  height: 100%
 
 .btn
   opacity: 0.5
@@ -185,4 +266,9 @@ export default {
 
 .card-move
   transition: 0.3s ease
+
+.nonworking-time
+  width: 100%
+  background-color: var(--font-dark-blue-color)
+  opacity: 0.05
 </style>

src/pages/calendar/components/CalendarEventCard.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .wrapper.cursor-pointer.my-1(
+  .wrapper.cursor-pointer.my-1.mx-1(
     :style="themeColors",
     :class="cardTheme",
     ref="eventCard"

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -95,12 +95,6 @@ export default {
   emits: ["clear-selected-event-data", "close-change-form"],
   props: {
     closeForm: Function,
-    ownersData: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
     selectedEventData: {
       type: Object,
       default() {
@@ -135,6 +129,7 @@ export default {
       id: null,
       ifClearedForm: true,
       membersData: [],
+      ownersData: [],
     };
   },
   computed: {
@@ -488,6 +483,14 @@ export default {
         .get("general/person/?limit=100")
         .then((res) => this.saveMembersData(res));
     },
+    fetchOwnersData() {
+      fetchWrapper
+        .get("general/employee/")
+        .then((res) => this.saveOwnersData(res));
+    },
+    saveOwnersData(res) {
+      this.ownersData = res.results;
+    },
     saveMembersData(res) {
       this.membersData = res.results;
     },
@@ -523,6 +526,7 @@ export default {
     },
   },
   mounted() {
+    this.fetchOwnersData();
     this.fetchMembersData();
   },
 };

src/pages/calendar/components/CalendarSchedule.vue

@@ -176,6 +176,7 @@ export default {
           patronymic: elem.patronymic,
           color: elem.color,
           photo: elem.photo,
+          schedule: elem.schedule,
         });
       });
       return filteredArray;
@@ -301,9 +302,7 @@ export default {
       let filteredArray = [];
       this.filteredEventsByDate.forEach((item) => {
         let foundEvent = item.employees.find(
-          (elem) =>
-            JSON.stringify(elem.employee) === JSON.stringify(owner) &&
-            elem.role === "owner"
+          (elem) => elem.employee.id === owner.id && elem.role === "owner"
         );
         if (foundEvent) filteredArray.push(item);
       });