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

src/components/TheSidebar.vue

@@ -1,15 +1,11 @@
 <template lang="pug">
   .sidebar.flex.flex-col.justify-between.flex-auto.py-6.box-border
     .flex.flex-col.gap-y-6
-      the-button-sidebar(id="home" path="#/")
+      the-button-sidebar( v-for="button in pageSettings.filter((el) => el.id !== 'settings')" :path="button.path" :id="button.id" :active="button.active" :change-style-page="changeStylePage")
-        .icon-home.icon
+        .icon(:class="button.icon")
-      the-button-sidebar(id="calendar" path="#/calendar")
-        .icon-calendar-2.icon
-      the-button-sidebar(id="user" path="#/clients")
-        .icon-person-2.icon
     .flex.text-4xl.flex-col.gap-y-6
-      the-button-sidebar(id="settings" path="#/settings")
+      the-button-sidebar(:path="getSettings.path" :id="getSettings.id" :active="getSettings.active" :change-style-page="changeStylePage")
-        .icon-settings.icon
+        .icon(:class="getSettings.icon")
 </template>
 
 <script>
@@ -18,6 +14,58 @@ import TheButtonSidebar from "@/components/base/buttons/BaseSidebarButton";
 export default {
   name: "TheSidebar",
   components: { TheButtonSidebar },
+  data() {
+    return {
+      pageSettings: [
+        {
+          id: "home",
+          path: "#/",
+          active: true,
+          icon: "icon-home",
+        },
+        {
+          id: "calendar",
+          path: "#/calendar",
+          active: false,
+          icon: "icon-calendar-2",
+        },
+        {
+          id: "user",
+          path: "#/clients",
+          active: false,
+          icon: "icon-person-2",
+        },
+        {
+          id: "settings",
+          path: "#/settings",
+          icon: "icon-settings",
+          active: false,
+        },
+      ],
+    };
+  },
+  methods: {
+    changeStylePage(e) {
+      this.pageSettings.forEach((el, index) => {
+        el.id === e.currentTarget.id
+          ? (this.pageSettings[index].active = true)
+          : (this.pageSettings[index].active = false);
+      });
+    },
+  },
+  computed: {
+    getSettings() {
+      return this.pageSettings.find((el) => el.id === "settings");
+    },
+  },
+  mounted() {
+    let href = window.location.href.slice(22);
+    this.pageSettings.forEach((el, index) => {
+      el.path === href
+        ? (this.pageSettings[index].active = true)
+        : (this.pageSettings[index].active = false);
+    });
+  },
 };
 </script>
 

src/components/base/BaseAddingNetwork.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .flex(class="gap-x-1.5")
-    base-select(:for-networks="true" :style-border="true" :list-data="listAddingNetworks" :option-data="value.kind")
+    base-select(:for-networks="true" :style-border="true" :list-data="listAddingNetworks" :option-data="selectedOption" :choose-option="chooseNetwork" :width-select="42")
     base-input.input-info.w-full(v-model:value="value.username" :id="value.id" placeholder="Ссылкa")
 </template>
 
@@ -11,8 +11,10 @@ export default {
   name: "TableAddingNetwork",
   components: { BaseInput, BaseSelect },
   props: {
+    selectedOption: String,
     value: Object,
     listAddingNetworks: Array,
+    chooseNetwork: Function,
   },
 };
 </script>

src/components/base/BaseInput.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5" :style="{ minWidth: widthInput + 'px' }")
-    input.w-full.outline-0.not-italic(:style="{ backgroundColor: backgroundInput, fontSize: fontSizeInput }" :value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
+    input.w-full.outline-0.not-italic(:value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
     .slot(v-if="withIcon" :class="iconPosition")
       slot.cursor-pointer
 </template>

src/components/base/BaseSelect.vue

@@ -1,12 +1,36 @@
 <template lang="pug">
-  .flex.justify-between.box-border.px-4.w-full.container.items-center.cursor-pointer(@click="openSelect" class="py-2.5" :class="{border: styleBorder}" :style="{ minWidth : widthSelect + 'px'}")
+  .flex.box-border.w-full.container.items-center.cursor-pointer(
+    @click="openSelect"
+    :class="{border: styleBorder, 'py-2.5 px-4':!forNetworks, 'justify-center':forNetworks, 'justify-between':!forNetworks}"
+    :style="{ minWidth : widthSelect + 'px'}"
+    )
     .relative.flex.flex-col
       .not-italic.select.cursor-pointer.w-full(v-if="!forNetworks") {{optionData}}
-        .absolute.options(v-show="isSelectOpen" :id="id" :style="{ minWidth : widthSelect + 'px'}")
+        .absolute.options(
-          .not-italic.option.pl-4.py-1(v-for="responsible in listData" @click="(e) => chooseOption(e)" :key="responsible" :id="responsible") {{responsible}}
+          v-show="isSelectOpen"
-      .not-italic.select.cursor-pointer.w-full(v-if="forNetworks" :class="optionData")
+          :id="id"
-        .absolute.options(v-show="isSelectOpen" :id="id" :style="{ minWidth : widthSelect + 'px'}")
+          class="left-[-18px]"
-          .not-italic.option.pl-4.py-1(v-for="responsible in listData" @click="(e) => chooseOption(e)" :key="responsible.network" :id="responsible.network" :class="responsible.icon")
+          :style="{ minWidth : widthSelect + 'px'}"
+          )
+          .not-italic.option.pl-4.py-1(
+            v-for="responsible in listData"
+            @click="(e) => chooseOption(e)"
+            :key="responsible"
+            :id="responsible"
+            ) {{responsible}}
+      .flex.not-italic.select.cursor-pointer.w-full.text-xl.items-center.networks(v-if="forNetworks" :class="optionData")
+        .absolute.options.top-5(
+          v-show="isSelectOpen"
+          class="left-[-11px]"
+          :id="id"
+          :style="{ minWidth : widthSelect + 'px'}")
+          .flex.not-italic.option.justify-center.py-1.text-xl(
+            v-for="responsible in listData"
+            @click="(e) => chooseOption(e)"
+            :key="responsible.network"
+            :id="responsible.network"
+            :class="responsible.icon"
+            )
     .select-form-separator.cursor-pointer(v-if="withSeparator")
     .text-sm.ml-2.pt-1.icon-down-arrow.icon.text-center(v-if="!forNetworks" :class="{ open: isSelectOpen}")
 </template>
@@ -58,6 +82,8 @@ export default {
   &::-webkit-calendar-picker-indicator
     display: none
     -webkit-appearance: none
+  &.networks
+    color: var(--font-dark-blue-color)
 .options
   z-index: 3
   width: max-content
@@ -65,7 +91,6 @@ export default {
   border: 2px solid var(--border-light-grey-color)
   border-top: none
   border-radius: 0 0 4px 4px
-  left: -18px
 .option
   color: var(--font-black-color)
   border-bottom: 1px solid var(--border-light-grey-color)

src/components/base/buttons/BaseSidebarButton.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   a(:href="path")
-    button.button.cursor-pointer.text-4xl.py-3.pr-4.pl-3(:id="id")
+    button.button.cursor-pointer.text-4xl.py-3.pr-4.pl-3(:id="id" :class="{active:active}" @click="(e) => changeStylePage(e)")
       slot
 </template>
 
@@ -10,7 +10,8 @@ export default {
   props: {
     path: String,
     id: String,
-    changeStyle: Function,
+    changeStylePage: Function,
+    active: Boolean,
   },
   data() {
     return {
@@ -31,7 +32,7 @@ export default {
   border-top: none
   border-bottom: none
   border-left-style: solid
-.button:focus
+.active
   background-color: var(--btn-blue-color-1)
   border-left-color: var(--btn-blue-color)
   color: var(--btn-blue-color)

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' }")
+  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px' }")
-    span.text-sm(v-if="!isOpenChange") {{new Date().getFullYear() - new Date(value.age).getFullYear()}}
+    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' }")
+  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px' }")
-    span.text-sm(v-if="!isOpenChange") {{value.email.username}}
+    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-adding-network(:value="network" :selected-option="getSelectedIcon" :list-adding-networks="getAddingNetworks" :choose-network="chooseNetwork")
-        base-create-button(text="Добавить" @click="closePopupAdding")
+        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() {