WIP Сделала частично удаление клиента

src/pages/clients/components/ClientTableDeleteModal.vue

@@ -10,7 +10,7 @@
       base-button(
         outlined-red,
         :size=40,
-        @click=""
+        @click="transmitDeleteClient"
       ) Удалить
 </template>
 
@@ -23,6 +23,13 @@ export default {
   },
   props: {
     closeModal: Function,
+    deletedClientId: String,
+  },
+  methods: {
+    transmitDeleteClient() {
+      this.$emit("delete-client", this.deletedClientId);
+      this.closeModal();
+    },
   },
 };
 </script>

src/pages/clients/components/ClientsTable.vue

@@ -16,8 +16,10 @@
           :check="selectedCheck",
           :client="client",
           :current-year="currentYear",
-          :row-overlay="deletedClientId === client.id",
+          :row-overlay="deletedRowId === client.id",
           @delete-client="deleteClientHandler",
+          @recover-client="clearDeletedRowId",
+          @update-clients="updateDataClient"
         )
     client-table-pagination(
       v-if="paginationInfo.length > 1"
@@ -31,7 +33,9 @@
       title="Удалить клиента"
     )
       client-table-delete-modal(
-        :close-modal="changeShowModal"
+        :close-modal="closeModal",
+        :deleted-client-id="deletedClientId",
+        @delete-client="writeDeletedRowId"
       )
 </template>
 
@@ -78,6 +82,7 @@ export default {
       },
       showModal: false,
       deletedClientId: "",
+      deletedRowId: "",
     };
   },
   computed: {
@@ -151,7 +156,7 @@ export default {
     changeCurrentTablePage(value) {
       this.currentTablePage = value;
     },
-    changeShowModal() {
+    closeModal() {
       this.showModal = false;
     },
     openModal() {
@@ -159,9 +164,17 @@ export default {
     },
     deleteClientHandler(id) {
       this.deletedClientId = id;
-      console.log(this.deletedClientId);
       this.openModal();
     },
+    writeDeletedRowId(id) {
+      this.deletedRowId = id;
+    },
+    clearDeletedRowId() {
+      this.deletedRowId = "";
+    },
+    clearDeletedClientId() {
+      this.deletedClientId = "";
+    },
   },
   watch: {
     updatedClients() {
@@ -171,16 +184,16 @@ export default {
           this.fetchDataClients().then(
             () => (this.currentTablePage = this.pageCount)
           );
-        }, 60);
+        }, 100);
         this.$emit("reset-updated-clients");
       }
     },
     currentTablePage() {
       this.fetchDataClients();
     },
-    /*showModal() {
-      if (!this.showModal) this.deletedClientId = "";
-    },*/
+    showModal() {
+      if (!this.showModal) this.clearDeletedClientId();
+    },
   },
   mounted() {
     this.fetchDataClients();

src/pages/clients/components/ClientsTableRow.vue

@@ -4,13 +4,14 @@
       v-if="rowOverlay",
       :style="rowSize"
     )
-      button.recover-btn Восстановить
-      div 0:30
-    .row-wrapper.flex.flex-col.w-full(ref="rowWrapper")
+      button.recover-btn(@click="stopTimer") Восстановить
+      .countdown 0:{{ countdown }}
+    .row-wrapper.flex.flex-col.w-full
       .row-body.flex.w-full.cursor-pointer(
         :id="id",
         @click="(e) => openDetailInfo(e)",
         :class="{'row-overlay-color': rowOverlay}"
+        ref="rowBody"
       )
         .check-box.flex.justify-center.items-center(
           :style="{'opacity': rowOverlay && '0.5'}"
@@ -84,7 +85,7 @@
               @delete-client="transmitDeleteClient"
             )
       client-detail-info-wrapper(
-        v-if="isOpenDetailInfo && !rowOverlay",
+        v-if="isOpenDetailInfo",
         :data-address="dataAddress"
         :data-detail="dataDetail"
         :data-attachments="dataAttachments"
@@ -162,6 +163,8 @@ export default {
         flat: "",
         index: "",
       },
+      timer: null,
+      countdown: 0,
     };
   },
   props: {
@@ -172,39 +175,9 @@ export default {
     currentYear: Number,
     rowOverlay: Boolean,
   },
-  created() {
-    this.dataClient = {
-      id: this.client.id,
-      fullName: `${this.client.last_name || ""} ${
-        this.client.first_name || ""
-      } ${this.client.patronymic || ""}`,
-      age: this.client.birth_date || "",
-      priority: this.prioritySettings.settings.find(
-        (el) => el.priority === this.client.priority
-      ).text,
-      phone: {
-        id: this.client.contacts.find((el) => el.kind === "PHONE")?.id || "",
-        kind: "PHONE",
-        username:
-          this.client.contacts.find((el) => el.kind === "PHONE")?.username ||
-          "",
-      },
-      email: {
-        id: this.client.contacts.find((el) => el.kind === "EMAIL")?.id || "",
-        kind: "EMAIL",
-        username:
-          this.client.contacts.find((el) => el.kind === "EMAIL")?.username ||
-          "",
-      },
-      contacts: [...this.client.contacts],
-      avatar: `${this.client.last_name[0]}${this.client.first_name[0]}`,
-      color: this.client.color,
-      photo: this.client.photo,
-    };
-  },
   computed: {
     rowSize() {
-      let size = this.$refs["rowWrapper"].getBoundingClientRect();
+      let size = this.$refs["rowBody"].getBoundingClientRect();
       return {
         height: `${size.height}px`,
         width: `${size.width}px`,
@@ -212,6 +185,25 @@ export default {
     },
   },
   methods: {
+    stopTimer() {
+      if (this.countdown !== 0) this.countdown = 0;
+      clearInterval(this.timer);
+      this.timer = null;
+      this.$emit("recover-client");
+    },
+    startTimer() {
+      this.countdown = 30;
+      this.timer = setInterval(() => {
+        this.changeCountdown();
+      }, 1000);
+    },
+    changeCountdown() {
+      if (this.countdown === 0) {
+        this.deleteClient().then(() => this.stopTimer());
+      } else {
+        this.countdown -= 1;
+      }
+    },
     postUpdateClient() {
       fetchWrapper.post(`general/person/${this.client.id}/update/`, {
         full_name: this.dataClient.fullName,
@@ -300,11 +292,14 @@ export default {
       this.isOpenChange = true;
     },
     transmitDeleteClient() {
-      /*  await fetchWrapper.del(`general/person/${this.dataClient.id}/delete/`);
-      this.handleUnFocusPopup();
-      this.$emit("update-clients");*/
+      this.isOpenDetailInfo = false;
       this.$emit("delete-client", this.dataClient.id);
     },
+    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/`)
@@ -461,6 +456,44 @@ export default {
         .then(() => this.fetchClientDetail(this.id));
     },
   },
+  watch: {
+    rowOverlay() {
+      if (this.rowOverlay) this.startTimer();
+    },
+  },
+  created() {
+    this.dataClient = {
+      id: this.client.id,
+      fullName: `${this.client.last_name || ""} ${
+        this.client.first_name || ""
+      } ${this.client.patronymic || ""}`,
+      age: this.client.birth_date || "",
+      priority: this.prioritySettings.settings.find(
+        (el) => el.priority === this.client.priority
+      ).text,
+      phone: {
+        id: this.client.contacts.find((el) => el.kind === "PHONE")?.id || "",
+        kind: "PHONE",
+        username:
+          this.client.contacts.find((el) => el.kind === "PHONE")?.username ||
+          "",
+      },
+      email: {
+        id: this.client.contacts.find((el) => el.kind === "EMAIL")?.id || "",
+        kind: "EMAIL",
+        username:
+          this.client.contacts.find((el) => el.kind === "EMAIL")?.username ||
+          "",
+      },
+      contacts: [...this.client.contacts],
+      avatar: `${this.client.last_name[0]}${this.client.first_name[0]}`,
+      color: this.client.color,
+      photo: this.client.photo,
+    };
+  },
+  beforeUnmount() {
+    this.stopTimer();
+  },
 };
 </script>
 
@@ -493,4 +526,6 @@ export default {
   background: var(--row-overlay-color)
 .recover-btn
   color: var(--btn-blue-color)
+.countdown
+  color: var(--font-grey-color )
 </style>