WIP EmployeesList подтягивается из Schedules

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();
   },
 };

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>

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;

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;

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() {