WIP поправил mock и отображение данных из него в таблице

2022-10-25 18:49:19 +03:00
parent 8e1887484c
commit da5da8f3b5
13 changed files with 603 additions and 281 deletions
--- a/src/pages/clients/components/ClientDetailInfoSection.vue
+++ b/src/pages/clients/components/ClientDetailInfoSection.vue
@@ -10,10 +10,10 @@
          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]}}
+      .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}}
        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="item.value" :width="settings[section].width")
+        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")
        .flex(v-if="item.value && !isChange")
          span.text-sm.w-fit(:style="{fontWeight:item.copy&&600}") {{item.value}}
--- a/src/pages/clients/components/ClientDetailInfoWrapper.vue
+++ b/src/pages/clients/components/ClientDetailInfoWrapper.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
  .w-full.h-fit.pt-4.flex.gap-x-4(class="px-[52px] pb-[30px]")
-    client-detail-info-section(v-model:section-info="dataDetail.pass" section="pass")
+    client-detail-info-section(v-model:section-info="dataDocument" section="pass")
    .flex.flex-col.gap-y-2
      client-detail-info-section(:section-info="dataDetail.snils" section="snils" )
      client-detail-info-section(:section-info="dataDetail.inn" section="inn" )
@@ -20,6 +20,7 @@ export default {
    dataDetail: Object,
    saveNewDoc: Function,
    deleteDoc: Function,
+    dataDocument: Object,
  },
 };
 </script>
--- a/src/pages/clients/components/ClientsTable.vue
+++ b/src/pages/clients/components/ClientsTable.vue
@@ -10,14 +10,10 @@
          :id="client.id"
          :is-check="marked.includes(client.id)"
          :check="selectedCheck"
-          :full-name="`${client.last_name} ${client.first_name} ${client.patronymic}`"
-          :age="client.age"
-          :job-title="client.jobTitle"
+          :full-name="[client.last_name, client.first_name, client.patronymic]"
+          :age="client.birth_date"
          :priority="client.priority"
-          :phone="client.phone"
-          :email="client.email"
-          :networks="client.networks"
-          :meeting-time="client.meeting"
+          :contacts="client.contacts"
          )
 </template>

@@ -46,7 +42,7 @@ export default {
  },
  methods: {
    saveDataClients(data) {
-      this.dataClients = data;
+      this.dataClients = data.results;
    },
    fetchDataClients() {
      // eslint-disable-next-line
--- a/src/pages/clients/components/ClientsTableRow.vue
+++ b/src/pages/clients/components/ClientsTableRow.vue
@@ -5,12 +5,10 @@
        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-job-title(:value="jobTitle" :width="columnBody.find(el => el.name === 'jobTitle').width")
      table-cell-body-priority(:value="priority" :width="columnBody.find(el => el.name === 'priority').width")
-      table-cell-body-phone(:value="phone" :width="columnBody.find(el => el.name === 'phone').width")
-      table-cell-body-email(:value="email" :width="columnBody.find(el => el.name === 'email').width")
-      table-cell-body-networks(:networks="networks" :width="columnBody.find(el => el.name === 'networks').width")
-      table-cell-body-meeting(:date="meetingTime.date" :time="meetingTime.time" :width="columnBody.find(el => el.name === 'meeting').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")
      .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")
@@ -47,6 +45,7 @@ export default {
  },
  data() {
    return {
+      dataIdentityDocument: {},
      dataDetail: {},
      isOpenDetailInfo: false,
      isOpenPopup: false,
@@ -57,23 +56,28 @@ export default {
    id: String,
    check: Function,
    isCheck: Boolean,
-    fullName: String,
+    fullName: Array,
    age: String,
-    jobTitle: String,
-    priority: String,
-    phone: String,
-    email: String,
-    networks: Array,
-    meetingTime: Object,
+    priority: {
+      default: null,
+    },
+    contacts: Array,
  },
  methods: {
    fetchClientDetail(id) {
      // eslint-disable-next-line
      fetch(`/api/detail/${id}`).then((res) => res.json()).then((data) => this.saveClientDetail(data))
    },
+    fetchClientIdentityDocument(id) {
+      // eslint-disable-next-line
+      fetch(`/api/detail/identity_document/${id}`).then((res) => res.json()).then((data) => this.saveIdentityDocument(data))
+    },
    saveClientDetail(data) {
      this.dataDetail = data;
    },
+    saveIdentityDocument(data) {
+      this.dataIdentityDocument = data;
+    },
    openPopup(e) {
      e.target.focus();
      this.isOpenPopup = !this.isOpenPopup;
@@ -81,6 +85,7 @@ export default {
    openDetailInfo(e) {
      this.isOpenDetailInfo = !this.isOpenDetailInfo;
      this.isOpenDetailInfo && this.fetchClientDetail(e.currentTarget.id);
+      this.isOpenDetailInfo && this.fetchClientIdentityDocument(e.currentTarget.id);
    },
    handleUnFocusPopup() {
      this.isOpenPopup = false;
--- a/src/pages/clients/components/ClientsWrapper.vue
+++ b/src/pages/clients/components/ClientsWrapper.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.w-full.relative.mx-6
+  .wrapper.flex.w-full.relative.mx-6
    clients-table(:open-form-create="openFormCreateClient")
    clients-form-create(v-if="isOpenForm" :close-form="closeFormCreateClient")
 </template>
@@ -25,3 +25,8 @@ export default {
  },
 };
 </script>
+
+<style lang="sass" scoped>
+.wrapper
+  overflow: auto
+</style>
--- a/src/pages/clients/components/cells/TableCellBodyAge.vue
+++ b/src/pages/clients/components/cells/TableCellBodyAge.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
  .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
-    span.text-sm {{value}}
+    span.text-sm {{new Date().getFullYear() - new Date(value).getFullYear()}}
 </template>

 <script>
--- a/src/pages/clients/components/cells/TableCellBodyEmail.vue
+++ b/src/pages/clients/components/cells/TableCellBodyEmail.vue
@@ -1,13 +1,13 @@
 <template lang="pug">
  .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
-    span.text-sm {{value}}
+    span.text-sm {{value.some((el) => el.kind === "EMAIL")?value.find((el) => el.kind === "EMAIL").username:''}}
 </template>

 <script>
 export default {
  name: "TableCellBodyEmail",
  props: {
-    value: String,
+    value: Array,
    width: Number,
  },
 };
--- a/src/pages/clients/components/cells/TableCellBodyName.vue
+++ b/src/pages/clients/components/cells/TableCellBodyName.vue
@@ -1,16 +1,26 @@
 <template lang="pug">
  .flex.box-border.px-4.items-center.gap-x-3.w-full(:style="{ minWidth : width + 'px' }")
-    img(v-if="imgUrl" :src="imgUrl" alt="Avatar")
-    span.text-sm.font-semibold {{value}}
+    .flex.avatar.justify-center.items-center
+      span {{`${value[0][0]}${value[1][0]}`}}
+    span.text-sm.font-semibold {{value.join(' ')}}
 </template>

 <script>
 export default {
  name: "TableCellBodyName",
  props: {
-    value: String,
+    value: Array,
    width: Number,
    imgUrl: String,
  },
 };
 </script>
+
+<style lang="sass" scoped>
+.avatar
+  width: 36px
+  height: 36px
+  border-radius: 50%
+  background-color: var(--font-grey-color)
+  color: var(--font-dark-blue-color)
+</style>
--- a/src/pages/clients/components/cells/TableCellBodyNetworks.vue
+++ b/src/pages/clients/components/cells/TableCellBodyNetworks.vue
@@ -1,14 +1,27 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
-    .w-5.h-5(v-for="network in networks")
+  .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")
 </template>

 <script>
+import { column } from "@/pages/clients/utils/tableConfig";
 export default {
  name: "TableCellBodyNetworks",
  props: {
    networks: Array,
    width: Number,
  },
+  data() {
+    return {
+      settings: column.find((el) => el.name === "networks"),
+    };
+  },
 };
 </script>
+
+<style lang="sass" scoped>
+.network-cell
+  column-gap: 2px
+.icon
+  color: var(--btn-blue-color)
+</style>
--- a/src/pages/clients/components/cells/TableCellBodyPhone.vue
+++ b/src/pages/clients/components/cells/TableCellBodyPhone.vue
@@ -1,13 +1,13 @@
 <template lang="pug">
  .flex.box-border.px-4.items-center.w-full(:style="{ minWidth : width + 'px' }")
-    span.text-sm {{value}}
+    span.text-sm {{value.some((el) => el.kind === "PHONE")?value.find((el) => el.kind === "PHONE").username:''}}
 </template>

 <script>
 export default {
  name: "TableCellBodyPhone",
  props: {
-    value: String,
+    value: Array,
    width: Number,
  },
 };
--- a/src/pages/clients/components/cells/TableCellBodyPriority.vue
+++ b/src/pages/clients/components/cells/TableCellBodyPriority.vue
@@ -1,18 +1,18 @@
 <template lang="pug">
  .flex.box-border.px-4.items-center.gap-x-2.w-full(:style="{ minWidth : width + 'px' }")
-    .dot.w-2.h-2
-    span.text-sm(:style="{ color : color }") {{value}}
+    .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}}
 </template>

 <script>
+import { column } from "@/pages/clients/utils/tableConfig";
 export default {
  name: "TableCellBodyPriority",
-  props: {
-    value: String,
-    width: Number,
-    color: {
-      default: "#9294A7",
-    },
+  props: ["value", "width"],
+  data() {
+    return {
+      settings: column.find((el) => el.name === "priority"),
+    };
  },
 };
 </script>