[WIP] Добавил выборку на расписании

src/pages/schedule/TheSchedule.vue

@@ -6,9 +6,11 @@
         :employee-list="employeeList",
         :schedules-employee="fetchSchedulesEmployee",
         :schedule-list="scheduleList",
-        :serialized="serialized"
+        :serialized="serialized",
+        :data-schedule="dataSchedule",
+        :buttons="buttons"
       )
-      schedule-bar
+      schedule-bar(:data-schedule="dataSchedule", :select-work="selectWork", :buttons="buttons")
 </template>
 
 <script>
@@ -24,6 +26,38 @@ export default {
       employeeList: [],
       scheduleList: [],
       serialized: [],
+      dataSchedule: {
+        status: "",
+        date: null,
+        startTime: "",
+        endTime: "",
+      },
+      buttons: [
+        {
+          class: "button-work",
+          name: "Работает",
+          work: "WORKS",
+          active: false,
+          color: "#55CD76",
+          text: "Р",
+        },
+        {
+          class: "button-status",
+          name: "Отпуск/больничный",
+          work: "VACATION",
+          active: false,
+          color: "#D7D9FF",
+          text: "О",
+        },
+        {
+          class: "button-free",
+          name: "Статусы",
+          work: "DAY_OFF",
+          active: false,
+          color: "#9294A7",
+          text: "В",
+        },
+      ],
     };
   },
   methods: {
@@ -81,6 +115,9 @@ export default {
       });
       this.serialized = serialized;
     },
+    selectWork(work) {
+      this.dataSchedule.status = work;
+    },
   },
   mounted() {
     this.fetchSchedules();

src/pages/schedule/components/ScheduleBar.vue

@@ -14,9 +14,10 @@
         .flex.justify-around(class="py-2.5")
           base-button.font-semibold(
             v-for="item in buttons",
-            :class="item.work" ,
+            :class="item.class" ,
+            :key="item",
             :style="{minWidth: '190px', minHeight: '43px', border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
-            @click="choiceSchedule(item.work)"
+            @click="choiceSchedule(item.class)"
           ) {{item.name}}
       .graph-template.flex
         base-custom-select(
@@ -37,6 +38,7 @@ import BaseInputDate from "@/components/base/BaseInputDate.vue";
 export default {
   name: "ScheduleBar",
   components: { BaseButton, BaseCustomSelect, BaseInputTime, BaseInputDate },
+  props: { dataSchedule: Object, selectWork: Function, buttons: Array },
   data() {
     return {
       scheduleList: [
@@ -46,22 +48,12 @@ export default {
         { label: "5/2", id: 4 },
       ],
       schedule: {},
-      dataSchedule: {
-        startDate: null,
-        endDate: null,
-        status: "",
-      },
-      buttons: [
-        { work: "button-work", name: "Работает", active: false },
-        { work: "button-status", name: "Отпуск/больничный", active: false },
-        { work: "button-free", name: "Статусы", active: false },
-      ],
     };
   },
   methods: {
     choiceSchedule(item) {
       this.buttons.forEach((e) => (e.active = false));
-      this.buttons.find((e) => e.work === item).active = true;
+      this.buttons.find((e) => e.class === item).active = true;
     },
   },
 };

src/pages/schedule/components/ScheduleBody.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .schedule.flex-col
+  .schedule.flex-col(:style="themeCell")
     .table-header.flex.w-full
       .flex.items-center(:style="{padding: '16px 102px'}")
         .text.font-bold Сотрудник
@@ -9,22 +9,26 @@
           :style="{backgroundColor: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? 'var(--bg-white-color-1)' : ''}"
         )
           .text.flex.font-bold(
-            :style="{opacity: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? '0.6' : '1'}"
+            @click="selectDay(day.format('D'))"
+            :style="{opacity: changeOpacity(day)}"
           ) {{day.format("D")}}
           .text.flex.font-bold(
-            :style="{opacity: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? '0.6' : '1'}"
+            :style="{opacity: changeOpacity(day)}"
             ) {{day.format("ddd")}}
-    .schedule-body.flex.w-full(v-for="schedule in serialized")
+    .schedule-body.flex.w-full(v-for="schedule in serialized", :key="schedule.id")
       .edit.flex.items-center.justify-center.h-9.w-9
         .flex.icon-edit
-      .name-employee.flex.justify-center.items-center.cursor-pointer(@click="openSelect")
+      .name-employee.flex.justify-center.items-center.cursor-pointer(@click="openSelect(schedule)")
         span {{trimOwnerName(schedule.last_name, schedule.first_name, schedule.patronymic)}}
-      .flex
+      .cell.flex.flex-col.items-center.justify-center.w-11.cursor-pointer(
-        .cell.flex.flex-col.items-center.justify-center.w-11(
         v-for="day in result",
-          :style="{backgroundColor: day.format('YYYY-MM-DD') === choiceDay(day.format('YYYY-MM-DD'), schedule.id) ? choiceColor(day.format('YYYY-MM-DD')) : ''}"
+        :key="day",
+        :id="schedule.id + day",
+        @click="choiceCell(day, schedule.id)",
+        :class="selectTime(day, schedule.id)",
+        :style="{backgroundColor: day.format('YYYY-MM-DD') === choiceDay(day, schedule.id) ? choiceColor(day) : ''}"
       )
-          .flex {{day.format("YYYY-MM-DD") === choiceDay(day.format("YYYY-MM-DD"), schedule.id) ? choiceWorks(day.format('YYYY-MM-DD')) : ''}}
+        .flex {{day.format("YYYY-MM-DD") === choiceDay(day, schedule.id) ? choiceWorks(day) : ''}}
     //- .schedule-body.flex.w-full
     //-   .edit.flex.items-center.justify-center.h-9.w-9
     //-     .flex.items-center.gap-x-8
@@ -56,6 +60,7 @@ import * as moment from "moment";
 import BaseModal from "@/components/base/BaseModal.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
+
 export default {
   name: "ScheduleBody",
   components: { BaseModal, BaseButton, BaseCustomSelect },
@@ -68,6 +73,8 @@ export default {
     },
     scheduleList: Array,
     serialized: Array,
+    dataSchedule: Object,
+    buttons: Array,
   },
   data() {
     return {
@@ -80,12 +87,14 @@ export default {
         label: "",
         id: null,
       },
-      works: [
-        { work: "WORKS", color: "#55CD76", text: "Р" },
-        { work: "VACATION", color: "#D7D9FF", text: "О" },
-        { work: "DAY_OFF", color: "#9294A7", text: "В" },
-      ],
       curWork: "",
+      dateInterval: {
+        id: "",
+        start: "",
+        end: "",
+        text: "",
+      },
+      activeButton: null,
     };
   },
   computed: {
@@ -106,19 +115,72 @@ export default {
       }
       return [];
     },
+    themeCell() {
+      this.setActiveButton();
+      return {
+        "--bg-color-status": this.activeButton?.color,
+      };
+    },
   },
   methods: {
+    setActiveButton() {
+      this.activeButton = this.buttons.find((e) => e.active);
+    },
+    choiceCell(time, id) {
+      let formatTime = time.format("YYYY-MM-DD");
+      if (
+        this.dateInterval.start &&
+        this.dateInterval.end &&
+        this.dateInterval.id !== id
+      ) {
+        this.dateInterval.start = "";
+        this.dateInterval.end = "";
+        this.dateInterval.id = "";
+      }
+      if (!this.dateInterval.start) {
+        this.dateInterval.start = formatTime;
+        this.dateInterval.id = id;
+      } else if (time.isAfter(this.dateInterval.start)) {
+        this.dateInterval.end = formatTime;
+      } else this.dateInterval.start = formatTime;
+    },
+    selectTime(day, id) {
+      let formatDay = day.format("YYYY-MM-DD");
+      let resStart =
+        this.dateInterval.start &&
+        formatDay === this.dateInterval.start &&
+        this.dateInterval.id === id;
+
+      let resEnd =
+        this.dateInterval.end &&
+        formatDay === this.dateInterval.end &&
+        this.dateInterval.id === id;
+
+      let resMiddle =
+        day.isBefore(this.dateInterval.end) &&
+        this.dateInterval.id === id &&
+        day.isAfter(this.dateInterval.start);
+
+      return {
+        status: !(!resStart && !resMiddle && !resEnd && !!this.activeButton),
+        "from-date": !!resStart && !this.activeButton,
+        "to-date": !!resEnd && !this.activeButton,
+        "middle-dates": !!resMiddle && !this.activeButton,
+      };
+    },
     saveEmployee() {
       this.currentEmployee.label = "";
       this.currentEmployee.id = null;
     },
     choiceWorks(day) {
-      let a = this.scheduleList.find((e) => e.date === day).status;
+      let currentDay = day.format("YYYY-MM-DD");
-      return this.works.find((e) => e.work === a).text;
+      let a = this.scheduleList.find((e) => e.date === currentDay).status;
+      return this.buttons.find((e) => e.work === a).text;
     },
     choiceColor(day) {
-      let a = this.scheduleList.find((e) => e.date === day).status;
+      let currentDay = day.format("YYYY-MM-DD");
-      return this.works.find((e) => e.work === a).color;
+      let a = this.scheduleList.find((e) => e.date === currentDay).status;
+      return this.buttons.find((e) => e.work === a).color;
     },
     changeDays() {
       this.days = moment().daysInMonth();
@@ -134,17 +196,29 @@ export default {
       let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
       return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
     },
-    openSelect() {
+    // openSelect() {
-      this.showSelect = true;
+    //   this.showSelect = true;
-      for (let index = 0; index < this.employeeList.length; index++) {
+    //   for (let index = 0; index < this.employeeList.length; index++) {
-        this.employee.push(this.employeeList[index]);
+    //     this.employee.push(this.employeeList[index]);
-      }
+    //   }
-    },
+    // },
     choiceDay(day, employee) {
+      let currentDay = day.format("YYYY-MM-DD");
       return this.scheduleList.find(
-        (e) => day === e.date && e.employee.id === employee
+        (e) => currentDay === e.date && e.employee.id === employee
       )?.date;
     },
+    changeOpacity(day) {
+      return day.format("ddd") === "сб" || day.format("ddd") === "вс"
+        ? "0.6"
+        : "1";
+    },
+    openSelect(schedule) {
+      console.log(schedule);
+    },
+    selectDay(day) {
+      console.log(day);
+    },
   },
 
   mounted() {
@@ -160,6 +234,10 @@ export default {
   border-radius: 4px
   min-height: 87px
 
+.schedule-body
+  &:hover
+    background-color: var(--border-light-grey-color-1)
+
 .table-header
   height: 50px
   background-color: #D7D9FF
@@ -175,6 +253,7 @@ export default {
 
 .edit
   border-right: 1.5px solid var(--border-light-grey-color-1)
+  border-bottom: 1.5px solid var(--border-light-grey-color-1)
 
 .name
   min-width: 255px
@@ -198,4 +277,16 @@ export default {
   border-radius: 4px
   width: 400px
   height: 500px
+
+.status
+  background-color: var(--bg-color-status)
+
+.from-date
+  background: limegreen
+
+.to-date
+  background: red
+
+.middle-dates
+  background: yellow
 </style>