WIP Поправила форму создания, заменила селекты

src/components/base/BaseAddingNetwork.vue

@@ -1,16 +1,16 @@
 <template lang="pug">
   .flex.w-full(class="gap-x-1.5")
     .flex(:id="value.id" @click="(e) => saveNetworkId(e)")
-      base-select(:for-networks="true" :style-border="true" :list-data="listAddingNetworks" :option-data="selectedOption" :choose-option="chooseNetwork" :width-select="42")
+      base-select-networks(:style-border="true" :list-data="listAddingNetworks" :option-data="selectedOption" :choose-option="chooseNetwork" :width-select="42")
     base-input.w-full(v-model:value="value.username" placeholder="Ссылкa")
 </template>
 
 <script>
-import BaseSelect from "@/components/base/OldBaseSelect";
+import BaseSelectNetworks from "@/components/base/BaseSelectNetworks";
 import BaseInput from "@/components/base/BaseInput";
 export default {
   name: "TableAddingNetwork",
-  components: { BaseInput, BaseSelect },
+  components: { BaseInput, BaseSelectNetworks },
   props: {
     saveNetworkId: {
       type: Function,

src/components/base/BaseCustomSelect.vue

@@ -0,0 +1,118 @@
+<template lang="pug">
+  .base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.cursor-pointer.relative(
+    @click="open = !open",
+    :class="{'open': open, 'border-none': borderNone}",
+  )
+    .placeholder.text-base.flex.items-center(
+      :class="{'value-color': value.label || placeholderOpacity}"
+    ) {{ value.label || placeholder }}
+    .flex.items-center
+      .select-form-separator.cursor-pointer.mr-4(v-if="separator")
+      span.icon-down-arrow.open-icon.flex.text-xsm(:class="{'open': open }")
+    base-options(
+      v-if="open",
+    )
+      .items-container.mt-1(
+        @click="closeOptions",
+        v-click-outside="leaveSelect"
+      )
+        .item.py-2.px-4.cursor-pointer(
+          v-for="item in items",
+          :key="item.id"
+          @click="clickItem(item.id, item.label)"
+        ) {{ item.label }}
+</template>
+
+<script>
+import BaseOptions from "@/components/base/BaseOptions.vue";
+export default {
+  name: "BaseCustomSelect",
+  components: { BaseOptions },
+  props: {
+    placeholder: String,
+    modelValue: Object,
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    borderNone: Boolean,
+    separator: Boolean,
+    placeholderOpacity: Boolean,
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      open: false,
+    };
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+  methods: {
+    clickItem(id, label) {
+      this.value = {
+        id: id,
+        label: label,
+      };
+    },
+    leaveSelect() {
+      this.open = false;
+    },
+    closeOptions(e) {
+      e.stopPropagation();
+      this.open = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="sass">
+.base-select
+  width: 100%
+  border: 1.5px solid #D3D4DC
+  border-radius: 4px
+  background-color: white
+  user-select: none
+  &.open
+    border: 1.5px solid #4772F2
+.items-container
+  box-shadow: 1px 1px 8px rgba(37, 40, 80, 0.15)
+  border-radius: 4px
+  background-color: white
+.placeholder
+  color: #090A15
+  opacity: 0.5
+  text-overflow: ellipsis
+  overflow: hidden
+.item
+  border-bottom: 0.5px solid #D3D4DC
+  color: #090A15
+  &:hover
+   background-color: rgba(215, 217, 255, 0.25)
+  &:last-child
+    border-bottom: none
+.open-icon
+  &.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
+.select-form-separator
+  background-color: var(--btn-blue-color-3)
+  height: 24px
+  width: 1px
+  border-radius: 1px
+</style>

src/components/base/BaseOptions.vue

@@ -0,0 +1,31 @@
+<template lang="pug">
+  .base-options(:style="styles")
+    slot
+</template>
+
+<script>
+export default {
+  name: "BaseOptions",
+  computed: {
+    parent() {
+      return this.$parent.$el;
+    },
+    parentSize() {
+      return this.parent?.getBoundingClientRect();
+    },
+    styles() {
+      return {
+        top: this.parentSize.height + "px",
+        left: "-1px",
+        minWidth: this.parentSize.width + "px",
+      };
+    },
+  },
+};
+</script>
+
+<style scoped lang="sass">
+.base-options
+  position: absolute
+  z-index: 10
+</style>

src/components/base/BaseSelectNetworks.vue

@@ -1,27 +1,9 @@
 <template lang="pug">
-  .flex.box-border.container.items-center.cursor-pointer.relative(
+  .flex.box-border.container.items-center.cursor-pointer.justify-center.relative(
     @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.select.cursor-pointer.w-full.text-xl.items-center.networks(:class="optionData, 'px-2.5'")
-      input.text-base.select.cursor-pointer(
-          :size="sizeInput"
-          v-model="optionData"
-          :placeholder="placeholder"
-          :disabled="disabled"
-          @input="sendData"
-        )
-      .absolute.options.top-12.left-0(
-        v-show="isSelectOpen"
-        :id="id"
-        )
-        .option.px-4.py-1(
-          v-for="data in filteredListData"
-          @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")
@@ -33,12 +15,11 @@
           :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}")
 </template>
 
 <script>
 export default {
-  name: "OldBaseSelect",
+  name: "BaseSelectNetworks",
   props: {
     id: String,
     styleBorder: {
@@ -48,7 +29,6 @@ export default {
     optionData: String,
     listData: Array,
     chooseOption: Function,
-    forNetworks: Boolean,
     placeholder: {
       type: String,
       default: "",
@@ -61,36 +41,10 @@ export default {
       isSelectOpen: false,
     };
   },
-  computed: {
-    filteredListData() {
-      if (!this.disabled && this.optionData) {
-        let filteredList = [];
-        filteredList = this.listData.filter((elem) => {
-          let reg = new RegExp(`${this.optionData}`, "img");
-          if (elem.name) {
-            return elem.name.match(reg);
-          }
-          return elem.match(reg);
-        });
-        if (filteredList.length === 0) this.closeSelect();
-        return filteredList;
-      }
-      return this.listData;
-    },
-  },
   methods: {
     changeSelect() {
       this.isSelectOpen = !this.isSelectOpen;
     },
-    openSelect() {
-      this.isSelectOpen = true;
-    },
-    closeSelect() {
-      this.isSelectOpen = false;
-    },
-    sendData(e) {
-      this.$emit("changeInput", e.target.value);
-    },
   },
 };
 </script>

src/pages/calendar/TheCalendar.vue

@@ -32,13 +32,11 @@ import { fetchWrapper } from "../../shared/fetchWrapper.js";
 import * as moment from "moment/moment";
 import CalendarSchedule from "./components/CalendarSchedule.vue";
 import CalendarSidebar from "./components/CalendarSidebar.vue";
-import CalendarFormAddEvent from "./components/CalendarFormAddEvent.vue";
 export default {
   name: "TheCalendar",
   components: {
     CalendarSchedule,
     CalendarSidebar,
-    CalendarFormAddEvent,
   },
   data() {
     return {

src/pages/calendar/components/CalendarEventCard.vue

@@ -23,9 +23,9 @@
     calendar-event-description-card.right-0(
       v-if="isOpenDescriptionCard"
       :style="descriptionCardPosition"
-      :owner-event="this.ownerEvent"
+      :owner-event="ownerEvent"
-      :event-types="this.eventTypes"
+      :event-types="eventTypes"
-      :event-time="this.eventTime"
+      :event-time="eventTime"
       :event-member="eventMember"
       :description="description"
       @selected-event="transmitEventData"

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -7,42 +7,25 @@
     .flex.flex-col.gap-y-8
       .flex.flex-col.gap-y-2
         span.text-xs.opacity-40.font-bold.leading-3 Вид события
-        base-select.select(
+        base-custom-select.select(
           v-model="kind"
           :items="kindEvents"
           placeholder="Вид события"
-          :style="{width: '570px'}"
         )
       .flex.flex-col(class="gap-y-1.5")
         span.text-sm Сотрудник
-        base-select.select(
+        base-custom-select.select(
-          v-if="!selectedEventData.employees",
           :items="ownersList",
           v-model="employees.employee",
           placeholder="Выберите сотрудника"
-        )  
-        base-select.select(
-          v-else,
-          v-model="employees.employee",
-          :items="ownersList",
-          :placeholder="employeeName"
-          placeholderOpacity
         )
       .flex.flex-col(class="gap-y-1.5")
         span.text-sm Клиент
-        base-select.select(
+        base-custom-select.select(
-          v-if="!selectedEventData.members",
           :items="membersList",
           v-model="members.person",
           placeholder="Выберите клиента",
         )
-        base-select.select(
-          v-else,
-          v-model="members.person",
-          :items="membersList",
-          :placeholder="memberName",
-          placeholderOpacity
-        )
     .flex.flex-col.gap-y-8
       .flex.gap-x-4
         .flex.gap-x-2
@@ -70,10 +53,10 @@
       @click="sendEventData"
     ) Создать событие
     base-button.update-button.text-base.font-semibold(
-    v-else,
+      v-else,
-    :size="40",
+      :size="40",
-    :disabled="disabledUpdateButton",
+      :disabled="disabledUpdateButton",
-    @click="updateEventData",
+      @click="updateEventData",
     ) Сохранить
 </template>
 
@@ -83,6 +66,7 @@ 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 BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 import BaseButton from "@/components/base/BaseButton";
 import * as moment from "moment/moment";
 export default {
@@ -93,6 +77,7 @@ export default {
     BaseInput,
     BaseInputDate,
     BaseInputTime,
+    BaseCustomSelect,
   },
   props: {
     closeForm: Function,
@@ -189,41 +174,14 @@ export default {
       }
       return [];
     },
-    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 "";
-    },
-    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 "";
-    },
     disabledCreateButton() {
       if (
         this.eventDate &&
         this.startTime &&
         this.endTime &&
-        this.members.person &&
+        this.members.person.label &&
-        this.employees.employee &&
+        this.employees.employee.label &&
-        this.kind
+        this.kind.label
       ) {
         return false;
       }
@@ -236,7 +194,7 @@ export default {
         this.eventDate === start.format("YYYY-MM-DD") &&
         this.startTime === start.format("HH:mm") &&
         this.endTime === end.format("HH:mm") &&
-        this.kind === this.selectedEventData.kind
+        this.kind.label === this.selectedEventData.kind
       ) {
         return true;
       }
@@ -254,23 +212,69 @@ export default {
     },
     eventEmployee() {
       if (this.selectedEventData.employees) {
-        return this.selectedEventData.employees;
+        let foundEmployee = this.selectedEventData.employees.find(
+          ({ role }) => role === this.EMPLOYEE_TYPE
+        );
+        let {
+          employee: { id, last_name, first_name, patronymic },
+          ...rest
+        } = foundEmployee;
+        return {
+          employee: {
+            id: id,
+            label: this.trimOwnerName(last_name, first_name, patronymic),
+          },
+          id: rest.id,
+          role: rest.role,
+        };
       }
       return {
-        employee: null,
+        employee: {
+          id: null,
+          label: "",
+        },
         role: this.EMPLOYEE_TYPE,
       };
     },
     eventMember() {
-      return this.selectedEventData.members
+      if (this.selectedEventData.members) {
-        ? this.selectedEventData.members
+        let foundMember = {};
-        : {
+        if (this.selectedEventData.members.length > 1) {
-            person: null,
+          foundMember = this.selectedEventData.members.find(
-            role: this.MEMBER_TYPE,
+            ({ role }) => role === this.MEMBER_TYPE
-          };
+          );
+        } else foundMember = this.selectedEventData.members[0];
+        let {
+          person: { id, last_name, first_name, patronymic },
+          ...rest
+        } = foundMember;
+        return {
+          person: {
+            id: id,
+            label: this.trimMemberName(last_name, first_name, patronymic),
+          },
+          id: rest.id,
+          role: rest.role,
+        };
+      }
+      return {
+        person: {
+          id: null,
+          label: "",
+        },
+        role: this.MEMBER_TYPE,
+      };
     },
     eventKind() {
-      return this.selectedEventData.kind ? this.selectedEventData.kind : "";
+      return this.selectedEventData.kind
+        ? {
+            label: this.selectedEventData.kind,
+            id: null,
+          }
+        : {
+            label: "",
+            id: null,
+          };
     },
     eventId() {
       return this.selectedEventData.id ? this.selectedEventData.id : "";
@@ -287,23 +291,11 @@ export default {
       this.eventData = {
         start: this.mergeDate(this.eventDate, this.startTime),
         end: this.mergeDate(this.eventDate, this.endTime),
-        kind: this.kind,
+        kind: this.kind.label,
         employees: [
-          this.findPerson(
+          this.findPerson(this.ownersData, this.employees, "employee"),
-            this.ownersData,
-            this.ownersList,
-            this.employees,
-            "employee"
-          ),
-        ],
-        members: [
-          this.findPerson(
-            this.membersData,
-            this.membersList,
-            this.members,
-            "person"
-          ),
         ],
+        members: [this.findPerson(this.membersData, this.members, "person")],
       };
       this.postCreateEvent(this.eventData);
       this.clearForm();
@@ -313,7 +305,11 @@ export default {
       this.eventData = {
         start: this.mergeDate(this.eventDate, this.startTime),
         end: this.mergeDate(this.eventDate, this.endTime),
-        kind: this.kind,
+        kind: this.kind.label,
+        employees: [
+          this.findPerson(this.ownersData, this.employees, "employee"),
+        ],
+        members: [this.findPerson(this.membersData, this.members, "person")],
       };
       this.postUpdateEvent(this.id, this.eventData);
       this.clearForm();
@@ -327,12 +323,9 @@ export default {
     mergeDate(eventDate, time) {
       return moment(`${eventDate} ${time}`).format("YYYY-MM-DDTHH:mm:ss");
     },
-    findPerson(requestedList, serializedList, object, field) {
+    findPerson(requestedList, object, field) {
-      let foundId = serializedList.find(
+      let foundPerson = requestedList.find(({ id }) => id === object[field].id);
-        ({ label }) => label === object[field]
+      let returnedData = {
-      ).id;
-      let foundPerson = requestedList.find(({ id }) => id === foundId);
-      return {
         [field]: {
           id: foundPerson.id,
           last_name: foundPerson.last_name,
@@ -342,6 +335,8 @@ export default {
         },
         role: object.role,
       };
+      if (object.id) returnedData.id = object.id;
+      return returnedData;
     },
     postCreateEvent(event) {
       fetchWrapper