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

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(
-          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')) : ''}"
-        )
-          .flex {{day.format("YYYY-MM-DD") === choiceDay(day.format("YYYY-MM-DD"), schedule.id) ? choiceWorks(day.format('YYYY-MM-DD')) : ''}}
+      .cell.flex.flex-col.items-center.justify-center.w-11.cursor-pointer(
+        v-for="day in result",
+        :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, 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;
-      return this.works.find((e) => e.work === a).text;
+      let currentDay = day.format("YYYY-MM-DD");
+      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;
-      return this.works.find((e) => e.work === a).color;
+      let currentDay = day.format("YYYY-MM-DD");
+      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() {
-      this.showSelect = true;
-      for (let index = 0; index < this.employeeList.length; index++) {
-        this.employee.push(this.employeeList[index]);
-      }
-    },
+    // openSelect() {
+    //   this.showSelect = true;
+    //   for (let index = 0; index < this.employeeList.length; 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>