[WIP] Добавил отображение рабочего времени, фикс create and update

2022-12-30 17:17:11 +03:00
parent c6d13dc26e
commit 76a6099fe7
3 changed files with 94 additions and 56 deletions
--- a/src/pages/schedule/TheSchedule.vue
+++ b/src/pages/schedule/TheSchedule.vue
@@ -4,17 +4,19 @@
      schedule-header(
        :start-month="startMonth",
        :times-shift="timesShift",
+        :change-show-time="changeShowTime",
+        :show-time="showTime"
        @switch-previous-month="switchPreviousMonth",
        @switch-next-month="switchNextMonth"
      )
-      schedule-body(
+      schedule-table(
        :schedules-employee="fetchSchedulesEmployee",
        :schedule-list="scheduleList",
        :serialized="serialized",
        :buttons="buttons",
        :start-month="startMonth",
        :clear-employee="clearEmployee",
-        @new-schedule-employee="createNewScheduleEmployee",
+        :show-time="showTime",
        @schedule-employee="createScheduleEmployee",
        @schedules="distributeRequest"
      )
@@ -29,11 +31,12 @@
 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";
+import ScheduleTable from "@/pages/schedule/components/ScheduleTable.vue";
 import { fetchWrapper } from "@/shared/fetchWrapper.js";
+
 export default {
  name: "TheSchedule",
-  components: { ScheduleHeader, ScheduleBar, ScheduleBody },
+  components: { ScheduleHeader, ScheduleBar, ScheduleTable },
  data() {
    return {
      employeeList: [],
@@ -69,6 +72,9 @@ export default {
        },
      ],
      startMonth: moment().startOf("month"),
+      showTime: false,
+      currentEmployee: {},
+      schedulesDate: {},
    };
  },
  computed: {
@@ -77,6 +83,9 @@ export default {
    },
  },
  methods: {
+    changeShowTime() {
+      this.showTime = !this.showTime;
+    },
    fetchSchedules() {
      fetchWrapper
        .get("general/employee/")
@@ -111,8 +120,8 @@ export default {
            schedules: [
              {
                date: e.date,
-                end_time: e.end_time,
-                start_time: e.start_time,
+                end_time: e.end_time ? e.end_time.slice(0, -3) : "",
+                start_time: e.start_time ? e.start_time.slice(0, -3) : "",
                status: e.status,
                id: e.id,
                title: e.title,
@@ -123,8 +132,8 @@ export default {
        } else {
          foundedElem.schedules.push({
            date: e.date,
-            end_time: e.end_time,
-            start_time: e.start_time,
+            end_time: e.end_time ? e.end_time.slice(0, -3) : "",
+            start_time: e.start_time ? e.start_time.slice(0, -3) : "",
            status: e.status,
            id: e.id,
            title: e.title,
@@ -138,67 +147,65 @@ export default {
    filterEmployee() {
      this.clearEmployee = [];
      this.clearEmployee = this.employeeList.filter((item) =>
-        this.serialized.every((item2) => item2.id !== item.id)
+        this.serialized.every((el) => el.id !== item.id)
      );
    },
-    distributeRequest(inside, outside) {
+    distributeRequest(inside, outside, currentEmployee) {
      this.insideSchedules = inside;
      this.outsideSchedules = outside;
+      this.currentEmployee = currentEmployee;
    },
    postCreateSchedules() {
-      let newSchedule = null;
-      if (this.clearEmployee.find((e) => e.schedules))
-        newSchedule = this.clearEmployee.find((e) => e.schedules);
-      else newSchedule = this.serialized.find((e) => e.schedule);
      let data = {
-        employee: newSchedule.id,
+        employee: this.schedulesDate.id,
        active_flg: true,
        start_time: this.times.start_time,
        end_time: this.times.end_time,
        status: this.buttons.find((e) => e.active).work,
      };
-      if (this.insideSchedules.length > 0) {
+      if (this.insideSchedules?.length > 0) {
        this.postUpdateSchedule();
-        this.outsideSchedules.forEach((el) => {
-          fetchWrapper.post("accounts/schedules/create/", {
-            ...data,
-            start_date: el.start_date,
-            end_date: el.end_date,
+        if (this.outsideSchedules)
+          this.outsideSchedules.forEach((el) => {
+            fetchWrapper.post("accounts/schedules/create/", {
+              ...data,
+              start_date: el.start_date,
+              end_date: el.end_date,
+            });
          });
-        });
      } else {
-        fetchWrapper.post("accounts/schedules/create/", {
-          ...data,
-          start_date:
-            newSchedule.schedules.start_date || newSchedule.schedule.start_date,
-          end_date:
-            newSchedule.schedules.end_date || newSchedule.schedule.end_date,
-        });
+        fetchWrapper
+          .post("accounts/schedules/create/", {
+            ...data,
+            start_date: this.schedulesDate.start_date,
+            end_date: this.schedulesDate.end_date,
+          })
+          .then(() => this.fetchSchedules());
      }
    },
    postUpdateSchedule() {
      let ids = "";
      this.insideSchedules.forEach((e) => (ids += e.id + ","));
      ids = ids.slice(0, -1);
-      fetchWrapper.post(`accounts/schedules/${ids}/update/`, {
-        employee: this.insideSchedules[0].employeeId,
-        active_flg: true,
-        start_time: this.insideSchedules[0].start_time,
-        end_time: this.insideSchedules[0].end_time,
-        status: this.buttons.find((e) => e.active).work,
-      });
+      fetchWrapper
+        .post(`accounts/schedules/${ids}/update/`, {
+          employee: this.insideSchedules[0].employeeId,
+          active_flg: true,
+          start_time: this.times.start_time,
+          end_time: this.times.end_time,
+          status: this.buttons.find((e) => e.active).work,
+        })
+        .then(() => this.fetchSchedules());
    },
-    createNewScheduleEmployee(e) {
+    createScheduleEmployee(e, id) {
      let schedules = {
        start_date: e.start,
        end_date: e.end,
      };
-      this.clearEmployee.find((elem) => elem.id === e.id).schedules = schedules;
-    },
-    createScheduleEmployee(e) {
-      let schedules = {
+      this.schedulesDate = {
        start_date: e.start,
        end_date: e.end,
+        id: id,
      };
      this.serialized.find((elem) => elem.id === e.id).schedule = schedules;
    },
--- a/src/pages/schedule/components/ScheduleHeader.vue
+++ b/src/pages/schedule/components/ScheduleHeader.vue
@@ -29,7 +29,13 @@
          .text.flex.items-center
            .text.font-medium.text-base {{ dateString }}
            .opacity-50.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
-        base-button.font-semibold(:size="40", @click="openForm") Замена смен
+        .flex.gap-x-4
+          base-button.font-semibold(
+            :size="40",
+            :style="{minWidth: '176px'}",
+            @click="changeShowTime"
+          ) {{textButton}}
+          base-button.font-semibold(:size="40", @click="openForm") Замена смен
 </template>

 <script>
@@ -43,6 +49,8 @@ export default {
  props: {
    startMonth: Object,
    timesShift: Object,
+    changeShowTime: Function,
+    showTime: Boolean,
  },
  data() {
    return {
@@ -61,6 +69,9 @@ export default {
        })
        .join(" ");
    },
+    textButton() {
+      return this.showTime ? "Скрыть время" : "Показать время";
+    },
  },
  methods: {
    openForm() {
--- a/src/pages/schedule/components/ScheduleTable.vue
+++ b/src/pages/schedule/components/ScheduleTable.vue
@@ -26,13 +26,14 @@
          v-for="day in result",
          :key="day",
          :id="schedule.id + day",
-          @click="choiceCell(day, schedule.id, schedule); saveEmployee()",
+          @click="choiceCell(day, schedule.id, schedule); clearData()",
          :class="choiceState(day, schedule.id)",
          :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : ''}"
        )
          .flex(
-            :class="{'cell-work': choiceState(day, schedule.id).status}"
+            :class="{'cell-work': choiceState(day, schedule.id).status, 'show-time': showTime}"
          ) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : ''}}
+
    .schedule-select.flex.w-full.pr-2(v-if="clearEmployee")
      .edit.flex.items-center.justify-center.h-11.w-11(v-if="currentEmployee.label")
        .flex.icon-edit(v-if="currentEmployee.label")
@@ -45,7 +46,7 @@
          //-   v-if="currentEmployee.label"
          //- )
            //- .icon-ok.text-xsm(class="pt-[3px]")
-      .name.flex.justify-center.items-center.cursor-pointer(:class="{'select-name': currentEmployee.label}")
+      .text.flex.justify-center.items-center.cursor-pointer(:class="{'select-name': currentEmployee.label}")
        base-custom-select(
          v-if="!currentEmployee.label",
          :items="ownersList",
@@ -71,7 +72,7 @@ import BaseButton from "@/components/base/BaseButton.vue";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";

 export default {
-  name: "ScheduleBody",
+  name: "ScheduleTable",
  components: { BaseModal, BaseButton, BaseCustomSelect },
  props: {
    scheduleList: Array,
@@ -79,6 +80,7 @@ export default {
    buttons: Array,
    startMonth: Object,
    clearEmployee: Array,
+    showTime: Boolean,
  },
  data() {
    return {
@@ -125,6 +127,14 @@ export default {
    },
  },
  methods: {
+    choiceTime(schedule, day) {
+      let currentDay = day.format("YYYY-MM-DD");
+      let start = schedule.schedules.find(
+        (e) => e.date === currentDay
+      )?.start_time;
+      let end = schedule.schedules.find((e) => e.date === currentDay)?.end_time;
+      return `${start} ${end}`;
+    },
    changelColumnColor(day) {
      return day.format("ddd") === "сб" || day.format("ddd") === "вс"
        ? true
@@ -134,6 +144,7 @@ export default {
      this.activeButton = this.buttons.find((e) => e.active);
    },
    choiceCell(time, id, schedule) {
+      if (this.showTime) return;
      let formatTime = time.format("YYYY-MM-DD");
      let insideSchedules = schedule?.schedules.filter(
        (el) =>
@@ -158,9 +169,7 @@ export default {
        this.dateInterval.id = id;
      } else if (time.isAfter(this.dateInterval.start)) {
        this.dateInterval.end = formatTime;
-        if (this.currentEmployee.label) {
-          this.$emit("new-schedule-employee", this.dateInterval);
-        } else this.$emit("schedule-employee", this.dateInterval);
+        this.$emit("schedule-employee", this.dateInterval, id);
      } else this.dateInterval.start = formatTime;

      if (
@@ -197,7 +206,12 @@ export default {
          start_date: moment(lastDate).add(1, "d").format("YYYY-MM-DD"),
          end_date: this.dateInterval.end,
        });
-      this.$emit("schedules", insideSchedules, outsideSchedules);
+      this.$emit(
+        "schedules",
+        insideSchedules,
+        outsideSchedules,
+        this.currentEmployee
+      );
    },
    choiceState(day, id) {
      let formatDay = day.format("YYYY-MM-DD");
@@ -218,16 +232,20 @@ export default {

      return {
        status: (resStart || resMiddle || resEnd) && !!this.activeButton,
+        "set-time": this.showTime,
        "from-date": !!resStart && !this.activeButton,
        "to-date": !!resEnd && !this.activeButton,
        "middle-dates": !!resMiddle && !this.activeButton,
      };
    },
-    saveEmployee() {
+    clearData() {
      this.currentEmployee.label = "";
      this.currentEmployee.id = null;
    },
    choiceWorks(day, employee) {
+      if (this.showTime) {
+        return this.choiceTime(employee, day);
+      }
      let currentDay = day.format("YYYY-MM-DD");
      let res = employee.schedules.find((e) => e.date === currentDay)?.status;
      return this.buttons.find((e) => e.work === res)?.text[1];
@@ -235,6 +253,9 @@ export default {
    choiceColor(day, employee) {
      let currentDay = day.format("YYYY-MM-DD");
      let res = employee.schedules.find((e) => e.date === currentDay)?.status;
+      if (res !== "WORKS" && this.showTime) {
+        return "var(--default-white)";
+      }
      return this.buttons.find((e) => e.work === res)?.color;
    },
    changeDays() {
@@ -315,11 +336,6 @@ export default {
  border-right: 1.5px solid var(--border-light-grey-color-1)
  border-bottom: 1.5px solid var(--border-light-grey-color-1)

-.name
-  color: var(--btn-blue-color)
-  border-bottom: 1.5px solid var(--border-light-grey-color-1)
-  border-right: 1.5px solid var(--border-light-grey-color-1)
-
 .select-name
  width: 25%
  border-right: 1.5px solid var(--border-light-grey-color-1)
@@ -334,6 +350,10 @@ export default {
  border-right: 1.5px solid var(--border-light-grey-color-1)
  border-bottom: 1.5px solid var(--border-light-grey-color-1)

+.show-time
+  text-align: center
+  font-size: 12px
+
 .modal-wrapper
  border: 1.5px solid var(--border-light-grey-color-1)
  border-radius: 4px