WIP доделал редактирование клиента, исправил отображение элементов sidebar, убрал лишние элементы детальной информации

src/pages/clients/components/ClientDetailInfoWrapper.vue

@@ -1,14 +1,9 @@
 <template lang="pug">
   .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.snils" section="snils" )
-      client-detail-info-section(:section-info="dataDetail.inn" section="inn" )
     .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="dataDetail.docs" section="docs" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
-    client-detail-info-section(:section-info="dataDetail.additional" section="additional" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
 </template>
 
 <script>

src/pages/clients/components/ClientsTable.vue

@@ -43,7 +43,7 @@ export default {
     },
     fetchDataClients() {
       // eslint-disable-next-line
-      fetch("/api/clients").then((res) => res.json()).then((data) => this.saveDataClients(data))
+      fetch("api/clients").then((res) => res.json()).then((data) => this.saveDataClients(data))
     },
     selectedCheck(e) {
       if (e.target.id === "checkbox") {

src/pages/clients/components/ClientsTableRow.vue

@@ -8,10 +8,10 @@
       table-cell-body-priority(:value="dataClient.priority" :choose-priority="choosePriority" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'priority').width")
       table-cell-body-phone(:value="dataClient" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'phone').width")
       table-cell-body-email(:value="dataClient" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'email').width")
-      table-cell-body-networks(:delete-network="deleteNetwork" :networks="dataClient.contacts" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'networks').width")
+      table-cell-body-networks(: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
         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-if="!isOpenChange" :tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
+        .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")
 </template>
@@ -81,9 +81,12 @@ export default {
     };
   },
   methods: {
+    addNetwork(network) {
+      this.dataClient.contacts.push(network);
+    },
     deleteNetwork(e) {
       this.dataClient.contacts = this.dataClient.contacts.filter(
-        (el) => el.id !== e.target.id
+        (el) => el.kind !== e.target.id
       );
     },
     choosePriority(e) {

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

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

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

@@ -1,6 +1,6 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
-    span.text-sm(v-if="!isOpenChange") {{value.email.username}}
+  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px' }")
+    span(v-if="!isOpenChange") {{value.email.username}}
     base-input(v-if="isOpenChange" :width-input="234" v-model:value="value.email.username" :placeholder="value.email.username" )
 </template>
 

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

@@ -2,7 +2,7 @@
   .flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(:style="{ minWidth : width + 'px' }")
     .flex.avatar.justify-center.items-center
       span {{avatar}}
-    span.text-sm.font-semibold(v-if="!isOpenChange") {{value.fullName}}
+    span.font-semibold(v-if="!isOpenChange") {{value.fullName}}
     base-input(v-if="isOpenChange" type="text" v-model:value="value.fullName" :width-input="300")
 </template>
 

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

@@ -2,12 +2,12 @@
   .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")
-        .absolute.icon-cancel-mini.delete.flex.w-4.h-4.justify-center.items-center.bottom-4.left-2(v-if="isOpenChange" :id="network.id" @click="(e) => deleteNetwork(e)")
+        .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
       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" :list-adding-networks="getAddingNetworks")
-        base-create-button(text="Добавить" @click="closePopupAdding")
+        base-adding-network(:value="network" :selected-option="getSelectedIcon" :list-adding-networks="getAddingNetworks" :choose-network="chooseNetwork")
+        base-create-button(text="Добавить" @click="saveNetwork")
 </template>
 
 <script>
@@ -35,7 +35,6 @@ export default {
     return {
       isOpenPopupAdding: false,
       network: {
-        id: Math.floor(Math.random() * 100000),
         kind: "TELEGRAM",
         username: "",
       },
@@ -43,6 +42,11 @@ export default {
     };
   },
   computed: {
+    getSelectedIcon() {
+      return this.settings.settings.find(
+        (el) => el.network === this.network.kind
+      ).icon;
+    },
     getAddingNetworks() {
       let kinds = this.networks.map((el) => el.kind);
       return this.settings.settings.filter((el) => !kinds.includes(el.network));
@@ -54,7 +58,11 @@ export default {
     },
   },
   methods: {
-    closePopupAdding() {
+    chooseNetwork(e) {
+      this.network.kind = e.target.id;
+    },
+    saveNetwork() {
+      this.addNetwork(this.network);
       this.isOpenPopupAdding = false;
     },
     openPopupAdding() {