WIP Переделала передачу данных, исправила форму

2022-11-06 16:30:53 +03:00
parent 5bdb9b20d3
commit 86b4a91d23
5 changed files with 199 additions and 158 deletions
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -4,15 +4,20 @@
      .flex.justify-between.pt-2
        span.text-xs.opacity-40.font-bold.leading-3 Ответственный
        .icon-cancel.close-icon.text-xs.cursor-pointer(@click="clearForm")
-      base-select(
-        id="owners"
-        :size-input="ownerSelectSize"
-        :option-data="ownerName"
-        :list-data="ownersList"
-        :choose-option="chooseOptionOwner"
-        placeholder="Выберите ответственного"
+      base-select.select(
+        v-if="!selectedEventData.employees",
+        :items="ownersList",
+        v-model="employees.employee",
+        placeholder="Выберите ответственного",
        separator
-        disabled
+        border-none
+      )  
+      base-input(
+        v-if="selectedEventData.employees",
+        v-model:value="employeeName",
+        :width-input="72",
+        disabled,
+        border-none
      )
    .flex.flex-col.gap-y-2
      span.text-xs.opacity-40.font-bold.leading-3 Основная информация
@@ -32,27 +37,30 @@
          )
      .flex.gap-x-4.items-center
        .icon-person.text-xl.icon
-        base-select(
-          id="members"
-          :size-input="memberSelectSize"
-          :list-data="membersList"
-          :optionData="memberName"
-          :choose-option="chooseOptionMember"
-          @changeInput="addMember"
-          placeholder="Выберите участника"
+        base-select.select(
+          v-if="!selectedEventData.members",
+          :items="membersList",
+          v-model="members.person",
+          placeholder="Выберите ответственного",
          separator
+          border-none
        )
+        base-input(
+          v-if="selectedEventData.members",
+          v-model:value="memberName",
+          disabled,
+          :width-input="346"
+          border-none
+       )
    .flex.flex-col.gap-y-2
      span.text-xs.opacity-40.font-bold.leading-3 Вид события
-      base-select(
-        id="kind"
-        :size-input="kindEventSelectSize"
-        :option-data="kind"
-        :list-data="kindEvents"
-        :choose-option="chooseOptionTypeEvent"
+      base-select.select(
+        v-model="kind"
+        :items="kindEvents"
        placeholder="Вид события"
        separator
-        disabled
+        border-none
+        :style="kindSelectWidth"
      )
    .flex.flex-col.gap-y-2
      .flex.gap-x-4.items-center
@@ -85,10 +93,10 @@
 </template>

 <script>
-import BaseSelect from "@/components/base/OldBaseSelect";
 import BaseInputTime from "@/components/base/BaseInputTime.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputDate from "@/components/base/BaseInputDate.vue";
+import BaseSelect from "@/components/base/BaseSelect.vue";
 import BaseButton from "@/components/base/BaseButton";
 import * as moment from "moment/moment";
 export default {
@@ -124,9 +132,26 @@ export default {
  data() {
    return {
      listContacts: [1],
-      memberSelectSize: 29,
-      kindEvents: ["Встреча", "Планерка", "Интервью", "Важная работа"],
+      kindEvents: [
+        {
+          id: 1,
+          label: "Встреча",
+        },
+        {
+          id: 2,
+          label: "Планерка",
+        },
+        {
+          id: 3,
+          label: "Интервью",
+        },
+        {
+          id: 4,
+          label: "Важная работа",
+        },
+      ],
      EMPLOYEE_TYPE: "owner",
+      MEMBER_TYPE: "primary",
      eventData: {},
      contacts: [],
      startTime: "",
@@ -146,7 +171,11 @@ export default {
        this.ownersData.forEach((elem) => {
          filteredArray.push({
            id: elem.id,
-            name: this.trimOwnerName(elem),
+            label: this.trimOwnerName(
+              elem.last_name,
+              elem.first_name,
+              elem.patronymic
+            ),
          });
        });
        return filteredArray;
@@ -159,49 +188,59 @@ export default {
        this.membersData.forEach((elem) => {
          filteredArray.push({
            id: elem.id,
-            name: this.trimMemberName(elem),
+            label: this.trimMemberName(
+              elem.last_name,
+              elem.first_name,
+              elem.patronymic
+            ),
            contacts: elem.contacts,
          });
        });
+        console.log(filteredArray);
        return filteredArray;
      }
      return [];
    },
-    ownerName() {
-      if (this.employees.employee) {
-        return this.trimOwnerName(this.employees.employee);
+    memberName() {
+      if (this.selectedEventData.members) {
+        let foundMember = {};
+        if (this.selectedEventData.members.length > 1) {
+          foundMember = this.selectedEventData.members.find(
+            ({ role }) => role === this.MEMBER_TYPE
+          );
+        } else foundMember = this.selectedEventData.members[0];
+        let {
+          person: { last_name, first_name, patronymic },
+        } = foundMember;
+        return this.trimMemberName(last_name, first_name, patronymic);
      }
      return "";
    },
-    memberName() {
-      if (this.members.person) {
-        return this.trimMemberName(this.members.person);
+    employeeName() {
+      if (this.selectedEventData.employees) {
+        let foundEmployee = this.selectedEventData.employees.find(
+          ({ role }) => role === this.EMPLOYEE_TYPE
+        );
+        let {
+          employee: { last_name, first_name, patronymic },
+        } = foundEmployee;
+        return this.trimOwnerName(last_name, first_name, patronymic);
      }
      return "";
    },
    disabledButton() {
      if (
-        (this.eventDate,
-        this.startTime,
-        this.endTime,
-        this.employees.employee && this.members.person && this.kind)
+        this.eventDate &&
+        this.startTime &&
+        this.endTime &&
+        this.members &&
+        this.employees &&
+        this.kind
      ) {
        return false;
      }
      return true;
    },
-    ownerSelectSize() {
-      if (this.ownerName) {
-        return this.ownerName.split(" ").join("").length;
-      }
-      return 22;
-    },
-    kindEventSelectSize() {
-      if (this.kind) {
-        return this.kind.split(" ").join("").length;
-      }
-      return 10;
-    },
    startDate() {
      return this.selectedEventData.start
        ? moment.parseZone(this.selectedEventData.start)
@@ -212,33 +251,38 @@ export default {
        ? moment.parseZone(this.selectedEventData.end)
        : moment();
    },
+    eventEmployee() {
+      if (this.selectedEventData.employees) {
+        return this.selectedEventData.employees;
+      }
+      return {
+        id: null,
+        employee: null,
+        role: this.EMPLOYEE_TYPE,
+      };
+    },
+    eventKind() {
+      return this.selectedEventData.kind ? this.selectedEventData.kind : "";
+    },
+    eventId() {
+      return this.selectedEventData.id ? this.selectedEventData.id : "";
+    },
+    eventMember() {
+      return this.selectedEventData.members
+        ? this.selectedEventData.members
+        : {
+            id: null,
+            person: null,
+            role: this.MEMBER_TYPE,
+          };
+    },
+    kindSelectWidth() {
+      return {
+        width: this.kind ? `${this.kind.length * 9 + 65}px` : "164px",
+      };
+    },
  },
  methods: {
-    chooseOptionOwner(e) {
-      let foundEmployee = this.ownersData.find(
-        (elem) => elem.id === e.target.id
-      );
-      this.employees.employee = {
-        id: foundEmployee.id,
-        last_name: foundEmployee.last_name,
-        first_name: foundEmployee.first_name,
-        patronymic: foundEmployee.patronymic,
-      };
-    },
-    chooseOptionTypeEvent(e) {
-      this.kind = e.target.id;
-    },
-    chooseOptionMember(e) {
-      let foundMember = this.membersData.find(
-        (elem) => elem.id === e.target.id
-      );
-      this.members.person = {
-        id: foundMember.id,
-        last_name: foundMember.last_name,
-        first_name: foundMember.first_name,
-        patronymic: foundMember.patronymic,
-      };
-    },
    addContact(e) {
      if (e.currentTarget.id === "addContact") {
        this.listContacts.push(
@@ -246,22 +290,11 @@ export default {
        );
      }
    },
-    trimOwnerName(obj) {
-      return `${obj.last_name} ${obj.first_name[0]}.${obj.patronymic[0]}.`;
+    trimOwnerName(lastName, firsName, patronymic) {
+      return `${lastName} ${firsName[0]}.${patronymic[0]}.`;
    },
-    trimMemberName(obj) {
-      return `${obj.last_name} ${obj.first_name} ${obj.patronymic}`;
-    },
-    addMember(memberName) {
-      let memberData = memberName.split(" ");
-      if (memberData.length === 3) {
-        this.members.person = {
-          id: null,
-          last_name: memberData[0],
-          first_name: memberData[1],
-          patronymic: memberData[2],
-        };
-      }
+    trimMemberName(lastName, firsName, patronymic) {
+      return `${lastName} ${firsName} ${patronymic}`;
    },
    sendEventData() {
      this.eventData = {
@@ -269,8 +302,20 @@ export default {
        start: this.mergeDate(this.eventDate, this.startTime),
        end: this.mergeDate(this.eventDate, this.endTime),
        kind: this.kind,
-        employees: [this.employees],
-        members: [this.members],
+        employees: this.selectedEventData.employees
+          ? this.employees
+          : this.findEmployee(
+              this.ownersData,
+              this.ownersList,
+              this.employees.employee
+            ),
+        members: this.selectedEventData.members
+          ? this.members
+          : this.findMember(
+              this.membersData,
+              this.membersList,
+              this.members.person
+            ),
      };
      this.clearForm();
      this.eventData = {};
@@ -282,6 +327,36 @@ export default {
    mergeDate(eventDate, time) {
      return moment(`${eventDate} ${time}`).format();
    },
+    findEmployee(requestedList, serializedList, employee) {
+      let foundId = serializedList.find(({ label }) => label === employee).id;
+      let foundPerson = requestedList.find(({ id }) => id === foundId);
+      return {
+        id: this.employees.id,
+        employee: {
+          id: foundPerson.id,
+          last_name: foundPerson.last_name,
+          first_name: foundPerson.first_name,
+          patronymic: foundPerson.patronymic,
+          color: foundPerson.color,
+        },
+        role: this.employees.role,
+      };
+    },
+    findMember(requestedList, serializedList, member) {
+      let foundId = serializedList.find(({ label }) => label === member).id;
+      let foundPerson = requestedList.find(({ id }) => id === foundId);
+      return {
+        id: this.members.id,
+        person: {
+          id: foundPerson.id,
+          last_name: foundPerson.last_name,
+          first_name: foundPerson.first_name,
+          patronymic: foundPerson.patronymic,
+          color: foundPerson.color,
+        },
+        role: this.members.role,
+      };
+    },
  },
  watch: {
    startDate: {
@@ -305,18 +380,10 @@ export default {
      immediate: true,
      handler(newDate) {
        if (newDate) {
-          this.id = this.selectedEventData.id || null;
-          this.kind = this.selectedEventData.kind || "";
-          this.employees = this.selectedEventData.employees[0] || {
-            id: null,
-            employee: null,
-            role: this.EMPLOYEE_TYPE,
-          };
-          this.members = this.selectedEventData.members[0] || {
-            id: null,
-            person: null,
-            role: this.EMPLOYEE_TYPE,
-          };
+          this.id = this.eventId;
+          this.kind = this.eventKind;
+          this.employees = this.eventEmployee;
+          this.members = this.eventMember;
        }
      },
    },
@@ -370,4 +437,6 @@ export default {
    color: var(--btn-blue-color)
 .styled-button
  width: 183px
+.select
+  height: 40px
 </style>
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -113,22 +113,7 @@ export default {
      pixelsPerHour: 62,
      columnHeaderHeight: 48,
      defaultColumnWidth: 470,
-      selectedEvent: {
-        id: null,
-        start: "",
-        end: "",
-        kind: "",
-        employees: {
-          employee: null,
-          role: "owner",
-          id: null,
-        },
-        members: {
-          person: null,
-          role: null,
-          id: null,
-        },
-      },
+      selectedEvent: {},
    };
  },
  computed: {
@@ -324,22 +309,7 @@ export default {
      this.$emit("open-change-form");
    },
    clearSelectedEvent() {
-      this.selectedEvent = {
-        id: null,
-        start: "",
-        end: "",
-        kind: "",
-        employees: {
-          employee: null,
-          role: "owner",
-          id: null,
-        },
-        members: {
-          person: null,
-          role: null,
-          id: null,
-        },
-      };
+      this.selectedEvent = {};
    },
  },
  watch: {