WIP Переместила форму, добавила click-outside

src/pages/calendar/TheCalendar.vue

@@ -13,18 +13,26 @@
       :events-data="eventsData"
       :members-data="membersData"
       :sidebar-width="sidebarWidth"
-      :close-form-create-event="closeFormCreateEvent"
-      :is-open-form="isOpenForm"
       :event-types="eventTypes"
       :change-form-was-closed="changeFormWasClosed"
       @previous-date="switchPreviousDate"
       @next-date="switchNextDate"
       @selected-layout="changeCalendarLayout"
       @open-change-form="openFormCreateEvent"
-      @update-events="fetchEventsData"
-      @close-change-form="setChangeFormState"
       @reset-change-form="resetChangeFormState"
+      @selected-event="writeEventData"
     )
+    calendar-form-add-event(
+        v-if="isOpenForm"
+        :close-form="closeFormCreateEvent"
+        :owners-data="employeesData"
+        :members-data="membersData"
+        :selected-event-data="selectedEvent"
+        :event-types="eventTypes"
+        @clear-selected-event-data="clearSelectedEvent"
+        @update-events="fetchEventsData"
+        @close-change-form="setChangeFormState"
+      )
 </template>
 
 <script>
@@ -32,17 +40,20 @@ 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 {
       sidebarWidth: "72px",
       calendarLayout: "",
       currentDate: moment(),
+      selectedEvent: {},
       timeInformation: {
         dayStartTime: "08:00",
         dayEndTime: "20:00",
@@ -107,6 +118,13 @@ export default {
     resetChangeFormState() {
       this.changeFormWasClosed = false;
     },
+    writeEventData(eventData) {
+      this.selectedEvent = eventData;
+      this.openFormCreateEvent();
+    },
+    clearSelectedEvent() {
+      this.selectedEvent = {};
+    },
   },
   mounted() {
     this.fetchPersonsData();

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.fixed.right-0.bottom-4
+  .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.fixed.right-0.bottom-4(v-click-outside="clearForm")
     .flex.justify-between
       span.title.text-xl.font-bold {{!selectedEventData.id ? "Назначение события" : "Изменение события"}}
       .flex.pt-2

src/pages/calendar/components/CalendarSchedule.vue

@@ -22,7 +22,7 @@
           :style="columnSize"
           :event-types="eventTypes"
           :change-form-was-closed="changeFormWasClosed"
-          @selected-event="writeEventData"
+          @selected-event="transmitEventData"
           @reset-change-form="transmitResetChangeForm"
         )
       .flex.w-full.relative
@@ -46,17 +46,6 @@
             :time-coil="timeCoil"
             :owners-count="ownersCount"
           )
-      calendar-form-add-event(
-        v-if="isOpenForm"
-        :close-form="closeFormCreateEvent"
-        :owners-data="ownersData"
-        :members-data="membersData"
-        :selected-event-data="selectedEvent"
-        :event-types="eventTypes"
-        @clear-selected-event-data="clearSelectedEvent"
-        @update-events="transmitUpdateEvents"
-        @close-change-form="transmitCloseChangeForm"
-      )
 </template>
 
 <script>
@@ -65,7 +54,6 @@ import CalendarHeader from "./CalendarHeader.vue";
 import CalendarBackground from "./CalendarBackground.vue";
 import CalendarClockColumn from "./CalendarClockColumn.vue";
 import CalendarColumn from "./CalendarColumn.vue";
-import CalendarFormAddEvent from "./CalendarFormAddEvent.vue";
 export default {
   name: "CalendarSchedule",
   components: {
@@ -73,7 +61,6 @@ export default {
     CalendarBackground,
     CalendarClockColumn,
     CalendarColumn,
-    CalendarFormAddEvent,
   },
   props: {
     changeFormWasClosed: Boolean,
@@ -108,8 +95,6 @@ export default {
         return [];
       },
     },
-    closeFormCreateEvent: Function,
-    isOpenForm: Boolean,
     eventTypes: {
       type: Array,
       default() {
@@ -127,7 +112,6 @@ export default {
       pixelsPerHour: 62,
       columnHeaderHeight: 48,
       defaultColumnWidth: 470,
-      selectedEvent: {},
       isScrolling: false,
     };
   },
@@ -319,19 +303,6 @@ export default {
       });
       return filteredArray;
     },
-    writeEventData(eventData) {
-      this.selectedEvent = eventData;
-      this.$emit("open-change-form");
-    },
-    clearSelectedEvent() {
-      this.selectedEvent = {};
-    },
-    transmitUpdateEvents() {
-      this.$emit("update-events");
-    },
-    transmitCloseChangeForm() {
-      this.$emit("close-change-form");
-    },
     changeScrollingState(e) {
       this.isScrolling = e.target.scrollTop !== 0;
     },
@@ -346,6 +317,9 @@ export default {
     transmitResetChangeForm() {
       this.$emit("reset-change-form");
     },
+    transmitEventData(eventData) {
+      this.$emit("selected-event", eventData);
+    },
   },
   watch: {
     currentTime() {