Merge pull request #192 from dderbentsov/UC-161

Изменил стили столбцов клиентов, поправил чекбоксы, добавил...
2022-12-12 17:30:34 +03:00
parent 1d78f05934 787ce1ed2b
commit a9416a7fb8
11 changed files with 55 additions and 18 deletions
--- a/src/components/base/BaseClientFormCreate.vue
+++ b/src/components/base/BaseClientFormCreate.vue
@@ -370,7 +370,6 @@ export default {
    changeOpenModal() {
      this.showModal = true;
      this.showPopup = false;
-      this.image = [addImageIcon];
    },
    changeOpenPopup() {
      this.showPopup = true;
--- 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);
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/src/pages/clients/components/ClientsTableRow.vue
@@ -25,7 +25,7 @@
              @delete-client="transmitDeleteClient"
            )
        .dots.flex.justify-center.items-center(v-if="!rowOverlay")
-          .flex.pl-5.z-10(v-if="isOpenChange")
+          .flex.z-10(v-if="isOpenChange", class="pl-[10px]")
            base-button(
              @click="closeChangeData",
              confirm,
--- 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>
--- a/src/pages/clients/components/cells/TableCellBodyAge.vue
+++ b/src/pages/clients/components/cells/TableCellBodyAge.vue
@@ -1,11 +1,12 @@
 <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",
      @click.stop,
-      v-model:value="value.age",
-      :width-input="124"
+      v-model:value="value.age"
    )
 </template>

--- 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>
--- 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}}
@@ -43,5 +43,5 @@ export default {
  background-color: var(--font-grey-color)
  color: var(--font-dark-blue-color)
 .open-change
-  padding-left: 52px
+  padding-left: 36px
 </style>
--- 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",
--- 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')}}
--- 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}}
--- 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",