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

2022-12-23 17:51:09 +03:00
parent 3773c15ad5
commit 9a6ddd2cf6
3 changed files with 162 additions and 42 deletions
--- a/src/pages/schedule/TheSchedule.vue
+++ b/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();
--- a/src/pages/schedule/components/ScheduleBar.vue
+++ b/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;
    },
  },
 };
--- a/src/pages/schedule/components/ScheduleBody.vue
+++ b/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>