WIP Деактивировала карточку при закрытии формы

src/pages/calendar/TheCalendar.vue

@@ -16,11 +16,14 @@
       :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"
     )
 </template>
 
@@ -49,6 +52,7 @@ export default {
       eventsData: [],
       employeesData: [],
       isOpenForm: false,
+      changeFormWasClosed: false,
       membersData: [],
       eventTypes: [
         { id: 1, label: "Встреча", color: "var(--bg-event-green-color)" },
@@ -99,6 +103,12 @@ export default {
     closeFormCreateEvent() {
       this.isOpenForm = false;
     },
+    setChangeFormState() {
+      this.changeFormWasClosed = true;
+    },
+    resetChangeFormState() {
+      this.changeFormWasClosed = false;
+    },
   },
   mounted() {
     this.fetchPersonsData();

src/pages/calendar/components/CalendarColumn.vue

@@ -20,7 +20,9 @@
         :ownerEvent="event"
         :event-types="eventTypes"
         :style="eventCardPosition(event.start, event.end)"
+        :change-form-was-closed="changeFormWasClosed"
         @selected-event="transmitEventData"
+        @reset-change-form="transmitResetChangeForm"
       )
 </template>
 
@@ -41,6 +43,7 @@ export default {
     dayEndTime: Number,
     dayStartTime: Number,
     eventTypes: Array,
+    changeFormWasClosed: Boolean,
   },
   data() {
     return {
@@ -90,6 +93,9 @@ export default {
     transmitEventData(eventData) {
       this.$emit("selected-event", eventData);
     },
+    transmitResetChangeForm() {
+      this.$emit("reset-change-form");
+    },
   },
 };
 </script>

src/pages/calendar/components/CalendarEventCard.vue

@@ -39,6 +39,7 @@ export default {
   name: "CalendarEventCard",
   components: { CalendarEventDescriptionCard },
   props: {
+    changeFormWasClosed: Boolean,
     ownerEvent: Object,
     eventTypes: {
       type: Array,
@@ -223,6 +224,17 @@ export default {
       this.setDefaultTheme();
     },
   },
+  watch: {
+    changeFormWasClosed: {
+      immediate: true,
+      handler(newValue) {
+        if (newValue === true) {
+          this.setDefaultTheme();
+          this.$emit("reset-change-form");
+        }
+      },
+    },
+  },
 };
 </script>
 

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -320,6 +320,7 @@ export default {
       this.eventData = {};
     },
     clearForm() {
+      if (this.selectedEventData.id) this.$emit("close-change-form");
       this.$emit("clear-selected-event-data");
       this.closeForm();
     },

src/pages/calendar/components/CalendarSchedule.vue

@@ -21,7 +21,9 @@
           :day-end-time="validateEndTime"
           :style="columnSize"
           :event-types="eventTypes"
+          :change-form-was-closed="changeFormWasClosed"
           @selected-event="writeEventData"
+          @reset-change-form="transmitResetChangeForm"
         )
       .flex.w-full.relative
         .time-coil-wrapper.left-0.-mt-12.pt-9
@@ -53,6 +55,7 @@
         :event-types="eventTypes"
         @clear-selected-event-data="clearSelectedEvent"
         @update-events="transmitUpdateEvents"
+        @close-change-form="transmitCloseChangeForm"
       )
 </template>
 
@@ -73,6 +76,7 @@ export default {
     CalendarFormAddEvent,
   },
   props: {
+    changeFormWasClosed: Boolean,
     currentDate: {
       type: Object,
       default() {
@@ -325,6 +329,9 @@ export default {
     transmitUpdateEvents() {
       this.$emit("update-events");
     },
+    transmitCloseChangeForm() {
+      this.$emit("close-change-form");
+    },
     changeScrollingState(e) {
       this.isScrolling = e.target.scrollTop !== 0;
     },
@@ -336,6 +343,9 @@ export default {
         })
       );
     },
+    transmitResetChangeForm() {
+      this.$emit("reset-change-form");
+    },
   },
   watch: {
     currentTime() {