WIP Анимация пагинации и загрузки клиентов

src/components/HeaderInputs.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .header-inputs-wrapper.flex.items-center.font-medium.text-base(:class="{ open: isOpen }")
-    .select-container(@click="changeState")
+    .select-container(@click="changeState", v-click-outside="closeOptions")
       .select-wrapper.flex.items-center.cursor-pointer.mx-4.my-2
         .icon-wrapper.icon-search.flex.text-lg.justify-center.items-center
         span.custom-input.select-input.inline-block.box-border.align-middle.pl-2.pr-1 {{ selectedFilter }}
@@ -30,6 +30,9 @@ export default {
     selectFilter(filter) {
       this.selectedFilter = filter;
     },
+    closeOptions() {
+      this.isOpen = false;
+    },
   },
 };
 </script>

src/components/base/BaseCustomSelect.vue

@@ -86,8 +86,8 @@ export default {
   box-shadow: 1px 1px 8px rgba(37, 40, 80, 0.15)
   border-radius: 4px
   background-color: white
+  max-height: 140px
   overflow-y: auto
-  height: 140px
 .placeholder
   color: #090A15
   opacity: 0.5

src/components/base/BaseSidebarButton.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   a(:href="path")
-    button.button.cursor-pointer.text-4xl.py-3.pr-4.pl-3(:id="id" :class="{active:active}" @click="(e) => changeStylePage(e)")
+    button.button.cursor-pointer.text-4xl.py-3.pr-4.pl-3.transition(:id="id" :class="{active:active}" @click="(e) => changeStylePage(e)")
       slot
 </template>
 

src/pages/calendar/TheCalendar.vue

@@ -75,7 +75,7 @@ export default {
       showModal: false,
       timeInformation: {
         dayStartTime: "08:00",
-        dayEndTime: "24:00",
+        dayEndTime: "20:00",
       },
       eventsData: [],
       employeesData: [],

src/pages/clients/components/ClientTablePagination.vue

@@ -5,7 +5,7 @@
       :disabled="disabledPreviousButton"
     )
       .icon-down-arrow.arrow-left
-    button.item.flex.items-center.justify-center(
+    button.item.flex.items-center.justify-center.transition.duration-100.ease-linear(
       v-for="page, index in pageCount",
       :key="index",
       :id="page",

src/pages/clients/components/ClientsTable.vue

@@ -1,5 +1,12 @@
 <template lang="pug">
-  .wrapper-table.relative.flex.flex-col.px-6.py-6.h-full.w-full
+  .wrapper-table.relative.flex.px-6.py-6.h-full.w-full
+    transition(name="table", mode="out-in")
+      .flex.justify-center.items-center.w-full(v-if="dataClientsPresence")
+        base-loader(
+          :width="60",
+          :height="60"
+        )
+      .relative.flex.flex-col.h-full.w-full(v-else)
         clients-table-hat(
           :is-open-actions="marked.length",
           :open-form="openForm",
@@ -52,6 +59,7 @@ import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
 import ClientTablePagination from "./ClientTablePagination.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import ClientTableDeleteModal from "./ClientTableDeleteModal.vue";
+import BaseLoader from "@/components/Loader/BaseLoader.vue";
 export default {
   name: "ClientsTable",
   components: {
@@ -63,6 +71,7 @@ export default {
     ClientTablePagination,
     BaseModal,
     ClientTableDeleteModal,
+    BaseLoader,
   },
   props: {
     openForm: Function,
@@ -75,7 +84,11 @@ export default {
     return {
       selectAll: false,
       marked: [],
-      dataClients: [],
+      dataClients: [
+        {
+          initialization: true,
+        },
+      ],
       currentTablePage: 1,
       limit: 14,
       clientsCount: 0,
@@ -91,6 +104,11 @@ export default {
       clearingTextSearch: false,
     };
   },
+  computed: {
+    dataClientsPresence() {
+      return this.dataClients[0]?.initialization;
+    },
+  },
   methods: {
     updateDataClient() {
       if (this.textSearch) this.filteredClientsCount -= 1;
@@ -243,4 +261,18 @@ export default {
   &::-webkit-scrollbar-thumb
     border-radius: 8px
     background-color: var(--btn-blue-color)
+.table-enter-from
+  opacity: 0
+  transform: translateY(0px)
+  pointer-events: none
+.table-enter-active
+  transition: 0.3s ease
+.table-leave-to
+  opacity: 0
+  transform: translateY(0px)
+  pointer-events: none
+.table-leave-active
+  transition: 0.3s ease
+.table-move
+  transition: 0.3s ease
 </style>

src/pages/clients/components/ClientsTableRow.vue

@@ -350,7 +350,7 @@ export default {
     },
     async deleteClient() {
       await fetchWrapper.del(`general/person/${this.client.id}/delete/`);
-      this.addSuccessNotification("Клиент Успешно удален", "");
+      this.addSuccessNotification("Клиент успешно удален", "");
       this.handleUnFocusPopup();
     },
     addSuccessNotification(title, message) {