From 49ef6e22c30895e95854d813e38858dce2d55f29 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Wed, 16 Nov 2022 17:12:55 +0300
Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D0=B1=D0=B0=D0=B3=20=D1=81=20=D0=BE=D1=82=D1=81?=
 =?UTF-8?q?=D1=83=D1=82=D1=81=D1=82=D0=B2=D0=B8=D0=B5=D0=BC=20=D0=B2=D1=8B?=
 =?UTF-8?q?=D0=B1=D0=BE=D1=80=D0=B0=20=D0=B3=D0=BE=D1=80=D0=BE=D0=B4=D0=B0?=
 =?UTF-8?q?,=20=D1=84=D0=B8=D0=BA=D1=81=20=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB?=
 =?UTF-8?q?=D1=8C=D0=BD=D0=BE=D0=B3=D0=BE=20=D0=BE=D0=BA=D0=BD=D0=B0=20?=
 =?UTF-8?q?=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD=D0=B8=D1=8F=20=D0=BA=D0=BB?=
 =?UTF-8?q?=D0=B8=D0=B5=D0=BD=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LoggedInLayout.vue             | 18 +++++++++++++--
 src/components/TheHeader.vue                  | 16 ++++++++++----
 src/pages/clients/TheClients.vue              | 10 ++++++++-
 src/pages/clients/components/ClientsTable.vue | 19 +++++++++++++++-
 .../clients/components/ClientsWrapper.vue     | 14 ++++++++++--
 .../components/FormCreateAddresses.vue        | 22 +++++++++++++++++--
 6 files changed, 87 insertions(+), 12 deletions(-)

diff --git a/src/components/LoggedInLayout.vue b/src/components/LoggedInLayout.vue
index 6c7c8d7..44ff92e 100644
--- a/src/components/LoggedInLayout.vue
+++ b/src/components/LoggedInLayout.vue
@@ -1,9 +1,9 @@
 <template lang="pug">
 .flex.flex-col.w-full.h-full.gap-y-2
-    the-header
+    the-header(:is-open-create-client="isOpenCreateClient", @is-close-header-form="changeCloseHeaderForm")
     .flex.flex-auto
       the-sidebar
-      router-view
+      router-view(@create-client="transmitOpenCreateClient", :is-close-header-form="isCloseHeaderForm")
 </template>
 
 <script>
@@ -13,5 +13,19 @@ import TheSidebar from "@/components/TheSidebar";
 export default {
   name: "LoggedInLayout",
   components: { TheHeader, TheSidebar },
+  data() {
+    return {
+      isOpenCreateClient: false,
+      isCloseHeaderForm: true,
+    };
+  },
+  methods: {
+    transmitOpenCreateClient(value) {
+      this.isOpenCreateClient = value;
+    },
+    changeCloseHeaderForm(value) {
+      this.isCloseHeaderForm = value;
+    },
+  },
 };
 </script>
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 4f8b174..e1a8edd 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   .header-wrapper.relative.flex.justify-center.box-border.py-2.pl-4_75px.pr-6
-    base-client-form-create(v-if="isOpenCreate", @blure="isOpenCreate=false", :close-form="closeFormCreate")
+    base-client-form-create(v-if="this.isOpenCreateClient || this.isOpenFormCreate", :close-form="closeFormCreate")
     .flex.items-center.box-border.cursor-pointer.mr-auto
       img.logo-img.mr-29_25px(src="@/assets/images/logo.svg", alt="Logo")
       header-inputs
@@ -13,7 +13,7 @@
         :size="40",
         right-icon="icon-person",
         :icon-right-size="18",
-        @click="isOpenCreate=true"
+        @click="openFormCreate"
       )
       button.header-buttons.flex.justify-center.items-center.mr-8.p-0(@click="logout")
         .icon-bell.text-xxl
@@ -34,6 +34,9 @@ import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
 export default {
   name: "TheHeader",
   components: { HeaderInputs, BaseAvatar, BaseButton, BaseClientFormCreate },
+  props: {
+    isOpenCreateClient: Boolean,
+  },
   data() {
     return {
       avatarSrc: img,
@@ -41,12 +44,17 @@ export default {
         avatarSrc: chargePersonAvatar,
         name: "Гордеев Николай Степанович",
       },
-      isOpenCreate: false,
+      isOpenFormCreate: false,
     };
   },
   methods: {
     closeFormCreate() {
-      this.isOpenCreate = false;
+      this.isOpenFormCreate = false;
+      this.$emit("is-close-header-form", this.isOpenFormCreate);
+    },
+    openFormCreate() {
+      this.isOpenFormCreate = true;
+      this.$emit("is-close-header-from", this.isOpenFormCreate);
     },
     logout() {
       localStorage.clear();
diff --git a/src/pages/clients/TheClients.vue b/src/pages/clients/TheClients.vue
index bfe6a5f..c9f0938 100644
--- a/src/pages/clients/TheClients.vue
+++ b/src/pages/clients/TheClients.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  clients-wrapper
+  clients-wrapper(@create-client="transmitOpenCreateForm", :is-close-header-form="isCloseHeaderForm")
 </template>
 
 <script>
@@ -7,5 +7,13 @@ import ClientsWrapper from "@/pages/clients/components/ClientsWrapper";
 export default {
   name: "TheClients",
   components: { ClientsWrapper },
+  props: {
+    isCloseHeaderForm: Boolean,
+  },
+  methods: {
+    transmitOpenCreateForm(value) {
+      this.$emit("create-client", value);
+    },
+  },
 };
 </script>
diff --git a/src/pages/clients/components/ClientsTable.vue b/src/pages/clients/components/ClientsTable.vue
index b9cebc2..7bd219d 100644
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   .wrapper-table.relative.flex.flex-col.gap-y-8.px-6.py-6.h-full.w-full
-    base-client-form-create(v-if="isOpenFormCreate" :close-form="closeFormCreateClient")
+    //- base-client-form-create(v-if="isOpenFormCreate" :close-form="closeFormCreateClient")
     clients-table-hat(:is-open-actions="marked.length" :open-form-create="openFormCreateClient")
     .flex.flex-col.h-full.gap-y-2.table-container.w-full
       clients-table-header(:check="selectedCheck" :is-check="selectAll")
@@ -32,20 +32,27 @@ export default {
     ClientsTableHeader,
     BaseClientFormCreate,
   },
+  props: {
+    isCloseHeaderForm: Boolean,
+  },
+
   data() {
     return {
       isOpenFormCreate: false,
       selectAll: false,
       marked: [],
       dataClients: [],
+      isOpen: false,
     };
   },
   methods: {
     openFormCreateClient() {
       this.isOpenFormCreate = true;
+      this.$emit("create-client", this.isOpenFormCreate);
     },
     closeFormCreateClient() {
       this.isOpenFormCreate = false;
+      this.$emit("create-client", this.isOpenFormCreate);
       this.fetchDataClients();
     },
     saveDataClients(data) {
@@ -79,6 +86,16 @@ export default {
   mounted() {
     this.fetchDataClients();
   },
+  watch: {
+    isCloseHeaderForm: {
+      immediate: true,
+      handler(newValue) {
+        if (newValue === false) {
+          this.closeFormCreateClient();
+        }
+      },
+    },
+  },
 };
 </script>
 
diff --git a/src/pages/clients/components/ClientsWrapper.vue b/src/pages/clients/components/ClientsWrapper.vue
index c0114d1..bf3683a 100644
--- a/src/pages/clients/components/ClientsWrapper.vue
+++ b/src/pages/clients/components/ClientsWrapper.vue
@@ -1,6 +1,10 @@
 <template lang="pug">
   .wrapper.flex.w-full.relative.mx-6
-    clients-table(:open-form-create="openFormCreateClient")
+    clients-table(
+      :open-form-create="openFormCreateClient",
+      @create-client="transmitOpenCreateForm",
+      :is-close-header-form="isCloseHeaderForm"
+    )
 </template>
 
 <script>
@@ -8,9 +12,12 @@ import ClientsTable from "@/pages/clients/components/ClientsTable";
 export default {
   name: "ClientsWrapper",
   components: { ClientsTable },
+  props: {
+    isCloseHeaderForm: Boolean,
+  },
   data() {
     return {
-      isOpenForm: false,
+      isOpenForm: true,
     };
   },
   methods: {
@@ -20,6 +27,9 @@ export default {
     closeFormCreateClient() {
       this.isOpenForm = false;
     },
+    transmitOpenCreateForm(value) {
+      this.$emit("create-client", value);
+    },
   },
 };
 </script>
diff --git a/src/pages/clients/components/FormCreateAddresses.vue b/src/pages/clients/components/FormCreateAddresses.vue
index a9214c9..cd9ae64 100644
--- a/src/pages/clients/components/FormCreateAddresses.vue
+++ b/src/pages/clients/components/FormCreateAddresses.vue
@@ -13,7 +13,14 @@
       .grid.grid-cols-2.gap-y-6.gap-x-4
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm.font-semibold Город
-          base-input.input-info(placeholder="Выберите город")
+          base-input.input-info(placeholder="Выберите город", :items="cities")
+        .flex.flex-col(class="gap-y-1.5")
+          .text-info.text-xxs.font-semibold Город
+          base-select(
+            placeholder="Выберите город",
+            :items="cities",
+            v-model="currentCity"
+          )
         .flex.flex-col(class="gap-y-1.5")
           span.text-sm.font-semibold Область
           base-input.input-info(placeholder="Введите область")
@@ -37,16 +44,27 @@
 <script>
 import BaseButton from "@/components/base/BaseButton";
 import BaseInput from "@/components/base/BaseInput";
+import BaseSelect from "@/components/base/BaseSelect";
 import { mask } from "vue-the-mask";
 export default {
   name: "FormCreateAddresses",
-  components: { BaseInput, BaseButton },
+  components: { BaseInput, BaseButton, BaseSelect },
   props: {
     addresses: Object,
     saveClient: Function,
     saveFile: Function,
   },
   directives: { mask },
+  data() {
+    return {
+      currentCity: "",
+      cities: [
+        { id: 1, label: "Владивосток" },
+        { id: 2, label: "Москва" },
+        { id: 3, label: "Тула" },
+      ],
+    };
+  },
 };
 </script>