From 1283ea08f5cf2403dc0632b92e2afb6245d40a6d Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 18 Jan 2023 16:37:56 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=A4=D0=BE=D1=80=D0=BC=D0=B0=20=D1=81?=
 =?UTF-8?q?=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD=D0=B8=D1=8F=20=D0=BA=D0=BB=D0=B8?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=82=D0=B0=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B4=D0=B5?=
 =?UTF-8?q?=D0=BB=D0=B0=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TheSidebar.vue                 |  8 +-
 src/components/base/BaseClientFormCreate.vue  | 93 +++++++++----------
 .../components/FormCreateAddresses.vue        | 10 +-
 .../components/FormCreateBasicInfo.vue        | 11 +--
 .../FormCreateIdentityDocuments.vue           | 12 +--
 5 files changed, 61 insertions(+), 73 deletions(-)

diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index 87f954c..b509beb 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -3,7 +3,7 @@
     :style="{borderTopRightRadius: this.currenPageBorder ? '0px' : '4px'}"
   )
     .flex.flex-col.gap-y-6
-      the-button-sidebar(
+      base-button-sidebar(
         v-for="button in pageSettings.filter((el) => el.id !== 'settings')",
         :path="button.path",
         :id="button.id",
@@ -12,7 +12,7 @@
       )
         q-icon(:name="`app:${button.icon}`", size="36px")
     .flex.text-4xl.flex-col.gap-y-6
-      the-button-sidebar(
+      base-button-sidebar(
         :path="getSettings.path",
         :id="getSettings.id",
         :active="getSettings.active",
@@ -22,11 +22,11 @@
 </template>
 
 <script>
-import TheButtonSidebar from "@/components/base/BaseSidebarButton";
+import BaseButtonSidebar from "@/components/base/BaseSidebarButton";
 
 export default {
   name: "TheSidebar",
-  components: { TheButtonSidebar },
+  components: { BaseButtonSidebar },
   data() {
     return {
       pageSettings: [
diff --git a/src/components/base/BaseClientFormCreate.vue b/src/components/base/BaseClientFormCreate.vue
index b76514f..5495495 100644
--- a/src/components/base/BaseClientFormCreate.vue
+++ b/src/components/base/BaseClientFormCreate.vue
@@ -1,10 +1,10 @@
 <template lang="pug">
-  .wrapper-create.flex.flex-col.fixed.right-6.bottom-6.px-4.py-7.gap-y-8(
+  .wrapper-create.flex.flex-col.fixed.right-6.bottom-6.px-8.py-7.gap-y-8(
     v-click-outside="closeModal"
   )
     .icon-cancel.close.absolute.top-5.right-5.cursor-pointer(@click="closeForm")
-    span.title.text-xl.font-bold.px-4 Создание клиента
-    .flex.gap-x-4.h-fit.px-4
+    span.title.text-xl.font-bold Создание клиента
+    .flex.gap-x-4.h-fit
       .flex.gap-x-3.w-full
         q-btn.relative(
           color="secondary",
@@ -55,43 +55,36 @@
                   )
         base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*")
     .flex.flex-col.flex-auto.l.gap-y-8
-      .flex.px-4
+      .flex
         button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
-          v-for="info in listInfoTitle",
-          @click="(e) => selectTab(e)",
-          :class="{active:info.active}",
-          :key="info.key" :id="info.key"
-        ) {{info.title}}
-      .flex(:style="{display :'block'}" ref="basic")
-        form-create-basic-info(
-          :basic-info="infoClient.basic"
-          :phone="infoClient.phone"
-          :email="infoClient.email"
-          :save-network-id="saveNetworkId"
-          :add-network="addNewNetwork"
-          :save-client="saveClient"
-          :choose-option="chooseOptionNetworks"
-          :choose-priority="choosePriority"
-          :priority-list="priorityList"
-        )
-      .flex(:style="{display :'none'}" ref="doc")
-        form-create-identity-documents(
-          :identity-document="infoClient.identity_document",
-          :save-client="saveClient"
-        )
-      .flex(:style="{display :'none'}" ref="address")
-        form-create-addresses(
-          :addresses="infoClient.addresses",
-          :save-file="saveDocFile",
-          :save-client="saveClient"
-        )
-      .flex(:style="{display :'none'}" ref="additional")
-        form-create-additional(
-          :additional-info="infoClient.additional",
-          :add-new-additional="addNewAdditionalInfo",
-          :save-file="saveAdditionalFiles",
-          :save-client="saveClient"
-        )
+          v-for="form in forms",
+          @click="selectForm(form.component)",
+          :class="{active: form.component === currentForm}",
+          :key="form.id",
+          :id="form.id"
+        ) {{form.title}}
+      component(
+        v-bind:is="currentForm",
+        :basic-info="infoClient.basic",
+        :phone="infoClient.phone",
+        :email="infoClient.email",
+        :save-network-id="saveNetworkId",
+        :add-network="addNewNetwork",
+        :choose-option="chooseOptionNetworks",
+        :choose-priority="choosePriority",
+        :priority-list="priorityList",
+        :identity-document="infoClient.identity_document",
+        :addresses="infoClient.addresses",
+        :save-file="saveDocFile",
+      )
+      q-btn(
+        label="Создать клиента",
+        color="primary",
+        style="height: 40px; width: 180px",
+        no-caps,
+        padding="8px 24px",
+        @click="saveClient",
+      )
 </template>
 
 <script>
@@ -190,23 +183,24 @@ export default {
           },
         ],
       },
-      listInfoTitle: [
+      forms: [
         {
           title: "Основное",
-          key: "basic",
-          active: true,
+          id: "basic",
+          component: "form-create-basic-info",
         },
         {
           title: "ДУЛ",
-          key: "doc",
-          active: false,
+          id: "doc",
+          component: "form-create-identity-documents",
         },
         {
           title: "Адрес",
-          key: "address",
-          active: false,
+          id: "address",
+          component: "form-create-addresses",
         },
       ],
+      currentForm: "form-create-basic-info",
       priorityList: [
         {
           id: 1,
@@ -422,7 +416,7 @@ export default {
         icon: "icon-tg",
       });
     },
-    selectTab(event) {
+    /*selectTab(event) {
       this.listInfoTitle.forEach((el) => {
         if (el.key === event.target.id) {
           el.active = true;
@@ -432,6 +426,11 @@ export default {
           this.$refs[el.key].style.display = "none";
         }
       });
+    },*/
+    selectForm(componentName) {
+      this.currentForm = this.forms.find(
+        (elem) => elem.component === componentName
+      )?.component;
     },
     checkFormFullness() {
       if (!this.infoClient.basic.full_name) {
diff --git a/src/pages/clients/components/FormCreateAddresses.vue b/src/pages/clients/components/FormCreateAddresses.vue
index c47eedb..5abbdbf 100644
--- a/src/pages/clients/components/FormCreateAddresses.vue
+++ b/src/pages/clients/components/FormCreateAddresses.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
-  .wrapper-addresses.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
-    .flex.flex-col.gap-y-6.px-4
+  .wrapper-addresses.h-full
+    .flex.flex-col.gap-y-6
       base-input(
         v-model="addresses.full_address",
         placeholder="Введите адрес целиком",
@@ -53,9 +53,6 @@
           v-model="addresses.zip_code",
           label="Индекс"
         )
-    .px-4
-      base-button(@click="saveClient" :size="40")
-        span.font-semibold Создать клиента
 </template>
 
 <script>
@@ -76,8 +73,7 @@ export default {
 
 <style lang="sass" scoped>
 .wrapper-addresses
-  min-height: 443px
-  max-height: 443px
+  height: 368px
   overflow-y: auto
   &::-webkit-scrollbar
     width: 4px
diff --git a/src/pages/clients/components/FormCreateBasicInfo.vue b/src/pages/clients/components/FormCreateBasicInfo.vue
index 3a7b53a..8049929 100644
--- a/src/pages/clients/components/FormCreateBasicInfo.vue
+++ b/src/pages/clients/components/FormCreateBasicInfo.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
-  .wrapper-info.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
-    .grid.grid-cols-2.gap-x-4.gap-y-6.px-4
+  .wrapper-info.h-full
+    .grid.grid-cols-2.gap-x-4.gap-y-6
       base-custom-select.input-info(
         :items="priorityList",
         placeholder="Приоритет клиента",
@@ -37,9 +37,6 @@
           v-show="networks.settings.length !== basicInfo.contacts.length",
           @click="addNetwork"
         ) Добавить соцсеть
-    .px-4
-      base-button(@click="saveClient" :size="40")
-        span.font-semibold Создать клиента
 </template>
 
 <script>
@@ -78,8 +75,8 @@ export default {
 
 <style lang="sass" scoped>
 .wrapper-info
-  min-height: 336px
-  max-height: 443px
+  max-height: 336px
+  min-height: 272px
   overflow-y: auto
   &::-webkit-scrollbar
     width: 4px
diff --git a/src/pages/clients/components/FormCreateIdentityDocuments.vue b/src/pages/clients/components/FormCreateIdentityDocuments.vue
index 53d32b6..7550721 100644
--- a/src/pages/clients/components/FormCreateIdentityDocuments.vue
+++ b/src/pages/clients/components/FormCreateIdentityDocuments.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
-  .wrapper-documents.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
-    .flex.flex-col.gap-y-6.px-4
+  .wrapper-documents.flex.flex-col.flex-auto.h-full.gap-y-8
+    .flex.flex-col.gap-y-6
       span.title-info.text-base.font-bold Паспортные данные
       .grid.grid-cols-2.gap-x-4.gap-y-6
         base-input(
@@ -26,7 +26,7 @@
           placeholder="Дата",
           label="Дата выдачи"
         )
-    .flex.flex-col.gap-y-6.px-4
+    .flex.flex-col.gap-y-6
       span.title-info.text-base.font-bold СНИЛС и ИНН
       .grid.grid-cols-2.gap-x-4.gap-y-6
         base-input(
@@ -45,9 +45,6 @@
           placeholder="000000000000",
           label="Номер ИНН"
         )
-    .px-4
-      base-button(@click="saveClient" :size="40")
-        span.font-semibold Создать клиента
 </template>
 
 <script>
@@ -66,8 +63,7 @@ export default {
 
 <style lang="sass" scoped>
 .wrapper-documents
-  min-height: 443px
-  max-height: 443px
+  height: 338px
   overflow-y: auto
   &::-webkit-scrollbar
     width: 4px