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

2022-11-06 16:30:53 +03:00
parent 5bdb9b20d3
commit 86b4a91d23
5 changed files with 199 additions and 158 deletions
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -10,6 +10,7 @@
      @input="$emit('update:value', $event.target.value)"
      :placeholder="placeholder"
      :maxlength="maxLength"
+      :disabled="disabled"
    )
    .slot(v-if="withIcon", :class="iconPosition")
      slot.cursor-pointer
@@ -35,6 +36,7 @@ export default {
    },
    widthInput: Number,
    borderNone: Boolean,
+    disabled: Boolean,
  },
 };
 </script>
@@ -55,4 +57,6 @@ export default {
    opacity: 0
 .border-none
  border: none
+.input
+  background-color: inherit
 </style>
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
-  .base-select(@click="open = !open", :class="{'open': open }")
-    .placeholder.text-base {{ value || placeholder }}
+  .base-select(@click="open = !open", :class="{'open': open, 'border-none': borderNone}")
+    .placeholder.text-base(:class="{'value-color': value}") {{ value || placeholder }}
    span.icon-down-arrow.open-icon(:class="{'open': open }")
    base-menu(v-if="open")
      .items-container(@click="open = false", @mouseleave="leaveSelect")
@@ -19,6 +19,7 @@ export default {
      type: Array,
      default: () => [],
    },
+    borderNone: Boolean,
  },
  emits: ["update:modelValue"],
  data() {
@@ -86,4 +87,13 @@ export default {
  display: flex
  &.open
    transform: rotate(180deg)
+.separator
+  background-color: var(--btn-blue-color-3)
+  height: 24px
+  width: 1px
+  border-radius: 1px
+.border-none
+  border: none
+.value-color
+  opacity: 1
 </style>
--- a/src/components/base/OldBaseSelect.vue
+++ b/src/components/base/OldBaseSelect.vue
@@ -1,9 +1,9 @@
 <template lang="pug">
-  .flex.box-border.container.items-center.cursor-pointer.relative(
+  .flex.box-border.container.items-center.cursor-pointer.relative.py-10px.px-4.justify-between(
    @click="changeSelect"
-    :class="{border: styleBorder, 'py-2.5 px-4':!forNetworks, 'justify-center':forNetworks, 'justify-between':!forNetworks}"
+    :class="{border: styleBorder }"
    )
-    .flex.mr-2(v-if="!forNetworks")
+    .flex.mr-2
      input.text-base.select.cursor-pointer(
          :size="sizeInput"
          v-model="optionData"
@@ -20,25 +20,14 @@
          @click="(e) => chooseOption(e)"
          :key="data.id || data"
          :id="data.id || data"
-          ) {{data.name || data}}
-    .flex.select.cursor-pointer.w-full.text-xl.items-center.networks(v-if="forNetworks" :class="optionData, 'px-2.5'")
-      .absolute.options.top-11.left-0(
-        v-show="isSelectOpen"
-        :id="id")
-        .flex.option.justify-center.py-1.text-xl(
-          v-for="data in listData"
-          @click="(e) => chooseOption(e)"
-          :key="data.network"
-          :id="data.network"
-          :class="data.icon"
-          )
+          ) {{data.label || data}}
    .select-form-separator.cursor-pointer.mr-6px(v-if="separator")
-    .text-xsm.ml-2.pt-1.icon-down-arrow.icon.text-center(v-if="!forNetworks" :class="{ open: isSelectOpen}")
+    .text-xsm.ml-2.pt-1.icon-down-arrow.icon.text-center(:class="{ open: isSelectOpen}")
 </template>

 <script>
 export default {
-  name: "BaseSelect",
+  name: "OldBaseSelect",
  props: {
    id: String,
    styleBorder: {
@@ -48,7 +37,6 @@ export default {
    optionData: String,
    listData: Array,
    chooseOption: Function,
-    forNetworks: Boolean,
    placeholder: {
      type: String,
      default: "",
@@ -67,8 +55,8 @@ export default {
        let filteredList = [];
        filteredList = this.listData.filter((elem) => {
          let reg = new RegExp(`${this.optionData}`, "img");
-          if (elem.name) {
-            return elem.name.match(reg);
+          if (elem.label) {
+            return elem.lebel.match(reg);
          }
          return elem.match(reg);
        });
--- 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: {