Merge branch 'UC-90' of https://github.com/dderbentsov/urban-couscous into UC-90

src/components/Notifications/NotificationItem.vue

@@ -1,9 +1,9 @@
 <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.font-bold(v-if="title") {{ title }}
         .text-white.text-base(v-if="message") {{ message }}
     .icon-cancel.cursor-pointer.text-white.opacity-50.text-sm(class="hover:opacity-100 active:opacity-75", @click="delNotification")
 </template>
@@ -83,4 +83,7 @@ export default {
 .grid
   grid-template-columns: 24px 1fr
   grid-column-gap: 8px
+.grid-rows
+  grid-template-rows: repeat(2, auto)
+  grid-row-gap: 8px
 </style>

src/components/base/BaseClientFormCreate.vue

@@ -89,6 +89,8 @@ import BaseButton from "@/components/base/BaseButton";
 import BasePopup from "@/components/base/BasePopup";
 import BaseModal from "@/components/base/BaseModal";
 import addImageIcon from "@/assets/icons/photo.svg";
+import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
+import { addNotification } from "@/components/Notifications/notificationContext";
 export default {
   name: "BaseClientFormClient",
   components: {
@@ -101,6 +103,7 @@ export default {
     BasePopup,
     BaseModal,
     addImageIcon,
+    TheNotificationProvider,
   },
   props: {
     closeForm: Function,
@@ -272,6 +275,7 @@ export default {
         .then((result) => {
           this.createIdentityDocument(result.id);
           this.createAddress(result.id);
+          this.addSuccessNotification();
         });
       this.$emit("update-client");
     },
@@ -354,11 +358,29 @@ export default {
     },
     checkFormFullness() {
       if (!this.infoClient.basic.full_name) {
-        alert("Не заполнено ФИО клиента");
+        this.addErrrorNotification();
         return false;
       }
       return true;
     },
+    addErrrorNotification() {
+      addNotification(
+        new Date().getTime(),
+        "Не заполнено ФИО клиента",
+        "Пожалуйста, заполните ФИО клиента",
+        "error",
+        5000
+      );
+    },
+    addSuccessNotification() {
+      addNotification(
+        new Date().getTime(),
+        "Клиент успешно создан",
+        "",
+        "success",
+        5000
+      );
+    },
   },
   watch: {
     showModal: function () {

src/pages/calendar/components/CalendarDeleteModal.vue

@@ -24,9 +24,15 @@
 import { fetchWrapper } from "@/shared/fetchWrapper.js";
 import BaseButton from "@/components/base/BaseButton.vue";
 import CalendarEventDescriptionCard from "./CalendarEventDescriptionCard.vue";
+import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
+import { addNotification } from "@/components/Notifications/notificationContext";
 export default {
   name: "CalendarDeleteModal",
-  components: { CalendarEventDescriptionCard, BaseButton },
+  components: {
+    CalendarEventDescriptionCard,
+    BaseButton,
+    TheNotificationProvider,
+  },
   props: {
     ownerEvent: Object,
     eventTypes: {
@@ -42,6 +48,16 @@ export default {
       await fetchWrapper.del(`registry/event/${this.ownerEvent.id}/delete/`);
       this.$emit("update-events");
       this.closeModal();
+      this.addSuccessNotification();
+    },
+    addSuccessNotification() {
+      addNotification(
+        new Date().getTime(),
+        "Событие успешно удалено",
+        "",
+        "success",
+        5000
+      );
     },
   },
 };

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,18 @@ 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.errors[0].code,
+        error.errors[0].detail,
+        "error",
+        5000
       );
     },
+    addSuccessNotification(message) {
+      addNotification(new Date().getTime(), message, "", "success", 5000);
+    },
     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,11 +16,11 @@
           :check="selectedCheck",
           :client="client",
           :fetch-data-clients="fetchDataClients",
+          @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"
@@ -60,6 +60,10 @@ export default {
       limit: 4,
       count: 0,
       textSearch: "",
+      paginationInfo: {
+        currentPage: 0,
+        length: 0,
+      },
     };
   },
   computed: {
@@ -68,6 +72,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;
@@ -96,6 +104,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

@@ -65,6 +65,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/`)