WIP Сделана анимация загрузки details

2022-12-12 16:00:10 +03:00
parent d1ea088d70
commit af01eecda7
2 changed files with 115 additions and 66 deletions
--- a/src/pages/clients/components/ClientDetailInfoSection.vue
+++ b/src/pages/clients/components/ClientDetailInfoSection.vue
@@ -1,8 +1,6 @@
 <template lang="pug">
  .section-wrapper.flex.flex-col.h-fit.cursor-pointer(
    :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}}
@@ -20,6 +18,7 @@
          v-if="!isChange && (this.isData || this.isAddress || this.isAttachments)",
          @click="changeClientData"
        )
+          .icon-edit.text-base.mt-1
        .flex.relative
          base-button(
            v-if="settings[section].addFile",
@@ -27,9 +26,9 @@
            :rounded="true",
            :outlined="true",
            :added="true",
-            :size="24"
+            :size="20"
          )
-            .icon-plus(class="pt-[2px]")
+            .icon-plus.text-sm(class="pt-[2px]")
          base-popup.right-3.top-5(
            v-if="section === 'docs' && isOpenAddingWrap",
            v-click-outside="closePopup",
@@ -61,13 +60,45 @@
            :add-new-additional="addDocAdditional",
            :save-additional="saveDocs"
          )
+    transition(name="section", mode="out-in")
+      .flex.justify-center.items-center(
+        v-if="sectionDataPresence",
+        :style="{height: settings[section].voidHeight + 'px'}"
+      )
+        base-loader(
+          :width="60",
+          :height="60"
+        )
      .section-body.flex.flex-col.gap-y-4.px-4(
+        v-else-if="(this.isData || this.isAddress || this.isAttachments) && !isChange",
+        :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")
+            span.title-section.font-semibold.text-xs(v-if="settings[section].options") {{settings[section].options[key]}}
+            span.title-section.font-semibold.text-xs(v-if="item.header") {{item.header}}
+            .flex(v-if="settings[section].options && !isChange")
+              span.text-sm.w-fit(:style="{fontWeight:key === 'numba'&&600}") {{key === 'issued_by_date' ? formattedDate : item}}
+              .copy.icon-copy.cursor-pointer.pl-4(
+                v-if="key === 'numba'",
+                @click="() => copyValue(item)"
+              )
+            .flex(v-if="item.name && !isChange")
+              span.text-sm.w-fit {{item.title}}
+            .flex.items-center(v-if="item.title")
+              .flex.gap-x-2.items-center
+                img(:src="iconDictionary[item?.document?.substr(item.document.lastIndexOf('.') + 1)]")
+                span.text-sm {{item.title}}
+              span.text-sm(v-if="item.document") {{`.${item?.document?.substr(item.document.lastIndexOf(".") + 1)}`}}
+      .section-body.flex.flex-col.gap-y-4.px-4(
+        v-else-if="(this.isData || this.isAddress || this.isAttachments) && isChange",
        :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")
            span.title-section.font-semibold.text-xs(
-            v-if="settings[section].options") {{settings[section].options[key]}}
+              v-if="settings[section].options",
+            ) {{settings[section].options[key]}}
            span.title-section.font-semibold.text-xs(v-if="item.header") {{item.header}}  
            client-detail-input.text-sm.w-max-fit(
              v-if="section!=='docs' && isChange && settings[section].options[key] !== 'Дата выдачи'",
@@ -85,12 +116,6 @@
                v-if="item.copy",
                @click="() => copyValue(item)"
              )
-          .flex(v-if="settings[section].options && !isChange")
-            span.text-sm.w-fit(:style="{fontWeight:key === 'numba'&&600}") {{key === 'issued_by_date' ? formattedDate : item}}
-            .copy.icon-copy.cursor-pointer.pl-4(
-              v-if="key === 'numba'",
-              @click="() => copyValue(item)"
-            )
            .separation.flex.items-center.justify-center.relative.mt-10px.mb(
              v-if="section === 'addresses' && isChange",
              class="gap-y-1.5"
@@ -99,8 +124,6 @@
              .text-separation.span.text-sm.separator.px-2 или
            .flex.flex-col.gap-y-4(v-if="section === 'addresses' && isChange")
              client-detail-section-address(:dope-address="dopeAddress")
-          .flex(v-if="item.name && !isChange")
-            span.text-sm.w-fit {{item.title}}
            .flex.items-center(v-if="item.title")
              .icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(
                v-if="isChange",
@@ -112,6 +135,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"
      ) Добавить данные
@@ -133,6 +157,7 @@ import pdfIcon from "@/assets/icons/pdf.svg";
 import wordIcon from "@/assets/icons/word.svg";
 import exelIcon from "@/assets/icons/exel.svg";
 import * as moment from "moment";
+import BaseLoader from "@/components/Loader/BaseLoader.vue";
 export default {
  name: "ClientDetailInfoSection",
  components: {
@@ -146,6 +171,7 @@ export default {
    TableCreatePackageDoc,
    TableAddingNewDoc,
    TableChoiceAddingDoc,
+    BaseLoader,
  },
  props: {
    saveNewDoc: Function,
@@ -211,11 +237,14 @@ export default {
        "closed-body": true,
      };
    },
+    sectionDataPresence() {
+      if (this.section === "docs") {
+        return this.sectionInfo[0]?.initialization;
+      }
+      return Object.keys(this.sectionInfo).length === 0;
+    },
  },
  methods: {
-    output(section) {
-      console.log(section);
-    },
    openAddDoc() {
      this.isChange = true;
      if (this.section === "pass") {
@@ -379,9 +408,7 @@ export default {
  opacity: 0.6

 .section-body
-  max-height: 500px
-  transition: 0.3s ease all
-  overflow: hidden
+  overflow-y: auto
  &::-webkit-scrollbar
    width: 4px
  &::-webkit-scrollbar-track
@@ -392,6 +419,8 @@ export default {
    background-color: var(--btn-blue-color)

 .edit
+  width: 20px
+  height: 20px
  color: var(--btn-blue-color)
  &:hover
    opacity: 0.6
@@ -402,10 +431,7 @@ export default {
    opacity: 0.6

 .section-add
-  height: calc(100% - 44px)
-  max-height: 100%
-  overflow: hidden
-  transition: 0.3s ease all
+  height: 100%
  color: var(--btn-blue-color)

 .closed-add .section-add
@@ -414,6 +440,25 @@ export default {
 .closed-body .section-body
  max-height: 0

+.section-enter-from
+  opacity: 0
+  transform: translateY(0px)
+  pointer-events: none
+
+.section-enter-active
+  transition: 0.3s ease
+
+.section-leave-to
+  opacity: 0
+  transform: translateY(0px)
+  pointer-events: none
+
+.section-leave-active
+  transition: 0.3s ease
+
+.section-move
+  transition: 0.3s ease
+
 .line
  width: 100%
  height: 1px
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/src/pages/clients/components/ClientsTableRow.vue
@@ -146,7 +146,11 @@ export default {
    return {
      dataIdentityDocument: {},
      dataAddress: {},
-      dataAttachments: [],
+      dataAttachments: [
+        {
+          initialization: true,
+        },
+      ],
      dataDetail: {},
      isOpenDetailInfo: false,
      isOpenPopup: false,