Merge branch 'UC-190' into 'master'

Resolve UC-190

See merge request andrusyakka/urban-couscous!232

src/pages/schedule/TheSchedule.vue

@@ -16,14 +16,15 @@
         :start-month="startMonth",
         :clear-employee="clearEmployee",
         @new-schedule-employee="createNewScheduleEmployee",
-        @schedule-employee="createScheduleEmployee"
+        @schedule-employee="createScheduleEmployee",
+        @schedules="distributeRequest"
       )
       schedule-bar(
         :data-schedule="dataSchedule",
         :buttons="buttons",
         :clear-employee="clearEmployee",
         :times="times",
-        :create-schedule="postCreateSchedule"
+        :create-schedules="postCreateSchedules"
       )
 </template>
 
@@ -59,7 +60,7 @@ export default {
           text: "'Р'",
         },
         {
-          class: "button-status",
+          class: "button-vacation",
           name: "Отпуск/больничный",
           work: "VACATION",
           active: false,
@@ -140,6 +141,7 @@ export default {
         }
       });
       this.serialized = serialized;
+
       this.filterEmployee();
     },
     filterEmployee() {
@@ -148,39 +150,52 @@ export default {
         this.serialized.every((item2) => item2.id !== item.id)
       );
     },
-    postCreateSchedule() {
+    distributeRequest(inside, outside) {
+      this.insideSchedules = inside;
+      this.outsideSchedules = outside;
+    },
+    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 = {
-      fetchWrapper
-        .post("accounts/schedules/create/", {
         employee: newSchedule.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) {
+        this.postUpdateSchedule();
+        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,
-          start_time: this.times.start_time,
+        });
-          end_time: this.times.end_time,
+      }
-          status: this.buttons.find((e) => e.active).work,
-        })
-        .then(() => this.fetchSchedules());
     },
-    postUpdateSchedule(id) {
+    postUpdateSchedule() {
-      let currentEmployee = this.clearEmployee.find((e) => e.schedules);
+      let ids = "";
-      fetchWrapper
+      this.insideSchedules.forEach((e) => (ids += e.id + ","));
-        .post(`accounts/schedules/${id}/update/`, {
+      ids = ids.slice(0, -1);
-          employee: currentEmployee.id,
+      fetchWrapper.post(`accounts/schedules/${ids}/update/`, {
+        employee: this.insideSchedules[0].employeeId,
         active_flg: true,
-          start_date: currentEmployee.schedules.start_date,
+        start_time: this.insideSchedules[0].start_time,
-          end_date: currentEmployee.schedules.end_date,
+        end_time: this.insideSchedules[0].end_time,
-          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) {
       let schedules = {
@@ -222,5 +237,4 @@ export default {
 
 .schedule-wrapper
   background-color: var(--default-white)
-  height: calc(100vh - 64px)
 </style>

src/pages/schedule/components/FormChangeShift.vue

@@ -9,7 +9,7 @@
     .flex.flex-col.gap-y-6
       .flex.flex-col.gap-y-2
         span.text-smm.font-semibold Дата
-        base-input-date.input-date
+        base-input-date
       .flex.flex-col(class="gap-y-1.5")
         span.text-smm.font-semibold Текущий сотрудник
         base-custom-select.h-10(v-model="currentEmployee")
@@ -58,7 +58,4 @@ export default {
   height: 40px
   border: 1.5px solid var(--border-light-grey-color)
   border-radius: 4px
-
-.input-date
-  border: 1.5px solid var(--border-light-grey-color)
 </style>

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 {
@@ -70,6 +70,7 @@ export default {
   height: 224px
   border: 1.5px solid var(--border-light-grey-color-1)
   border-radius: 4px
+  width: calc(100vw - 136px)
 
 .time-wrapper
   height: 102px
@@ -112,7 +113,7 @@ export default {
     opacity: 0.8
     border: none
 
-.button-status
+.button-vacation
   background: #D7D9FF
   border: none
   &:active

src/pages/schedule/components/ScheduleBody.vue

@@ -1,12 +1,14 @@
 <template lang="pug">
   .schedule.flex-col(:style="themeCell")
-    .table-header.flex.w-full
+    .table-header.flex.w-full.pr-2
-      .flex.items-center.justify-center.pl-11(:style="{width: 'calc(25% + 44px)'}")
+      .flex.items-center.justify-center.pl-11(
+        :style="{width: 'calc(25% + 40px)'}"
+      )
         .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)}"
@@ -14,7 +16,7 @@
           .text.flex.font-bold(
             :style="{opacity: changeOpacity(day)}"
             ) {{day.format("ddd")}}
-    .flex.w-full.flex-col(:style="{overflowY: 'scroll', maxHeight: '351px'}")
+    .schedule-wrapper.flex.w-full.flex-col
       .schedule-body.flex.w-full(v-for="schedule in serialized", :key="schedule.id")
         .edit.flex.items-center.justify-center.h-11.w-11
           .flex.icon-edit
@@ -25,12 +27,14 @@
           :key="day",
           :id="schedule.id + day",
           @click="choiceCell(day, schedule.id, schedule)",
-          :class="selectTime(day, schedule.id)",
+          :class="choiceState(day, schedule.id)",
-          :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day) : ''}"
+          :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : ''}"
         ) 
-          .flex {{choiceDay(day, schedule.id) ? choiceWorks(day) : ''}}
+          .flex(
-    .schedule-body.flex.w-full(v-if="clearEmployee", :style="{height: '44px'}", v-click-outside="saveEmployee")
+            :class="{'cell-work': choiceState(day, schedule.id).status}"
-      .edit.flex.items-center.justify-center.h-11.w-11(:style="{borderBottom: 'none'}")
+          ) {{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")
           //- base-button(
           //-   confirm,
@@ -41,25 +45,22 @@
           //-   v-if="currentEmployee.label"
           //- )
             //- .icon-ok.text-xsm(class="pt-[3px]")
-      .name.flex.justify-center.items-center.cursor-pointer(
+      .name.flex.justify-center.items-center.cursor-pointer(:class="{'select-name': currentEmployee.label}")
-        v-if="currentEmployee.label"
-      )
-        span {{currentEmployee.label}}
-      .name.flex(v-if="!currentEmployee.label")
         base-custom-select(
+          v-if="!currentEmployee.label",
           :items="ownersList",
           v-model="currentEmployee",
           placeholder="Добавить сотрудника",
           :style="{border: 'none', justifyContent: 'center'}"
         )
+        .flex.justify-center(v-else) {{currentEmployee.label}}
       .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)",
+        :class="choiceState(day, currentEmployee.id)"
-        :style="{borderBottom: 'none'}"
       )
 </template>
 
@@ -133,11 +134,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 +161,7 @@ export default {
         this.dateInterval.end = "";
         this.dateInterval.id = "";
       }
+
       if (!this.dateInterval.start) {
         this.dateInterval.start = formatTime;
         this.dateInterval.id = id;
@@ -156,43 +171,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) {
+    rangeSchdedules(schedule, insideSchedules, id) {
-      let insideSchedules = schedule.schedules.filter(
+      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 firstDate = insideSchedules[keys[0]]?.date;
-      let lastDate = insideSchedules[keys.length - 1].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"),
-          },
         });
       }
       if (this.dateInterval.end > lastDate)
         outsideSchedules.push({
-          after: {
           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 +226,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 +236,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;
+      let res = employee.schedules.find((e) => e.date === currentDay)?.status;
-      // if (this.activeButton) {
+      return this.buttons.find((e) => e.work === res)?.text[1];
-      //   return this.buttons.find((e) => e.work === this.activeButton?.text[1])
-      //     ?.text[1];
-      // }
-      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;
+      let res = employee.schedules.find((e) => e.date === currentDay)?.status;
-      if (res) return this.buttons.find((e) => e.work === res).color;
+      return this.buttons.find((e) => e.work === res)?.color;
     },
     changeDays() {
       this.days = moment().daysInMonth();
@@ -274,9 +286,14 @@ export default {
   border: 1.5px solid var(--border-light-grey-color-1)
   border-radius: 4px
   border-right: none
+  border-bottom: none
   min-height: 87px
   width: calc(100vw - 136px)
 
+.schedule-wrapper
+  overflow-y: scroll
+  max-height: 351px
+
 .schedule-body
   &:hover
     background-color: var(--border-light-grey-color-1)
@@ -288,8 +305,17 @@ export default {
   border-top-left-radius: 2px
   border-top-right-radius: 2px
 
+.schedule-select
+  border-top: 1.5px solid var(--border-light-grey-color-1)
+  &:hover
+    background-color: var(--border-light-grey-color-1)
+
 .column-wrapper
   overflow: auto
+  overflow-x: hidden
+
+.column-color
+  background-color: var(--bg-white-color-1)
 
 .text
   color: var(--btn-blue-color)
@@ -299,9 +325,13 @@ export default {
   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)
-  color: var(--btn-blue-color)
 
 .name-employee
   width: 25%
@@ -320,7 +350,10 @@ 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)