Merge pull request #162 from dderbentsov/UC-91

WIP Изменены уведомления, реализовано удаленние клиентов

src/components/Notifications/NotificationItem.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .notification-container.flex.justify-between(:style="{ backgroundColor: bgColor }")
     .notification-content.flex.mr-16
-      .grid.grid-rows-2
+      .grid(:class="{'grid-rows': message}")
         .text-white.text-xs.icon.row-span-full.flex.justify-center.items-center(:class="iconClass")
         .text-white.text-base(v-if="title") {{ title }}
         .text-white.text-base(v-if="message") {{ message }}
@@ -83,4 +83,6 @@ export default {
 .grid
   grid-template-columns: 24px 1fr
   grid-column-gap: 8px
+.grid-rows
+  grid-template-rows: repeat(2, auto)
 </style>

src/components/base/BaseClientFormCreate.vue

@@ -53,6 +53,8 @@ import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses"
 import FormCreateAdditional from "@/pages/clients/components/FormCreateAdditional";
 import BaseInput from "@/components/base/BaseInput";
 import BaseButton from "@/components/base/BaseButton";
+import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
+import { addNotification } from "@/components/Notifications/notificationContext";
 export default {
   name: "BaseClientFormClient",
   components: {
@@ -62,6 +64,7 @@ export default {
     FormCreateAddresses,
     FormCreateAdditional,
     BaseButton,
+    TheNotificationProvider,
   },
   props: {
     closeForm: Function,
@@ -209,6 +212,7 @@ export default {
       fetchWrapper.post("general/person/create/", sentData).then((result) => {
         this.createIdentityDocument(result.id);
         this.createAddress(result.id);
+        this.addSuccessNotification();
       });
       this.$emit("update-client");
     },
@@ -283,11 +287,29 @@ export default {
     },
     checkFormFullness() {
       if (!this.infoClient.basic.full_name) {
-        alert("Не заполнено ФИО клиента");
+        this.addErrrorNotification();
         return false;
       }
       return true;
     },
+    addErrrorNotification() {
+      addNotification(
+        new Date().getTime(),
+        "Не заполнено ФИО клиента",
+        "Пожалуйста, заполните ФИО клиента",
+        "error",
+        3000
+      );
+    },
+    addSuccessNotification() {
+      addNotification(
+        new Date().getTime(),
+        "Клиент успешно создан",
+        "",
+        "success",
+        3000
+      );
+    },
   },
 };
 </script>

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -63,6 +63,8 @@
 </template>
 
 <script>
+import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
+import { addNotification } from "@/components/Notifications/notificationContext";
 import { fetchWrapper } from "@/shared/fetchWrapper.js";
 import BaseInputTime from "@/components/base/BaseInputTime.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
@@ -80,6 +82,7 @@ export default {
     BaseInputDate,
     BaseInputTime,
     BaseCustomSelect,
+    TheNotificationProvider,
   },
   emits: ["clear-selected-event-data", "close-change-form"],
   props: {
@@ -323,8 +326,11 @@ export default {
     async postCreateEvent(event) {
       const response = await fetchWrapper.post("registry/event/create/", event);
       if (response.type && response.type === "validation_error") {
-        this.outputErrorMessage(response);
+        this.addErrrorNotification(response);
-      } else this.clearForm();
+      } else {
+        this.addSuccessNotification("Событие успешно создано");
+        this.clearForm();
+      }
     },
     async postUpdateEvent(id, event) {
       const response = await fetchWrapper.post(
@@ -332,8 +338,11 @@ export default {
         event
       );
       if (response.type && response.type === "validation_error") {
-        this.outputErrorMessage(response);
+        this.addErrrorNotification(response);
-      } else this.clearForm();
+      } else {
+        this.addSuccessNotification("Изменения успешно сохранены");
+        this.clearForm();
+      }
     },
     personId(object, field) {
       if (object) {
@@ -353,11 +362,19 @@ export default {
         return id;
       }
     },
-    outputErrorMessage(error) {
+    addErrrorNotification(error) {
-      alert(
+      addNotification(
-        `error type: ${error.type}\nerror code: ${error.errors[0].code}\nerror detail: ${error.errors[0].detail}`
+        new Date().getTime(),
+        error.type,
+        `error code: ${error.errors[0].code}
+        error detail: ${error.errors[0].detail}`,
+        "error",
+        3000
       );
     },
+    addSuccessNotification(message) {
+      addNotification(new Date().getTime(), message, "", "success", 3000);
+    },
     fetchMembersData() {
       fetchWrapper
         .get("general/person/")

src/pages/clients/components/ClientTablePagination.vue

@@ -30,18 +30,20 @@ export default {
       type: Number,
       default: 7,
     },
+    paginationInfo: Object,
   },
   computed: {
     pageCount() {
       let countArray = [];
-      for (let i = 1; i <= this.length; i++) {
+      for (let i = 1; i <= this.paginationInfo.length; i++) {
         countArray.push(i);
       }
-      if (this.length <= this.totalVisible) return countArray;
+      if (this.paginationInfo.length <= this.totalVisible) return countArray;
       let incompleteCountArray = [];
       if (
-        this.currentPage <= 2 ||
+        this.paginationInfo.currentPage <= 2 ||
-        this.currentPage >= countArray[this.length - 2]
+        this.paginationInfo.currentPage >=
+          countArray[this.paginationInfo.length - 2]
       ) {
         countArray.forEach((elem, index, arr) => {
           if (index <= 2 || index >= arr.length - 3)
@@ -51,7 +53,7 @@ export default {
         });
         return incompleteCountArray;
       }
-      if (this.currentPage <= 4) {
+      if (this.paginationInfo.currentPage <= 4) {
         countArray.forEach((elem, index, arr) => {
           if (index <= 4 || index === arr.length - 1)
             incompleteCountArray.push(elem);
@@ -60,7 +62,10 @@ export default {
         });
         return incompleteCountArray;
       }
-      if (this.currentPage >= countArray[this.length - 4]) {
+      if (
+        this.paginationInfo.currentPage >=
+        countArray[this.paginationInfo.length - 4]
+      ) {
         countArray.forEach((elem, index, arr) => {
           if (index === 0 || index >= arr.length - 5)
             incompleteCountArray.push(elem);
@@ -71,22 +76,25 @@ export default {
       }
       countArray.forEach((elem, index, arr) => {
         if (index === 0) incompleteCountArray.push(elem, "...");
-        if (index >= this.currentPage - 2 && index <= this.currentPage)
+        if (
+          index >= this.paginationInfo.currentPage - 2 &&
+          index <= this.paginationInfo.currentPage
+        )
           incompleteCountArray.push(elem);
         if (index === arr.length - 1) incompleteCountArray.push("...", elem);
       });
       return incompleteCountArray;
     },
     disabledNextButton() {
-      return this.currentPage === this.length;
+      return this.paginationInfo.currentPage === this.paginationInfo.length;
     },
     disabledPreviousButton() {
-      return this.currentPage === 1;
+      return this.paginationInfo.currentPage === 1;
     },
   },
   methods: {
     currentPageStyle(number) {
-      if (number === this.currentPage)
+      if (number === this.paginationInfo.currentPage)
         return {
           "active-theme": true,
         };
@@ -95,10 +103,11 @@ export default {
       };
     },
     previousHandler() {
-      if (this.currentPage !== 1) this.$emit("previous-page");
+      if (this.paginationInfo.currentPage !== 1) this.$emit("previous-page");
     },
     nextHandler() {
-      if (this.currentPage !== this.length) this.$emit("next-page");
+      if (this.paginationInfo.currentPage !== this.paginationInfo.length)
+        this.$emit("next-page");
     },
     changeCurrentPage(e) {
       this.$emit("set-current-page", parseInt(e.target.id));

src/pages/clients/components/ClientsActionPopup.vue

@@ -8,7 +8,7 @@
       .button.keep-redaction.flex.gap-x-3
         .icon-star-off.icon
         span На ведение
-      .button.delete.flex.gap-x-3
+      .button.delete.flex.gap-x-3(@click="deleteClient")
         .icon-basket.icon-delete
         span Удалить
 </template>
@@ -18,6 +18,7 @@ export default {
   name: "ClientsActionPopup",
   props: {
     openChangeData: Function,
+    deleteClient: Function,
   },
 };
 </script>

src/pages/clients/components/ClientsTable.vue

@@ -16,12 +16,12 @@
           :check="selectedCheck",
           :client="client",
           :fetch-data-clients="fetchDataClients",
-          :current-year="currentYear"
+          :current-year="currentYear",
+          @update-clients="updateDataClient"
         )
     client-table-pagination(
-      v-if="pageCount > 1"
+      v-if="paginationInfo.length > 1"
-      :length="pageCount",
+      :pagination-info="paginationInfo"
-      :current-page="currentTablePage",
       @previous-page="switchPreviousPage",
       @next-page="switchNextPage",
       @set-current-page="changeCurrentTablePage"
@@ -62,6 +62,10 @@ export default {
       limit: 4,
       count: 0,
       textSearch: "",
+      paginationInfo: {
+        currentPage: 0,
+        length: 0,
+      },
     };
   },
   computed: {
@@ -70,6 +74,10 @@ export default {
     },
   },
   methods: {
+    updateDataClient() {
+      if (this.dataClients.length === 1) this.currentTablePage -= 1;
+      else this.fetchDataClients();
+    },
     saveDataClients(data) {
       this.dataClients = data.results;
       this.count = data.count;
@@ -98,6 +106,10 @@ export default {
         );
       }
       this.saveDataClients(response);
+      this.paginationInfo = {
+        currentPage: this.currentTablePage,
+        length: this.pageCount,
+      };
     },
     selectedCheck(e) {
       if (e.target.id === "checkbox") {

src/pages/clients/components/ClientsTableRow.vue

@@ -64,6 +64,7 @@
           clients-action-popup(
             v-if="isOpenPopup",
             :open-change-data="openChangeData"
+            :delete-client="deleteClient"
           )
     client-detail-info-wrapper(
       v-if="isOpenDetailInfo"
@@ -270,6 +271,11 @@ export default {
     openChangeData() {
       this.isOpenChange = true;
     },
+    async deleteClient() {
+      await fetchWrapper.del(`general/person/${this.dataClient.id}/delete/`);
+      this.handleUnFocusPopup();
+      this.$emit("update-clients");
+    },
     fetchClientDetail(id) {
       fetchWrapper
         .get(`general/person/${id}/detail/`)