94 lines
3.2 KiB
JavaScript
94 lines
3.2 KiB
JavaScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import { Button } from 'primereact/button'
|
|
import { InputText } from 'primereact/inputtext'
|
|
import { Column } from 'primereact/column'
|
|
import { DataTable } from 'primereact/datatable'
|
|
import { Toast } from 'primereact/toast'
|
|
import { Toolbar } from 'primereact/toolbar'
|
|
import { useCookies } from 'react-cookie';
|
|
|
|
const InvitadosComunidad = () => {
|
|
const [cookies] = useCookies();
|
|
const [globalFilter, setGlobalFilter] = useState(null);
|
|
const [invitados, setInvitados] = useState([]);
|
|
const [selectedInvitados, setSelectedInvitados] = useState([]);
|
|
const tableRef = useRef(null);
|
|
const toastRef = useRef(null);
|
|
|
|
const getInvitados = async () => {
|
|
console.log(`${process.env.REACT_APP_API_URL}`);
|
|
await fetch(`${process.env.REACT_APP_API_URL}/guest/allGuests`, {
|
|
method: 'GET',
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => data.message)
|
|
.then(data => {
|
|
data = data.filter(invitado =>
|
|
invitado.community === cookies.community_id);
|
|
setInvitados(data);
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
getInvitados();
|
|
}, [invitados]);
|
|
|
|
const headerTemplate = (
|
|
<div className='flex flex-column md:flex-row md:justify-content-between md:align-items-center'>
|
|
<h5 className='m-0'>Invitados</h5>
|
|
<span className='block mt-2 md:mt-0 p-input-icon-left'>
|
|
<i className='pi pi-search' />
|
|
<InputText
|
|
type='search'
|
|
onInput={(e) => setGlobalFilter(e.target.value)}
|
|
placeholder='Buscar...'
|
|
/>
|
|
</span>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className='grid'>
|
|
<div className='col-12'>
|
|
<Toast ref={toastRef} />
|
|
<div className='card'>
|
|
<Toolbar
|
|
className='mb-4'
|
|
left={leftToolbarTemplate}
|
|
right={rightToolbarTemplate}
|
|
/>
|
|
<DataTable
|
|
ref={tableRef}
|
|
value={invitados}
|
|
dataKey='_id'
|
|
paginator
|
|
rows={10}
|
|
selection={selectedInvitados}
|
|
onSelectionChange={(e) => setSelectedInvitados(e.value)}
|
|
scrollable
|
|
scrollHeight='500px'
|
|
scrollWidth='100%'
|
|
scrollDirection='both'
|
|
header={headerTemplate}
|
|
rowsPerPageOptions={[10, 20, 30]}
|
|
className='datatable-responsive mt-3'
|
|
paginatorTemplate='FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown'
|
|
currentPageReportTemplate='{currentPage} de {totalPages}'
|
|
globalFilter={globalFilter}
|
|
emptyMessageTemplate='No se encontraron invitados'
|
|
>
|
|
<Column field='name' header='Nombre' sortable />
|
|
<Column field='last_name' header='Apellido' sortable />
|
|
<Column field='dni' header='DNI' sortable />
|
|
<Column field='number_plate' header='Placa' sortable />
|
|
<Column field='telefono' header='Teléfono' sortable />
|
|
<Column field='email' header='Email' sortable />
|
|
<Column field='date_entry' header='Fecha de registro' sortable />
|
|
<Column field='tenant_name' header='Inquilino' sortable />
|
|
</DataTable>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|