From c54014ad5f8bf0111cffed65b77914c25762345a Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Tue, 15 Nov 2022 12:18:40 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=9F=D0=B5=D1=80=D0=B5=D0=BC=D0=B5?=
 =?UTF-8?q?=D1=81=D1=82=D0=B8=D0=BB=D0=B0=20=D1=84=D0=BE=D1=80=D0=BC=D1=83?=
 =?UTF-8?q?,=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=D0=B0=20click-ou?=
 =?UTF-8?q?tside?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/calendar/TheCalendar.vue            | 26 +++++++++++---
 .../components/CalendarFormAddEvent.vue       |  2 +-
 .../calendar/components/CalendarSchedule.vue  | 34 +++----------------
 3 files changed, 27 insertions(+), 35 deletions(-)

diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 70c60a2..84dc39a 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/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();
diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index a611f65..5e88fac 100644
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/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
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index a7e4716..652b7eb 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/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() {