diff --git a/src/pages/clients/components/ClientTableDeleteModal.vue b/src/pages/clients/components/ClientTableDeleteModal.vue index 17b0c91..e52419c 100644 --- a/src/pages/clients/components/ClientTableDeleteModal.vue +++ b/src/pages/clients/components/ClientTableDeleteModal.vue @@ -10,7 +10,7 @@ base-button( outlined-red, :size=40, - @click="" + @click="transmitDeleteClient" ) Удалить @@ -23,6 +23,13 @@ export default { }, props: { closeModal: Function, + deletedClientId: String, + }, + methods: { + transmitDeleteClient() { + this.$emit("delete-client", this.deletedClientId); + this.closeModal(); + }, }, }; diff --git a/src/pages/clients/components/ClientsTable.vue b/src/pages/clients/components/ClientsTable.vue index e9e64f4..79b6301 100644 --- a/src/pages/clients/components/ClientsTable.vue +++ b/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" ) @@ -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(); diff --git a/src/pages/clients/components/ClientsTableRow.vue b/src/pages/clients/components/ClientsTableRow.vue index 08bb5f9..cdaa030 100644 --- a/src/pages/clients/components/ClientsTableRow.vue +++ b/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(); + }, }; @@ -493,4 +526,6 @@ export default { background: var(--row-overlay-color) .recover-btn color: var(--btn-blue-color) +.countdown + color: var(--font-grey-color )