Merge pull request #196 from dderbentsov/UC-157

WIP Анимация пагинации и загрузки клиентов, уведомление на попытку редактировать события с удаленным клиентом
2022-12-13 18:44:18 +03:00
parent 670db2809c 36f02aa573
commit 72206b8be4
9 changed files with 131 additions and 81 deletions
--- a/src/components/HeaderInputs.vue
+++ b/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>
--- a/src/components/base/BaseCustomSelect.vue
+++ b/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
--- a/src/components/base/BaseSidebarButton.vue
+++ b/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>

--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -13,7 +13,7 @@
        img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
      column-header-checkbox
    .body.pl-1
-      transition-group(name="card", tag="div")
+      transition-group(name="card")
        calendar-event-card(
          v-for="event in dayEvents",
          :key="event.id",
--- a/src/pages/calendar/components/CalendarEventCard.vue
+++ b/src/pages/calendar/components/CalendarEventCard.vue
@@ -228,7 +228,7 @@ export default {
      immediate: true,
      handler(newValue) {
        if (newValue === true) {
-          this.setDefaultTheme();
+          this.isActive = false;
          this.$emit("reset-change-form");
        }
      },
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -288,6 +288,13 @@ export default {
      this.eventData = {};
    },
    async updateEventData() {
+      if (
+        Object.keys(
+          this.findPerson(this.ownersData, this.employees, "employee")
+        ).length > 0 &&
+        Object.keys(this.findPerson(this.membersData, this.members, "person"))
+          .length > 0
+      ) {
        this.eventData = {
          start: this.mergeDate(this.eventDate, this.startTime),
          end: this.mergeDate(this.eventDate, this.endTime),
@@ -299,6 +306,11 @@ export default {
        };
        await this.postUpdateEvent(this.id, this.eventData);
        this.eventData = {};
+      } else
+        this.addErrorNotification(
+          "Событие не может быть изменено",
+          "Клиент был удален"
+        );
    },
    clearForm() {
      if (this.selectedEventData.id) this.$emit("close-change-form");
@@ -310,6 +322,7 @@ export default {
    },
    findPerson(requestedList, object, field) {
      let foundPerson = requestedList.find(({ id }) => id === object[field].id);
+      if (foundPerson) {
        let returnedData = {
          [field]: {
            id: foundPerson.id,
@@ -322,11 +335,16 @@ export default {
        };
        if (object.id) returnedData.id = object.id;
        return returnedData;
+      }
+      return {};
    },
    async postCreateEvent(event) {
      const response = await fetchWrapper.post("registry/event/create/", event);
      if (response.type && response.type === "validation_error") {
-        this.addErrorNotification(response);
+        this.addErrorNotification(
+          response.errors[0].code,
+          response.errors[0].detail
+        );
      } else {
        this.addSuccessNotification("Событие успешно создано");
        this.clearForm();
@@ -338,7 +356,10 @@ export default {
        event
      );
      if (response.type && response.type === "validation_error") {
-        this.addErrorNotification(response);
+        this.addErrorNotification(
+          response.errors[0].code,
+          response.errors[0].detail
+        );
      } else {
        this.addSuccessNotification("Изменения успешно сохранены");
        this.clearForm();
@@ -362,14 +383,8 @@ export default {
        return id;
      }
    },
-    addErrorNotification(error) {
-      addNotification(
-        new Date().getTime(),
-        error.errors[0].code,
-        error.errors[0].detail,
-        "error",
-        5000
-      );
+    addErrorNotification(title, message) {
+      addNotification(new Date().getTime(), title, message, "error", 5000);
    },
    addSuccessNotification(message) {
      addNotification(new Date().getTime(), message, "", "success", 5000);
--- a/src/pages/clients/components/ClientTablePagination.vue
+++ b/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",
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/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>
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/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) {