eduardo
/
katoikia-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

format

This commit is contained in:
Eduardo Quiros 2022-08-23 03:40:54 -06:00
parent 5db4e8ece3
commit 64f9216b5f
No known key found for this signature in database
GPG Key ID: B77F36C3F12720B4
1 changed files with 92 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
web-ui/web-react/src/components/InvitadosComunidad.js
View File

@ -6,13 +6,13 @@ import { Column } from 'primereact/column';
import { Toast } from 'primereact/toast'; import { Toast } from 'primereact/toast';
import { Dialog } from 'primereact/dialog'; import { Dialog } from 'primereact/dialog';
import { Toolbar } from 'primereact/toolbar'; 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 { faUserAlt } from '@fortawesome/free-solid-svg-icons';
import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons'; import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons';
import { faAt } from '@fortawesome/free-solid-svg-icons'; import { faAt } from '@fortawesome/free-solid-svg-icons';
import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons'; import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons';
import { faCircleQuestion } 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'; import classNames from 'classnames';
const InvitadosComunidad = () => { const InvitadosComunidad = () => {
@ -28,14 +28,15 @@ const InvitadosComunidad = () => {
await fetch(`${process.env.REACT_APP_API_URL}/guest/allGuests`, { await fetch(`${process.env.REACT_APP_API_URL}/guest/allGuests`, {
method: 'GET', method: 'GET',
}) })
.then(response => response.json()) .then((response) => response.json())
.then(data => data.message) .then((data) => data.message)
.then(data => { .then((data) => {
data = data.filter(invitado => data = data.filter(
invitado.community === cookies.community_id); (invitado) => invitado.community === cookies.community_id,
);
setInvitados(data); setInvitados(data);
}) });
} };
useEffect(() => { useEffect(() => {
getInvitados(); getInvitados();
@ -44,59 +45,61 @@ const InvitadosComunidad = () => {
const leftToolbarTemplate = () => { const leftToolbarTemplate = () => {
return ( return (
<React.Fragment> <React.Fragment>
<div className='my-2'> <div className="my-2">
<p>Boton Eliminar aqui</p> <p>Boton Eliminar aqui</p>
</div> </div>
</React.Fragment> </React.Fragment>
) );
} };
const rightToolbarTemplate = () => { const rightToolbarTemplate = () => {
return ( return (
<React.Fragment> <React.Fragment>
<Button <Button
label='Exportar' label="Exportar"
icon='pi pi-upload' icon="pi pi-upload"
className='p-button-help' className="p-button-help"
/> />
</React.Fragment> </React.Fragment>
) );
} };
const headerName = ( const headerName = (
<> <>
<p>{' '} <p>
<FontAwesomeIcon icon={faUserAlt} style={{ color: "#C08135" }} /> {' '} {' '}
Nombre <FontAwesomeIcon icon={faUserAlt} style={{ color: '#C08135' }} /> Nombre
</p> </p>
</> </>
) );
const headerLastName = ( const headerLastName = (
<> <>
<p> <p>
{' '} {' '}
<FontAwesomeIcon icon={faUserAlt} style={{ color: "#D7A86E" }} />{' '} <FontAwesomeIcon icon={faUserAlt} style={{ color: '#D7A86E' }} />{' '}
Apellido(s) Apellido(s)
</p> </p>
</> </>
) );
const headerDNI = ( const headerDNI = (
<p> {' '} <p>
<FontAwesomeIcon icon={faIdCardAlt} style={{ color: "#C08135" }} />{' '} {' '}
<FontAwesomeIcon icon={faIdCardAlt} style={{ color: '#C08135' }} />{' '}
Identificación Identificación
</p> </p>
) );
const headerEmail = ( const headerEmail = (
<> <>
<p> {' '} <p>
<FontAwesomeIcon icon={faAt} style={{ color: "#D7A86E" }} />{' '} {' '}
Correo Electrónico <FontAwesomeIcon icon={faAt} style={{ color: '#D7A86E' }} /> Correo
Electrónico
</p> </p>
</> </>
) );
const headerPhone = ( const headerPhone = (
<> <>
@ -106,65 +109,95 @@ const InvitadosComunidad = () => {
Teléfono Teléfono
</p> </p>
</> </>
) );
const headerTemplate = ( const headerTemplate = (
<div className='flex flex-column md:flex-row md:justify-content-between md:align-items-center'> <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
<h5 className='m-0'>Invitados</h5> <h5 className="m-0">Invitados</h5>
<span className='block mt-2 md:mt-0 p-input-icon-left'> <span className="block mt-2 md:mt-0 p-input-icon-left">
<i className='pi pi-search' /> <i className="pi pi-search" />
<InputText <InputText
type='search' type="search"
onInput={(e) => setGlobalFilter(e.target.value)} onInput={(e) => setGlobalFilter(e.target.value)}
placeholder='Buscar...' placeholder="Buscar..."
/> />
</span> </span>
</div> </div>
); );
return ( return (
<div className='grid'> <div className="grid">
<div className='col-12'> <div className="col-12">
<Toast ref={toastRef} /> <Toast ref={toastRef} />
<div className='card'> <div className="card">
<Toolbar <Toolbar
className='mb-4' className="mb-4"
left={leftToolbarTemplate} left={leftToolbarTemplate}
right={rightToolbarTemplate} right={rightToolbarTemplate}
/> />
<DataTable <DataTable
ref={tableRef} ref={tableRef}
value={invitados} value={invitados}
dataKey='_id' dataKey="_id"
paginator paginator
rows={10} rows={10}
selection={selectedInvitados} selection={selectedInvitados}
onSelectionChange={(e) => setSelectedInvitados(e.value)} onSelectionChange={(e) => setSelectedInvitados(e.value)}
scrollable scrollable
scrollHeight='500px' scrollHeight="500px"
scrollWidth='100%' scrollWidth="100%"
scrollDirection='both' scrollDirection="both"
header={headerTemplate} header={headerTemplate}
rowsPerPageOptions={[10, 20, 30]} rowsPerPageOptions={[10, 20, 30]}
className='datatable-responsive mt-3' className="datatable-responsive mt-3"
paginatorTemplate='FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown' paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
currentPageReportTemplate='{currentPage} de {totalPages}' currentPageReportTemplate="{currentPage} de {totalPages}"
globalFilter={globalFilter} globalFilter={globalFilter}
emptyMessageTemplate='No se encontraron invitados' emptyMessageTemplate="No se encontraron invitados"
> >
<Column field='name' header='Nombre' sortable header={headerName} /> <Column field="name" header="Nombre" sortable header={headerName} />
<Column field='last_name' header='Apellido' sortable header={headerLastName} /> <Column
<Column field='dni' header='DNI' sortable header={headerDNI} /> field="last_name"
<Column field='number_plate' header='Placa' sortable header={headerDNI} /> header="Apellido"
<Column field='telefono' header='Teléfono' sortable header={headerPhone} /> sortable
<Column field='email' header='Email' sortable header={headerEmail} /> header={headerLastName}
<Column field='date_entry' header='Fecha de registro' sortable header={headerName} /> />
<Column field='tenant_name' header='Inquilino' sortable header={headerName} /> <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> </DataTable>
</div> </div>
</div> </div>
</div> </div>
) );
} };
export default React.memo(InvitadosComunidad); export default React.memo(InvitadosComunidad);