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

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>

src/components/base/BaseSelect.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-  .base-select(@click="open = !open", :class="{'open': open }")
+  .base-select(@click="open = !open", :class="{'open': open, 'border-none': borderNone}")
-    .placeholder.text-base {{ value || placeholder }}
+    .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>

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}}
+          ) {{data.label || 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"
-          )
     .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) {
+          if (elem.label) {
-            return elem.name.match(reg);
+            return elem.lebel.match(reg);
           }
           return elem.match(reg);
         });

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(
+      base-select.select(
-        id="owners"
+        v-if="!selectedEventData.employees",
-        :size-input="ownerSelectSize"
+        :items="ownersList",
-        :option-data="ownerName"
+        v-model="employees.employee",
-        :list-data="ownersList"
+        placeholder="Выберите ответственного",
-        :choose-option="chooseOptionOwner"
-        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(
+        base-select.select(
-          id="members"
+          v-if="!selectedEventData.members",
-          :size-input="memberSelectSize"
+          :items="membersList",
-          :list-data="membersList"
+          v-model="members.person",
-          :optionData="memberName"
+          placeholder="Выберите ответственного",
-          :choose-option="chooseOptionMember"
-          @changeInput="addMember"
-          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(
+      base-select.select(
-        id="kind"
+        v-model="kind"
-        :size-input="kindEventSelectSize"
+        :items="kindEvents"
-        :option-data="kind"
-        :list-data="kindEvents"
-        :choose-option="chooseOptionTypeEvent"
         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() {
+    memberName() {
-      if (this.employees.employee) {
+      if (this.selectedEventData.members) {
-        return this.trimOwnerName(this.employees.employee);
+        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() {
+    employeeName() {
-      if (this.members.person) {
+      if (this.selectedEventData.employees) {
-        return this.trimMemberName(this.members.person);
+        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.eventDate &&
-        this.startTime,
+        this.startTime &&
-        this.endTime,
+        this.endTime &&
-        this.employees.employee && this.members.person && this.kind)
+        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) {
+    trimOwnerName(lastName, firsName, patronymic) {
-      return `${obj.last_name} ${obj.first_name[0]}.${obj.patronymic[0]}.`;
+      return `${lastName} ${firsName[0]}.${patronymic[0]}.`;
     },
-    trimMemberName(obj) {
+    trimMemberName(lastName, firsName, patronymic) {
-      return `${obj.last_name} ${obj.first_name} ${obj.patronymic}`;
+      return `${lastName} ${firsName} ${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],
-        };
-      }
     },
     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],
+        employees: this.selectedEventData.employees
-        members: [this.members],
+          ? 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.id = this.eventId;
-          this.kind = this.selectedEventData.kind || "";
+          this.kind = this.eventKind;
-          this.employees = this.selectedEventData.employees[0] || {
+          this.employees = this.eventEmployee;
-            id: null,
+          this.members = this.eventMember;
-            employee: null,
-            role: this.EMPLOYEE_TYPE,
-          };
-          this.members = this.selectedEventData.members[0] || {
-            id: null,
-            person: null,
-            role: this.EMPLOYEE_TYPE,
-          };
         }
       },
     },
@@ -370,4 +437,6 @@ export default {
     color: var(--btn-blue-color)
 .styled-button
   width: 183px
+.select
+  height: 40px
 </style>

src/pages/calendar/components/CalendarSchedule.vue

@@ -113,22 +113,7 @@ export default {
       pixelsPerHour: 62,
       columnHeaderHeight: 48,
       defaultColumnWidth: 470,
-      selectedEvent: {
+      selectedEvent: {},
-        id: null,
-        start: "",
-        end: "",
-        kind: "",
-        employees: {
-          employee: null,
-          role: "owner",
-          id: null,
-        },
-        members: {
-          person: null,
-          role: null,
-          id: null,
-        },
-      },
     };
   },
   computed: {
@@ -324,22 +309,7 @@ export default {
       this.$emit("open-change-form");
     },
     clearSelectedEvent() {
-      this.selectedEvent = {
+      this.selectedEvent = {};
-        id: null,
-        start: "",
-        end: "",
-        kind: "",
-        employees: {
-          employee: null,
-          role: "owner",
-          id: null,
-        },
-        members: {
-          person: null,
-          role: null,
-          id: null,
-        },
-      };
     },
   },
   watch: {