From 4aecbbca365a02659585b2d5f1f82d6deed4e1bb Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 21 Dec 2022 19:13:01 +0300
Subject: [PATCH 1/2] =?UTF-8?q?WIP=20=D0=9E=D1=82=D0=BE=D0=B1=D1=80=D0=B0?=
 =?UTF-8?q?=D0=B6=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BD=D0=B5=D1=80=D0=B0=D0=B1?=
 =?UTF-8?q?=D0=BE=D1=87=D0=B5=D0=B3=D0=BE=20=D0=B2=D1=80=D0=B5=D0=BC=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/calendar/TheCalendar.vue            |   8 +-
 .../calendar/components/CalendarColumn.vue    | 112 ++++++++++++++++--
 .../calendar/components/CalendarEventCard.vue |   2 +-
 .../components/CalendarFormAddEvent.vue       |  16 ++-
 .../calendar/components/CalendarSchedule.vue  |   5 +-
 5 files changed, 117 insertions(+), 26 deletions(-)

diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index aa9c410..f175704 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -28,7 +28,6 @@
       calendar-form-add-event(
         v-if="isOpenForm",
         :close-form="closeFormCreateEvent",
-        :owners-data="employeesData",
         :selected-event-data="selectedEvent",
         :event-statuses="eventStatuses",
         :time-information="timeInformation",
@@ -76,7 +75,7 @@ export default {
       showModal: false,
       timeInformation: {
         dayStartTime: "08:00",
-        dayEndTime: "20:00",
+        dayEndTime: "22:00",
       },
       eventsData: [],
       employeesData: [],
@@ -146,7 +145,7 @@ export default {
     },
     fetchEmployeesData() {
       fetchWrapper
-        .get("general/employee/")
+        .get(`general/employee/?date=${this.currentDate.format("YYYY-MM-DD")}`)
         .then((res) => this.saveEmployeesData(res));
     },
     fetchEventsData() {
@@ -192,6 +191,9 @@ export default {
         this.clearSelectedEvent();
       }
     },
+    currentDate() {
+      this.fetchEmployeesData();
+    },
   },
   mounted() {
     this.fetchEmployeesData();
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index 6f648a0..39ae25e 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/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>
diff --git a/src/pages/calendar/components/CalendarEventCard.vue b/src/pages/calendar/components/CalendarEventCard.vue
index bbe0967..ff6f960 100644
--- a/src/pages/calendar/components/CalendarEventCard.vue
+++ b/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"
diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index e864dca..65ecdf4 100644
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/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();
   },
 };
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 5eb69cc..d205a19 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/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);
       });

From 79faa743fb0206a36257610109c37d673a9dba8e Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 22 Dec 2022 17:26:05 +0300
Subject: [PATCH 2/2] =?UTF-8?q?WIP=20EmployeesList=20=D0=BF=D0=BE=D0=B4?=
 =?UTF-8?q?=D1=82=D1=8F=D0=B3=D0=B8=D0=B2=D0=B0=D0=B5=D1=82=D1=81=D1=8F=20?=
 =?UTF-8?q?=D0=B8=D0=B7=20Schedules?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/calendar/TheCalendar.vue            | 37 +++++--
 .../calendar/components/CalendarColumn.vue    | 19 +---
 .../components/CalendarFormAddEvent.vue       | 97 +++++++++++++++----
 .../calendar/components/CalendarSchedule.vue  | 19 ++--
 .../calendar/components/CalendarSidebar.vue   |  6 +-
 5 files changed, 123 insertions(+), 55 deletions(-)

diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index f175704..cb83d7b 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -2,14 +2,14 @@
   .calendar-container.flex
     calendar-sidebar(
       :url="url",
-      :team-data="employeesData",
+      :schedules-data="schedulesData",
       :open-form-create="openFormCreateEvent",
       :event-statuses="eventStatuses",
       @width="changeWidth",
     )
     calendar-schedule(
       :url="url",
-      :owners-data="employeesData",
+      :schedules-data="schedulesData",
       :current-date="currentDate",
       :time-information="timeInformation",
       :events-data="eventsData",
@@ -31,6 +31,7 @@
         :selected-event-data="selectedEvent",
         :event-statuses="eventStatuses",
         :time-information="timeInformation",
+        :current-date="currentDate",
         @clear-selected-event-data="clearSelectedEvent",
         @close-change-form="setChangeFormState"
       )
@@ -78,8 +79,9 @@ export default {
         dayEndTime: "22:00",
       },
       eventsData: [],
-      employeesData: [],
+      schedulesData: [],
       isOpenForm: false,
+      WORKING_STATUS: "WORKS",
       changeFormWasClosed: false,
       eventStatuses: [
         {
@@ -140,13 +142,28 @@ export default {
     saveEventsData(res) {
       this.eventsData = res.results;
     },
-    saveEmployeesData(res) {
-      this.employeesData = res.results;
+    saveSchedulesData(res) {
+      if (res.results.length === 0) {
+        this.schedulesData = [];
+        return;
+      }
+      let filteredEmployees = res.results.filter(
+        (elem) => elem.status === this.WORKING_STATUS
+      );
+      if (filteredEmployees.length === 0) {
+        this.schedulesData = [];
+        return;
+      }
+      this.schedulesData = filteredEmployees;
     },
-    fetchEmployeesData() {
+    fetchSchedulesData() {
       fetchWrapper
-        .get(`general/employee/?date=${this.currentDate.format("YYYY-MM-DD")}`)
-        .then((res) => this.saveEmployeesData(res));
+        .get(
+          `accounts/schedules/?date_after=${this.currentDate.format(
+            "YYYY-MM-DD"
+          )}&date_before=${this.currentDate.format("YYYY-MM-DD")}`
+        )
+        .then((res) => this.saveSchedulesData(res));
     },
     fetchEventsData() {
       fetchWrapper
@@ -192,11 +209,11 @@ export default {
       }
     },
     currentDate() {
-      this.fetchEmployeesData();
+      this.fetchSchedulesData();
     },
   },
   mounted() {
-    this.fetchEmployeesData();
+    this.fetchSchedulesData();
     this.fetchEventsData();
   },
 };
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index 39ae25e..a1ad860 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -70,20 +70,9 @@ 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
-      );
+      let start = this.ownerData.start_time;
+      let end = this.ownerData.end_time;
       return {
         start: start.split(":"),
         end: end.split(":"),
@@ -269,6 +258,6 @@ export default {
 
 .nonworking-time
   width: 100%
-  background-color: var(--font-dark-blue-color)
-  opacity: 0.05
+  background-color: var(--btn-blue-sec-color)
+  opacity: 0.3
 </style>
diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index 65ecdf4..21a0d0f 100644
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -113,6 +113,12 @@ export default {
         return {};
       },
     },
+    currentDate: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
   },
   data() {
     return {
@@ -130,6 +136,7 @@ export default {
       ifClearedForm: true,
       membersData: [],
       ownersData: [],
+      WORKING_STATUS: "WORKS",
     };
   },
   computed: {
@@ -298,10 +305,27 @@ export default {
     },
     checkTime() {
       let counter = 0;
+      let foundedSchedule = {};
+      let foundedEmployee = this.ownersData.find(
+        (elem) => elem.id === this.employees.employee.id
+      );
+      if (foundedEmployee)
+        foundedSchedule = foundedEmployee.schedules.find(
+          (elem) =>
+            elem.date === this.eventDate && elem.status === this.WORKING_STATUS
+        );
+      if (!foundedSchedule) {
+        this.addErrorNotification(
+          "Некорректная дата события",
+          `В данный день ${this.employees.employee.label} не работает`
+        );
+        counter += 1;
+        return false;
+      }
       if (
         this.checkTimeLimits(
           this.startTime,
-          this.timeInformation.dayStartTime,
+          foundedSchedule.start_time,
           "start"
         )
       ) {
@@ -311,13 +335,7 @@ export default {
         );
         counter += 1;
       }
-      if (
-        this.checkTimeLimits(
-          this.endTime,
-          this.timeInformation.dayEndTime,
-          "end"
-        )
-      ) {
+      if (this.checkTimeLimits(this.endTime, foundedSchedule.end_time, "end")) {
         this.addErrorNotification(
           "Некорректное время окончания события",
           "Время окончания события позже окончания рабочего дня"
@@ -325,11 +343,7 @@ export default {
         counter += 1;
       }
       if (
-        this.checkTimeLimits(
-          this.endTime,
-          this.timeInformation.dayStartTime,
-          "start"
-        )
+        this.checkTimeLimits(this.endTime, foundedSchedule.start_time, "start")
       ) {
         this.addErrorNotification(
           "Некорректное время окончания события",
@@ -338,11 +352,7 @@ export default {
         counter += 1;
       }
       if (
-        this.checkTimeLimits(
-          this.startTime,
-          this.timeInformation.dayEndTime,
-          "end"
-        )
+        this.checkTimeLimits(this.startTime, foundedSchedule.end_time, "end")
       ) {
         this.addErrorNotification(
           "Некорректное время начала события",
@@ -485,11 +495,58 @@ export default {
     },
     fetchOwnersData() {
       fetchWrapper
-        .get("general/employee/")
+        .get(
+          `accounts/schedules/?date_after=${this.currentDate
+            .clone()
+            .subtract(1, "month")
+            .format("YYYY-MM-DD")}&date_before=${this.currentDate
+            .clone()
+            .add(1, "month")
+            .format("YYYY-MM-DD")}`
+        )
         .then((res) => this.saveOwnersData(res));
     },
     saveOwnersData(res) {
-      this.ownersData = res.results;
+      let serializedList = [];
+      if (res.results.length === 0) {
+        this.ownersData = [];
+        return;
+      }
+      res.results.forEach((elem) => {
+        let foundedElem = serializedList.find(
+          (item) => item.id === elem.employee.id
+        );
+        if (!foundedElem) {
+          serializedList.push({
+            id: elem.employee.id,
+            last_name: elem.employee.last_name,
+            first_name: elem.employee.first_name,
+            patronymic: elem.employee.patronymic,
+            color: elem.employee.color,
+            schedules: [
+              {
+                date: elem.date,
+                end_time: elem.end_time.slice(0, elem.end_time.length - 3),
+                start_time: elem.start_time.slice(
+                  0,
+                  elem.start_time.length - 3
+                ),
+                status: elem.status,
+                id: elem.id,
+              },
+            ],
+          });
+        } else {
+          foundedElem.schedules.push({
+            date: elem.date,
+            end_time: elem.end_time.slice(0, elem.end_time.length - 3),
+            start_time: elem.start_time.slice(0, elem.start_time.length - 3),
+            status: elem.status,
+            id: elem.id,
+          });
+        }
+      });
+      this.ownersData = serializedList;
     },
     saveMembersData(res) {
       this.membersData = res.results;
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index d205a19..8d67086 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -94,7 +94,7 @@ export default {
       },
     },
     sidebarWidth: String,
-    ownersData: {
+    schedulesData: {
       type: Array,
       default() {
         return [];
@@ -168,15 +168,16 @@ export default {
     },
     filteredOwners() {
       let filteredArray = [];
-      this.ownersData.forEach((elem) => {
+      this.schedulesData.forEach((elem) => {
         filteredArray.push({
-          id: elem.id,
-          last_name: elem.last_name,
-          first_name: elem.first_name,
-          patronymic: elem.patronymic,
-          color: elem.color,
-          photo: elem.photo,
-          schedule: elem.schedule,
+          id: elem.employee.id,
+          last_name: elem.employee.last_name,
+          first_name: elem.employee.first_name,
+          patronymic: elem.employee.patronymic,
+          color: elem.employee.color,
+          photo: elem.employee.photo,
+          end_time: elem.end_time.slice(0, elem.end_time.length - 3),
+          start_time: elem.start_time.slice(0, elem.start_time.length - 3),
         });
       });
       return filteredArray;
diff --git a/src/pages/calendar/components/CalendarSidebar.vue b/src/pages/calendar/components/CalendarSidebar.vue
index 8f785f0..74e29b8 100644
--- a/src/pages/calendar/components/CalendarSidebar.vue
+++ b/src/pages/calendar/components/CalendarSidebar.vue
@@ -45,7 +45,7 @@ export default {
     CalendarSidebarTeammate,
   },
   props: {
-    teamData: Array,
+    schedulesData: Array,
     openFormCreate: Function,
     eventStatuses: Array,
     url: String,
@@ -74,6 +74,10 @@ export default {
         width: this.widthSidebarClose,
       };
     },
+    teamData() {
+      if (this.schedulesData.length === 0) return [];
+      return this.schedulesData.map((elem) => elem.employee);
+    },
   },
   methods: {
     changeSize() {