Merge branch 'UC-201' into 'master'

Resolve UC-201 See merge request andrusyakka/urban-couscous!224
2022-12-26 17:05:03 +00:00
parent 9e7afdadd7 7b462e583f
commit 4afc8d07c8
4 changed files with 120 additions and 83 deletions
--- a/src/pages/clients/components/TableCreatePackageDoc.vue
+++ b/src/pages/clients/components/TableCreatePackageDoc.vue
@@ -37,7 +37,7 @@
      .flex.flex-col.gap-y-6
        .flex.flex-col.gap-y-2
          .font-bold Услуги
-          .counter.text-smm Выберите подходищие из списка
+          .counter.text-smm Выберите подходящие из списка
        .services-wrapper.flex.flex-col.pt-4.px-4
          .flex.gap-x-2
            base-input(
--- a/src/pages/schedule/TheSchedule.vue
+++ b/src/pages/schedule/TheSchedule.vue
@@ -13,9 +13,17 @@
        :serialized="serialized",
        :data-schedule="dataSchedule",
        :buttons="buttons",
-        :start-month="startMonth"
+        :start-month="startMonth",
+        :clear-employee="clearEmployee",
+        @new-date="createNewDate"
+      )
+      schedule-bar(
+        :data-schedule="dataSchedule",
+        :buttons="buttons",
+        :clear-employee="clearEmployee",
+        :times="times",
+        :create-schedule="postCreateSchedule"
      )
-      schedule-bar(:data-schedule="dataSchedule", :select-work="selectWork", :buttons="buttons")
 </template>

 <script>
@@ -31,6 +39,7 @@ export default {
    return {
      employeeList: [],
      scheduleList: [],
+      clearEmployee: [],
      serialized: [],
      dataSchedule: {
        status: "",
@@ -38,6 +47,7 @@ export default {
        startTime: "",
        endTime: "",
      },
+      times: { start_time: "", end_time: "" },
      buttons: [
        {
          class: "button-work",
@@ -45,7 +55,7 @@ export default {
          work: "WORKS",
          active: false,
          color: "#55CD76",
-          text: "Р",
+          text: "'Р'",
        },
        {
          class: "button-status",
@@ -53,15 +63,15 @@ export default {
          work: "VACATION",
          active: false,
          color: "#D7D9FF",
-          text: "О",
+          text: "'О'",
        },
        {
          class: "button-free",
-          name: "Статусы",
+          name: "Выходной",
          work: "DAY_OFF",
          active: false,
          color: "#9294A7",
-          text: "В",
+          text: "'В'",
        },
      ],
      startMonth: moment().startOf("month"),
@@ -83,12 +93,9 @@ export default {
    },
    fetchSchedulesEmployee() {
      this.scheduleList = [];
-      this.employeeList.forEach((e) => {
      fetchWrapper
        .get(
-            `accounts/schedules/?employee=${
-              e.id
-            }&date_after=${this.startMonth.format(
+          `accounts/schedules/?date_after=${this.startMonth.format(
            "YYYY-MM-DD"
          )}&date_before=${this.endMonth.format("YYYY-MM-DD")}`
        )
@@ -96,7 +103,6 @@ export default {
          this.scheduleList.push(...data.results);
        })
        .then(() => this.filterScheduleEmployee());
-      });
    },
    filterScheduleEmployee() {
      let serialized = [];
@@ -133,9 +139,34 @@ export default {
        }
      });
      this.serialized = serialized;
+      this.filterEmployee();
    },
-    selectWork(work) {
-      this.dataSchedule.status = work;
+    filterEmployee() {
+      this.clearEmployee = [];
+      this.clearEmployee = this.employeeList.filter((item) =>
+        this.serialized.every((item2) => item2.id !== item.id)
+      );
+    },
+    postCreateSchedule() {
+      let currentEmployee = this.clearEmployee.find((e) => e.schedules);
+      fetchWrapper
+        .post("accounts/schedules/create/", {
+          employee: currentEmployee.id,
+          active_flg: true,
+          start_date: currentEmployee.schedules.start_date,
+          end_date: currentEmployee.schedules.end_date,
+          start_time: this.times.start_time,
+          end_time: this.times.end_time,
+          status: this.buttons.find((e) => e.active).work,
+        })
+        .then(() => this.fetchSchedules());
+    },
+    createNewDate(e) {
+      let schedules = {
+        start_date: e.start,
+        end_date: e.end,
+      };
+      this.clearEmployee.find((elem) => elem.id === e.id).schedules = schedules;
    },
    switchPreviousMonth() {
      this.startMonth = this.startMonth.clone().subtract(1, "M");
--- a/src/pages/schedule/components/ScheduleBar.vue
+++ b/src/pages/schedule/components/ScheduleBar.vue
@@ -1,20 +1,20 @@
 <template lang="pug">
  .wrapper-bar.flex.flex-col.gap-y-4
-    .flex.px-5.py-5.w-full.justify-around
+    .flex.px-5.py-5.w-full.justify-around.gap-x-4
      .time-wrapper.flex.justify-between
        .flex.flex-col.items-center.py-14px.px-4.gap-y-14px
          .text.text-smm Начало
-          base-input-date.select(v-model:value="dataSchedule.endTime")
+          base-input-time.select(v-model:value="times.start_time")
        .flex.flex-col.items-center.py-14px.px-4.gap-y-14px
          .text.span.text-smm Конец
-          base-input-date.select(v-model:value="dataSchedule.startTime")
+          base-input-time.select(v-model:value="times.end_time")
      .status-wrapper.flex.flex-col
        .flex.justify-center.items-center.h-10
          span.font-semibold Статусы
        .flex.justify-around(class="py-2.5")
          base-button.font-semibold(
            v-for="item in buttons",
-            :class="item.class" ,
+            :class="item.class",
            :key="item",
            :style="{minWidth: '190px', minHeight: '43px', border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
            @click="choiceSchedule(item.class)"
@@ -27,7 +27,7 @@
          placeholder="Шаблоны графиков"
        )
    .flex.justify-center
-      base-button.font-semibold(:size="40") Сохранить
+      base-button.font-semibold(:size="40", @click="createSchedule") Сохранить
 </template>

 <script>
@@ -38,7 +38,13 @@ import BaseInputDate from "@/components/base/BaseInputDate.vue";
 export default {
  name: "ScheduleBar",
  components: { BaseButton, BaseCustomSelect, BaseInputTime, BaseInputDate },
-  props: { dataSchedule: Object, selectWork: Function, buttons: Array },
+  props: {
+    dataSchedule: Object,
+    buttons: Array,
+    clearEmployee: Array,
+    times: Object,
+    createSchedule: Function,
+  },
  data() {
    return {
      scheduleList: [
@@ -66,7 +72,6 @@ export default {
  border-radius: 4px

 .time-wrapper
-  width: 420px
  height: 102px
  border: 1.5px solid var(--border-light-grey-color-1)
  border-radius: 4px
@@ -90,7 +95,7 @@ export default {
  color: var(--font-grey-color)

 .status-wrapper
-  width: 690px
+  min-width: 690px
  height: 102px
  border: 1.5px solid var(--border-light-grey-color-1)
  border-radius: 4px
--- a/src/pages/schedule/components/ScheduleBody.vue
+++ b/src/pages/schedule/components/ScheduleBody.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
  .schedule.flex-col(:style="themeCell")
    .table-header.flex.w-full
-      .flex.items-center(:style="{padding: '16px 102px'}")
+      .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(
@@ -9,18 +9,17 @@
          :style="{backgroundColor: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? 'var(--bg-white-color-1)' : ''}"
        )
          .text.flex.font-bold(
-            @click="selectDay(day.format('D'))"
            :style="{opacity: changeOpacity(day)}"
          ) {{day.format("D")}}
          .text.flex.font-bold(
            :style="{opacity: changeOpacity(day)}"
            ) {{day.format("ddd")}}
    .schedule-body.flex.w-full(v-for="schedule in serialized", :key="schedule.id")
-      .edit.flex.items-center.justify-center.h-9.w-9
+      .edit.flex.items-center.justify-center.h-11.w-11
        .flex.icon-edit
-      .name-employee.flex.justify-center.items-center.cursor-pointer(@click="openSelect(schedule)")
+      .name-employee.flex.justify-center.items-center.cursor-pointer
        span {{trimOwnerName(schedule.last_name, schedule.first_name, schedule.patronymic)}}
-      .cell.flex.flex-col.items-center.justify-center.w-11.cursor-pointer(
+      .cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer(
        v-for="day in result",
        :key="day",
        :id="schedule.id + day",
@@ -29,9 +28,9 @@
        :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
+    .schedule-body.flex.w-full(v-if="clearEmployee")
+      .edit.flex.items-center.justify-center.h-11.w-11(:style="{borderBottom: 'none'}")
+        .flex.icon-edit(v-if="currentEmployee.label")
          //- base-button(
          //-   confirm,
          //-   rounded,
@@ -41,17 +40,25 @@
          //-   v-if="currentEmployee.label"
          //- )
            //- .icon-ok.text-xsm(class="pt-[3px]")
-    //-   .name.flex.justify-center.items-center.cursor-pointer(
-    //-     v-if="currentEmployee.label",
-    //-     @click="openSelect"
-    //-   )
-    //-     span {{currentEmployee.label}}
-    //-   .name.flex(v-if="!currentEmployee.label")
-    //-     base-custom-select(
-    //-       :items="ownersList",
-    //-       v-model="currentEmployee",
-    //-       placeholder="Добавить сотрудника",
-    //-       :style="{border: 'none'}"
+      .name.flex.justify-center.items-center.cursor-pointer(
+        v-if="currentEmployee.label"
+      )
+        span {{currentEmployee.label}}
+      .name.flex(v-if="!currentEmployee.label")
+        base-custom-select(
+          :items="ownersList",
+          v-model="currentEmployee",
+          placeholder="Добавить сотрудника",
+          :style="{border: 'none', justifyContent: 'center'}"
+        )
+      .cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer(
+        v-if="currentEmployee.label",
+        v-for="day in result",
+        :key="day",
+        :id="currentEmployee.id + day",
+        @click="choiceCell(day, currentEmployee.id)",
+        :class="selectTime(day, currentEmployee.id)",
+        :style="{borderBottom: 'none'}"
      )
 </template>

@@ -76,6 +83,7 @@ export default {
    dataSchedule: Object,
    buttons: Array,
    startMonth: Object,
+    clearEmployee: Array,
  },
  data() {
    return {
@@ -99,9 +107,9 @@ export default {
  },
  computed: {
    ownersList() {
-      if (this.employeeList) {
+      if (this.clearEmployee) {
        let filteredArray = [];
-        this.employeeList.forEach((elem) => {
+        this.clearEmployee.forEach((elem) => {
          filteredArray.push({
            id: elem.id,
            label: this.trimOwnerName(
@@ -119,6 +127,7 @@ export default {
      this.setActiveButton();
      return {
        "--bg-color-status": this.activeButton?.color,
+        "--text-status": this.activeButton?.text,
      };
    },
  },
@@ -142,6 +151,7 @@ export default {
        this.dateInterval.id = id;
      } else if (time.isAfter(this.dateInterval.start)) {
        this.dateInterval.end = formatTime;
+        this.$emit("new-date", this.dateInterval);
      } else this.dateInterval.start = formatTime;
    },
    selectTime(day, id) {
@@ -174,13 +184,13 @@ export default {
    },
    choiceWorks(day) {
      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;
+      let res = this.scheduleList.find((e) => e.date === currentDay).status;
+      return this.buttons.find((e) => e.work === res).text[1];
    },
    choiceColor(day) {
      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;
+      let res = this.scheduleList.find((e) => e.date === currentDay).status;
+      return this.buttons.find((e) => e.work === res).color;
    },
    changeDays() {
      this.days = moment().daysInMonth();
@@ -196,29 +206,18 @@ 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]);
-    //   }
-    // },
    choiceDay(day, employee) {
-      let currentDay = day.format("YYYY-MM-DD");
+      let current = day.format("YYYY-MM-DD");
      return this.scheduleList.find(
-        (e) => currentDay === e.date && e.employee.id === employee
+        (e) => current === 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() {
@@ -232,6 +231,7 @@ export default {
 .schedule
  border: 1.5px solid var(--border-light-grey-color-1)
  border-radius: 4px
+  border-right: none
  min-height: 87px
  width: calc(100vw - 136px)

@@ -257,14 +257,12 @@ export default {
  border-bottom: 1.5px solid var(--border-light-grey-color-1)

 .name
-  min-width: 255px
-  max-width: 255px
+  width: 25%
  border-right: 1.5px solid var(--border-light-grey-color-1)
  color: var(--btn-blue-color)

 .name-employee
-  min-width: 255px
-  max-width: 255px
+  width: 25%
  border-right: 1.5px solid var(--border-light-grey-color-1)
  border-bottom: 1.5px solid var(--border-light-grey-color-1)
  color: var(--btn-blue-color)
@@ -282,6 +280,9 @@ export default {
 .status
  background-color: var(--bg-color-status)

+.status::before
+  content: var(--text-status)
+
 .from-date
  background: limegreen