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

2022-12-06 17:59:40 +03:00
parent ef890f52e7
commit 9cba7503fd
8 changed files with 98 additions and 25 deletions
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/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 || "",
@@ -524,11 +551,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
--- a/src/pages/clients/components/cells/TableCellBodyAge.vue
+++ b/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>
--- a/src/pages/clients/components/cells/TableCellBodyEmail.vue
+++ b/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>
--- a/src/pages/clients/components/cells/TableCellBodyName.vue
+++ b/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>
--- a/src/pages/clients/components/cells/TableCellBodyNetworks.vue
+++ b/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;
--- a/src/pages/clients/components/cells/TableCellBodyPhone.vue
+++ b/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",
--- a/src/pages/clients/components/cells/TableCellBodyPriority.vue
+++ b/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>
--- a/src/pages/clients/utils/tableConfig.js
+++ b/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",
      },