From 9f12971f363ad8a49de774a553aa9d7ec0fa4041 Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Thu, 27 Oct 2022 15:21:48 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=B4=D0=BE=D0=B4=D0=B5=D0=BB=D0=B0?=
 =?UTF-8?q?=D0=BB=20=D1=80=D0=B5=D0=B4=D0=B0=D0=BA=D1=82=D0=B8=D1=80=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=BA=D0=BB=D0=B8=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=82=D0=B0,=20=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82=D0=BE?=
 =?UTF-8?q?=D0=B2=20sidebar,=20=D1=83=D0=B1=D1=80=D0=B0=D0=BB=20=D0=BB?=
 =?UTF-8?q?=D0=B8=D1=88=D0=BD=D0=B8=D0=B5=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=82=D1=8B=20=D0=B4=D0=B5=D1=82=D0=B0=D0=BB=D1=8C=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B9=20=D0=B8=D0=BD=D1=84=D0=BE=D1=80=D0=BC=D0=B0=D1=86?=
 =?UTF-8?q?=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TheSidebar.vue                 | 64 ++++++++++++++++---
 src/components/base/BaseAddingNetwork.vue     |  4 +-
 src/components/base/BaseInput.vue             |  2 +-
 src/components/base/BaseSelect.vue            | 39 +++++++++--
 .../base/buttons/BaseSidebarButton.vue        |  7 +-
 .../components/ClientDetailInfoWrapper.vue    |  5 --
 src/pages/clients/components/ClientsTable.vue |  2 +-
 .../clients/components/ClientsTableRow.vue    |  9 ++-
 .../components/cells/TableCellBodyAge.vue     |  4 +-
 .../components/cells/TableCellBodyEmail.vue   |  4 +-
 .../components/cells/TableCellBodyName.vue    |  2 +-
 .../cells/TableCellBodyNetworks.vue           | 18 ++++--
 12 files changed, 121 insertions(+), 39 deletions(-)

diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index 4dc157b..c746cd6 100644
--- a/src/components/TheSidebar.vue
+++ b/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="#/")
-        .icon-home.icon
-      the-button-sidebar(id="calendar" path="#/calendar")
-        .icon-calendar-2.icon
-      the-button-sidebar(id="user" path="#/clients")
-        .icon-person-2.icon
+      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(:class="button.icon")
     .flex.text-4xl.flex-col.gap-y-6
-      the-button-sidebar(id="settings" path="#/settings")
-        .icon-settings.icon
+      the-button-sidebar(:path="getSettings.path" :id="getSettings.id" :active="getSettings.active" :change-style-page="changeStylePage")
+        .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>
 
diff --git a/src/components/base/BaseAddingNetwork.vue b/src/components/base/BaseAddingNetwork.vue
index 25f15b0..56a2286 100644
--- a/src/components/base/BaseAddingNetwork.vue
+++ b/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>
diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index a86822f..2628665 100644
--- a/src/components/base/BaseInput.vue
+++ b/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>
diff --git a/src/components/base/BaseSelect.vue b/src/components/base/BaseSelect.vue
index d0e8699..d57effb 100644
--- a/src/components/base/BaseSelect.vue
+++ b/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'}")
-          .not-italic.option.pl-4.py-1(v-for="responsible in listData" @click="(e) => chooseOption(e)" :key="responsible" :id="responsible") {{responsible}}
-      .not-italic.select.cursor-pointer.w-full(v-if="forNetworks" :class="optionData")
-        .absolute.options(v-show="isSelectOpen" :id="id" :style="{ minWidth : widthSelect + 'px'}")
-          .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")
+        .absolute.options(
+          v-show="isSelectOpen"
+          :id="id"
+          class="left-[-18px]"
+          :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)
diff --git a/src/components/base/buttons/BaseSidebarButton.vue b/src/components/base/buttons/BaseSidebarButton.vue
index dca70e8..83b5fc5 100644
--- a/src/components/base/buttons/BaseSidebarButton.vue
+++ b/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)
diff --git a/src/pages/clients/components/ClientDetailInfoWrapper.vue b/src/pages/clients/components/ClientDetailInfoWrapper.vue
index 85853f3..612bac3 100644
--- a/src/pages/clients/components/ClientDetailInfoWrapper.vue
+++ b/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>
diff --git a/src/pages/clients/components/ClientsTable.vue b/src/pages/clients/components/ClientsTable.vue
index 42b7029..5d54be1 100644
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/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") {
diff --git a/src/pages/clients/components/ClientsTableRow.vue b/src/pages/clients/components/ClientsTableRow.vue
index d36a32c..738c96b 100644
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/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) {
diff --git a/src/pages/clients/components/cells/TableCellBodyAge.vue b/src/pages/clients/components/cells/TableCellBodyAge.vue
index b1af591..9a85099 100644
--- a/src/pages/clients/components/cells/TableCellBodyAge.vue
+++ b/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>
 
diff --git a/src/pages/clients/components/cells/TableCellBodyEmail.vue b/src/pages/clients/components/cells/TableCellBodyEmail.vue
index 8d6f305..e04796c 100644
--- a/src/pages/clients/components/cells/TableCellBodyEmail.vue
+++ b/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>
 
diff --git a/src/pages/clients/components/cells/TableCellBodyName.vue b/src/pages/clients/components/cells/TableCellBodyName.vue
index 159aeee..ac4630b 100644
--- a/src/pages/clients/components/cells/TableCellBodyName.vue
+++ b/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>
 
diff --git a/src/pages/clients/components/cells/TableCellBodyNetworks.vue b/src/pages/clients/components/cells/TableCellBodyNetworks.vue
index e33cb88..92748e8 100644
--- a/src/pages/clients/components/cells/TableCellBodyNetworks.vue
+++ b/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() {