Merge pull request #177 from dderbentsov/UC-162

[WIP] Исправил update данных клиента, распространение клика и ховер текущего клиента...

src/pages/clients/components/ClientsTableRow.vue

@@ -84,7 +84,7 @@
               :disabled-delete="!!deletedClientId && !rowOverlay",
               @delete-client="transmitDeleteClient"
             )
-      client-detail-info-wrapper(
+      client-detail-info-wrapper.detail(
         v-if="isOpenDetailInfo",
         :data-address="dataAddress"
         :data-detail="dataDetail"
@@ -122,6 +122,7 @@ import { fetchWrapper } from "@/shared/fetchWrapper";
 import { column } from "@/pages/clients/utils/tableConfig";
 import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
 import { addNotification } from "@/components/Notifications/notificationContext";
+import * as moment from "moment";
 
 export default {
   name: "ClientsTableRow",
@@ -211,15 +212,31 @@ export default {
         (el) => el.text === this.dataClient.priority
       );
       let data = {};
-      if (this.dataClient.age) {
+      if (
+        this.dataClient.age !== this.client.birth_date &&
+        this.dataClient.age
+      ) {
         data.birth_date = this.dataClient.age;
       }
       if (
-        this.dataClient.priority !== this.client.priority &&
-        this.dataClient.priority
+        foundElement.id !== this.client.priority &&
+        foundElement.text !== "-"
       ) {
         data.priority = foundElement.priority;
+      } else if (foundElement.text === "-") {
+        data.priority = 4;
       }
+      if (
+        data.birth_date &&
+        moment(data.birth_date).isAfter(moment().format("YYYY-MM-DD"))
+      ) {
+        this.addErrorNotification();
+        this.dataClient.age = this.client.birth_date;
+      } else
+        fetchWrapper.post(`general/person/${this.client.id}/update/`, {
+          full_name: this.dataClient.fullName,
+          ...data,
+        });
     },
     postContactsClient() {
       let contacts = [...this.dataClient.contacts];
@@ -319,6 +336,15 @@ export default {
         5000
       );
     },
+    addErrorNotification() {
+      addNotification(
+        "Некорректная дата рождения",
+        "Некорректная дата рождения",
+        "Дата рождения позже текущего дня",
+        "error",
+        5000
+      );
+    },
     fetchClientDetail(id) {
       fetchWrapper
         .get(`general/person/${id}/detail/`)
@@ -489,7 +515,8 @@ export default {
       } ${this.client.patronymic || ""}`,
       age: this.client.birth_date || "",
       priority: this.prioritySettings.settings.find(
-        (el) => el.priority === this.client.priority
+        (el) =>
+          el.priority === this.client.priority || this.client.priority === el.id
       ).text,
       phone: {
         id: this.client.contacts.find((el) => el.kind === "PHONE")?.id || "",
@@ -506,7 +533,9 @@ export default {
           "",
       },
       contacts: [...this.client.contacts],
-      avatar: `${this.client.last_name[0]}${this.client.first_name[0]}`,
+      avatar: this.client.first_name
+        ? this.client.last_name[0] + this.client.first_name[0]
+        : this.client.last_name.substr(0, 2),
       color: this.client.color,
       photo: this.client.photo,
     };
@@ -524,11 +553,13 @@ export default {
 .row-wrapper
   border-bottom: 1px solid var(--border-light-grey-color)
   min-width: 1556px
+.row-wrapper:hover .detail
+  background-color: var(--bg-hover-row-table)
+.row-wrapper:hover .row-body
+  background-color: var(--bg-hover-row-table)
 .row-body
   color: var(--font-dark-blue-color)
   min-height: 56px
-  &:hover
-    background-color: var(--bg-hover-row-table)
 .check-box
   min-width: 36px
 .dots

src/pages/clients/components/cells/TableCellBodyAge.vue

@@ -1,14 +1,19 @@
 <template lang="pug">
   .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px' }")
-    span(v-if="!isOpenChange") {{value.age ? new Date().getFullYear() - new Date(value.age).getFullYear() : ""}}
-    base-input(v-if="isOpenChange" type="date" v-model:value="value.age" :width-input="124")
+    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"
+    )
 </template>
 
 <script>
-import BaseInput from "@/components/base/BaseInput";
+import BaseInputDate from "@/components/base/BaseInputDate";
 export default {
   name: "TableCellBodyAge",
-  components: { BaseInput },
+  components: { BaseInputDate },
   props: {
     value: Object,
     width: Number,
@@ -16,3 +21,7 @@ export default {
   },
 };
 </script>
+<style lang="sass" scoped>
+.input
+  border: 1.5px solid var(--border-light-grey-color)
+</style>

src/pages/clients/components/cells/TableCellBodyEmail.vue

@@ -1,7 +1,13 @@
 <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}}
-    base-input(v-if="isOpenChange" :width-input="234" v-model:value="value.email.username" :placeholder="value.email.username" )
+    base-input(
+      v-if="isOpenChange",
+      :width-input="234",
+      @click.stop,
+      v-model:value="value.email.username",
+      :placeholder="value.email.username"
+    )
 </template>
 
 <script>

src/pages/clients/components/cells/TableCellBodyName.vue

@@ -4,7 +4,13 @@
     base-avatar(:size="36", v-else)
       img.h-full.object-cover(:src="url + photo")
     span.font-semibold(v-if="!isOpenChange") {{value.fullName}}
-    base-input(v-if="isOpenChange", type="text", v-model:value="value.fullName", :width-input="300")
+    base-input(
+      v-if="isOpenChange",
+      @click.stop,
+      type="text",
+      v-model:value="value.fullName",
+      :width-input="300"
+    )
 </template>
 
 <script>

src/pages/clients/components/cells/TableCellBodyNetworks.vue

@@ -1,15 +1,34 @@
 <template lang="pug">
   .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.kind" @click="(e) => deleteNetwork(e)")
+      .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.kind",
+          @click="(e) => deleteNetwork(e)"
+        )
     .flex.relative.pb-2(class="pl-[46px]")
-      base-button(v-if="isOpenChange && settings.settings.length !== getNetworks.length" @click="openPopupAdding" :rounded="true" :outlined="true" :added="true" :size="24")
+      base-button(
+        v-if="isOpenChange && settings.settings.length !== getNetworks.length",
+        @click.stop="openPopupAdding",
+        :rounded="true",
+        :outlined="true",
+        :added="true",
+        :size="24"
+      )
         .icon-plus(class="pt-[2px]")
-      base-popup.right-3.top-6(v-if="isOpenPopupAdding" :width="485")
-        base-adding-network(:value="network" :selected-option="getSelectedIcon" :list-adding-networks="getAddingNetworks" :choose-network="chooseNetwork")
+      base-popup.right-3.top-6(v-if="isOpenPopupAdding", v-click-outside="closePopup" :width="485")
+        base-adding-network(
+          :value="network",
+          :selected-option="getSelectedIcon",
+          :list-adding-networks="getAddingNetworks",
+          :choose-network="chooseNetwork"
+        )
         .w-fit
-          base-button(:size="40" @click="saveNetwork")
+          base-button(:size="40", @click="saveNetwork")
             span.font-semibold Добавить
 </template>
 
@@ -69,6 +88,9 @@ export default {
     chooseNetwork(e) {
       this.network.kind = e.target.id;
     },
+    closePopup() {
+      this.isOpenPopupAdding = false;
+    },
     saveNetwork() {
       this.addNetwork(this.network);
       this.isOpenPopupAdding = false;

src/pages/clients/components/cells/TableCellBodyPhone.vue

@@ -5,6 +5,7 @@
     ) {{value.phone.username.replace(/\+7(\d{3})(\d{3})(\d{2})(\d{2})/, '+7 ($1) $2-$3-$4')}}
     base-input(
       v-if="isOpenChange",
+      @click.stop,
       :width-input="154",
       v-model:value="value.phone.username",
       :placeholder="value.phone.username",

src/pages/clients/components/cells/TableCellBodyPriority.vue

@@ -4,7 +4,7 @@
       .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}}
     .flex.gap-x-2.text-sm(class="w-[164px]")
-      base-select(v-if="isOpenChange", :items="getPriorityList", v-model="value.priority")
+      base-select(v-if="isOpenChange", @click.stop :items="getPriorityList", v-model="value.priority")
 </template>
 
 <script>

src/pages/clients/utils/tableConfig.js

@@ -12,7 +12,7 @@ export const column = [
   },
   {
     name: "age",
-    title: "Возраст",
+    title: "Дата рождения",
     iconHead: true,
     width: 140,
   },
@@ -22,25 +22,25 @@ export const column = [
     settings: [
       {
         priority: 1,
-        id: "1",
+        id: 1,
         text: "Высокий",
         color: "#FF6F6F",
       },
       {
         priority: 2,
-        id: "2",
+        id: 2,
         text: "Средний",
         color: "#FFC75B",
       },
       {
         priority: 3,
-        id: "3",
+        id: 3,
         text: "Низкий",
         color: "#81ACFF",
       },
       {
         priority: null,
-        id: "4",
+        id: 4,
         text: "-",
         color: "#9294A7",
       },