format
This commit is contained in:
parent
5db4e8ece3
commit
64f9216b5f
|
|
@ -6,13 +6,13 @@ import { Column } from 'primereact/column';
|
|||
import { Toast } from 'primereact/toast';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faUserAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faAt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
|
||||
import { useCookies } from "react-cookie";
|
||||
import { useCookies } from 'react-cookie';
|
||||
import classNames from 'classnames';
|
||||
|
||||
const InvitadosComunidad = () => {
|
||||
|
|
@ -28,14 +28,15 @@ const InvitadosComunidad = () => {
|
|||
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);
|
||||
.then((response) => response.json())
|
||||
.then((data) => data.message)
|
||||
.then((data) => {
|
||||
data = data.filter(
|
||||
(invitado) => invitado.community === cookies.community_id,
|
||||
);
|
||||
setInvitados(data);
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getInvitados();
|
||||
|
|
@ -44,59 +45,61 @@ const InvitadosComunidad = () => {
|
|||
const leftToolbarTemplate = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className='my-2'>
|
||||
<div className="my-2">
|
||||
<p>Boton Eliminar aqui</p>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button
|
||||
label='Exportar'
|
||||
icon='pi pi-upload'
|
||||
className='p-button-help'
|
||||
label="Exportar"
|
||||
icon="pi pi-upload"
|
||||
className="p-button-help"
|
||||
/>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const headerName = (
|
||||
<>
|
||||
<p>{' '}
|
||||
<FontAwesomeIcon icon={faUserAlt} style={{ color: "#C08135" }} /> {' '}
|
||||
Nombre
|
||||
<p>
|
||||
{' '}
|
||||
<FontAwesomeIcon icon={faUserAlt} style={{ color: '#C08135' }} /> Nombre
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
);
|
||||
|
||||
const headerLastName = (
|
||||
<>
|
||||
<p>
|
||||
{' '}
|
||||
<FontAwesomeIcon icon={faUserAlt} style={{ color: "#D7A86E" }} />{' '}
|
||||
<FontAwesomeIcon icon={faUserAlt} style={{ color: '#D7A86E' }} />{' '}
|
||||
Apellido(s)
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
);
|
||||
|
||||
const headerDNI = (
|
||||
<p> {' '}
|
||||
<FontAwesomeIcon icon={faIdCardAlt} style={{ color: "#C08135" }} />{' '}
|
||||
<p>
|
||||
{' '}
|
||||
<FontAwesomeIcon icon={faIdCardAlt} style={{ color: '#C08135' }} />{' '}
|
||||
Identificación
|
||||
</p>
|
||||
)
|
||||
);
|
||||
|
||||
const headerEmail = (
|
||||
<>
|
||||
<p> {' '}
|
||||
<FontAwesomeIcon icon={faAt} style={{ color: "#D7A86E" }} />{' '}
|
||||
Correo Electrónico
|
||||
<p>
|
||||
{' '}
|
||||
<FontAwesomeIcon icon={faAt} style={{ color: '#D7A86E' }} /> Correo
|
||||
Electrónico
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
);
|
||||
|
||||
const headerPhone = (
|
||||
<>
|
||||
|
|
@ -106,65 +109,95 @@ const InvitadosComunidad = () => {
|
|||
Teléfono
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
);
|
||||
|
||||
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' />
|
||||
<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'
|
||||
type="search"
|
||||
onInput={(e) => setGlobalFilter(e.target.value)}
|
||||
placeholder='Buscar...'
|
||||
placeholder="Buscar..."
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='grid'>
|
||||
<div className='col-12'>
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Toast ref={toastRef} />
|
||||
<div className='card'>
|
||||
<div className="card">
|
||||
<Toolbar
|
||||
className='mb-4'
|
||||
className="mb-4"
|
||||
left={leftToolbarTemplate}
|
||||
right={rightToolbarTemplate}
|
||||
/>
|
||||
<DataTable
|
||||
ref={tableRef}
|
||||
value={invitados}
|
||||
dataKey='_id'
|
||||
dataKey="_id"
|
||||
paginator
|
||||
rows={10}
|
||||
selection={selectedInvitados}
|
||||
onSelectionChange={(e) => setSelectedInvitados(e.value)}
|
||||
scrollable
|
||||
scrollHeight='500px'
|
||||
scrollWidth='100%'
|
||||
scrollDirection='both'
|
||||
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}'
|
||||
className="datatable-responsive mt-3"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
currentPageReportTemplate="{currentPage} de {totalPages}"
|
||||
globalFilter={globalFilter}
|
||||
emptyMessageTemplate='No se encontraron invitados'
|
||||
emptyMessageTemplate="No se encontraron invitados"
|
||||
>
|
||||
<Column field='name' header='Nombre' sortable header={headerName} />
|
||||
<Column field='last_name' header='Apellido' sortable header={headerLastName} />
|
||||
<Column field='dni' header='DNI' sortable header={headerDNI} />
|
||||
<Column field='number_plate' header='Placa' sortable header={headerDNI} />
|
||||
<Column field='telefono' header='Teléfono' sortable header={headerPhone} />
|
||||
<Column field='email' header='Email' sortable header={headerEmail} />
|
||||
<Column field='date_entry' header='Fecha de registro' sortable header={headerName} />
|
||||
<Column field='tenant_name' header='Inquilino' sortable header={headerName} />
|
||||
<Column field="name" header="Nombre" sortable header={headerName} />
|
||||
<Column
|
||||
field="last_name"
|
||||
header="Apellido"
|
||||
sortable
|
||||
header={headerLastName}
|
||||
/>
|
||||
<Column field="dni" header="DNI" sortable header={headerDNI} />
|
||||
<Column
|
||||
field="number_plate"
|
||||
header="Placa"
|
||||
sortable
|
||||
header={headerDNI}
|
||||
/>
|
||||
<Column
|
||||
field="telefono"
|
||||
header="Teléfono"
|
||||
sortable
|
||||
header={headerPhone}
|
||||
/>
|
||||
<Column
|
||||
field="email"
|
||||
header="Email"
|
||||
sortable
|
||||
header={headerEmail}
|
||||
/>
|
||||
<Column
|
||||
field="date_entry"
|
||||
header="Fecha de registro"
|
||||
sortable
|
||||
header={headerName}
|
||||
/>
|
||||
<Column
|
||||
field="tenant_name"
|
||||
header="Inquilino"
|
||||
sortable
|
||||
header={headerName}
|
||||
/>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(InvitadosComunidad);
|
||||
|
|
|
|||
Loading…
Reference in New Issue