Добавил окно создания события

src/pages/calendar/TheCalendar.vue

@@ -1,6 +1,8 @@
 <template lang="pug">
   .calendar-container.flex
-    calendar-sidebar(@width="changeWidth" :team-data="teamData")
+    calendar-sidebar(@width="changeWidth"
+    :team-data="teamData"
+    :open-form-create="openFormCreateEvent")
     calendar-schedule(
       :current-date="currentDate"
       :time-information="timeInformation"
@@ -10,15 +12,21 @@
       @next-date="switchNextDate"
       @selected-layout="changeCalendarLayout"
       )
+    calendar-form-add-event(v-if="isOpenForm" :close-form="closeFormCreateEvent")
 </template>
 
 <script>
 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 },
+  components: {
+    CalendarSchedule,
+    CalendarSidebar,
+    CalendarFormAddEvent,
+  },
   data() {
     return {
       sidebarWidth: "72px",
@@ -30,6 +38,7 @@ export default {
       },
       eventsData: [],
       teamData: [],
+      isOpenForm: false,
     };
   },
   methods: {
@@ -59,6 +68,13 @@ export default {
     changeWidth(value) {
       this.sidebarWidth = value;
     },
+
+    openFormCreateEvent() {
+      this.isOpenForm = true;
+    },
+    closeFormCreateEvent() {
+      this.isOpenForm = false;
+    },
   },
   mounted() {
     this.fetchEventsData();

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -1,17 +1,14 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-6.pt-5.pb-6.px-8.event-form(v-if="formOpen" )
+  .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.absolute.right-2.bottom-14
     .flex.flex-col.gap-y-2
       .flex.justify-between.pt-2
         span.not-italic.text-xs.opacity-40.leading-3 Ответственный
-        .icon-cancel.close-icon.text-xs.cursor-pointer(@click="closeEventForm")
+        .icon-cancel.close-icon.text-xs.cursor-pointer(@click="closeForm")
-      base-select(
+      base-select.ba-sel(
-        id="responsible"
         width="205px"
         :option-data="eventData.responsible"
         :list-data="listResponsible"
-        :choose-option="chooseOption"
+        :choose-option="chooseOptionResponsible"
-        :is-open="selectResponsibleOpen"
-        :select-open="openSelectResponsible"
       )
     .flex.flex-col.gap-y-2
       span.not-italic.text-xs.opacity-40.leading-3 Основная информация
@@ -27,53 +24,63 @@
         .icon-person.text-xl.icon
         .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
           input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
-    .flex.flex-col.gap-y-2(class='additional-information')
+    //- .flex.flex-col.gap-y-2(class='additional-information')
-      .flex.gap-x-4.items-center
+      //- .flex.gap-x-4.items-center
-        span.not-italic.text-xs.opacity-40.leading-3 Дополнительная информация
+      //-   span.not-italic.text-xs.opacity-40.leading-3 Дополнительная информация
-        button-plus(id="addInfo" @click="(e)=>addFriendInfo(e)")
+      //-   button-plus(id="addInfo" @click="(e)=>addFriendInfo(e)")
-      .flex.gap-x-4.items-center(v-for="(info, index) in listFriendInfo" :key="index")
+      //-   base-button(
-        span.ml-1 {{info}}
+            left-icon="icon-plus"
-        .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
+            rounded secondary
-          input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.friendInfo[info]" type="text" placeholder="Что-то важное")
+            :size="24"
+            :icon-left-size="10"
+            id="addInfo"
+            @click="(e)=>addFriendInfo(e)")
+      //- .flex.gap-x-4.items-center(v-for="(info, index) in listFriendInfo" :key="index")
+      //-   span.ml-1 {{info}}
+      //-   .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
+      //-     input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.friendInfo[info]" type="text" placeholder="Что-то важное")
     .flex.flex-col.gap-y-2
       span.not-italic.text-xs.opacity-40.leading-3 Вид события
       base-select(
-        id="kind"
         width="118px"
         :option-data="eventData.kindEvent"
         :list-data="kindEvents"
-        :choose-option="chooseOption"
+        :choose-option="chooseOptionTypeEvent"
-        :is-open="selectKindEventOpen"
-        :select-open="openSelectKindEvent"
       )
     .flex.flex-col.gap-y-2
       .flex.gap-x-4.items-center
         span.not-italic.text-xs.opacity-40.leading-3 Контакты
-        button-plus(id="addContact" @click="(e)=>addFriendInfo(e)")
+        base-button(
+        left-icon="icon-plus"
+        rounded secondary
+        :size="24"
+        :icon-left-size="10"
+        id="addContact"
+        @click="(e)=>addFriendInfo(e)")
       .flex.gap-x-4.items-center(v-for="(contact, index) in listContacts" :key="index")
         .icon-mail.text-xl.icon
         .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
           input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
-    add-event-button(@click="createEvent")
+    base-button.styled-button.not-italic.text-base.font-semibold(
+    :size="40"
+    @click="closeForm"
+    ) Создать событие
 </template>
 
 <script>
 import BaseSelect from "@/components/base/BaseSelect";
-import AddEventButton from "@/components/base/buttons/BaseCreateButton";
+import BaseButton from "@/components/base/BaseButton";
-import ButtonPlus from "@/components/base/buttons/BaseButtonPlus";
 export default {
   name: "FormChangeEvent",
-  components: { AddEventButton, ButtonPlus, BaseSelect },
+  components: { BaseSelect, BaseButton },
   props: {
+    closeForm: Function,
     listResponsible: {
       default: ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."],
     },
   },
   data() {
     return {
-      formOpen: true,
-      selectResponsibleOpen: false,
-      selectKindEventOpen: false,
       listFriendInfo: [1],
       listContacts: [1],
       kindEvents: ["Встреча", "Планерка", "Интервью", "Важная работа"],
@@ -84,15 +91,18 @@ export default {
           firstTime: "11:00",
           secondTime: "12:30",
         },
-        friendInfo: {},
+        // friendInfo: {},
         kindEvent: "Вид события",
         contacts: {},
       },
     };
   },
   methods: {
-    createEvent() {
+    chooseOptionResponsible(e) {
-      this.formOpen = !this.formOpen;
+      this.eventData.responsible = e.target.id;
+    },
+    chooseOptionTypeEvent(e) {
+      this.eventData.kindEvent = e.target.id;
     },
     addFriendInfo(e) {
       if (e.currentTarget.id === "addInfo") {
@@ -106,34 +116,20 @@ export default {
         );
       }
     },
-    closeEventForm() {
-      this.formOpen = !this.formOpen;
-    },
-    openSelectResponsible() {
-      this.selectResponsibleOpen = !this.selectResponsibleOpen;
-    },
-    openSelectKindEvent() {
-      this.selectKindEventOpen = !this.selectKindEventOpen;
-    },
-    chooseOption(event) {
-      if (event.currentTarget.id === "responsible") {
-        this.eventData.responsible = this.listResponsible[event.target.id];
-      }
-      if (event.currentTarget.id === "kind") {
-        this.eventData.kindEvent = this.kindEvents[event.target.id];
-      }
-    },
   },
 };
 </script>
 
 <style lang="sass" scoped>
+.ba-sel
+  color: red
 .event-form
   height: fit-content
   min-width: 448px
   background-color: var(--default-white)
   box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
   border-radius: 4px
+  z-index: 5
 
 .form-item
   border-radius: 4px
@@ -161,4 +157,6 @@ export default {
   color: var(--font-dark-blue-color)
   &:hover
     color: var(--btn-blue-color)
+.styled-button
+  width: 183px
 </style>

src/pages/calendar/components/CalendarSidebar.vue

@@ -2,7 +2,7 @@
   .sidebar.flex.flex-col.bg-white(:class="openSidebar")
     .sidebar-wrapper.h-full.my-13px.flex.flex-col.justify-between(:style="sidebarWidth")
       .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px(v-if="!isOpen")
-        base-button(left-icon="icon-plus", rounded, :size="40", :icon-left-size="10" )
+        base-button(left-icon="icon-plus", rounded, :size="40", :icon-left-size="10" @click="openFormCreate" )
         .flex.flex-col.items-center(v-if="!isOpen")
           base-button(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary )
           .flex.flex-col.gap-y-2.items-center.mt-4
@@ -11,11 +11,10 @@
         .flex.flex-col.items-center.gap-y-2.justify-center
           base-button.mb-2(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary )
           .team-card(v-for="teammate in teamData" :key="teammate.id")
-            img.avatar-wrapper(:src="avatar" alt="Team member")
+            BaseAvatar(:size="32")
+              img(:src="avatar" alt="Team member")
       .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px(v-else)
-        .create-event.flex.items-center.justify-center
+        base-button(right-icon="icon-plus", split, :size="40", :icon-right-size="10", @click="openFormCreate" ) Создать событие
-          base-button(right-icon="icon-plus", split, :size="40", :icon-right-size="10" ) Создать событие
-
         .flex.items-center.flex-col.gap-y-4
           .events-wrapper.flex.items-center.justify-between
             .flex {{ "Виды событий" }}
@@ -36,7 +35,8 @@
               v-for="teammate in teamData"
               :key="teammate.id")
               .flex.items-center
-                img.avatar-wrapper(:src="avatar" alt="Team member")
+                BaseAvatar(:size="32")
+                  img(:src="avatar" alt="Team member")
                 .flex.ml-2.not-italic.font-medium.text-xxs {{ changeName(teammate.last_name, teammate.first_name, teammate.patronymic) }}
               span.icon-change-place.cursor-pointer.w-5.flex.items-center.justify-center.w-6.h-6
       .button-wrapper.flex.justify-center.mb-23px
@@ -49,6 +49,7 @@ import BaseOpenButton from "../../../components/base/buttons/BaseOpenButton.vue"
 import BaseCreateButton from "../../../components/base/buttons/BaseCreateButton.vue";
 import img from "../../../assets/images/team-member.svg";
 import BaseButton from "@/components/base/BaseButton";
+import BaseAvatar from "@/components/base/BaseAvatar";
 
 export default {
   name: "CalendarSidebar",
@@ -57,9 +58,11 @@ export default {
     BaseButtonPlus,
     BaseOpenButton,
     BaseCreateButton,
+    BaseAvatar,
   },
   props: {
     teamData: Array,
+    openFormCreate: Function,
   },
   data() {
     return {