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

src/components/base/BaseAddingNetwork.vue

@@ -12,7 +12,10 @@ export default {
   name: "TableAddingNetwork",
   components: { BaseInput, BaseSelect },
   props: {
-    saveNetworkId: Function,
+    saveNetworkId: {
+      type: Function,
+      default: () => {},
+    },
     selectedOption: String,
     value: Object,
     listAddingNetworks: Array,

src/pages/clients/components/ClientDetailInfoWrapper.vue

@@ -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="dataAddress" section="addresses")
-      client-detail-info-section(:section-info="dataDetail.addresses" section="addresses")
 </template>
 
 <script>
@@ -13,6 +12,7 @@ export default {
   components: { ClientDetailInfoSection },
   props: {
     dataDetail: Object,
+    dataAddress: Object,
     saveNewDoc: Function,
     deleteDoc: Function,
     dataDocument: Object,

src/pages/clients/components/ClientsFormCreate.vue

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

src/pages/clients/components/ClientsTable.vue

@@ -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") {

src/pages/clients/components/ClientsTableRow.vue

@@ -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}`,
+      id: this.client.id,
-      age: this.client.birth_date,
+      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") || {
+      phone: {
-        kind: "EMAIL",
+        id: this.client.contacts.find((el) => el.kind === "PHONE")?.id || "",
-        username: "",
+        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))
+      fetch(`http://45.84.227.122:8080/general/person/${id}/detail`).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))
     },
     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,
+        numba: data?.numba || "-",
-        issued_by_org: data.issued_by_org,
+        issued_by_org: data?.issued_by_org || "-",
-        issued_by_org_code: data.issued_by_org_code,
+        issued_by_org_code: data?.issued_by_org_code || "-",
-        issued_by_date: data.issued_by_date,
+        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.isOpenDetailInfo && this.fetchClientDetail(e.currentTarget.id);
-        this.fetchClientIdentityDocument(e.currentTarget.id);
     },
     handleUnFocusPopup() {
       this.isOpenPopup = false;

src/pages/clients/components/FormCreateIdentityDocuments.vue

@@ -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")

src/pages/clients/components/cells/TableCellBodyAge.vue

@@ -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>
 

src/pages/clients/components/cells/TableCellBodyNetworks.vue

@@ -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;

src/pages/clients/utils/tableConfig.js

@@ -80,6 +80,14 @@ export const column = [
         network: "DISCORD",
         icon: "icon-discord",
       },
+      {
+        network: "VIBER",
+        icon: "icon-mail",
+      },
+      {
+        network: "WHATS_APP",
+        icon: "icon-mail",
+      },
     ],
     iconHead: false,
     width: 152,
@@ -125,8 +133,7 @@ export const detail = {
   addresses: {
     title: "Адреса",
     options: {
-      registrationPlace: "Адрес постоянной регистрации",
+      join_address: "Полный адрес",
-      actualPlace: "Адрес фактического проживания",
     },
     width: 292,
   },