125 lines
3.7 KiB
Vue
125 lines
3.7 KiB
Vue
<template lang="pug">
|
|
.wrapper.flex.flex-col.gap-y-8.px-6.pt-6.h-full.w-full.min-w-fit
|
|
clients-table-header(:is-open-actions="marked.length")
|
|
table.w-full
|
|
thead.head-table
|
|
tr.head-row
|
|
th.w-3
|
|
.px-4.py-3
|
|
clients-table-checkbox(:is-check="selectAll" :check="selectedCheck" id="all")
|
|
th
|
|
.flex.px-4.justify-between
|
|
span.text-sm ФИО
|
|
img.cursor-pointer(src="@/assets/icons/sort-number.svg" alt="SortNumber")
|
|
th
|
|
.flex.px-4.justify-between.gap-x-6
|
|
span.text-sm Возраст
|
|
.icon.icon-down-arrow.text-xsm.mt-1.cursor-pointer
|
|
th
|
|
.px-4.text-left
|
|
span.text-sm Должность
|
|
th
|
|
.flex.relative.px-4.justify-between.gap-x-3
|
|
span.text-sm Приоритет
|
|
.icon.icon-down-arrow.text-xsm.mt-1.cursor-pointer
|
|
th
|
|
.px-4.text-left
|
|
span.text-sm Телефон
|
|
th
|
|
.px-4.text-left
|
|
span.text-sm Email
|
|
th
|
|
.px-4.text-left
|
|
span.text-sm.leading-8 Сети
|
|
th
|
|
.flex.px-4.justify-between.gap-x-11
|
|
span.text-sm.leading-4.whitespace-nowrap Ближайшая встреча
|
|
.icon.icon-down-arrow.text-xsm.mt-1.cursor-pointer
|
|
th.w-5
|
|
.do.px-4
|
|
span.text-sm Do
|
|
tbody.tbody
|
|
clients-table-row(v-for="client in dataClients"
|
|
:key="client.id"
|
|
:id="client.id"
|
|
:is-check="marked.includes(client.id)"
|
|
:check="selectedCheck"
|
|
:full-name="client.fullName"
|
|
:age="client.age"
|
|
:job-title="client.jobTitle"
|
|
:priority="client.priority"
|
|
:phone="client.phone"
|
|
:email="client.email"
|
|
:networks="client.networks"
|
|
:meeting-time="client.meetingTime"
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import ClientsTableHeader from "@/pages/clients/components/ClientsTableHeader";
|
|
import ClientsTableRow from "@/pages/clients/components/ClientsTableRow";
|
|
import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
|
|
export default {
|
|
name: "ClientsTable",
|
|
components: { ClientsTableCheckbox, ClientsTableRow, ClientsTableHeader },
|
|
data() {
|
|
return {
|
|
selectAll: false,
|
|
marked: [],
|
|
dataClients: [],
|
|
};
|
|
},
|
|
methods: {
|
|
saveDataClients(data) {
|
|
this.dataClients = data.dataClients;
|
|
},
|
|
fetchDataClients() {
|
|
// eslint-disable-next-line
|
|
fetch("/api/clients").then((res) => res.json()).then((data) => this.saveDataClients(data))
|
|
},
|
|
selectedCheck(e) {
|
|
if (e.target.id === "all") {
|
|
this.selectAll = !this.selectAll;
|
|
this.marked = this.dataClients.map((el) => el.id);
|
|
!this.selectAll ? (this.marked = []) : true;
|
|
} else {
|
|
if (e.target.checked) {
|
|
this.marked = [...this.marked, e.target.id];
|
|
}
|
|
if (!e.target.checked) {
|
|
this.marked = this.marked.filter((el) => el !== e.target.id);
|
|
}
|
|
if (this.marked.length !== this.dataClients.length) {
|
|
this.selectAll = false;
|
|
} else {
|
|
this.selectAll = true;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
this.fetchDataClients();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.icon
|
|
color: var(--font-dark-blue-color)
|
|
&.priority-open
|
|
transform: rotate(180deg)
|
|
.head-table
|
|
color: var(--font-grey-color)
|
|
.tbody:before
|
|
content: "-"
|
|
display: block
|
|
line-height: 8px
|
|
color: transparent
|
|
.head-row
|
|
border-bottom: 1px solid #D3D4DC
|
|
.wrapper
|
|
background-color: var(--default-white)
|
|
.color
|
|
background-color: red
|
|
</style>
|