WIP Добавлена возможность редактирования данных клиента таблицы

2022-10-26 16:11:56 +03:00
parent a9ae13b943
commit a2715a712f
21 changed files with 515 additions and 387 deletions
--- a/src/pages/clients/components/ClientDetailInfoSection.vue
+++ b/src/pages/clients/components/ClientDetailInfoSection.vue
@@ -10,14 +10,16 @@
          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 settings[section].options" class="gap-y-1.5")
-        span.title-section.font-semibold.text-xs(v-if="settings[section].options") {{item}}
+      .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(v-if="isChange && item.value" :style="{fontWeight:item.copy&&600}" v-model:value="sectionInfo[key]" :width="settings[section].width")
-          .copy.icon-copy.cursor-pointer(v-if="item.copy")
+        client-detail-input.text-sm.text-sm.w-max-fit(v-if="isChange" :style="{fontWeight:key === 'numba'&&600}" v-model:value="sectionInfo[key]" :width="settings[section].width")
+          .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)")
        .flex(v-if="item.value && !isChange")
-          span.text-sm.w-fit(:style="{fontWeight:item.copy&&600}") {{item.value}}
-          .copy.icon-copy.cursor-pointer.pl-4(v-if="item.copy")
+          span.text-sm.w-fit {{item.value}}
        .flex.items-center(v-if="item.name")
          .icon-cancel.cancel.cursor-pointer.pr-3.text-xsm(v-if="isChange" :id="item.name" @click="(e) => deleteDoc(e, section)")
          .icon-files.cursor-pointer.pr-3.text-xl(:style="{color:settings.docsColor[item.type]}")
@@ -62,6 +64,9 @@ export default {
    };
  },
  methods: {
+    copyValue(text) {
+      navigator.clipboard.writeText(text);
+    },
    openInterfaceChange() {
      this.isOpenChange = !this.isOpenChange;
    },
--- a/src/pages/clients/components/ClientDetailInfoWrapper.vue
+++ b/src/pages/clients/components/ClientDetailInfoWrapper.vue
@@ -24,5 +24,3 @@ export default {
  },
 };
 </script>
-
-<style lang="sass" scoped></style>
--- a/src/pages/clients/components/ClientsActionPopup.vue
+++ b/src/pages/clients/components/ClientsActionPopup.vue
@@ -2,20 +2,23 @@
  .flex.flex-col.items-end.absolute.right-2.top-5
    .corner
    .popup-wrapper.flex.flex-col.gap-y-3.w-10.h-10.p-4
-      .button.keep-redaction.flex.gap-x-3
-        .icon-edit.icon-redaction
+      .button.keep-redaction.flex.gap-x-3(@click="openChangeData")
+        .icon-edit.icon
        span Редактировать
      .button.keep-redaction.flex.gap-x-3
-        img(src="@/assets/icons/star.svg" alt="Star")
+        .icon-star-off.icon
        span На ведение
      .button.delete.flex.gap-x-3
-        img(src="@/assets/icons/basket.svg" alt="Basket")
+        .icon-basket.icon-delete
        span Удалить
 </template>

 <script>
 export default {
  name: "ClientsActionPopup",
+  props: {
+    openChangeData: Function,
+  },
 };
 </script>

@@ -29,7 +32,7 @@ export default {
  z-index: 1
 .keep-redaction
  color: var(--font-dark-blue-color)
-.icon-redaction
+.icon
  color: var(--btn-blue-color)
 .delete
  color: var(--btn-red-color)
@@ -43,4 +46,6 @@ export default {
  background-color: var(--default-white)
  z-index: 2
  overflow: hidden
+.icon-delete
+  color: var(--btn-red-color)
 </style>
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -10,10 +10,7 @@
          :id="client.id"
          :is-check="marked.includes(client.id)"
          :check="selectedCheck"
-          :full-name="[client.last_name, client.first_name, client.patronymic]"
-          :age="client.birth_date"
-          :priority="client.priority"
-          :contacts="client.contacts"
+          :client="client"
          )
 </template>

--- a/src/pages/clients/components/ClientsTableHat.vue
+++ b/src/pages/clients/components/ClientsTableHat.vue
@@ -2,7 +2,7 @@
  .flex.justify-between.w-full.h-fit
    .flex.gap-2.w-fit.h-fit
      .input
-        base-input(:with-icon="true")
+        base-input(:with-icon="true" icon-position="left")
          .icon-search
      button.filter-button.flex.items-center.justify-center.box-border(class="px-2.5")
        .icon-filter.text-xl.leading-4
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/src/pages/clients/components/ClientsTableRow.vue
@@ -3,16 +3,17 @@
    .row-body.flex.w-full.cursor-pointer(:id="id" @dblclick="(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="fullName" :width="columnBody.find(el => el.name === 'fullName').width")
-      table-cell-body-age(:value="age" :width="columnBody.find(el => el.name === 'age').width")
-      table-cell-body-priority(:value="priority" :width="columnBody.find(el => el.name === 'priority').width")
-      table-cell-body-phone(:value="contacts" :width="columnBody.find(el => el.name === 'phone').width")
-      table-cell-body-email(:value="contacts" :width="columnBody.find(el => el.name === 'email').width")
-      table-cell-body-networks(:networks="contacts" :width="columnBody.find(el => el.name === 'networks').width")
+      table-cell-body-name(:value="dataClient" :avatar="dataClient.avatar" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'fullName').width")
+      table-cell-body-age(:value="dataClient" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'age').width")
+      table-cell-body-priority(:value="dataClient.priority" :choose-priority="choosePriority" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'priority').width")
+      table-cell-body-phone(:value="dataClient" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'phone').width")
+      table-cell-body-email(:value="dataClient" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'email').width")
+      table-cell-body-networks(:delete-network="deleteNetwork" :networks="dataClient.contacts" :is-open-change="isOpenChange" :width="columnBody.find(el => el.name === 'networks').width")
      .dots.flex.justify-center.items-center
-        .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(:tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
-          clients-action-popup(v-if="isOpenPopup")
-    client-detail-info-wrapper(v-if="isOpenDetailInfo" :data-detail="dataDetail" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
+        base-button-ok(v-if="isOpenChange" :size="20" :icon-size="10" :dark-style="true" @click="closeChangeData")
+        .relative.dots-button.icon-dots.cursor-pointer.leading-6.text-center(v-if="!isOpenChange" :tabindex="1" @click="(e) => openPopup(e)" @blur="handleUnFocusPopup")
+          clients-action-popup(v-if="isOpenPopup" :open-change-data="openChangeData")
+    client-detail-info-wrapper(v-if="isOpenDetailInfo" :data-detail="dataDetail" :data-document="dataIdentityDocument" :save-new-doc="saveNewDoc" :delete-doc="deleteDoc")
 </template>

 <script>
@@ -27,6 +28,7 @@ import TableCellBodyName from "@/pages/clients/components/cells/TableCellBodyNam
 import ClientsActionPopup from "@/pages/clients/components/ClientsActionPopup";
 import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
 import ClientDetailInfoWrapper from "@/pages/clients/components/ClientDetailInfoWrapper";
+import BaseButtonOk from "@/components/base/buttons/BaseButtonOk";
 import { column } from "@/pages/clients/utils/tableConfig";
 export default {
  name: "ClientsTableRow",
@@ -42,6 +44,7 @@ export default {
    TableCellBodyNetworks,
    TableCellBodyMeeting,
    ClientDetailInfoWrapper,
+    BaseButtonOk,
  },
  data() {
    return {
@@ -50,20 +53,50 @@ export default {
      isOpenDetailInfo: false,
      isOpenPopup: false,
      columnBody: column,
+      isOpenChange: false,
+      dataClient: {},
    };
  },
  props: {
    id: String,
    check: Function,
    isCheck: Boolean,
-    fullName: Array,
-    age: String,
-    priority: {
-      default: null,
-    },
-    contacts: Array,
+    client: Object,
+  },
+  created() {
+    this.dataClient = {
+      fullName: `${this.client.last_name} ${this.client.first_name} ${this.client.patronymic}`,
+      age: this.client.birth_date,
+      priority: this.client.priority,
+      phone: this.client.contacts.find((el) => el.kind === "PHONE") || {
+        kind: "EMAIL",
+        username: "",
+      },
+      email: this.client.contacts.find((el) => el.kind === "EMAIL") || {
+        kind: "EMAIL",
+        username: "",
+      },
+      contacts: [...this.client.contacts],
+      avatar: `${this.client.last_name[0]}${this.client.first_name[0]}`,
+    };
  },
  methods: {
+    deleteNetwork(e) {
+      this.dataClient.contacts = this.dataClient.contacts.filter(
+        (el) => el.id !== e.target.id
+      );
+    },
+    choosePriority(e) {
+      this.dataClient.priority = this.columnBody
+        .find((el) => el.name === "priority")
+        ["settings"].find((el) => el.text === e.target.id).priority;
+    },
+    closeChangeData() {
+      this.isOpenChange = false;
+    },
+    openChangeData() {
+      this.isOpenChange = true;
+    },
    fetchClientDetail(id) {
      // eslint-disable-next-line
      fetch(`/api/detail/${id}`).then((res) => res.json()).then((data) => this.saveClientDetail(data))
@@ -76,7 +109,12 @@ export default {
      this.dataDetail = data;
    },
    saveIdentityDocument(data) {
-      this.dataIdentityDocument = data;
+      this.dataIdentityDocument = {
+        numba: data.numba,
+        issued_by_org: data.issued_by_org,
+        issued_by_org_code: data.issued_by_org_code,
+        issued_by_date: data.issued_by_date,
+      };
    },
    openPopup(e) {
      e.target.focus();
@@ -84,8 +122,7 @@ export default {
    },
    openDetailInfo(e) {
      this.isOpenDetailInfo = !this.isOpenDetailInfo;
-      this.isOpenDetailInfo && this.fetchClientDetail(e.currentTarget.id);
-      this.isOpenDetailInfo &&
+      this.isOpenDetailInfo && this.fetchClientDetail(e.currentTarget.id),
        this.fetchClientIdentityDocument(e.currentTarget.id);
    },
    handleUnFocusPopup() {
--- a/src/pages/clients/components/FormCreateBasicInfo.vue
+++ b/src/pages/clients/components/FormCreateBasicInfo.vue
@@ -20,7 +20,7 @@
        span.text-sm Ссылки на соцсети
        .flex(class="gap-x-1.5" v-for="network in basicInfo.networks" :key="network.id")
          .icon.flex.justify-center.items-center
-            span.icon-telegram.leading-2.text-lg
+            span.icon-tg.leading-2.text-lg
          base-input.input-info.w-full(v-model:value="network.network" :id="network.id" placeholder="Ссылкa")
        span.add-network.cursor-pointer(@click="addNetwork") Добавить соцсеть
    base-create-button(text="Создать клиента" @click="saveClient")
--- a/src/pages/clients/components/cells/TableCellBodyAge.vue
+++ b/src/pages/clients/components/cells/TableCellBodyAge.vue
@@ -1,14 +1,18 @@
 <template lang="pug">
  .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
-    span.text-sm {{new Date().getFullYear() - new Date(value).getFullYear()}}
+    span.text-sm(v-if="!isOpenChange") {{new Date().getFullYear() - new Date(value.age).getFullYear()}}
+    base-input(v-if="isOpenChange" type="date" v-model:value="value.age" :width-input="124")
 </template>

 <script>
+import BaseInput from "@/components/base/BaseInput";
 export default {
  name: "TableCellBodyAge",
+  components: { BaseInput },
  props: {
-    value: String,
+    value: Object,
    width: Number,
+    isOpenChange: Boolean,
  },
 };
 </script>
--- a/src/pages/clients/components/cells/TableCellBodyEmail.vue
+++ b/src/pages/clients/components/cells/TableCellBodyEmail.vue
@@ -1,14 +1,18 @@
 <template lang="pug">
  .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
-    span.text-sm {{value.some((el) => el.kind === "EMAIL")?value.find((el) => el.kind === "EMAIL").username:''}}
+    span.text-sm(v-if="!isOpenChange") {{value.email.username}}
+    base-input(v-if="isOpenChange" :width-input="234" v-model:value="value.email.username" :placeholder="value.email.username" )
 </template>

 <script>
+import BaseInput from "@/components/base/BaseInput";
 export default {
  name: "TableCellBodyEmail",
+  components: { BaseInput },
  props: {
-    value: Array,
+    value: Object,
    width: Number,
+    isOpenChange: Boolean,
  },
 };
 </script>
--- a/src/pages/clients/components/cells/TableCellBodyName.vue
+++ b/src/pages/clients/components/cells/TableCellBodyName.vue
@@ -1,17 +1,22 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.gap-x-3.w-full(:style="{ minWidth : width + 'px' }")
+  .flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(:style="{ minWidth : width + 'px' }")
    .flex.avatar.justify-center.items-center
-      span {{`${value[0][0]}${value[1][0]}`}}
-    span.text-sm.font-semibold {{value.join(' ')}}
+      span {{avatar}}
+    span.text-sm.font-semibold(v-if="!isOpenChange") {{value.fullName}}
+    base-input(v-if="isOpenChange" type="text" v-model:value="value.fullName" :width-input="300")
 </template>

 <script>
+import BaseInput from "@/components/base/BaseInput";
 export default {
  name: "TableCellBodyName",
+  components: { BaseInput },
  props: {
-    value: Array,
+    value: Object,
+    avatar: String,
    width: Number,
    imgUrl: String,
+    isOpenChange: Boolean,
  },
 };
 </script>
--- a/src/pages/clients/components/cells/TableCellBodyNetworks.vue
+++ b/src/pages/clients/components/cells/TableCellBodyNetworks.vue
@@ -1,21 +1,66 @@
 <template lang="pug">
  .network-cell.flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
-    .text-xl.icon(v-for="network in networks.filter((el) => el.kind !== 'EMAIL' && el.kind !== 'PHONE')" :id="network.id" :class="settings.settings.find((el) => el.network === network.kind).icon")
+    .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.id" @click="(e) => deleteNetwork(e)")
+    .flex.relative
+      base-button-plus.ml-3(v-if="isOpenChange && settings.settings.length !== getNetworks.length" :with-border="true" @click="openPopupAdding")
+      base-popup.right-3.top-6(v-if="isOpenPopupAdding" :width="485")
+        base-adding-network(:value="network" :list-adding-networks="getAddingNetworks")
+        base-create-button(text="Добавить" @click="closePopupAdding")
 </template>

 <script>
+import BaseCreateButton from "@/components/base/buttons/BaseCreateButton";
+import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
+import BasePopup from "@/components/base/BasePopup";
+import BaseButtonPlus from "@/components/base/buttons/BaseButtonPlus";
 import { column } from "@/pages/clients/utils/tableConfig";
 export default {
  name: "TableCellBodyNetworks",
+  components: {
+    BaseButtonPlus,
+    BasePopup,
+    BaseAddingNetwork,
+    BaseCreateButton,
+  },
  props: {
    networks: Array,
    width: Number,
+    isOpenChange: Boolean,
+    deleteNetwork: Function,
+    addNetwork: Function,
  },
  data() {
    return {
+      isOpenPopupAdding: false,
+      network: {
+        id: Math.floor(Math.random() * 100000),
+        kind: "TELEGRAM",
+        username: "",
+      },
      settings: column.find((el) => el.name === "networks"),
    };
  },
+  computed: {
+    getAddingNetworks() {
+      let kinds = this.networks.map((el) => el.kind);
+      return this.settings.settings.filter((el) => !kinds.includes(el.network));
+    },
+    getNetworks() {
+      return this.networks.filter(
+        (el) => el.kind !== "EMAIL" && el.kind !== "PHONE"
+      );
+    },
+  },
+  methods: {
+    closePopupAdding() {
+      this.isOpenPopupAdding = false;
+    },
+    openPopupAdding() {
+      this.isOpenPopupAdding = true;
+    },
+  },
 };
 </script>

@@ -24,4 +69,9 @@ export default {
  column-gap: 2px
 .icon
  color: var(--btn-blue-color)
+.delete
+  border-radius: 50%
+  background-color: var(--btn-red-color)
+  color: var(--default-white)
+  font-size: 8px
 </style>
--- a/src/pages/clients/components/cells/TableCellBodyPhone.vue
+++ b/src/pages/clients/components/cells/TableCellBodyPhone.vue
@@ -1,14 +1,18 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
-    span.text-sm {{value.some((el) => el.kind === "PHONE")?value.find((el) => el.kind === "PHONE").username:''}}
+  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ minWidth : width + 'px' }")
+    span.text-sm(v-if="!isOpenChange") {{value.phone.username}}
+    base-input(v-if="isOpenChange" :width-input="154" v-model:value="value.phone.username" :placeholder="value.phone.username")
 </template>

 <script>
+import BaseInput from "@/components/base/BaseInput";
 export default {
  name: "TableCellBodyPhone",
+  components: { BaseInput },
  props: {
-    value: Array,
+    value: Object,
    width: Number,
+    isOpenChange: Boolean,
  },
 };
 </script>
--- a/src/pages/clients/components/cells/TableCellBodyPriority.vue
+++ b/src/pages/clients/components/cells/TableCellBodyPriority.vue
@@ -1,17 +1,23 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.gap-x-2.w-full(:style="{ minWidth : width + 'px' }")
-    .dot.w-2.h-2(:style="{ backgroundColor : settings.settings.find((el) => el.priority == value).color }")
-    span.text-sm(:style="{ color : settings.settings.find((el) => el.priority == value).color }") {{settings.settings.find((el) => el.priority == value).text}}
+  .flex.box-border.px-4.items-center.w-full.gap-x-2(:style="{ minWidth : width + 'px' }")
+    .flex.gap-x-2.items-center(v-if="!isOpenChange")
+      .dot.w-2.h-2(:style="{ backgroundColor : settings.settings.find((el) => el.priority == value).color }")
+      span.text-sm(:style="{ color : settings.settings.find((el) => el.priority == value).color }") {{settings.settings.find((el) => el.priority == value).text}}
+    .flex.gap-x-2.text-sm
+      base-select(v-if="isOpenChange" :width-select="120" :option-data="settings.settings.find((el) => el.priority == value).text" :list-data="selectData" :style-border="true" :choose-option="choosePriority")
 </template>

 <script>
 import { column } from "@/pages/clients/utils/tableConfig";
+import BaseSelect from "@/components/base/BaseSelect";
 export default {
  name: "TableCellBodyPriority",
-  props: ["value", "width"],
+  props: ["value", "width", "isOpenChange", "choosePriority"],
+  components: { BaseSelect },
  data() {
    return {
      settings: column.find((el) => el.name === "priority"),
+      selectData: ["Высокий", "Средний", "Низкий", "-"],
    };
  },
 };