WIP Расписание подтягивает данные по месяцам

src/pages/schedule/TheSchedule.vue

@@ -1,19 +1,25 @@
 <template lang="pug">
   .wrapper.flex.w-full.relative.mx-2
     .schedule-wrapper.relative.flex.flex-col.px-6.py-6.h-full.w-full.gap-y-5
-      schedule-header
+      schedule-header(
+        :start-month="startMonth",
+        @switch-previous-month="switchPreviousMonth",
+        @switch-next-month="switchNextMonth"
+      )
       schedule-body(
         :employee-list="employeeList",
         :schedules-employee="fetchSchedulesEmployee",
         :schedule-list="scheduleList",
         :serialized="serialized",
         :data-schedule="dataSchedule",
-        :buttons="buttons"
+        :buttons="buttons",
+        :start-month="startMonth"
       )
       schedule-bar(:data-schedule="dataSchedule", :select-work="selectWork", :buttons="buttons")
 </template>
 
 <script>
+import * as moment from "moment";
 import ScheduleHeader from "@/pages/schedule/components/ScheduleHeader.vue";
 import ScheduleBar from "@/pages/schedule/components/ScheduleBar.vue";
 import ScheduleBody from "@/pages/schedule/components/ScheduleBody.vue";
@@ -58,8 +64,14 @@ export default {
           text: "В",
         },
       ],
+      startMonth: moment().startOf("month"),
     };
   },
+  computed: {
+    endMonth() {
+      return this.startMonth.clone().endOf("month");
+    },
+  },
   methods: {
     fetchSchedules() {
       fetchWrapper
@@ -70,9 +82,16 @@ export default {
         .then(() => this.fetchSchedulesEmployee());
     },
     fetchSchedulesEmployee() {
+      this.scheduleList = [];
       this.employeeList.forEach((e) => {
         fetchWrapper
-          .get(`accounts/schedules/?employee=${e.id}`)
+          .get(
+            `accounts/schedules/?employee=${
+              e.id
+            }&date_after=${this.startMonth.format(
+              "YYYY-MM-DD"
+            )}&date_before=${this.endMonth.format("YYYY-MM-DD")}`
+          )
           .then((data) => {
             this.scheduleList.push(...data.results);
           })
@@ -118,6 +137,17 @@ export default {
     selectWork(work) {
       this.dataSchedule.status = work;
     },
+    switchPreviousMonth() {
+      this.startMonth = this.startMonth.clone().subtract(1, "M");
+    },
+    switchNextMonth() {
+      this.startMonth = this.startMonth.clone().add(1, "M");
+    },
+  },
+  watch: {
+    startMonth() {
+      this.fetchSchedulesEmployee();
+    },
   },
   mounted() {
     this.fetchSchedules();