[WIP] Добавил аптейд на расписание, настроил отображение дней

2022-12-28 16:28:29 +03:00
parent 7a1bfd45c4
commit e4f96924f8
3 changed files with 103 additions and 67 deletions
--- a/src/pages/schedule/components/ScheduleBar.vue
+++ b/src/pages/schedule/components/ScheduleBar.vue
@@ -27,7 +27,7 @@
          placeholder="Шаблоны графиков"
        )
    .flex.justify-center
-      base-button.font-semibold(:size="40", @click="createSchedule") Сохранить
+      base-button.font-semibold(:size="40", @click="createSchedules") Сохранить
 </template>

 <script>
@@ -43,7 +43,7 @@ export default {
    buttons: Array,
    clearEmployee: Array,
    times: Object,
-    createSchedule: Function,
+    createSchedules: Function,
  },
  data() {
    return {
@@ -112,7 +112,7 @@ export default {
    opacity: 0.8
    border: none

-.button-status
+.button-vacation
  background: #D7D9FF
  border: none
  &:active
--- a/src/pages/schedule/components/ScheduleBody.vue
+++ b/src/pages/schedule/components/ScheduleBody.vue
@@ -1,12 +1,14 @@
 <template lang="pug">
  .schedule.flex-col(:style="themeCell")
    .table-header.flex.w-full
-      .flex.items-center.justify-center.pl-11(:style="{width: 'calc(25% + 44px)'}")
+      .flex.items-center.justify-center.pl-11(
+        :style="{width: 'calc(25% + 44px)'}"
+      )
        .text.font-bold Сотрудник
      .column-wrapper.flex
        .schedule-column.flex.flex-col.items-center.justify-center.w-11(
          v-for="day in result",
-          :style="{backgroundColor: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? 'var(--bg-white-color-1)' : ''}"
+          :class="{'column-color': changelColumnColor(day)}",
        )
          .text.flex.font-bold(
            :style="{opacity: changeOpacity(day)}"
@@ -25,11 +27,13 @@
          :key="day",
          :id="schedule.id + day",
          @click="choiceCell(day, schedule.id, schedule)",
-          :class="selectTime(day, schedule.id)",
-          :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day) : ''}"
+          :class="choiceState(day, schedule.id)",
+          :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : ''}"
        ) 
-          .flex {{choiceDay(day, schedule.id) ? choiceWorks(day) : ''}}
-    .schedule-body.flex.w-full(v-if="clearEmployee", :style="{height: '44px'}", v-click-outside="saveEmployee")
+          .flex(
+            :class="{'cell-work': choiceState(day, schedule.id).status}"
+          ) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : ''}}
+    .schedule-body.flex.w-full(v-if="clearEmployee", :style="{height: '44px'}")
      .edit.flex.items-center.justify-center.h-11.w-11(:style="{borderBottom: 'none'}")
        .flex.icon-edit(v-if="currentEmployee.label")
          //- base-button(
@@ -58,7 +62,7 @@
        :key="day",
        :id="currentEmployee.id + day",
        @click="choiceCell(day, currentEmployee.id)",
-        :class="selectTime(day, currentEmployee.id)",
+        :class="choiceState(day, currentEmployee.id)",
        :style="{borderBottom: 'none'}"
      )
 </template>
@@ -133,11 +137,24 @@ export default {
    },
  },
  methods: {
+    changelColumnColor(day) {
+      return day.format("ddd") === "сб" || day.format("ddd") === "вс"
+        ? true
+        : false;
+    },
    setActiveButton() {
      this.activeButton = this.buttons.find((e) => e.active);
    },
    choiceCell(time, id, schedule) {
      let formatTime = time.format("YYYY-MM-DD");
+      let insideSchedules = schedule?.schedules.filter(
+        (el) =>
+          (el.date > this.dateInterval.start &&
+            el.date < this.dateInterval.end) ||
+          el.date === this.dateInterval.start ||
+          el.date === this.dateInterval.end
+      );
+
      if (
        this.dateInterval.start &&
        this.dateInterval.end &&
@@ -147,6 +164,7 @@ export default {
        this.dateInterval.end = "";
        this.dateInterval.id = "";
      }
+
      if (!this.dateInterval.start) {
        this.dateInterval.start = formatTime;
        this.dateInterval.id = id;
@@ -156,43 +174,44 @@ export default {
          this.$emit("new-schedule-employee", this.dateInterval);
        } else this.$emit("schedule-employee", this.dateInterval);
      } else this.dateInterval.start = formatTime;
+
      if (
        !this.currentEmployee.label &&
        this.dateInterval.start &&
-        this.dateInterval.end
+        this.dateInterval.end &&
+        insideSchedules
      )
-        this.rangeSchdedules(schedule);
+        this.rangeSchdedules(schedule, insideSchedules, id);
    },
-    rangeSchdedules(schedule) {
-      let insideSchedules = schedule.schedules.filter(
+    rangeSchdedules(schedule, insideSchedules, id) {
+      insideSchedules = schedule.schedules.filter(
        (el) =>
          (el.date > this.dateInterval.start &&
            el.date < this.dateInterval.end) ||
          el.date === this.dateInterval.start ||
          el.date === this.dateInterval.end
      );
+      if (insideSchedules.length > 0) insideSchedules[0].employeeId = id;
+
      let keys = Object.keys(insideSchedules);
      let outsideSchedules = [];
-      let firstDate = insideSchedules[keys[0]].date;
-      let lastDate = insideSchedules[keys.length - 1].date;
+      let firstDate = insideSchedules[keys[0]]?.date;
+      let lastDate = insideSchedules[keys.length - 1]?.date;

      if (this.dateInterval.start < firstDate) {
        outsideSchedules.push({
-          before: {
-            start_date: this.dateInterval.start,
-            end_date: moment(firstDate).subtract(1, "d").format("YYYY-MM-DD"),
-          },
+          start_date: this.dateInterval.start,
+          end_date: moment(firstDate).subtract(1, "d").format("YYYY-MM-DD"),
        });
      }
      if (this.dateInterval.end > lastDate)
        outsideSchedules.push({
-          after: {
-            start_date: moment(lastDate).add(1, "d").format("YYYY-MM-DD"),
-            end_date: this.dateInterval.end,
-          },
+          start_date: moment(lastDate).add(1, "d").format("YYYY-MM-DD"),
+          end_date: this.dateInterval.end,
        });
+      this.$emit("schedules", insideSchedules, outsideSchedules);
    },
-    selectTime(day, id) {
+    choiceState(day, id) {
      let formatDay = day.format("YYYY-MM-DD");
      let resStart =
        this.dateInterval.start &&
@@ -210,7 +229,7 @@ export default {
        day.isAfter(this.dateInterval.start);

      return {
-        status: !(!resStart && !resMiddle && !resEnd && !!this.activeButton),
+        status: (resStart || resMiddle || resEnd) && !!this.activeButton,
        "from-date": !!resStart && !this.activeButton,
        "to-date": !!resEnd && !this.activeButton,
        "middle-dates": !!resMiddle && !this.activeButton,
@@ -220,19 +239,15 @@ export default {
      this.currentEmployee.label = "";
      this.currentEmployee.id = null;
    },
-    choiceWorks(day) {
+    choiceWorks(day, employee) {
      let currentDay = day.format("YYYY-MM-DD");
-      let res = this.scheduleList.find((e) => e.date === currentDay).status;
-      // if (this.activeButton) {
-      //   return this.buttons.find((e) => e.work === this.activeButton?.text[1])
-      //     ?.text[1];
-      // }
-      return this.buttons.find((e) => e.work === res).text[1];
+      let res = employee.schedules.find((e) => e.date === currentDay)?.status;
+      return this.buttons.find((e) => e.work === res)?.text[1];
    },
-    choiceColor(day) {
+    choiceColor(day, employee) {
      let currentDay = day.format("YYYY-MM-DD");
-      let res = this.scheduleList.find((e) => e.date === currentDay).status;
-      if (res) return this.buttons.find((e) => e.work === res).color;
+      let res = employee.schedules.find((e) => e.date === currentDay)?.status;
+      return this.buttons.find((e) => e.work === res)?.color;
    },
    changeDays() {
      this.days = moment().daysInMonth();
@@ -291,6 +306,9 @@ export default {
 .column-wrapper
  overflow: auto

+.column-color
+  background-color: var(--bg-white-color-1)
+
 .text
  color: var(--btn-blue-color)

@@ -320,17 +338,20 @@ export default {
  height: 500px

 .status
-  background-color: var(--bg-color-status)
+  background-color: var(--bg-color-status) !important
+
+.cell-work
+  display: none

 .status::after
  content: var(--text-status)

 .from-date
-  background-color: limegreen !important
+  background-color: limegreen

 .to-date
-  background-color: red !important
+  background-color: red

 .middle-dates
-  background-color: yellow !important
+  background-color: yellow
 </style>