From 8c2ded87581e769b2a82327516e5a4ec930fd561 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Mon, 12 Dec 2022 13:27:21 +0300
Subject: [PATCH] =?UTF-8?q?[WIP]=20=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D1=88=D0=B8=D1=80=D0=B8=D0=BD=D1=83=20=D1=81=D1=82?=
 =?UTF-8?q?=D0=BE=D0=BB=D0=B1=D1=86=D0=BE=D0=B2=20=D0=BA=D0=BB=D0=B8=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=82=D0=BE=D0=B2,=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D0=BE=D0=B3=D1=80=D0=B0=D0=BD=D0=B8=D1=87=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BD=D0=B0=20=D0=BF=D0=BE=D0=BB=D0=B5=20?=
 =?UTF-8?q?email?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ClientDetailInfoSection.vue    | 17 +++++++++---
 .../cells/ClientsTableCellHeader.vue          |  5 +++-
 .../components/cells/TableCellBodyAge.vue     |  2 +-
 .../components/cells/TableCellBodyEmail.vue   | 27 +++++++++++++++++--
 .../components/cells/TableCellBodyName.vue    |  2 +-
 .../cells/TableCellBodyNetworks.vue           |  2 +-
 .../components/cells/TableCellBodyPhone.vue   |  2 +-
 .../cells/TableCellBodyPriority.vue           |  2 +-
 src/pages/clients/utils/tableConfig.js        |  4 +--
 9 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/src/pages/clients/components/ClientDetailInfoSection.vue b/src/pages/clients/components/ClientDetailInfoSection.vue
index 1533d88..8c98dcd 100644
--- a/src/pages/clients/components/ClientDetailInfoSection.vue
+++ b/src/pages/clients/components/ClientDetailInfoSection.vue
@@ -6,7 +6,7 @@
       span.text-sm.font-semibold.whitespace-nowrap {{settings[section].title}}
       .flex.items-center.gap-x-8
         base-button(
-          v-if="isChange",
+          v-if="isChange && (this.isData || this.isAddress || this.isAttachments)",
           @click.stop="changeDoc",
           confirm,
           rounded,
@@ -15,7 +15,7 @@
         )
           .icon-ok.text-xsm(class="pt-[3px]")
         .edit.icon-edit.cursor-pointer.text-sm(
-          v-if="!isChange",
+          v-if="!isChange && (this.isData || this.isAddress || this.isAttachments)",
           @click="changeClientData"
         )
         .flex.relative
@@ -28,7 +28,11 @@
             :size="24"
           )
             .icon-plus(class="pt-[2px]")
-          base-popup.right-3.top-5(v-if="section === 'docs' && isOpenAddingWrap", :width="244")
+          base-popup.right-3.top-5(
+            v-if="section === 'docs' && isOpenAddingWrap",
+            v-click-outside="closePopup",
+            :width="244"
+          )
             table-choice-adding-doc(
               :add-new-doc="addNewDoc",
               :save-docs="saveDocs",
@@ -46,6 +50,7 @@
               :add-new-doc="addNewDoc",
               :new-docs="docData",
               :close-modal="changeShowModal",
+              v-click-outside="closeAddDocs"
             )
             table-create-package-doc(v-if="isOpenPackage")
           table-adding-new-additional(
@@ -226,6 +231,12 @@ export default {
       this.showModal = false;
       this.saveDocs();
     },
+    closePopup() {
+      this.isOpenAddingWrap = false;
+    },
+    closeAddDocs() {
+      this.isAttachments = false;
+    },
     checkDataPresence(data) {
       let postData = JSON.parse(JSON.stringify(data));
       let keys = Object.keys(postData);
diff --git a/src/pages/clients/components/cells/ClientsTableCellHeader.vue b/src/pages/clients/components/cells/ClientsTableCellHeader.vue
index 8e08ee1..a8f6c4a 100644
--- a/src/pages/clients/components/cells/ClientsTableCellHeader.vue
+++ b/src/pages/clients/components/cells/ClientsTableCellHeader.vue
@@ -1,5 +1,8 @@
 <template lang="pug">
-  .flex.box-border.justify-between.px-4.items-center(:style="{ minWidth : width + 'px' }" :class="{width:generateWidth}")
+  .flex.box-border.justify-between.items-center(
+    :style="{ minWidth : width + 'px', maxWidth: width + 'px', padding: generateWidth ? '0px 16px' : '0px 10px' }",
+    :class="{width:generateWidth}"
+  )
     span.text-sm(v-if="title") {{title}}
     slot
 </template>
diff --git a/src/pages/clients/components/cells/TableCellBodyAge.vue b/src/pages/clients/components/cells/TableCellBodyAge.vue
index 076cb58..d634f0e 100644
--- a/src/pages/clients/components/cells/TableCellBodyAge.vue
+++ b/src/pages/clients/components/cells/TableCellBodyAge.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px' }")
+  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px', maxWidth : width + 'px' }")
     span(v-if="!isOpenChange") {{value.age ? value.age.split("-").reverse().join(".") : ""}}
     base-input-date.input.max-h-10(
       v-if="isOpenChange",
diff --git a/src/pages/clients/components/cells/TableCellBodyEmail.vue b/src/pages/clients/components/cells/TableCellBodyEmail.vue
index fbc33ea..45afac6 100644
--- a/src/pages/clients/components/cells/TableCellBodyEmail.vue
+++ b/src/pages/clients/components/cells/TableCellBodyEmail.vue
@@ -1,6 +1,12 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px' }")
-    span(v-if="!isOpenChange") {{value.email.username}}
+  .flex.box-border.px-4.items-center.w-full.text-sm(
+    :style="{ minWidth: width + 'px', maxWidth: isHover && this.value.email.username.length >= 25 ? width + 30 + 'px' : width + 'px' }"
+  )
+    span.z-10(
+      v-if="!isOpenChange",
+      @mouseover="changeHover",
+      @mouseleave="changeHover"
+    ) {{maxValue}}
     base-input(
       v-if="isOpenChange",
       :width-input="234",
@@ -20,5 +26,22 @@ export default {
     width: Number,
     isOpenChange: Boolean,
   },
+  data() {
+    return {
+      isHover: false,
+    };
+  },
+  computed: {
+    maxValue() {
+      return this.value.email.username.length >= 25 && !this.isHover
+        ? this.value.email.username.substr(0, 25) + "..."
+        : this.value.email.username;
+    },
+  },
+  methods: {
+    changeHover() {
+      this.isHover = !this.isHover;
+    },
+  },
 };
 </script>
diff --git a/src/pages/clients/components/cells/TableCellBodyName.vue b/src/pages/clients/components/cells/TableCellBodyName.vue
index edec08e..1e4f17d 100644
--- a/src/pages/clients/components/cells/TableCellBodyName.vue
+++ b/src/pages/clients/components/cells/TableCellBodyName.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   .flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(
-    :style="{ minWidth : width + 'px' }",
+    :style="{ minWidth : width + 'px', maxWidth : width + 'px' }",
     :class="{'open-change': isOpenChange}"
   )
     base-avatar(:size="36", :color="avatarColor", v-if="!photo") {{avatar}}
diff --git a/src/pages/clients/components/cells/TableCellBodyNetworks.vue b/src/pages/clients/components/cells/TableCellBodyNetworks.vue
index b167da8..a596be4 100644
--- a/src/pages/clients/components/cells/TableCellBodyNetworks.vue
+++ b/src/pages/clients/components/cells/TableCellBodyNetworks.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .network-cell.flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
+  .network-cell.flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px', maxWidth : width + 'px' }")
     .flex.gap-x-1
       .text-xl.icon.relative(
         v-for="network in getNetworks",
diff --git a/src/pages/clients/components/cells/TableCellBodyPhone.vue b/src/pages/clients/components/cells/TableCellBodyPhone.vue
index cf9a966..858fe90 100644
--- a/src/pages/clients/components/cells/TableCellBodyPhone.vue
+++ b/src/pages/clients/components/cells/TableCellBodyPhone.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px' }")
+  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px', maxWidth : width + 'px' }")
     span.text-sm(
       v-if="!isOpenChange"
     ) {{value.phone.username.replace(/\+7(\d{3})(\d{3})(\d{2})(\d{2})/, '+7 ($1) $2-$3-$4')}}
diff --git a/src/pages/clients/components/cells/TableCellBodyPriority.vue b/src/pages/clients/components/cells/TableCellBodyPriority.vue
index a75e9d3..ce51b4b 100644
--- a/src/pages/clients/components/cells/TableCellBodyPriority.vue
+++ b/src/pages/clients/components/cells/TableCellBodyPriority.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.w-full.gap-x-2(:style="{ minWidth : width + 'px' }")
+  .flex.box-border.px-4.items-center.w-full.gap-x-2(:style="{ minWidth : width + 'px', maxWidth : width + 'px' }")
     .flex.gap-x-2.items-center(v-if="!isOpenChange")
       .dot.w-2.h-2(:style="{ backgroundColor: prioritySettings.settings.find((el) => el.text == value.priority).color }")
       span.text-sm(:style="{ color: prioritySettings.settings.find((el) => el.text == value.priority).color }") {{value.priority}}
diff --git a/src/pages/clients/utils/tableConfig.js b/src/pages/clients/utils/tableConfig.js
index 43a015d..a65fb66 100644
--- a/src/pages/clients/utils/tableConfig.js
+++ b/src/pages/clients/utils/tableConfig.js
@@ -15,7 +15,7 @@ export const column = [
     name: "age",
     title: "Дата рождения",
     iconHead: true,
-    width: 140,
+    width: 180,
   },
   {
     name: "priority",
@@ -47,7 +47,7 @@ export const column = [
       },
     ],
     iconHead: true,
-    width: 124,
+    width: 180,
   },
   {
     name: "phone",