From b5aa385d4e6ec6b48df3298e92d0b577c7566d99 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 9 Nov 2022 19:13:06 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B0=20?=
 =?UTF-8?q?=D0=B7=D0=B0=D0=BF=D1=80=D0=B5=D1=82=20=D0=BD=D0=B0=20=20=D0=BE?=
 =?UTF-8?q?=D0=B4=D0=BD=D0=BE=D0=B2=D1=80=D0=B5=D0=BC=D0=B5=D0=BD=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B5=20=D0=BE=D1=82=D0=BA=D1=80=D1=8B=D1=82=D0=B8=D0=B5?=
 =?UTF-8?q?=20=D1=84=D0=BE=D1=80=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LoggedInLayout.vue             | 24 +++++++++++++++++--
 src/components/TheHeader.vue                  | 13 +++++++++-
 src/pages/calendar/TheCalendar.vue            | 13 +++++++++-
 .../components/CalendarFormAddEvent.vue       |  2 +-
 src/pages/clients/TheClients.vue              |  7 +++++-
 src/pages/clients/components/ClientsTable.vue |  5 ++++
 .../clients/components/ClientsWrapper.vue     |  9 +++----
 7 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/src/components/LoggedInLayout.vue b/src/components/LoggedInLayout.vue
index 6c7c8d7..e3d7272 100644
--- a/src/components/LoggedInLayout.vue
+++ b/src/components/LoggedInLayout.vue
@@ -1,9 +1,15 @@
 <template lang="pug">
 .flex.flex-col.w-full.h-full.gap-y-2
-    the-header
+    the-header(
+      :is-open-page-form="isOpenPageForm",
+      @is-open-header-form="changeHeaderFormState"
+    )
     .flex.flex-auto
       the-sidebar
-      router-view
+      router-view(
+        :is-open-header-form="isOpenHeaderForm",
+        @is-open-page-form="changePageFormState",
+      )
 </template>
 
 <script>
@@ -13,5 +19,19 @@ import TheSidebar from "@/components/TheSidebar";
 export default {
   name: "LoggedInLayout",
   components: { TheHeader, TheSidebar },
+  data() {
+    return {
+      isOpenPageForm: false,
+      isOpenHeaderForm: false,
+    };
+  },
+  methods: {
+    changePageFormState(value) {
+      this.isOpenPageForm = value;
+    },
+    changeHeaderFormState(value) {
+      this.isOpenHeaderForm = value;
+    },
+  },
 };
 </script>
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 8d4f529..27c441b 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -13,7 +13,7 @@
         :size="40",
         right-icon="icon-person",
         :icon-right-size="18",
-        @click="isOpenCreate=true"
+        @click="changeFormState"
         )
       button.header-buttons.flex.justify-center.items-center.mr-8.p-0(@click="logout")
         .icon-bell.text-xxl
@@ -34,6 +34,12 @@ import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
 export default {
   name: "TheHeader",
   components: { HeaderInputs, BaseAvatar, BaseButton, BaseClientFormCreate },
+  props: {
+    isOpenPageForm: {
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return {
       avatarSrc: img,
@@ -47,11 +53,16 @@ export default {
   methods: {
     closeFormCreate() {
       this.isOpenCreate = false;
+      this.$emit("is-open-header-form", this.isOpenCreate);
     },
     logout() {
       localStorage.clear();
       this.$router.push("/login");
     },
+    changeFormState() {
+      this.isOpenCreate = !this.isOpenPageForm;
+      this.$emit("is-open-header-form", this.isOpenCreate);
+    },
   },
 };
 </script>
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 52ce866..dbbf066 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -36,6 +36,12 @@ export default {
     CalendarSidebar,
     CalendarFormAddEvent,
   },
+  props: {
+    isOpenHeaderForm: {
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return {
       sidebarWidth: "72px",
@@ -93,16 +99,21 @@ export default {
       this.sidebarWidth = value;
     },
     openFormCreateEvent() {
-      this.isOpenForm = true;
+      this.isOpenForm = !this.isOpenHeaderForm;
+      this.$emit("is-open-page-form", this.isOpenForm);
     },
     closeFormCreateEvent() {
       this.isOpenForm = false;
+      this.$emit("is-open-page-form", this.isOpenForm);
     },
   },
   mounted() {
     this.fetchPersonsData();
     this.fetchEventsData();
   },
+  beforeUnmount() {
+    this.closeFormCreateEvent();
+  },
 };
 </script>
 
diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index 34e4268..a1d9ffe 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.absolute.left-0.top-14
+  .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.absolute.right-0.bottom-14
     .flex.justify-between
       span.title.text-xl.font-bold Назначение события
       .flex.pt-2
diff --git a/src/pages/clients/TheClients.vue b/src/pages/clients/TheClients.vue
index bfe6a5f..b0a6874 100644
--- a/src/pages/clients/TheClients.vue
+++ b/src/pages/clients/TheClients.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  clients-wrapper
+  clients-wrapper(@is-open-client-add-form="transmitPageFormState")
 </template>
 
 <script>
@@ -7,5 +7,10 @@ import ClientsWrapper from "@/pages/clients/components/ClientsWrapper";
 export default {
   name: "TheClients",
   components: { ClientsWrapper },
+  methods: {
+    transmitPageFormState(value) {
+      this.$emit("is-open-page-form", value);
+    },
+  },
 };
 </script>
diff --git a/src/pages/clients/components/ClientsTable.vue b/src/pages/clients/components/ClientsTable.vue
index 357cdfe..c2463bb 100644
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -43,9 +43,11 @@ export default {
   methods: {
     openFormCreateClient() {
       this.isOpenFormCreate = true;
+      this.$emit("is-open-client-add-form", this.isOpenFormCreate);
     },
     closeFormCreateClient() {
       this.isOpenFormCreate = false;
+      this.$emit("is-open-client-add-form", this.isOpenFormCreate);
       this.fetchDataClients();
     },
     saveDataClients(data) {
@@ -79,6 +81,9 @@ export default {
   mounted() {
     this.fetchDataClients();
   },
+  beforeUnmount() {
+    this.closeFormCreateClient();
+  },
 };
 </script>
 
diff --git a/src/pages/clients/components/ClientsWrapper.vue b/src/pages/clients/components/ClientsWrapper.vue
index c0114d1..ee4e3f3 100644
--- a/src/pages/clients/components/ClientsWrapper.vue
+++ b/src/pages/clients/components/ClientsWrapper.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   .wrapper.flex.w-full.relative.mx-6
-    clients-table(:open-form-create="openFormCreateClient")
+    clients-table(@is-open-client-add-form="transmitPageFormState")
 </template>
 
 <script>
@@ -14,11 +14,8 @@ export default {
     };
   },
   methods: {
-    openFormCreateClient() {
-      this.isOpenForm = true;
-    },
-    closeFormCreateClient() {
-      this.isOpenForm = false;
+    transmitPageFormState(value) {
+      this.$emit("is-open-client-add-form", value);
     },
   },
 };