Merge pull request #189 from dderbentsov/UC-157

WIP Сделана анимация блока информации

src/components/base/BaseInputDate.vue

@@ -3,7 +3,7 @@
     class="py-2.5",
     :style="{ minWidth: widthInput + 'px' }"
   )
-    input.input.w-full.outline-0.not-italic.date(
+    input.input.w-full.outline-0.not-italic.date.cursor-text(
       :value="value",
       type="date",
       @input="$emit('update:value', $event.target.value)",

src/components/base/BaseInputTime.vue

@@ -3,7 +3,7 @@
     class="py-2.5"
     :style="{ minWidth: widthInput + 'px' }"
   )
-    input.input.w-full.outline-0.not-italic(
+    input.input.w-full.outline-0.not-italic.cursor-text(
       :value="value"
       type="time"
       @input="$emit('update:value', $event.target.value)"

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -37,14 +37,14 @@
         .flex.gap-x-2.items-center
           .flex.flex-col(class="gap-y-1.5")
             span.text-xs.opacity-40.font-bold.leading-3 Начало
-            base-input-time.item-input.text-base.cursor-text.select(
+            base-input-time.item-input.text-base.select(
               v-model:value="startTime",
               :width-input="72"
             )
           span.mt-4 —
           .flex.flex-col(class="gap-y-1.5")
             span.text-xs.opacity-40.font-bold.leading-3 Конец
-            base-input-time.item-input.text-base.cursor-text.select(
+            base-input-time.item-input.text-base.select(
               v-model:value="endTime",
               :width-input="72"
             )

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -256,7 +256,7 @@ export default {
       }
       if (this.section === "addresses") {
         if (!this.addressId) {
-          if (this.sectionInfo.join_adress === "") this.isAddress = false;
+          if (this.sectionInfo.full_address === "") this.isAddress = false;
           this.createAddress();
         } else this.updateAddress();
       }

src/pages/clients/components/ClientDetailInfoWrapper.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .w-full.h-fit.pt-4.flex.gap-x-4(class="px-[52px] pb-[30px]")
+  .w-full.h-fit.flex.gap-x-4
     client-detail-info-section(
       v-model:section-info="dataDocument",
       section="pass",

src/pages/clients/components/ClientsTable.vue

@@ -7,7 +7,7 @@
       :change-clearing-text-search="changeClearingTextSearch",
       @search="filterDataClients",
     )
-    .flex.flex-col.h-full.gap-y-2.table-container.w-full.mt-8.mb-3
+    .flex.flex-col.h-full.table-container.w-full.mt-8.mb-3
       clients-table-header(:check="selectedCheck" :is-check="selectAll")
       .flex.flex-col
         clients-table-row(

src/pages/clients/components/ClientsTableRow.vue

@@ -5,7 +5,7 @@
     )
       button.recover-btn(@click="stopTimer") Восстановить
       .countdown 0:{{ countdown }}
-    .row-wrapper.flex.flex-col.w-full
+    .row-wrapper.flex.flex-col.w-full(:class="closedDetail")
       .row-body.flex.w-full.cursor-pointer(
         :id="id",
         @click="(e) => openDetailInfo(e)",
@@ -84,9 +84,8 @@
               :disabled-delete="!!deletedClientId && !rowOverlay",
               @delete-client="transmitDeleteClient"
             )
-      transition(name="detail")      
+      client-detail-info-wrapper.detail.px-52px(
-        client-detail-info-wrapper.detail(
+        :class="{'pb-[30px] pt-4': isOpenDetailInfo}"
-          v-if="isOpenDetailInfo",
         :data-address="dataAddress",
         :data-detail="dataDetail",
         :data-attachments="dataAttachments",
@@ -185,6 +184,11 @@ export default {
     rowOverlay() {
       return this.deletedClientId === this.client.id;
     },
+    closedDetail() {
+      return {
+        "closed-detail": !this.isOpenDetailInfo,
+      };
+    },
   },
   methods: {
     stopTimer() {
@@ -340,7 +344,7 @@ export default {
       addNotification(new Date().getTime(), title, message, "success", 5000);
     },
     addErrorNotification(title, message) {
-      addNotification(title, title, message, "error", 0);
+      addNotification(title, title, message, "error", 5000);
     },
     fetchClientDetail(id) {
       fetchWrapper
@@ -420,15 +424,15 @@ export default {
     },
     saveAddress(data) {
       this.addressId = data?.id;
-      if (data?.join_adress && data?.join_adress.substr(0, 4) !== "None") {
+      if (data?.full_address) {
         this.dataAddress = {
-          join_adress: data?.join_adress,
+          full_address: data.full_address,
         };
         this.lackAddress = true;
       } else {
         this.lackAddress = false;
         this.dataAddress = {
-          join_adress: "",
+          full_address: "",
         };
       }
     },
@@ -455,7 +459,8 @@ export default {
     postUpdateAddress() {
       fetchWrapper
         .post(`general/address/${this.addressId}/update/`, {
-          full_address: this.mergeFullAddress() || this.dataAddress.join_adress,
+          full_address:
+            this.mergeFullAddress() || this.dataAddress.full_address,
         })
         .then((response) => {
           this.fetchClientDetail(this.id);
@@ -501,7 +506,8 @@ export default {
       fetchWrapper
         .post("general/address/create/", {
           person_id: this.id,
-          full_address: this.mergeFullAddress() || this.dataAddress.join_adress,
+          full_address:
+            this.mergeFullAddress() || this.dataAddress.full_address,
         })
         .then((response) => {
           this.fetchClientDetail(this.id);
@@ -601,9 +607,7 @@ export default {
 .row-wrapper
   border-bottom: 1px solid var(--border-light-grey-color)
   min-width: 1556px
-.row-wrapper:hover .detail
+.row-wrapper:hover
-  background-color: var(--bg-hover-row-table)
-.row-wrapper:hover .row-body
   background-color: var(--bg-hover-row-table)
 .row-body
   color: var(--font-dark-blue-color)
@@ -634,18 +638,10 @@ export default {
   color: var(--btn-blue-color)
 .countdown
   color: var(--font-grey-color )
-.detail-enter-from
+.detail
-  opacity: 0
+  max-height: 560px
-  transform: translateY(-2px)
+  transition: 0.3s ease all
-  pointer-events: none
+  overflow: hidden
-.detail-enter-active
+.closed-detail .detail
-  transition: 0.1s ease
+  max-height: 0
-.detail-leave-to
-  opacity: 0
-  transform: translateY(-2px)
-  pointer-events: none
-.detail-leave-active
-  transition: 0.1s ease
-.detail-move
-  transition: 0.1s ease
 </style>

tailwind.config.js

@@ -44,7 +44,9 @@ module.exports = {
         "22px": "22px",
         "23px": "23px",
         "29_25px": "29.25px",
+        "30px": "30px",
         "45px": "45px",
+        "52px": "52px",
         "74px": "74px",
         "148px": "148px",
       },