From 39b39d553325c68fa21545dea69313d4e3e844ba Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Mon, 12 Dec 2022 18:14:45 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=90=D0=BD=D0=B8=D0=BC=D0=B0=D1=86?=
 =?UTF-8?q?=D0=B8=D1=8F=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=B5=D0=BA?=
 =?UTF-8?q?=20=D0=B8=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BA=D0=BB=D1=8E=D1=87?=
 =?UTF-8?q?=D0=B0=D1=82=D0=B5=D0=BB=D1=8F=20=D0=BA=D0=B0=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B4=D0=B0=D1=80=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../calendar/components/CalendarColumn.vue    | 44 +++++++++++++------
 .../components/CalendarLayoutSwitch.vue       |  4 +-
 .../components/ClientDetailInfoSection.vue    |  3 +-
 src/pages/clients/utils/tableConfig.js        |  2 +-
 4 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index 64e2dc0..16c2418 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -13,19 +13,20 @@
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       column-header-checkbox
     .body.pl-1
-      calendar-event-card(
-        v-for="event in dayEvents",
-        :key="event.id",
-        :id="event.id",
-        :ownerEvent="event",
-        :event-types="eventTypes",
-        :style="eventCardPosition(event.start, event.end)",
-        :change-form-was-closed="changeFormWasClosed",
-        @selected-event="transmitEventData",
-        @reset-change-form="transmitResetChangeForm",
-        @delete-event="transmitDeleteEvent",
-        :schedule-body-ref="scheduleBodyRef"
-      )
+      transition-group(name="card", tag="div")
+        calendar-event-card(
+          v-for="event in dayEvents",
+          :key="event.id",
+          :id="event.id",
+          :ownerEvent="event",
+          :event-types="eventTypes",
+          :style="eventCardPosition(event.start, event.end)",
+          :change-form-was-closed="changeFormWasClosed",
+          @selected-event="transmitEventData",
+          @reset-change-form="transmitResetChangeForm",
+          @delete-event="transmitDeleteEvent",
+          :schedule-body-ref="scheduleBodyRef"
+        )
 </template>
 
 <script>
@@ -132,4 +133,21 @@ export default {
 
 .owner-name
   color: var(--font-dark-blue-color)
+
+.card-enter-from
+  opacity: 0
+  pointer-events: none
+
+.card-enter-active
+  transition: 0.3s ease
+
+.card-leave-to
+  opacity: 0
+  pointer-events: none
+
+.card-leave-active
+  transition: 0.3s ease
+
+.card-move
+  transition: 0.3s ease
 </style>
diff --git a/src/pages/calendar/components/CalendarLayoutSwitch.vue b/src/pages/calendar/components/CalendarLayoutSwitch.vue
index bbffe37..1c27741 100644
--- a/src/pages/calendar/components/CalendarLayoutSwitch.vue
+++ b/src/pages/calendar/components/CalendarLayoutSwitch.vue
@@ -1,10 +1,10 @@
 <template lang="pug">
   .layout-switch-wrapper.inline-block
-    button#day.py-2.px-3(
+    button#day.py-2.px-3.transition.duration-200.ease-linear(
       :class="dayLayoutState",
       @click="changeSelectedLayout"
     ) День
-    button#week.py-2.px-3(
+    button#week.py-2.px-3.transition.duration-200.ease-linear(
       :class="weekLayoutState",
       @click="changeSelectedLayout"
     ) Неделя
diff --git a/src/pages/clients/components/ClientDetailInfoSection.vue b/src/pages/clients/components/ClientDetailInfoSection.vue
index 84a7fd6..8affa7a 100644
--- a/src/pages/clients/components/ClientDetailInfoSection.vue
+++ b/src/pages/clients/components/ClientDetailInfoSection.vue
@@ -63,7 +63,7 @@
     transition(name="section", mode="out-in")
       .flex.justify-center.items-center(
         v-if="sectionDataPresence",
-        :style="{height: settings[section].voidHeight + 'px'}"
+        :style="{height: settings[section].voidHeight + 'px'}",
       )
         base-loader(
           :width="60",
@@ -72,6 +72,7 @@
       .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}",
+        :style="{height: settings[section].voidHeight + 'px'}"
       )
         .flex.flex-col.gap-y-4
           .flex.flex-col(v-for="(item, key) in sectionInfo", class="gap-y-1.5")
diff --git a/src/pages/clients/utils/tableConfig.js b/src/pages/clients/utils/tableConfig.js
index 5f07ebf..79346ab 100644
--- a/src/pages/clients/utils/tableConfig.js
+++ b/src/pages/clients/utils/tableConfig.js
@@ -126,7 +126,7 @@ export const detail = {
       issued_by_date: "Дата",
     },
     width: 280,
-    voidHeight: 242,
+    voidHeight: 244,
   },
   snils: {
     title: "СНИЛС",