admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #167 from dderbentsov/UC-98

Browse Source 
WIP Сделала частично удаление клиента
This commit is contained in:
Daria Golova
2022-11-30 19:37:41 +03:00
committed by GitHub
parent 4aa38a61d0 660f50fa26
commit 17db21306a
7 changed files with 282 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/sass/variables.sass
View File

@@ -18,6 +18,7 @@
--bg-btn-icons-color: rgba(215, 217, 255, 0.6)
--font-grey-color: #9294a7
--border-light-grey-color: #d3d4dc
--row-overlay-color: #f5f6ff
--default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
--bg-hover-row-table: rgba(215, 217, 255, 0.25)
--default-white: #fff

2
src/pages/calendar/components/CalendarFormAddEvent.vue
View File

@@ -376,7 +376,7 @@ export default {
},
fetchMembersData() {
fetchWrapper
.get("general/person/")
.get("general/person/?limit=100")
.then((res) => this.saveMembersData(res));
},
saveMembersData(res) {

46
src/pages/clients/components/ClientTableDeleteModal.vue Normal file
View File

@@ -0,0 +1,46 @@
<template lang="pug">
.flex.flex-col.mb-1.mt-4
span.font-medium.text-base.modal-text Вы действительно хотите удалить клиента?
.flex.gap-x-3.mt-6.font-semibold
base-button(
outlined,
:size=40,
@click="closeModal"
) Отменить
base-button(
outlined-red,
:size=40,
@click="transmitDeleteClient"
) Удалить
</template>
<script>
import BaseButton from "@/components/base/BaseButton.vue";
export default {
name: "ClientTableDeleteModal",
components: {
BaseButton,
},
props: {
closeModal: Function,
deletedClientId: String,
},
methods: {
transmitDeleteClient() {
this.$emit("delete-client", this.deletedClientId);
this.closeModal();
},
},
};
</script>
<style lang="sass" scoped>
.modal-text
color: var(--font-grey-color)
.card-container
width: 420px
height: 194px
border-radius: 4px
border: 1px solid var(--border-light-grey-color-1)
</style>

8
src/pages/clients/components/ClientsActionPopup.vue
View File

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

46
src/pages/clients/components/ClientsTable.vue
View File

@@ -15,7 +15,9 @@
:is-check="marked.includes(client.id)",
:check="selectedCheck",
:client="client",
:fetch-data-clients="fetchDataClients",
:row-overlay="deletedRowId === client.id",
@delete-client="deleteClientHandler",
@recover-client="clearDeletedRowId",
@update-clients="updateDataClient"
)
client-table-pagination(
@@ -25,6 +27,15 @@
@next-page="switchNextPage",
@set-current-page="changeCurrentTablePage"
)
base-modal(
v-model="showModal",
title="Удалить клиента"
)
client-table-delete-modal(
:close-modal="closeModal",
:deleted-client-id="deletedClientId",
@delete-client="writeDeletedRowId"
)
</template>
<script>
@@ -35,6 +46,8 @@ import ClientsTableRow from "@/pages/clients/components/ClientsTableRow";
import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
import ClientTablePagination from "./ClientTablePagination.vue";
import BaseModal from "@/components/base/BaseModal.vue";
import ClientTableDeleteModal from "./ClientTableDeleteModal.vue";
export default {
name: "ClientsTable",
components: {
@@ -44,6 +57,8 @@ export default {
ClientsTableHeader,
BaseClientFormCreate,
ClientTablePagination,
BaseModal,
ClientTableDeleteModal,
},
props: {
openForm: Function,
@@ -57,13 +72,16 @@ export default {
marked: [],
dataClients: [],
currentTablePage: 1,
limit: 4,
limit: 14,
count: 0,
textSearch: "",
paginationInfo: {
currentPage: 0,
length: 0,
},
showModal: false,
deletedClientId: "",
deletedRowId: "",
};
},
computed: {
@@ -137,6 +155,25 @@ export default {
changeCurrentTablePage(value) {
this.currentTablePage = value;
},
closeModal() {
this.showModal = false;
},
openModal() {
this.showModal = true;
},
deleteClientHandler(id) {
this.deletedClientId = id;
this.openModal();
},
writeDeletedRowId(id) {
this.deletedRowId = id;
},
clearDeletedRowId() {
this.deletedRowId = "";
},
clearDeletedClientId() {
this.deletedClientId = "";
},
},
watch: {
updatedClients() {
@@ -146,13 +183,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.clearDeletedClientId();
},
},
mounted() {
this.fetchDataClients();

5
src/pages/clients/components/ClientsTableHat.vue
View File

@@ -9,12 +9,11 @@
placeholder="Введите фамилию"
)
.icon-search
base-button(
outlined,
base-button.font-semibold(
@click="searchLastName",
:size=40
) Поиск
base-button(
base-button.font-semibold(
v-if="searchClient.length > 0",
secondary,
@click="resetLastName",

136
src/pages/clients/components/ClientsTableRow.vue
View File

@@ -1,16 +1,28 @@
<template lang="pug">
.wrapper.flex
.row-overlay.flex.justify-center.items-center.gap-x-2.text-base(
v-if="rowOverlay",
:style="rowSize"
)
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)"
@click="(e) => openDetailInfo(e)",
:class="{'row-overlay-color': rowOverlay}"
ref="rowBody"
)
.check-box.flex.justify-center.items-center(
:style="{'opacity': rowOverlay && '0.5'}"
)
.check-box.flex.justify-center.items-center
clients-table-checkbox(
:id="id",
:check="check",
:is-check="isCheck"
)
table-cell-body-name(
:style="{'opacity': rowOverlay && '0.5'}"
:value="dataClient",
:avatar="dataClient.avatar",
:avatar-color="dataClient.color",
@@ -19,34 +31,39 @@
:width="columnBody.find(el => el.name === 'fullName').width"
)
table-cell-body-age(
v-if="!rowOverlay",
:value="dataClient",
:is-open-change="isOpenChange",
:width="columnBody.find(el => el.name === 'age').width"
)
table-cell-body-priority(
v-if="!rowOverlay",
:value="dataClient.priority",
:choose-priority="choosePriority",
:is-open-change="isOpenChange",
:width="columnBody.find(el => el.name === 'priority').width"
)
table-cell-body-phone(
v-if="!rowOverlay",
:value="dataClient",
:is-open-change="isOpenChange",
:width="columnBody.find(el => el.name === 'phone').width"
)
table-cell-body-email(
v-if="!rowOverlay",
:value="dataClient",
:is-open-change="isOpenChange",
:width="columnBody.find(el => el.name === 'email').width"
)
table-cell-body-networks(
v-if="!rowOverlay",
:delete-network="deleteNetwork",
:add-network="addNetwork",
:networks="dataClient.contacts",
:is-open-change="isOpenChange",
:width="columnBody.find(el => el.name === 'networks').width"
)
.dots.flex.justify-center.items-center
.dots.flex.justify-center.items-center(v-if="!rowOverlay")
base-button(
v-if="isOpenChange",
@click="closeChangeData",
@@ -65,10 +82,10 @@
clients-action-popup(
v-if="isOpenPopup",
:open-change-data="openChangeData"
:delete-client="deleteClient"
@delete-client="transmitDeleteClient"
)
client-detail-info-wrapper(
v-if="isOpenDetailInfo"
v-if="isOpenDetailInfo",
:data-address="dataAddress"
:data-detail="dataDetail"
:data-attachments="dataAttachments"
@@ -145,6 +162,8 @@ export default {
flat: "",
index: "",
},
timer: null,
countdown: 0,
};
},
props: {
@@ -152,38 +171,37 @@ export default {
check: Function,
isCheck: Boolean,
client: Object,
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["rowBody"].getBoundingClientRect();
return {
height: `${size.height}px`,
width: `${size.width}px`,
};
},
},
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,
@@ -271,6 +289,10 @@ export default {
openChangeData() {
this.isOpenChange = true;
},
transmitDeleteClient() {
this.isOpenDetailInfo = false;
this.$emit("delete-client", this.dataClient.id);
},
async deleteClient() {
await fetchWrapper.del(`general/person/${this.dataClient.id}/delete/`);
this.handleUnFocusPopup();
@@ -432,6 +454,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>
@@ -456,4 +516,14 @@ export default {
&:hover
background-color: var(--btn-blue-color)
color: var(--default-white)
.row-overlay
background: transparent
position: absolute
z-index: 100
.row-overlay-color
background: var(--row-overlay-color)
.recover-btn
color: var(--btn-blue-color)
.countdown
color: var(--font-grey-color )
</style>