admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Создал компонент отображения детальной информации, конфиг для него и добавил данные в мок

Browse Source
This commit is contained in:
DwCay
2022-10-20 23:52:48 +03:00
parent 96b071294d
commit 7f03de6155
7 changed files with 290 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/pages/clients/components/ClientsTableRow.vue
View File

@@ -1,18 +1,20 @@
<template lang="pug">
.row-body.flex.w-full.cursor-pointer
.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-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")
.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")
.row-wrapper.flex.flex-col.w-full
.row-body.flex.w-full.cursor-pointer(@click="openDetailInfo")
.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-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")
.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")
</template>
<script>
@@ -26,6 +28,7 @@ import TableCellBodyAge from "@/pages/clients/components/cells/TableCellBodyAge"
import TableCellBodyName from "@/pages/clients/components/cells/TableCellBodyName";
import ClientsActionPopup from "@/pages/clients/components/ClientsActionPopup";
import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
import ClientDetailInfoWrapper from "@/pages/clients/components/ClientDetailInfoWrapper";
import { column } from "@/pages/clients/utils/tableConfig";
export default {
name: "ClientsTableRow",
@@ -40,9 +43,12 @@ export default {
TableCellBodyEmail,
TableCellBodyNetworks,
TableCellBodyMeeting,
ClientDetailInfoWrapper,
},
data() {
return {
dataDetail: {},
isOpenDetailInfo: false,
isOpenPopup: false,
columnBody: column,
};
@@ -61,10 +67,21 @@ export default {
meetingTime: Object,
},
methods: {
fetchClientDetail() {
// eslint-disable-next-line
fetch("/api/detail/1").then((res) => res.json()).then((data) => this.saveClientDetail(data))
},
saveClientDetail(data) {
this.dataDetail = data;
},
openPopup(e) {
e.target.focus();
this.isOpenPopup = !this.isOpenPopup;
},
openDetailInfo() {
this.isOpenDetailInfo = !this.isOpenDetailInfo;
this.isOpenDetailInfo && this.fetchClientDetail();
},
handleUnFocusPopup() {
this.isOpenPopup = false;
},
@@ -73,9 +90,11 @@ export default {
</script>
<style lang="sass" scoped>
.row-wrapper
border-bottom: 1px solid #D3D4DC
.row-body
color: var(--font-dark-blue-color)
border-bottom: 1px solid #D3D4DC
min-height: 56px
&:hover
background-color: var(--bg-hover-row-table)
.check-box