[WIP] Добавил возможность замены смен, фикс стилей

src/pages/login/TheLogin.vue

@@ -141,9 +141,6 @@ export default {
   letter-spacing: 0.02em
   color: var(--font-dark-blue-color)
 
-.input-wrapper
-  border-width: 1.5px
-
 .right-col
   height: 100%
   background-color: var(--font-dark-blue-color)

src/pages/schedule/TheSchedule.vue

@@ -9,9 +9,8 @@
       .relative.flex.flex-col.px-6.py-6.h-full.w-full.gap-y-5(v-else)
         schedule-header(
           :start-month="startMonth",
-          :times-shift="timesShift",
           :change-show-time="changeShowTime",
-          :show-time="showTime"
+          :show-time="showTime",
           @switch-previous-month="switchPreviousMonth",
           @switch-next-month="switchNextMonth"
         )
@@ -21,11 +20,15 @@
           :serialized="serialized",
           :buttons="buttons",
           :start-month="startMonth",
-          :clear-employee="clearEmployee",
+          :employees="employees",
           :show-time="showTime",
           :clear-select="clearSelect",
           :select-employee="selectEmployee",
+          :replacement-sheet="replacementSheet",
           :template="template",
+          :trim-owner-name="trimOwnerName",
+          :open-form="openForm",
+          :change-shift="postUpdateSchedule",
           @schedule-employee="createScheduleEmployee",
           @schedules="distributeRequest"
         )
@@ -62,14 +65,20 @@ export default {
         },
       ],
       scheduleList: [],
-      clearEmployee: [],
+      employees: [],
       serialized: [],
       selectEmployee: {
         label: "",
         id: null,
       },
       times: { start_time: "", end_time: "" },
-      timesShift: { start_time: "", end_time: "" },
+      replacementSheet: {
+        currentEmployee: "",
+        replacementEmployee: "",
+        date: null,
+        start_time: "",
+        end_time: "",
+      },
       buttons: [
         {
           class: "button-work",
@@ -100,6 +109,7 @@ export default {
       startMonth: moment().startOf("month"),
       showTime: false,
       schedulesDate: {},
+      currenSchedule: null,
     };
   },
   computed: {
@@ -111,9 +121,22 @@ export default {
     },
   },
   methods: {
+    openForm(e) {
+      this.currenSchedule = e;
+      this.replacementSheet.currentEmployee = this.trimOwnerName(
+        e.last_name,
+        e.first_name,
+        e.patronymic
+      );
+    },
     changeShowTime() {
       this.showTime = !this.showTime;
     },
+    trimOwnerName(lastName, firstName, patronymic) {
+      let checkedFirstName = firstName !== null ? firstName[0] + "." : "";
+      let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
+      return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
+    },
     clearSelect(employee) {
       if (employee) {
         employee.label = "";
@@ -184,8 +207,8 @@ export default {
       this.filterEmployee();
     },
     filterEmployee() {
-      this.clearEmployee = [];
+      this.employees = [];
-      this.clearEmployee = this.employeeList.filter((item) =>
+      this.employees = this.employeeList.filter((item) =>
         this.serialized.every((el) => el.id !== item.id)
       );
     },
@@ -225,18 +248,34 @@ export default {
       }
     },
     postUpdateSchedule() {
-      let ids = "";
+      if (this.replacementSheet.date) {
-      this.insideSchedules.forEach((e) => (ids += e.id + ","));
+        let scheduleList = this.currenSchedule.schedules.find(
-      ids = ids.slice(0, -1);
+          (el) =>
-      fetchWrapper
+            el.date === moment(this.replacementSheet.date).format("YYYY-MM-DD")
-        .post(`accounts/schedules/${ids}/update/`, {
+        );
-          employee: this.insideSchedules[0].employeeId,
+        fetchWrapper
-          active_flg: true,
+          .post(`accounts/schedules/${scheduleList.id}/update/`, {
-          start_time: this.times.start_time,
+            employee: this.replacementSheet.replacementEmployee.id,
-          end_time: this.times.end_time,
+            active_flg: true,
-          status: this.buttons.find((e) => e.active).work,
+            start_time: this.replacementSheet.start_time,
-        })
+            end_time: this.replacementSheet.end_time,
-        .then(() => this.fetchSchedules());
+            status: scheduleList.status,
+          })
+          .then(() => this.fetchSchedules());
+      } else {
+        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.times.start_time,
+            end_time: this.times.end_time,
+            status: this.buttons.find((e) => e.active).work,
+          })
+          .then(() => this.fetchSchedules());
+      }
     },
     createScheduleEmployee(e, id) {
       this.schedulesDate = {
@@ -271,8 +310,8 @@ export default {
         (minute < 10 ? "0" + minute.toString() : minute);
       this.times.start_time = localDatetime;
       this.times.end_time = localDatetime;
-      this.timesShift.start_time = localDatetime;
+      this.replacementSheet.start_time = localDatetime;
-      this.timesShift.end_time = localDatetime;
+      this.replacementSheet.end_time = localDatetime;
     },
   },
   watch: {

src/pages/schedule/components/FormChangeShift.vue

@@ -5,14 +5,22 @@
       .flex.pt-2
         .icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="closeForm")
     .flex.flex-col.gap-y-6
-      base-input(label="Дата", type="date", outlined)
+      base-input(
-      base-select(
+        label="Дата",
-        v-model="currentEmployee",
+        type="date",
+        v-model="replacementSheet.date",
+        outlined
+      )
+      base-input.input(,
+        type="text"
+        v-model="replacementSheet.currentEmployee",
         label="Текущий сотрудник",
-        placeholder="Выберите сотрудника"
+        outlined,
+        disabled
       )
       base-select(
-        v-model="currentEmployee",
+        :items="ownersList",
+        v-model="replacementSheet.replacementEmployee",
         label="Замена сотрудника",
         placeholder="Выберите сотрудника"
       )
@@ -20,14 +28,14 @@
         base-input(
           type="time",
           label="Начало",
-          v-model="timesShift.start_time",
+          v-model="replacementSheet.start_time",
           outlined
         )
         .flex.items-center.mt-4 —
         base-input(
           type="time",
           label="Конец",
-          v-model="timesShift.end_time",
+          v-model="replacementSheet.end_time",
           outlined
         )
       .flex.justify-center
@@ -36,6 +44,7 @@
           color="primary",
           padding="8px 24px",
           no-caps
+          @click="changeShift(); closeForm()"
         )
 </template>
 
@@ -48,13 +57,41 @@ export default {
   components: { BaseSelect, BaseInput },
   emits: ["update:model-value"],
   props: {
-    timesShift: Object,
+    employees: Array,
+    serialized: Array,
+    replacementSheet: Object,
+    trimOwnerName: Function,
+    changeShift: Function,
     modelValue: Boolean,
   },
-  data() {
+  computed: {
-    return {
+    ownersList() {
-      currentEmployee: { label: "", id: null },
+      if (this.employees) {
-    };
+        let filteredArray = [];
+        this.employees.forEach((elem) => {
+          filteredArray.push({
+            id: elem.id,
+            label: this.trimOwnerName(
+              elem.last_name,
+              elem.first_name,
+              elem.patronymic
+            ),
+          });
+        });
+        this.serialized.forEach((elem) => {
+          filteredArray.push({
+            id: elem.id,
+            label: this.trimOwnerName(
+              elem.last_name,
+              elem.first_name,
+              elem.patronymic
+            ),
+          });
+        });
+        return filteredArray;
+      }
+      return [];
+    },
   },
   methods: {
     closeForm() {
@@ -69,7 +106,7 @@ export default {
   height: fit-content
   width: 534px
   background-color: var(--default-white)
-  box-shadow: var(--default-shadow)
+  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.05)
   border-radius: 4px
   z-index: 5
 </style>

src/pages/schedule/components/ScheduleBar.vue

@@ -26,7 +26,7 @@
             :label="item.name",
             :class="item.class",
             text-color="white",
-            :style="{border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
+            
             no-caps,
             style="width: 200px"
           )

src/pages/schedule/components/ScheduleHeader.vue

@@ -34,17 +34,6 @@
             style="width: 174px"
             @click="changeShowTime",
           )
-          q-btn(
-            label="Замена смен",
-            color="primary",
-            no-caps,
-            padding="8px 24px",
-          )
-            q-menu(v-model="showForm")
-              form-change-shift(
-                v-model="showForm",
-                :times-shift="timesShift"
-              )
 </template>
 
 <script>
@@ -55,14 +44,14 @@ export default {
   name: "ScheduleHeader",
   components: { FormChangeShift },
   props: {
-    startMonth: Object,
-    timesShift: Object,
-    changeShowTime: Function,
     showTime: Boolean,
+    startMonth: Object,
+    replacementSheet: Object,
+    changeShowTime: Function,
+    changeShift: Function,
   },
   data() {
     return {
-      showForm: false,
       isCurrentMonth: true,
     };
   },
@@ -82,9 +71,6 @@ export default {
     },
   },
   methods: {
-    openForm() {
-      this.showForm = true;
-    },
     previousHandler() {
       this.$emit("switch-previous-month");
     },

src/pages/schedule/components/ScheduleTable.vue

@@ -11,12 +11,16 @@
       :choice-state="choiceState",
       :buttons="buttons",
       :show-time="showTime",
-      :schedule-list="scheduleList"
+      :schedule-list="scheduleList",
+      :open-form="openForm",
+      :replacement-sheet="replacementSheet",
+      :employees="employees",
+      :change-shift="changeShift"
     )
     schedule-table-select(
-      v-if="clearEmployee.length > 0",
+      v-if="employees.length > 0",
       :select-employee="selectEmployee",
-      :clear-employee="clearEmployee",
+      :employees="employees",
       :result="result",
       :choice-cell="choiceCell",
       :choice-state="choiceState",
@@ -44,11 +48,15 @@ export default {
     serialized: Array,
     buttons: Array,
     template: Object,
-    clearEmployee: Array,
+    employees: Array,
     showTime: Boolean,
     clearSelect: Function,
     selectEmployee: Object,
     startMonth: Object,
+    trimOwnerName: Function,
+    openForm: Function,
+    replacementSheet: Object,
+    changeShift: Function,
   },
   data() {
     return {
@@ -63,6 +71,7 @@ export default {
       },
       activeButton: null,
       choiceMonth: null,
+      act: null,
     };
   },
   computed: {
@@ -80,6 +89,9 @@ export default {
     setActiveButton() {
       this.activeButton = this.buttons.find((e) => e.active);
     },
+    setActiveCell() {
+      return (this.buttons.find((e) => e.work === "WORKS").active = true);
+    },
     choiceCell(day, id, schedule) {
       if (this.showTime) return;
       let formatTime = day.format("YYYY-MM-DD");
@@ -156,7 +168,7 @@ export default {
 
       if (resStart || resMiddle || resEnd)
         return {
-          "set-template": !!this.template.item?.label,
+          "set-template": !!this.template.item?.label && this.setActiveCell(),
           status: !!this.activeButton,
           "set-date": !this.activeButton,
         };
@@ -171,11 +183,6 @@ export default {
         this.result.push(this.startMonth.clone().add(i - 1, "d"));
       }
     },
-    trimOwnerName(lastName, firstName, patronymic) {
-      let checkedFirstName = firstName !== null ? firstName[0] + "." : "";
-      let checkedPatronymic = patronymic !== null ? patronymic[0] + "." : "";
-      return `${lastName} ${checkedFirstName}${checkedPatronymic}`;
-    },
   },
   watch: {
     startMonth: {

src/pages/schedule/components/ScheduleTableBody.vue

@@ -1,8 +1,24 @@
 <template lang="pug">
   .schedule-wrapper.flex.w-full.flex-col
     .flex.w-full(v-for="schedule in serialized", :key="schedule.id")
-      .edit.flex.items-center.justify-center.h-11.w-11
+      q-btn(
-        .flex.icon-edit
+        flat,
+        class="edit",
+        icon="app:icon-edit",
+        size="12px",
+        no-caps,
+        padding="10px 13px",
+        @click="openForm(schedule)"
+      )
+        q-menu(v-model="showForm")
+          form-change-shift(
+            v-model="showForm",
+            :replacement-sheet="replacementSheet",
+            :employees="employees",
+            :trim-owner-name="trimOwnerName",
+            :serialized="serialized",
+            :change-shift="changeShift"
+          )
       .name-employee.flex.justify-center.items-center.cursor-pointer
         span {{trimOwnerName(schedule.last_name, schedule.first_name, schedule.patronymic)}}
       .row.flex
@@ -20,8 +36,11 @@
 </template>
 
 <script>
+import FormChangeShift from "@/pages/schedule/components/FormChangeShift.vue";
+
 export default {
   name: "ScheduleTableBody",
+  components: { FormChangeShift },
   props: {
     serialized: Array,
     trimOwnerName: Function,
@@ -33,6 +52,15 @@ export default {
     buttons: Array,
     showTime: Boolean,
     scheduleList: Array,
+    openForm: Function,
+    changeShift: Function,
+    replacementSheet: Object,
+    employees: Array,
+  },
+  data() {
+    return {
+      showForm: false,
+    };
   },
   methods: {
     choiceDay(day, employee) {
@@ -80,6 +108,7 @@ export default {
     border-radius: 0
 
 .edit
+  border-radius: 0
   border-right: 1.5px solid var(--border-light-grey-color-1)
   border-bottom: 1.5px solid var(--border-light-grey-color-1)
   border-left: 1.5px solid var(--border-light-grey-color-1)

src/pages/schedule/components/ScheduleTableSelect.vue

@@ -48,14 +48,14 @@ export default {
     result: Array,
     choiceCell: Function,
     choiceState: Function,
-    clearEmployee: Array,
+    employees: Array,
     trimOwnerName: Function,
   },
   computed: {
     ownersList() {
-      if (this.clearEmployee) {
+      if (this.employees) {
         let filteredArray = [];
-        this.clearEmployee.forEach((elem) => {
+        this.employees.forEach((elem) => {
           filteredArray.push({
             id: elem.id,
             label: this.trimOwnerName(