From d1ea088d70e10d0c5e16bc52df75e2136f8b2abb Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 9 Dec 2022 19:46:03 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=9F=D0=BE=D0=BF=D1=8B=D1=82=D0=BA?=
 =?UTF-8?q?=D0=B8=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B8=D1=80=D0=BE=D0=B2=D0=B0?=
 =?UTF-8?q?=D1=82=D1=8C=20=D1=84=D0=BE=D1=80=D0=BC=D1=8B=20=D1=80=D0=B5?=
 =?UTF-8?q?=D0=B4=D0=B0=D0=BA=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ClientDetailInfoSection.vue    | 39 +++++++++++++++----
 src/pages/clients/utils/tableConfig.js        |  3 ++
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/pages/clients/components/ClientDetailInfoSection.vue b/src/pages/clients/components/ClientDetailInfoSection.vue
index 8c98dcd..b2ab550 100644
--- a/src/pages/clients/components/ClientDetailInfoSection.vue
+++ b/src/pages/clients/components/ClientDetailInfoSection.vue
@@ -1,6 +1,8 @@
 <template lang="pug">
   .section-wrapper.flex.flex-col.h-fit.cursor-pointer(
-    :style="{flexDirection:settings[section].rowFlex && 'row', width: settings[section].width + 'px', height: settings[section].height + 'px', background: changeBackground}"
+    :style="{width: settings[section].width + 'px', 'min-height': settings[section].height + 'px', background: changeBackground}",
+    :class="sectionAnimationClasses",
+    @click="output(section)"
   )
     .section-header.flex.items-center.justify-between.pl-4.pr-3(:class="{small:settings[section].rowFlex}")
       span.text-sm.font-semibold.whitespace-nowrap {{settings[section].title}}
@@ -59,8 +61,8 @@
             :add-new-additional="addDocAdditional",
             :save-additional="saveDocs"
           )
-    .section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.gap-y-4(
-      v-if="this.isData || this.isAddress || this.isAttachments"
+    .section-body.flex.flex-col.gap-y-4.px-4(
+      :class="{'pt-3 pb-4': isData || isAddress || isAttachments}",
     )
       .flex.flex-col.gap-y-4
         .flex.flex-col(v-for="(item, key) in sectionInfo", class="gap-y-1.5")
@@ -110,7 +112,7 @@
               span.text-sm {{item.title}}
             span.text-sm(v-if="item.document") {{`.${item?.document?.substr(item.document.lastIndexOf(".") + 1)}`}}
     .section-add.flex.justify-center.items-center.cursor-pointer(
-      v-else,
+      :style="{height: settings[section].voidHeight + 'px'}"
       @click="openAddDoc"
     ) Добавить данные
 </template>
@@ -199,8 +201,21 @@ export default {
         ? this.sectionInfo.issued_by_date.split("-").reverse().join(".")
         : "";
     },
+    sectionAnimationClasses() {
+      if (this.isData || this.isAddress || this.isAttachments) {
+        return {
+          "closed-add": true,
+        };
+      }
+      return {
+        "closed-body": true,
+      };
+    },
   },
   methods: {
+    output(section) {
+      console.log(section);
+    },
     openAddDoc() {
       this.isChange = true;
       if (this.section === "pass") {
@@ -364,7 +379,9 @@ export default {
   opacity: 0.6
 
 .section-body
-  overflow-y: auto
+  max-height: 500px
+  transition: 0.3s ease all
+  overflow: hidden
   &::-webkit-scrollbar
     width: 4px
   &::-webkit-scrollbar-track
@@ -385,10 +402,18 @@ export default {
     opacity: 0.6
 
 .section-add
-  height: 100%
-  min-height: 64px
+  height: calc(100% - 44px)
+  max-height: 100%
+  overflow: hidden
+  transition: 0.3s ease all
   color: var(--btn-blue-color)
 
+.closed-add .section-add
+  max-height: 0
+
+.closed-body .section-body
+  max-height: 0
+
 .line
   width: 100%
   height: 1px
diff --git a/src/pages/clients/utils/tableConfig.js b/src/pages/clients/utils/tableConfig.js
index a65fb66..5f07ebf 100644
--- a/src/pages/clients/utils/tableConfig.js
+++ b/src/pages/clients/utils/tableConfig.js
@@ -126,6 +126,7 @@ export const detail = {
       issued_by_date: "Дата",
     },
     width: 280,
+    voidHeight: 242,
   },
   snils: {
     title: "СНИЛС",
@@ -162,12 +163,14 @@ export const detail = {
       join_adress: "Введите адрес целиком",
     },
     width: 292,
+    voidHeight: 86,
   },
   docs: {
     title: "Документы",
     height: 280,
     width: 360,
     addFile: true,
+    voidHeight: 236,
   },
   additional: {
     title: "Дополнительные данные",