99 lines
2.9 KiB
Vue
99 lines
2.9 KiB
Vue
<template lang="pug">
|
|
.wrapper-table.relative.flex.flex-col.gap-y-8.px-6.py-6.h-full.w-full
|
|
base-client-form-create(v-if="isOpenFormCreate" :close-form="closeFormCreateClient")
|
|
clients-table-hat(:is-open-actions="marked.length" :open-form-create="openFormCreateClient")
|
|
.flex.flex-col.h-full.gap-y-2.table-container.w-full
|
|
clients-table-header(:check="selectedCheck" :is-check="selectAll")
|
|
.flex.flex-col
|
|
clients-table-row(
|
|
v-for="client in dataClients"
|
|
:key="client.id"
|
|
:id="client.id"
|
|
:is-check="marked.includes(client.id)"
|
|
:check="selectedCheck"
|
|
:client="client"
|
|
:fetch-data-clients="fetchDataClients"
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import { fetchWrapper } from "@/shared/fetchWrapper.js";
|
|
import ClientsTableHeader from "@/pages/clients/components/ClientsTableHeader";
|
|
import ClientsTableHat from "@/pages/clients/components/ClientsTableHat";
|
|
import ClientsTableRow from "@/pages/clients/components/ClientsTableRow";
|
|
import ClientsTableCheckbox from "@/pages/clients/components/ClientsTableCheckbox";
|
|
import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
|
|
export default {
|
|
name: "ClientsTable",
|
|
components: {
|
|
ClientsTableCheckbox,
|
|
ClientsTableRow,
|
|
ClientsTableHat,
|
|
ClientsTableHeader,
|
|
BaseClientFormCreate,
|
|
},
|
|
data() {
|
|
return {
|
|
isOpenFormCreate: false,
|
|
selectAll: false,
|
|
marked: [],
|
|
dataClients: [],
|
|
};
|
|
},
|
|
methods: {
|
|
openFormCreateClient() {
|
|
this.isOpenFormCreate = true;
|
|
},
|
|
closeFormCreateClient() {
|
|
this.isOpenFormCreate = false;
|
|
this.fetchDataClients();
|
|
},
|
|
saveDataClients(data) {
|
|
this.dataClients = data.results;
|
|
},
|
|
fetchDataClients() {
|
|
fetchWrapper
|
|
.get("general/person/")
|
|
.then((data) => this.saveDataClients(data));
|
|
},
|
|
selectedCheck(e) {
|
|
if (e.target.id === "checkbox") {
|
|
this.selectAll = !this.selectAll;
|
|
this.marked = this.dataClients.map((el) => el.id);
|
|
!this.selectAll && (this.marked = []);
|
|
} 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>
|
|
.wrapper-table
|
|
background-color: var(--default-white)
|
|
.table-container
|
|
overflow: auto
|
|
&::-webkit-scrollbar
|
|
height: 4px
|
|
&::-webkit-scrollbar-track
|
|
background-color: rgba(211, 212, 220, 0.5)
|
|
border-radius: 8px
|
|
&::-webkit-scrollbar-thumb
|
|
border-radius: 8px
|
|
background-color: var(--btn-blue-color)
|
|
</style>
|