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

src/components/base/BaseCustomSelect.vue

@@ -18,10 +18,10 @@
       )
         .item.py-2.px-4.cursor-pointer(
           v-for="item in items",
-          :key="item.id",
+          :key="item?.id",
           :class="{'center': center}",
-          @click="clickItem(item.id, item.label)"
+          @click="clickItem(item?.id, item?.label)"
-        ) {{ item.label }}
+        ) {{ item?.label }}
 </template>
 
 <script>

src/components/base/BaseInput.vue

@@ -32,9 +32,7 @@ export default {
     iconPosition: {
       default: "right",
     },
-    placeholder: {
+    placeholder: String,
-      default: "Поиск",
-    },
     widthInput: Number,
     borderNone: Boolean,
     disabled: Boolean,

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

src/pages/schedule/components/ScheduleBody.vue

@@ -75,12 +75,12 @@ export default {
     serialized: Array,
     dataSchedule: Object,
     buttons: Array,
+    startMonth: Object,
   },
   data() {
     return {
       days: "",
       result: [],
-      startMonth: moment("2022-12-01"),
       showSelect: false,
       employee: [],
       currentEmployee: {

src/pages/schedule/components/ScheduleHeader.vue

@@ -6,6 +6,7 @@
       .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
         .flex
           base-button.left-arrow.mr-4(
+            @click="previousHandler",
             left-icon="icon-down-arrow",
             rounded,
             secondary,
@@ -13,6 +14,7 @@
             :size="32"
           )
           base-button.right-arrow.mr-6(
+            @click="nextHandler",
             left-icon="icon-down-arrow",
             rounded,
             secondary,
@@ -20,21 +22,40 @@
             :size="32"
           )
           .text.flex.items-center
-        .flex.text-xl Жмых Олег Анатольевич
+            span.text.font-medium.text-base {{ dateString }}
+              span.today.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий  
+        //.flex.text-xl Жмых Олег Анатольевич
         base-button.font-semibold(:size="40", @click="openForm") Замена смен
 </template>
 
 <script>
+import * as moment from "moment";
 import BaseButton from "@/components/base/BaseButton.vue";
 import FormChangeShift from "@/pages/schedule/components/FormChangeShift.vue";
 export default {
   name: "ScheduleHeader",
   components: { BaseButton, FormChangeShift },
+  props: {
+    startMonth: Object,
+  },
   data() {
     return {
       showForm: false,
+      isCurrentMonth: true,
     };
   },
+  computed: {
+    dateString() {
+      return this.startMonth
+        .format("MMMM YYYY")
+        .split(" ")
+        .map((elem, index) => {
+          if (index === 0) return elem[0].toUpperCase() + elem.slice(1);
+          return elem;
+        })
+        .join(" ");
+    },
+  },
   methods: {
     openForm() {
       this.showForm = true;
@@ -42,6 +63,19 @@ export default {
     closeForm() {
       this.showForm = false;
     },
+    previousHandler() {
+      this.$emit("switch-previous-month");
+    },
+    nextHandler() {
+      this.$emit("switch-next-month");
+    },
+  },
+  watch: {
+    startMonth() {
+      this.isCurrentMonth =
+        this.startMonth.format("YYYY-MM-DD") ===
+        moment().date(1).format("YYYY-MM-DD");
+    },
   },
 };
 </script>