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

итегрировал таблицу с сервером

Browse Source
This commit is contained in:
DwCay
2022-11-01 23:34:42 +03:00
parent 5863c07e70
commit c08c03f8f6
9 changed files with 169 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/clients/components/ClientDetailInfoWrapper.vue
View File

@@ -2,8 +2,7 @@
.w-full.h-fit.pt-4.flex.gap-x-4(class="px-[52px] pb-[30px]")
client-detail-info-section(v-model:section-info="dataDocument" section="pass")
.flex.flex-col.gap-y-2
client-detail-info-section(:section-info="dataDetail.birthday" section="birthday")
client-detail-info-section(:section-info="dataDetail.addresses" section="addresses")
client-detail-info-section(:section-info="dataAddress" section="addresses")
</template>
<script>
@@ -13,6 +12,7 @@ export default {
components: { ClientDetailInfoSection },
props: {
dataDetail: Object,
dataAddress: Object,
saveNewDoc: Function,
deleteDoc: Function,
dataDocument: Object,

2
src/pages/clients/components/ClientsFormCreate.vue
View File

@@ -81,7 +81,7 @@ export default {
identity_document: {
pass: {
kind: "Паспорт",
numba: "",
series_number: "",
issued_by_org: "",
issued_by_date: "",
issued_by_org_code: "",

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

@@ -12,6 +12,7 @@
:is-check="marked.includes(client.id)"
:check="selectedCheck"
:client="client"
:fetch-data-clients="fetchDataClients"
)
</template>
@@ -44,13 +45,14 @@ export default {
},
closeFormCreateClient() {
this.isOpenFormCreate = false;
this.fetchDataClients();
},
saveDataClients(data) {
this.dataClients = data.results;
},
fetchDataClients() {
// eslint-disable-next-line
fetch("api/clients").then((res) => res.json()).then((data) => this.saveDataClients(data))
fetch("http://45.84.227.122:8080/general/person/").then((res) => res.json()).then((data) => this.saveDataClients(data))
},
selectedCheck(e) {
if (e.target.id === "checkbox") {

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

@@ -13,7 +13,7 @@
base-button-ok(v-if="isOpenChange" :size="20" :icon-size="10" :dark-style="true" @click="closeChangeData")
.relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(v-show="!isOpenChange" :tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
clients-action-popup(v-if="isOpenPopup" :open-change-data="openChangeData")
client-detail-info-wrapper(v-if="isOpenDetailInfo" :data-detail="dataDetail" :data-document="dataIdentityDocument" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
client-detail-info-wrapper(v-if="isOpenDetailInfo" :data-address="dataAddress" :data-detail="dataDetail" :data-document="dataIdentityDocument" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
</template>
<script>
@@ -49,6 +49,7 @@ export default {
data() {
return {
dataIdentityDocument: {},
dataAddress: {},
dataDetail: {},
isOpenDetailInfo: false,
isOpenPopup: false,
@@ -62,25 +63,127 @@ export default {
check: Function,
isCheck: Boolean,
client: Object,
fetchDataClients: Function,
},
created() {
this.dataClient = {
fullName: `${this.client.last_name} ${this.client.first_name} ${this.client.patronymic}`,
age: this.client.birth_date,
id: this.client.id,
fullName: `${this.client.last_name || ""} ${
this.client.first_name || ""
} ${this.client.patronymic || ""}`,
age: this.client.birth_date || "",
priority: this.client.priority,
phone: this.client.contacts.find((el) => el.kind === "PHONE") || {
kind: "EMAIL",
username: "",
phone: {
id: this.client.contacts.find((el) => el.kind === "PHONE")?.id || "",
kind: "PHONE",
username:
this.client.contacts.find((el) => el.kind === "PHONE")?.username ||
"",
},
email: this.client.contacts.find((el) => el.kind === "EMAIL") || {
email: {
id: this.client.contacts.find((el) => el.kind === "EMAIL")?.id || "",
kind: "EMAIL",
username: "",
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]}`,
};
},
methods: {
postUpdateClient() {
fetch(
`http://45.84.227.122:8080/general/person/${this.client.id}/update/`,
{
method: "POST",
headers: {
Accept: "*/*",
"Content-Type": "application/json;charset=utf-8",
},
body: JSON.stringify({
full_name: this.dataClient.fullName,
birth_date: this.dataClient.age,
priority: this.dataClient.priority,
}),
}
);
},
postContactsClient() {
let contacts = [...this.dataClient.contacts];
if (
this.dataClient.email.username &&
!contacts.find((el) => el.kind === "EMAIL")
) {
contacts.push(this.dataClient.email);
}
if (
this.dataClient.phone.username &&
!contacts.find((el) => el.kind === "PHONE")
) {
contacts.push(this.dataClient.phone);
}
let mapCreateContacts = this.client.contacts.map((el) => el.kind);
// let mapDeleteContacts = contacts.map((el) => el.kind);
let createContacts = contacts.filter(
(el) => !mapCreateContacts.includes(el.kind)
);
// let deleteContacts = this.client.contacts.filter(
// (el) => !mapDeleteContacts.includes(el.kind)
// );
let updateContacts = [];
this.client.contacts.forEach((el) => {
if (
el.kind === "PHONE" &&
el.username !== this.dataClient.phone.username
) {
updateContacts.push(this.dataClient.phone);
}
if (
el.kind === "EMAIL" &&
el.username !== this.dataClient.email.username
) {
updateContacts.push(this.dataClient.email);
}
});
createContacts.forEach((el) => this.postCreateContact(el));
// deleteContacts.forEach((el) => this.postDeleteContact(el));
updateContacts.forEach((el) => this.postUpdateContact(el));
},
postCreateContact(contact) {
fetch("http://45.84.227.122:8080/general/contact/create/", {
method: "POST",
headers: {
Accept: "*/*",
"Content-Type": "application/json;charset=utf-8",
},
body: JSON.stringify({
kind: contact.kind,
username: contact.username,
person_id: this.client.id,
}),
});
},
postUpdateContact(contact) {
fetch(`http://45.84.227.122:8080/general/contact/${contact.id}/update/`, {
method: "POST",
headers: {
Accept: "*/*",
"Content-Type": "application/json;charset=utf-8",
},
body: JSON.stringify({
kind: contact.kind,
username: contact.username,
person_id: this.client.id,
}),
});
},
postDeleteContact(contact) {
fetch(`http://45.84.227.122:8080/general/contact/${contact.id}/delete/`, {
method: "DELETE",
});
},
addNetwork(network) {
this.dataClient.contacts.push(network);
},
@@ -96,27 +199,34 @@ export default {
},
closeChangeData() {
this.isOpenChange = false;
this.postUpdateClient();
this.postContactsClient();
},
openChangeData() {
this.isOpenChange = true;
},
fetchClientDetail(id) {
// eslint-disable-next-line
fetch(`/api/detail/${id}`).then((res) => res.json()).then((data) => this.saveClientDetail(data))
},
fetchClientIdentityDocument(id) {
// eslint-disable-next-line
fetch(`/api/detail/identity_document/${id}`).then((res) => res.json()).then((data) => this.saveIdentityDocument(data))
fetch(`http://45.84.227.122:8080/general/person/${id}/detail`).then((res) => res.json()).then((data) => this.saveClientDetail(data))
},
saveClientDetail(data) {
this.dataDetail = data;
this.saveIdentityDocument(
data.identity_documents.find((el) => el.kind === "Паспорт")
);
this.saveAddress(data.address[0]);
console.log(this.dataIdentityDocument);
},
saveIdentityDocument(data) {
this.dataIdentityDocument = {
numba: data.numba,
issued_by_org: data.issued_by_org,
issued_by_org_code: data.issued_by_org_code,
issued_by_date: data.issued_by_date,
numba: data?.numba || "-",
issued_by_org: data?.issued_by_org || "-",
issued_by_org_code: data?.issued_by_org_code || "-",
issued_by_date: data?.issued_by_date || "-",
};
},
saveAddress(data) {
this.dataAddress = {
join_address: data?.join_address || "-",
};
},
openPopup(e) {
@@ -125,8 +235,7 @@ export default {
},
openDetailInfo(e) {
this.isOpenDetailInfo = !this.isOpenDetailInfo;
this.isOpenDetailInfo && this.fetchClientDetail(e.currentTarget.id),
this.fetchClientIdentityDocument(e.currentTarget.id);
this.isOpenDetailInfo && this.fetchClientDetail(e.currentTarget.id);
},
handleUnFocusPopup() {
this.isOpenPopup = false;

2
src/pages/clients/components/FormCreateIdentityDocuments.vue
View File

@@ -5,7 +5,7 @@
.grid.grid-cols-2.gap-x-4.gap-y-6
.flex.flex-col(class="gap-y-1.5")
span.text-sm Серия и номер
base-input.input-info(v-model:value="identityDocument.pass.numba" placeholder="0000 000000" :width-input="277")
base-input.input-info(v-model:value="identityDocument.pass.series_number" placeholder="0000 000000" :width-input="277")
.flex.flex-col(class="gap-y-1.5")
span.text-sm Кем и когда выдан
base-input.input-info(v-model:value="identityDocument.pass.issued_by_org" placeholder="Точно как в паспорте" :width-input="277")

2
src/pages/clients/components/cells/TableCellBodyAge.vue
View File

@@ -1,6 +1,6 @@
<template lang="pug">
.flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px' }")
span(v-if="!isOpenChange") {{new Date().getFullYear() - new Date(value.age).getFullYear()}}
span(v-if="!isOpenChange") {{value.age ? new Date().getFullYear() - new Date(value.age).getFullYear() : ""}}
base-input(v-if="isOpenChange" type="date" v-model:value="value.age" :width-input="124")
</template>

27
src/pages/clients/components/cells/TableCellBodyNetworks.vue
View File

@@ -1,9 +1,9 @@
<template lang="pug">
.network-cell.flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
.flex.gap-x-1
.text-xl.icon.relative(v-for="network in getNetworks" :class="settings.settings.find((el) => el.network === network.kind).icon")
.text-xl.icon.relative(v-for="network in getNetworks" :class="settings.settings.find((el) => el.network === network.kind)?.icon || ''")
.absolute.icon-cancel-mini.delete.flex.w-4.h-4.justify-center.items-center.bottom-4.left-2(v-if="isOpenChange" :id="network.kind" @click="(e) => deleteNetwork(e)")
.flex.relative
.flex.relative.pb-2
base-button-plus.ml-3(v-if="isOpenChange && settings.settings.length !== getNetworks.length" :with-border="true" @click="openPopupAdding")
base-popup.right-3.top-6(v-if="isOpenPopupAdding" :width="485")
base-adding-network(:value="network" :selected-option="getSelectedIcon" :list-adding-networks="getAddingNetworks" :choose-network="chooseNetwork")
@@ -25,7 +25,14 @@ export default {
BaseCreateButton,
},
props: {
networks: Array,
networks: {
default: [
{
kind: "TELEGRAM",
username: "",
},
],
},
width: Number,
isOpenChange: Boolean,
deleteNetwork: Function,
@@ -42,6 +49,11 @@ export default {
};
},
computed: {
getNetworks() {
return this.networks.filter(
(el) => el.kind !== "EMAIL" && el.kind !== "PHONE"
);
},
getSelectedIcon() {
return this.settings.settings.find(
(el) => el.network === this.network.kind
@@ -51,11 +63,6 @@ export default {
let kinds = this.networks.map((el) => el.kind);
return this.settings.settings.filter((el) => !kinds.includes(el.network));
},
getNetworks() {
return this.networks.filter(
(el) => el.kind !== "EMAIL" && el.kind !== "PHONE"
);
},
},
methods: {
chooseNetwork(e) {
@@ -64,6 +71,10 @@ export default {
saveNetwork() {
this.addNetwork(this.network);
this.isOpenPopupAdding = false;
this.network = {
kind: "TELEGRAM",
username: "",
};
},
openPopupAdding() {
this.isOpenPopupAdding = true;