Merge branch 'master' into UC-54

2022-11-10 19:31:51 +03:00
parent c1bfb4fab6 367d9d4359
commit 9d74ed577d
20 changed files with 12842 additions and 80 deletions
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -4,7 +4,7 @@
      @width="changeWidth"
      :team-data="employeesData"
      :open-form-create="openFormCreateEvent"
-      :event-type="eventType"
+      :event-types="eventTypes"
    )
    calendar-schedule(
      :owners-data="employeesData"
@@ -15,6 +15,7 @@
      :sidebar-width="sidebarWidth"
      :close-form-create-event="closeFormCreateEvent"
      :is-open-form="isOpenForm"
+      :event-types="eventTypes"
      @previous-date="switchPreviousDate"
      @next-date="switchNextDate"
      @selected-layout="changeCalendarLayout"
@@ -36,6 +37,12 @@ export default {
    CalendarSidebar,
    CalendarFormAddEvent,
  },
+  props: {
+    isOpenHeaderForm: {
+      type: Boolean,
+      default: false,
+    },
+  },
  data() {
    return {
      sidebarWidth: "72px",
@@ -49,7 +56,7 @@ export default {
      employeesData: [],
      isOpenForm: false,
      membersData: [],
-      eventType: [
+      eventTypes: [
        { id: 1, label: "Встреча", color: "var(--bg-event-green-color)" },
        { id: 2, label: "Планерка", color: "var(--bg-event-red-color)" },
        { id: 3, label: "Интервью", color: "var(--bg-event-yellow-color)" },
@@ -93,16 +100,21 @@ export default {
      this.sidebarWidth = value;
    },
    openFormCreateEvent() {
-      this.isOpenForm = true;
+      this.isOpenForm = !this.isOpenHeaderForm;
+      this.$emit("is-open-page-form", this.isOpenForm);
    },
    closeFormCreateEvent() {
      this.isOpenForm = false;
+      this.$emit("is-open-page-form", this.isOpenForm);
    },
  },
  mounted() {
    this.fetchPersonsData();
    this.fetchEventsData();
  },
+  beforeUnmount() {
+    this.closeFormCreateEvent();
+  },
 };
 </script>

--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -17,6 +17,7 @@
        v-for="event in dayEvents"
        :key="event.id"
        :ownerEvent="event"
+        :event-types="eventTypes"
        :style="eventCardPosition(event.start, event.end)"
        @selected-event="transmitEventData"
      )
@@ -38,6 +39,7 @@ export default {
    dayEvents: Array,
    dayEndTime: Number,
    dayStartTime: Number,
+    eventTypes: Array,
  },
  data() {
    return {
--- a/src/pages/calendar/components/CalendarEventCard.vue
+++ b/src/pages/calendar/components/CalendarEventCard.vue
@@ -1,20 +1,52 @@
 <template lang="pug">
-  .wrapper.flex.px-2.my-1.items-start.cursor-pointer(:style="cardHeight", @click="transmitEventData")
-    .header.flex.justify-between.items-center
-      .header-text
-        span.inline-block.align-middle.font-bold.text-base.mr-4 {{ eventTime }}
-        span.inline-block.align-middle.font-medium.text-base {{ eventMember }}
+  .wrapper.cursor-pointer.my-1.relative(
+    @click="transmitEventData",
+    :style="themeColors",
+    :class="cardTheme"
+  )
+    .card.flex.px-2(
+      :class="{'py-6px flex-col': longCard}",
+      :style="cardHeight"
+    )
+      .header.flex.justify-between.items-center(:class="{'items-start': longCard}")
+        .header-text
+          span.inline-block.align-middle.font-bold.text-base.mr-4 {{ eventTime }}
+          span.inline-block.align-middle.font-medium.text-base {{ eventMember }}
+        .details-count.flex.justify-center.items-center.text-xxs.font-medium(v-if="someDetailsShown") {{ `+${detailsCount}` }}
+      .body.flex.text-xxs.font-medium(v-if="longCard")
+        .col.mr-22px
+          ul
+            li.mt-2(v-for="elem in descriptionColumns.leftColumn" :key="elem") {{ elem }}
+        .col
+          ul
+            li.mt-2(v-for="elem in descriptionColumns.rightColumn" :key="elem") {{ elem }}
+      calendar-event-description-card.right-0(
+        v-if="isActive"
+        :style="descriptionCardPosition"
+        :owner-event="this.ownerEvent"
+        :event-types="this.eventTypes"
+      )
  </template>

 <script>
+import CalendarEventDescriptionCard from "./CalendarEventDescriptionCard.vue";
 export default {
  name: "CalendarEventCard",
+  components: { CalendarEventDescriptionCard },
  props: {
    ownerEvent: Object,
+    eventTypes: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
  },
  data() {
    return {
      pixelsPerHour: 62,
+      isActive: false,
+      someDetailsShown: true,
    };
  },
  computed: {
@@ -53,6 +85,103 @@ export default {
        height: `${this.calculateCardHeight - 8}px`,
      };
    },
+    cardTheme() {
+      return {
+        "active-theme": this.isActive,
+        "default-theme": !this.isActive,
+        "long-card": this.longCard,
+      };
+    },
+    themeColors() {
+      switch (this.ownerEvent.kind) {
+        case this.eventTypes[0].label:
+          return {
+            "--bg-color": "var(--bg-event-green-color-0)",
+            "--bg-active": this.eventTypes[0].color,
+            "--bg-hover": "var(--bg-event-green-color-1)",
+            "--font-color": "var(--font-black-color)",
+            "--font-active-color": "var(--default-white)",
+            "--count-color": this.eventTypes[0].color,
+          };
+        case this.eventTypes[1].label:
+          return {
+            "--bg-color": "var(--bg-event-red-color-0)",
+            "--bg-active": this.eventTypes[1].color,
+            "--bg-hover": "var(--bg-event-red-color-1)",
+            "--font-color": "var(--font-black-color)",
+            "--font-active-color": "var(--default-white)",
+            "--count-color": this.eventTypes[1].color,
+          };
+        case this.eventTypes[2].label:
+          return {
+            "--bg-color": "var(--bg-event-yellow-color-0)",
+            "--bg-active": this.eventTypes[2].color,
+            "--bg-hover": "var(--bg-event-yellow-color-1)",
+            "--font-color": "var(--font-black-color)",
+            "--font-active-color": "var(--font-black-color)",
+            "--count-color": "var(--font-black-color)",
+          };
+        case this.eventTypes[3].label:
+          return {
+            "--bg-color": "var(--bg-event-blue-color-0)",
+            "--bg-active": this.eventTypes[3].color,
+            "--bg-hover": "var(--bg-event-blue-color-1)",
+            "--font-color": "var(--font-black-color)",
+            "--font-active-color": "var(--default-white)",
+            "--count-color": this.eventTypes[3].color,
+          };
+        default:
+          return {
+            "--bg-color": "var(--default-white)",
+            "--bg-active": "var(--btn-blue-color)",
+            "--bg-hover": "var(--bg-event-default-hover-color)",
+            "--font-color": "var(--font-black-color)",
+            "--font-active-color": "var(--default-white)",
+            "--border-color": "#b3c3f3",
+            "--border-active-color": "var(--btn-blue-color)",
+            "--count-color": "var(--btn-blue-color)",
+          };
+      }
+    },
+    description() {
+      return this.ownerEvent.description
+        ? this.ownerEvent.description.split(", ")
+        : [];
+    },
+    descriptionColumns() {
+      let leftCol = [],
+        rightCol = [],
+        heightParts = parseInt((this.calculateCardHeight - 8) / 23);
+      if (this.ownerEvent.description && heightParts > 1) {
+        let n = heightParts;
+        for (let i = 0; i < n * 2 - 2; i++) {
+          if (!this.description[i]) break;
+          i % 2 === 0
+            ? leftCol.push(this.description[i])
+            : rightCol.push(this.description[i]);
+        }
+      }
+      return {
+        leftColumn: leftCol,
+        rightColumn: rightCol,
+      };
+    },
+    longCard() {
+      return parseInt((this.calculateCardHeight - 8) / 23) > 1 ? true : false;
+    },
+    detailsCount() {
+      let columnsLength =
+          this.descriptionColumns.leftColumn.length +
+          this.descriptionColumns.rightColumn.length,
+        remainingDetails = this.description.length - columnsLength;
+      if (!remainingDetails) this.changeDetailsShown();
+      return remainingDetails;
+    },
+    descriptionCardPosition() {
+      return {
+        top: `calc(${this.cardHeight.height} + 8px)`,
+      };
+    },
  },
  methods: {
    trimTime(time) {
@@ -62,22 +191,96 @@ export default {
      return `${object.last_name} ${object.first_name} ${object.patronymic}`;
    },
    transmitEventData() {
+      this.changeTheme();
      this.$emit("selected-event", this.ownerEvent);
    },
+    changeTheme() {
+      this.isActive = !this.isActive;
+    },
+    changeDetailsShown() {
+      this.someDetailsShown = false;
+    },
  },
 };
 </script>

 <style lang="sass" scoped>
 .wrapper
-  width: calc(100% - 8px)
-  height: 23px
-  border-radius: 4px
-  background-color: var(--bg-event-yellow-color)
-  color: var(--font-black-color)
  position: absolute
  z-index: 3
+  width: calc(100% - 8px)
+  height: 23px
+
+.default-theme
+  .card
+    background-color: var(--bg-color)
+    border: 2px solid var(--border-color)
+    border-left: 4px solid var(--bg-active)
+  .header-text, .body
+    color: var(--font-color)
+  .details-count
+    background-color: var(--bg-active)
+    color: var(--font-active-color)
+  li:before
+    background-color: var(--font-color)
+
+.active-theme
+  .card
+    background-color: var(--bg-active)
+    border: 2px solid var(--border-active-color)
+    border-left: 4px solid var(--bg-active)
+  .header-text, .body
+    color: var(--font-active-color)
+  .details-count
+    background-color: var(--default-white)
+    color: var(--count-color)
+  li:before
+    background-color: var(--font-active-color)
+
+.card
+  border-radius: 4px
+  min-height: 23px
+  &:hover
+    background-color: var(--bg-hover)
+    border: 2px solid var(--border-color)
+    border-left: 4px solid var(--bg-active)
+  &:hover .header-text
+    color: var(--font-color)
+  &:hover .details-count
+    background-color: var(--bg-active)
+    color: var(--font-active-color)
+  &:hover .body
+    color: var(--font-color)
+  &:hover li:before
+    background-color: var(--font-color)

 .header
  width: 100%
+
+.details-count
+  width: 24px
+  height: 16px
+  border-radius: 16px
+
+.col
+  max-width: calc(462px/2 - 22px)
+
+ul
+  list-style-type: none
+  margin: 0
+  padding: 0
+
+li
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+
+li:before
+  content: ''
+  display: inline-block
+  height: 8px
+  width: 8px
+  border-radius: 50%
+  background-color : var(--font-black-color)
+  margin-right: 4px
 </style>
--- a/src/pages/calendar/components/CalendarEventDescriptionCard.vue
+++ b/src/pages/calendar/components/CalendarEventDescriptionCard.vue
@@ -0,0 +1,27 @@
+<template lang="pug">
+  .wrapper.px-4.pt-14px.pb-4.font-medium
+</template>
+
+<script>
+export default {
+  name: "CalendarEventDescriptionCard",
+  props: {
+    ownerEvent: Object,
+    eventTypes: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  width: 426px
+  background-color: var(--default-white)
+  border-radius: 4px
+  color: var(--font-black-color)
+  box-shadow: var(--default-shadow)
+</style>
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.absolute.right-2.bottom-14
+  .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.absolute.right-0.bottom-14
    .flex.justify-between
      span.title.text-xl.font-bold {{!selectedEventData.id ? "Назначение события" : "Изменение события"}}
      .flex.pt-2
@@ -114,6 +114,12 @@ export default {
        return {};
      },
    },
+    eventTypes: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
  },
  data() {
    return {
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -9,7 +9,8 @@
      @next-date="nextDate"
      @selected-layout="selectedLayout"
    )
-    .schedule-body
+    .schedule-body(@scroll="changeScrollingState", ref="scheduleBody")
+      .hiding-container.fixed(v-if="isScrolling")
      .column-wrapper.flex.ml-20(:style="columnWrapperWidth")
        calendar-column(
          v-for="(owner, index) in filteredOwners"
@@ -19,6 +20,7 @@
          :day-start-time="validateStartTime"
          :day-end-time="validateEndTime"
          :style="columnSize"
+          :event-types="eventTypes"
          @selected-event="writeEventData"
        )
      .flex.w-full.relative
@@ -48,6 +50,7 @@
        :owners-data="ownersData"
        :members-data="membersData"
        :selected-event-data="selectedEvent"
+        :event-types="eventTypes"
        @clear-selected-event-data="clearSelectedEvent"
        @update-events="transmitUpdateEvents"
      )
@@ -103,6 +106,12 @@ export default {
    },
    closeFormCreateEvent: Function,
    isOpenForm: Boolean,
+    eventTypes: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
  },
  data() {
    return {
@@ -115,6 +124,7 @@ export default {
      columnHeaderHeight: 48,
      defaultColumnWidth: 470,
      selectedEvent: {},
+      isScrolling: false,
    };
  },
  computed: {
@@ -315,6 +325,17 @@ export default {
    transmitUpdateEvents() {
      this.$emit("update-events");
    },
+    changeScrollingState(e) {
+      this.isScrolling = e.target.scrollTop !== 0;
+    },
+    showCuttentTime() {
+      this.$nextTick(() =>
+        this.$refs["scheduleBody"].scrollTo({
+          top: `${this.lineIndicatorLocation.top.slice(0, -2) - 240}`,
+          behavior: "smooth",
+        })
+      );
+    },
  },
  watch: {
    currentTime() {
@@ -339,6 +360,7 @@ export default {
        this.changeCurrentTime();
        this.timeCoilInitialization();
        this.startTimer();
+        this.showCuttentTime();
      }
    },
  },
@@ -346,6 +368,7 @@ export default {
    this.changeCurrentTime();
    this.timeCoilInitialization();
    this.startTimer();
+    this.showCuttentTime();
  },
  beforeUnmount() {
    this.stopTimer();
@@ -355,6 +378,7 @@ export default {

 <style lang="sass" scoped>
 .schedule
+  border-top-left-radius: 4px
  position: relative
  border-top-left-radius: 4px
  background-color: var(--default-white)
@@ -389,4 +413,20 @@ export default {
  height: calc(100vh - 56px - 8px - 56px)
  overflow-y: auto
  overflow-x: auto
+  &::-webkit-scrollbar
+    width: 8px
+    height: 8px
+  &::-webkit-scrollbar-track
+    background-color: var(--bg-ligth-blue-color)
+    border-radius: 4px
+  &::-webkit-scrollbar-thumb
+    border-radius: 4px
+    background-color: var(--btn-blue-color-2)
+
+.hiding-container
+  width: 80px
+  height: 48px
+  top: calc(56px * 2 + 8px)
+  background-color: var(--default-white)
+  z-index: 6
 </style>
--- a/src/pages/calendar/components/CalendarSidebar.vue
+++ b/src/pages/calendar/components/CalendarSidebar.vue
@@ -19,7 +19,7 @@
          @click="openFormCreate",
          v-else
        ) Создать событие
-        calendar-sidebar-event(:is-open="isOpen", :event-type="eventType")
+        calendar-sidebar-event(:is-open="isOpen", :event-type="eventTypes")
        calendar-sidebar-teammate(:team-data="teamData", :is-open="isOpen")
      .button-wrapper.flex.justify-center.mb-23px
        base-button(
@@ -34,8 +34,8 @@

 <script>
 import BaseButton from "@/components/base/BaseButton";
-import CalendarSidebarEvent from "./cells/CalendarSidebarEvent.vue";
-import CalendarSidebarTeammate from "./cells/CalendarSidebarTeammate.vue";
+import CalendarSidebarEvent from "./CalendarSidebarEvent.vue";
+import CalendarSidebarTeammate from "./CalendarSidebarTeammate.vue";

 export default {
  name: "CalendarSidebar",
@@ -47,7 +47,7 @@ export default {
  props: {
    teamData: Array,
    openFormCreate: Function,
-    eventType: Array,
+    eventTypes: Array,
  },
  data() {
    return {
--- a/src/pages/calendar/components/cells/CalendarSidebarEvent.vue
+++ b/src/pages/calendar/components/cells/CalendarSidebarEvent.vue
--- a/src/pages/calendar/components/cells/CalendarSidebarTeammate.vue
+++ b/src/pages/calendar/components/cells/CalendarSidebarTeammate.vue
--- a/src/pages/clients/TheClients.vue
+++ b/src/pages/clients/TheClients.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  clients-wrapper
+  clients-wrapper(@is-open-client-add-form="transmitPageFormState")
 </template>

 <script>
@@ -7,5 +7,10 @@ import ClientsWrapper from "@/pages/clients/components/ClientsWrapper";
 export default {
  name: "TheClients",
  components: { ClientsWrapper },
+  methods: {
+    transmitPageFormState(value) {
+      this.$emit("is-open-page-form", value);
+    },
+  },
 };
 </script>
--- a/src/pages/clients/components/ClientDetailInfoSection.vue
+++ b/src/pages/clients/components/ClientDetailInfoSection.vue
@@ -1,35 +1,74 @@
 <template lang="pug">
-  .section-wrapper.flex.flex-col.h-fit.cursor-pointer(@dblclick="openInterfaceChange" :class="{click:isOpenChange}" :style="{ flexDirection:settings[section].rowFlex&&'row', width : settings[section].width + 'px', height : settings[section].height+'px'}")
+  .section-wrapper.flex.flex-col.h-fit.cursor-pointer(
+    :style="{ flexDirection:settings[section].rowFlex&&'row', width : settings[section].width + 'px', height : settings[section].height+'px'}"
+  )
    .section-header.flex.items-center.justify-between.pl-4.pr-3(:class="{small:settings[section].rowFlex}")
      span.text-sm.font-semibold.whitespace-nowrap {{settings[section].title}}
-      .flex.items-center.gap-x-8(v-if="isOpenChange")
-        base-button(v-if="isChange" @click="saveChange" :confirm="true" :rounded="true" :outlined="true" :size="20")
+      .flex.items-center.gap-x-8
+        base-button(
+          v-if="isChange",
+          @click="saveChange",
+          confirm,
+          rounded,
+          outlined,
+          :size="20"
+        )
          .icon-ok.text-xsm(class="pt-[3px]")
-        .edit.icon-edit.cursor-pointer.text-sm(v-if="!isChange" @click="changeClientData")
+        .edit.icon-edit.cursor-pointer.text-sm(
+          v-if="!isChange",
+          @click="changeClientData"
+        )
        .flex.relative
-          base-button(v-if="settings[section].addFile" @click="openAddingWrap" :rounded="true" :outlined="true" :added="true" :size="24")
+          base-button(
+            v-if="settings[section].addFile",
+            @click="openAddingWrap",
+            :rounded="true",
+            :outlined="true",
+            :added="true",
+            :size="24"
+          )
            .icon-plus(class="pt-[2px]")
-          table-adding-new-doc(v-if="section === 'docs' && isOpenAddingWrap" :add-new-doc="addNewDoc" :save-docs="saveDocs" :new-docs="docData")
-          table-adding-new-additional(v-if="section === 'additional' && isOpenAddingWrap" :new-additional-data="additionalData" :add-new-additional="addDocAdditional" :save-additional="saveDocs" )
+          table-adding-new-doc(
+            v-if="section === 'docs' && isOpenAddingWrap",
+            :add-new-doc="addNewDoc",
+            :save-docs="saveDocs",
+            :new-docs="docData"
+          )
+          table-adding-new-additional(
+            v-if="section === 'additional' && isOpenAddingWrap"
+            :new-additional-data="additionalData",
+            :add-new-additional="addDocAdditional",
+            :save-additional="saveDocs"
+          )
    .section-body.w-full.flex.flex-col.px-4.pt-3.pb-4.gap-y-4
      .flex.flex-col(v-for="(item, key) in sectionInfo" class="gap-y-1.5")
        span.title-section.font-semibold.text-xs(v-if="settings[section].options") {{settings[section].options[key]}}
        span.title-section.font-semibold.text-xs(v-if="item.header") {{item.header}}
        client-detail-input.text-sm.text-sm.w-max-fit(
-          :sharp="settings[section].sharps[key]"
-          v-if="section!=='docs' && isChange"
-          :style="{fontWeight:key === 'numba'&&600}"
-          v-model:value="sectionInfo[key]"
+          v-if="section!=='docs' && isChange",
+          :style="{fontWeight:key === 'numba'&&600}",
+          v-model:value="sectionInfo[key]",
          :width="settings[section].width"
+          :sharp="settings[section].sharps[key]"
        )
-          .copy.icon-copy.cursor-pointer(v-if="item.copy" @click="() => copyValue(item)")
+          .copy.icon-copy.cursor-pointer(
+            v-if="item.copy",
+            @click="() => copyValue(item)"
+          )
        .flex(v-if="settings[section].options && !isChange")
          span.text-sm.w-fit(:style="{fontWeight:key === 'numba'&&600}") {{item}}
-          .copy.icon-copy.cursor-pointer.pl-4(v-if="key === 'numba'" @click="() => copyValue(item)")
+          .copy.icon-copy.cursor-pointer.pl-4(
+            v-if="key === 'numba'",
+            @click="() => copyValue(item)"
+          )
        .flex(v-if="item.name && !isChange")
          span.text-sm.w-fit {{item.title}}
        .flex.items-center(v-if="item.title")
-          .icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(v-if="isChange" :id="item.id" @click="(e) => deleteDoc(e)")
+          .icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(
+            v-if="isChange",
+            :id="item.id",
+            @click="(e) => deleteDoc(e)"
+          )
          span.text-sm {{item.title}}
 </template>

@@ -75,11 +114,10 @@ export default {
    copyValue(text) {
      navigator.clipboard.writeText(text);
    },
-    openInterfaceChange() {
-      this.isOpenChange = !this.isOpenChange;
-    },
    changeClientData() {
-      this.isChange = true;
+      if (!this.isOpenAddingWrap) {
+        this.isChange = true;
+      }
    },
    saveChange() {
      this.isOpenChange = false;
@@ -91,7 +129,9 @@ export default {
      }
    },
    openAddingWrap() {
-      this.isOpenAddingWrap = true;
+      if (!this.isChange) {
+        this.isOpenAddingWrap = !this.isOpenAddingWrap;
+      }
    },
    addNewDoc(e) {
      this.docData = [...this.docData, ...e.target.files];
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -43,9 +43,11 @@ export default {
  methods: {
    openFormCreateClient() {
      this.isOpenFormCreate = true;
+      this.$emit("is-open-client-add-form", this.isOpenFormCreate);
    },
    closeFormCreateClient() {
      this.isOpenFormCreate = false;
+      this.$emit("is-open-client-add-form", this.isOpenFormCreate);
      this.fetchDataClients();
    },
    saveDataClients(data) {
@@ -79,6 +81,9 @@ export default {
  mounted() {
    this.fetchDataClients();
  },
+  beforeUnmount() {
+    this.closeFormCreateClient();
+  },
 };
 </script>

--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/src/pages/clients/components/ClientsTableRow.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
  .row-wrapper.flex.flex-col.w-full
-    .row-body.flex.w-full.cursor-pointer(:id="id" @dblclick="(e) => openDetailInfo(e)")
+    .row-body.flex.w-full.cursor-pointer(:id="id" @click="(e) => openDetailInfo(e)")
      .check-box.flex.justify-center.items-center
        clients-table-checkbox(:id="id" :check="check" :is-check="isCheck")
      table-cell-body-name(:value="dataClient" :avatar="dataClient.avatar" :avatar-color="dataClient.color" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'fullName').width")
@@ -192,7 +192,8 @@ export default {
        .find((el) => el.name === "priority")
        ["settings"].find((el) => el.text === e.target.id).priority;
    },
-    closeChangeData() {
+    closeChangeData(e) {
+      e.stopPropagation();
      this.isOpenChange = false;
      this.postUpdateClient();
      this.postContactsClient();
@@ -272,6 +273,7 @@ export default {
      this.dataAttachments = [...this.dataDetail, ...data];
    },
    deleteDoc(e) {
+      e.stopPropagation();
      this.dataAttachments = this.dataAttachments.filter(
        (el) => el.id !== e.target.id
      );
--- a/src/pages/clients/components/ClientsWrapper.vue
+++ b/src/pages/clients/components/ClientsWrapper.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
  .wrapper.flex.w-full.relative.mx-6
-    clients-table(:open-form-create="openFormCreateClient")
+    clients-table(@is-open-client-add-form="transmitPageFormState")
 </template>

 <script>
@@ -14,11 +14,8 @@ export default {
    };
  },
  methods: {
-    openFormCreateClient() {
-      this.isOpenForm = true;
-    },
-    closeFormCreateClient() {
-      this.isOpenForm = false;
+    transmitPageFormState(value) {
+      this.$emit("is-open-client-add-form", value);
    },
  },
 };
--- a/src/pages/clients/components/TableAddingNewDoc.vue
+++ b/src/pages/clients/components/TableAddingNewDoc.vue
@@ -11,7 +11,7 @@
              span  или перетащите их сюда
        .flex.flex-col
          span.name-doc.py-2.px-3(v-for="doc in newDocs") {{doc.name}}
-      base-button(@click="saveDocs" :size="40")
+      base-button(@click="" :size="40")
        span.font-semibold Добавить
 </template>