Merge branch 'UC-202' into 'master'

[WIP] Добавил delete, возможность создания события на 1 день, поправил стили,...

See merge request andrusyakka/urban-couscous!244

src/pages/schedule/TheSchedule.vue

@@ -17,6 +17,8 @@
         :start-month="startMonth",
         :clear-employee="clearEmployee",
         :show-time="showTime",
+        :clear-select="clearSelect",
+        :select-employee="selectEmployee",
         @schedule-employee="createScheduleEmployee",
         @schedules="distributeRequest"
       )
@@ -24,6 +26,7 @@
         :buttons="buttons",
         :times="times",
         :create-schedules="postCreateSchedules",
+        :delete-schedule="deleteSchedule"
       )
 </template>
 
@@ -43,6 +46,10 @@ export default {
       scheduleList: [],
       clearEmployee: [],
       serialized: [],
+      selectEmployee: {
+        label: "",
+        id: null,
+      },
       times: { start_time: "", end_time: "" },
       timesShift: { start_time: "", end_time: "" },
       buttons: [
@@ -59,7 +66,7 @@ export default {
           name: "Отпуск/больничный",
           work: "VACATION",
           active: false,
-          color: "#D7D9FF",
+          color: "var(--btn-blue-color-2)",
           text: "'О'",
         },
         {
@@ -73,7 +80,6 @@ export default {
       ],
       startMonth: moment().startOf("month"),
       showTime: false,
-      currentEmployee: {},
       schedulesDate: {},
     };
   },
@@ -86,6 +92,15 @@ export default {
     changeShowTime() {
       this.showTime = !this.showTime;
     },
+    clearSelect(employee) {
+      if (employee) {
+        employee.label = "";
+        employee.id = null;
+      } else {
+        this.selectEmployee.label = "";
+        this.selectEmployeeid = null;
+      }
+    },
     fetchSchedules() {
       fetchWrapper
         .get("general/employee/")
@@ -96,6 +111,7 @@ export default {
     },
     fetchSchedulesEmployee() {
       this.scheduleList = [];
+      this.clearSelect();
       fetchWrapper
         .get(
           `accounts/schedules/?date_after=${this.startMonth.format(
@@ -150,10 +166,9 @@ export default {
         this.serialized.every((el) => el.id !== item.id)
       );
     },
-    distributeRequest(inside, outside, currentEmployee) {
+    distributeRequest(inside, outside) {
       this.insideSchedules = inside;
       this.outsideSchedules = outside;
-      this.currentEmployee = currentEmployee;
     },
     postCreateSchedules() {
       let data = {
@@ -198,16 +213,21 @@ export default {
         .then(() => this.fetchSchedules());
     },
     createScheduleEmployee(e, id) {
-      let schedules = {
-        start_date: e.start,
-        end_date: e.end,
-      };
       this.schedulesDate = {
         start_date: e.start,
-        end_date: e.end,
+        end_date: e.end ? e.end : e.start,
         id: id,
       };
-      this.serialized.find((elem) => elem.id === e.id).schedule = schedules;
+    },
+    deleteSchedule() {
+      let ids = "";
+      if (this.insideSchedules.length > 0) {
+        this.insideSchedules.forEach((e) => (ids += e.id + ","));
+        ids = ids.slice(0, -1);
+        fetchWrapper
+          .del(`accounts/schedules/${ids}/delete/`)
+          .then(() => this.fetchSchedules());
+      }
     },
     switchPreviousMonth() {
       this.startMonth = this.startMonth.clone().subtract(1, "M");

src/pages/schedule/components/ScheduleBar.vue

@@ -15,13 +15,17 @@
             :style="{minWidth: '190px', minHeight: '43px', border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
             @click="choiceSchedule(item.class)"
           ) {{item.name}}
-      .graph-template.flex
+      .graph-template.flex.flex-col.justify-between
         base-custom-select(
           :items="scheduleList",
           center,
           v-model="schedule",
           placeholder="Шаблоны графиков"
         )
+        base-button.delete-button.font-semibold(
+          :size="40",
+          @click="deleteSchedule"
+        ) Удалить
     .flex.justify-center
       base-button.font-semibold(:size="40", @click="createSchedules") Сохранить
 </template>
@@ -38,6 +42,7 @@ export default {
     buttons: Array,
     times: Object,
     createSchedules: Function,
+    deleteSchedule: Function,
   },
   data() {
     return {
@@ -108,14 +113,15 @@ export default {
     border: none
 
 .button-vacation
-  background: #D7D9FF
+  background: var(--btn-blue-color-2)
   border: none
+  opacity: 1
   &:active
-    background-color: #D7D9FF
+    background: var(--btn-blue-color-2)
     opacity: 1
     border: none
   &:hover
-    background-color: #D7D9FF
+    background: var(--btn-blue-color-2)
     opacity: 0.8
     border: none
 
@@ -133,5 +139,9 @@ export default {
 
 .graph-template
   width: 218px
-  height: 40px
+  height: 102px
+
+.delete-button
+  background-color: var(--bg-event-red-color)
+  border: none
 </style>

src/pages/schedule/components/ScheduleTable.vue

@@ -26,42 +26,41 @@
           v-for="day in result",
           :key="day",
           :id="schedule.id + day",
-          @click="choiceCell(day, schedule.id, schedule); clearData()",
+          @click="choiceCell(day, schedule.id, schedule); clearSelect(selectEmployee)",
           :class="choiceState(day, schedule.id)",
           :style="{backgroundColor: choiceDay(day, schedule.id) ? choiceColor(day, schedule) : ''}"
         )
           .flex(
             :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")
+      .edit.flex.items-center.justify-center.h-11.w-11(v-if="selectEmployee.label")
-        .flex.icon-edit(v-if="currentEmployee.label")
+        .flex.icon-edit(v-if="selectEmployee.label")
           //- base-button(
           //-   confirm,
           //-   rounded,
           //-   outlined,
           //-   :size="20",
           //-   @click="saveEmployee",
-          //-   v-if="currentEmployee.label"
+          //-   v-if="selectEmployee.label"
           //- )
             //- .icon-ok.text-xsm(class="pt-[3px]")
-      .text.flex.justify-center.items-center.cursor-pointer(:class="{'select-name': currentEmployee.label}")
+      .text.flex.justify-center.items-center.cursor-pointer(:class="{'select-name': selectEmployee.label}")
         base-custom-select(
-          v-if="!currentEmployee.label",
+          v-if="!selectEmployee.label",
           :items="ownersList",
-          v-model="currentEmployee",
+          v-model="selectEmployee",
           placeholder="Добавить сотрудника",
           :style="{border: 'none', justifyContent: 'center'}"
         )
-        .flex.justify-center(v-else) {{currentEmployee.label}}
+        .flex.justify-center(v-else) {{selectEmployee.label}}
       .cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer(
-        v-if="currentEmployee.label",
+        v-if="selectEmployee.label",
         v-for="day in result",
         :key="day",
-        :id="currentEmployee.id + day",
+        :id="selectEmployee.id + day",
-        @click="choiceCell(day, currentEmployee.id)",
+        @click="choiceCell(day, selectEmployee.id)",
-        :class="choiceState(day, currentEmployee.id)"
+        :class="choiceState(day, selectEmployee.id)"
       )
 </template>
 
@@ -81,16 +80,14 @@ export default {
     startMonth: Object,
     clearEmployee: Array,
     showTime: Boolean,
+    clearSelect: Function,
+    selectEmployee: Object,
   },
   data() {
     return {
       days: "",
       result: [],
       employee: [],
-      currentEmployee: {
-        label: "",
-        id: null,
-      },
       dateInterval: {
         id: "",
         start: "",
@@ -98,6 +95,7 @@ export default {
         text: "",
       },
       activeButton: null,
+      choiceMonth: null,
     };
   },
   computed: {
@@ -143,9 +141,9 @@ export default {
     setActiveButton() {
       this.activeButton = this.buttons.find((e) => e.active);
     },
-    choiceCell(time, id, schedule) {
+    choiceCell(day, id, schedule) {
       if (this.showTime) return;
-      let formatTime = time.format("YYYY-MM-DD");
+      let formatTime = day.format("YYYY-MM-DD");
       let insideSchedules = schedule?.schedules.filter(
         (el) =>
           (el.date > this.dateInterval.start &&
@@ -154,11 +152,7 @@ export default {
           el.date === this.dateInterval.end
       );
 
-      if (
+      if (this.dateInterval.id !== id) {
-        this.dateInterval.start &&
-        this.dateInterval.end &&
-        this.dateInterval.id !== id
-      ) {
         this.dateInterval.start = "";
         this.dateInterval.end = "";
         this.dateInterval.id = "";
@@ -167,13 +161,14 @@ export default {
       if (!this.dateInterval.start) {
         this.dateInterval.start = formatTime;
         this.dateInterval.id = id;
-      } else if (time.isAfter(this.dateInterval.start)) {
+        this.$emit("schedule-employee", this.dateInterval, id);
+      } else if (day.isAfter(this.dateInterval.start)) {
         this.dateInterval.end = formatTime;
         this.$emit("schedule-employee", this.dateInterval, id);
       } else this.dateInterval.start = formatTime;
 
       if (
-        !this.currentEmployee.label &&
+        !this.selectEmployee.label &&
         this.dateInterval.start &&
         this.dateInterval.end &&
         insideSchedules
@@ -206,12 +201,7 @@ export default {
           start_date: moment(lastDate).add(1, "d").format("YYYY-MM-DD"),
           end_date: this.dateInterval.end,
         });
-      this.$emit(
+      this.$emit("schedules", insideSchedules, outsideSchedules);
-        "schedules",
-        insideSchedules,
-        outsideSchedules,
-        this.currentEmployee
-      );
     },
     choiceState(day, id) {
       let formatDay = day.format("YYYY-MM-DD");
@@ -232,16 +222,11 @@ export default {
 
       return {
         status: (resStart || resMiddle || resEnd) && !!this.activeButton,
-        "set-time": this.showTime,
+        "set-date":
-        "from-date": !!resStart && !this.activeButton,
+          (!!resStart || !!resMiddle || !!resEnd) && !this.activeButton,
-        "to-date": !!resEnd && !this.activeButton,
-        "middle-dates": !!resMiddle && !this.activeButton,
       };
     },
-    clearData() {
+
-      this.currentEmployee.label = "";
-      this.currentEmployee.id = null;
-    },
     choiceWorks(day, employee) {
       if (this.showTime) {
         return this.choiceTime(employee, day);
@@ -259,9 +244,10 @@ export default {
       return this.buttons.find((e) => e.work === res)?.color;
     },
     changeDays() {
-      this.days = moment().daysInMonth();
+      this.days = moment(this.choiceMonth, "YYYY-MM-DD").daysInMonth();
     },
     pushMonth() {
+      this.result = [];
       this.result.push(this.startMonth);
       for (let i = 2; i <= this.days; i++) {
         this.result.push(this.startMonth.clone().add(i - 1, "d"));
@@ -285,7 +271,18 @@ export default {
         : "1";
     },
   },
-
+  watch: {
+    startMonth: {
+      immediate: true,
+      handler(newMonth) {
+        if (newMonth) {
+          this.choiceMonth = newMonth.format("YYYY-MM-DD");
+          this.changeDays();
+          this.pushMonth();
+        }
+      },
+    },
+  },
   mounted() {
     this.changeDays();
     this.pushMonth();
@@ -318,7 +315,6 @@ export default {
   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)
 
@@ -339,6 +335,7 @@ export default {
 .select-name
   width: 25%
   border-right: 1.5px solid var(--border-light-grey-color-1)
+  border-bottom: 1.5px solid var(--border-light-grey-color-1)
 
 .name-employee
   width: 25%
@@ -369,12 +366,6 @@ export default {
 .status::after
   content: var(--text-status)
 
-.from-date
+.set-date
-  background-color: limegreen !important
+  background-color: var(--btn-blue-color-4) !important
-
-.to-date
-  background-color: red !important
-
-.middle-dates
-  background-color: yellow !important
 </style>