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

2023-01-24 16:50:09 +03:00
parent 7d5341e61a
commit a3eb8606f5
8 changed files with 166 additions and 71 deletions
--- a/src/pages/schedule/components/FormChangeShift.vue
+++ b/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-select(
-        v-model="currentEmployee",
+      base-input(
+        label="Дата",
+        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() {
-    return {
-      currentEmployee: { label: "", id: null },
-    };
+  computed: {
+    ownersList() {
+      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>
--- a/src/pages/schedule/components/ScheduleBar.vue
+++ b/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"
          )
--- a/src/pages/schedule/components/ScheduleHeader.vue
+++ b/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");
    },
--- a/src/pages/schedule/components/ScheduleTable.vue
+++ b/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: {
--- a/src/pages/schedule/components/ScheduleTableBody.vue
+++ b/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
-        .flex.icon-edit
+      q-btn(
+        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)
--- a/src/pages/schedule/components/ScheduleTableSelect.vue
+++ b/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(