From 5ed39c0038f2fde59f6ad9e815a93940304a748f Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Wed, 30 Nov 2022 10:49:51 +0300 Subject: [PATCH 1/4] =?UTF-8?q?WIP=20=D0=9D=D0=B0=D1=87=D0=B0=D0=BB=D0=B0?= =?UTF-8?q?=20=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=BC?= =?UTF-8?q?=D0=BE=D0=B4=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE=D0=B3=D0=BE=20=D0=BE?= =?UTF-8?q?=D0=BA=D0=BD=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CalendarFormAddEvent.vue | 2 +- .../components/ClientTableDeleteModal.vue | 39 +++++++++++++++++++ src/pages/clients/components/ClientsTable.vue | 7 ++++ 3 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 src/pages/clients/components/ClientTableDeleteModal.vue diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue index 9a86ff3..83cad58 100644 --- a/src/pages/calendar/components/CalendarFormAddEvent.vue +++ b/src/pages/calendar/components/CalendarFormAddEvent.vue @@ -376,7 +376,7 @@ export default { }, fetchMembersData() { fetchWrapper - .get("general/person/") + .get("general/person/?limit=100") .then((res) => this.saveMembersData(res)); }, saveMembersData(res) { diff --git a/src/pages/clients/components/ClientTableDeleteModal.vue b/src/pages/clients/components/ClientTableDeleteModal.vue new file mode 100644 index 0000000..7cbe768 --- /dev/null +++ b/src/pages/clients/components/ClientTableDeleteModal.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/src/pages/clients/components/ClientsTable.vue b/src/pages/clients/components/ClientsTable.vue index 897c58a..b8b1912 100644 --- a/src/pages/clients/components/ClientsTable.vue +++ b/src/pages/clients/components/ClientsTable.vue @@ -25,6 +25,10 @@ @next-page="switchNextPage", @set-current-page="changeCurrentTablePage" ) + base-modal( + v-model="showModal", + title="Удалить клиента" + ) diff --git a/src/pages/clients/components/ClientsTable.vue b/src/pages/clients/components/ClientsTable.vue index b8b1912..e9e64f4 100644 --- a/src/pages/clients/components/ClientsTable.vue +++ b/src/pages/clients/components/ClientsTable.vue @@ -15,8 +15,9 @@ :is-check="marked.includes(client.id)", :check="selectedCheck", :client="client", - :fetch-data-clients="fetchDataClients", - @update-clients="updateDataClient" + :current-year="currentYear", + :row-overlay="deletedClientId === client.id", + @delete-client="deleteClientHandler", ) client-table-pagination( v-if="paginationInfo.length > 1" @@ -29,6 +30,9 @@ v-model="showModal", title="Удалить клиента" ) + client-table-delete-modal( + :close-modal="changeShowModal" + ) 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 ) From 660f50fa26b931642c124d81963670aac910ed34 Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Wed, 30 Nov 2022 19:26:15 +0300 Subject: [PATCH 4/4] =?UTF-8?q?WIP=20=D0=A3=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD?= =?UTF-8?q?=D0=B0=20=D0=BB=D0=B8=D1=88=D0=BD=D1=8F=D1=8F=20=D0=BF=D1=80?= =?UTF-8?q?=D0=BE=D0=BF=D1=81=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/clients/components/ClientsTable.vue | 1 - src/pages/clients/components/ClientsTableRow.vue | 2 -- 2 files changed, 3 deletions(-) diff --git a/src/pages/clients/components/ClientsTable.vue b/src/pages/clients/components/ClientsTable.vue index 79b6301..d521202 100644 --- a/src/pages/clients/components/ClientsTable.vue +++ b/src/pages/clients/components/ClientsTable.vue @@ -15,7 +15,6 @@ :is-check="marked.includes(client.id)", :check="selectedCheck", :client="client", - :current-year="currentYear", :row-overlay="deletedRowId === client.id", @delete-client="deleteClientHandler", @recover-client="clearDeletedRowId", diff --git a/src/pages/clients/components/ClientsTableRow.vue b/src/pages/clients/components/ClientsTableRow.vue index cdaa030..cb7e906 100644 --- a/src/pages/clients/components/ClientsTableRow.vue +++ b/src/pages/clients/components/ClientsTableRow.vue @@ -102,7 +102,6 @@ :create-document="postCreateIdentityDocument" :address-id="addressId" :doc-id="docId" - :current-year="currentYear" ) @@ -172,7 +171,6 @@ export default { check: Function, isCheck: Boolean, client: Object, - currentYear: Number, rowOverlay: Boolean, }, computed: {