Merge pull request #193 from DeimosPr4/61-us-34-lista-de-invitados-de-inquilinos
61 us 34 lista de invitados de inquilinos
This commit is contained in:
GitHub
commit
59c393390c
|
|
@ -34,6 +34,7 @@ import GuardasSeguridad from './components/GuardasSeguridad';
|
|||
import Communities from './components/ComunidadViviendas';
|
||||
import Inquilinos from './components/Inquilinos';
|
||||
import RegistroComunicado from './components/RegistroComunicado';
|
||||
import InvitadosComunidad from './components/InvitadosComunidad';
|
||||
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
|
||||
|
||||
import Crud from './pages/Crud';
|
||||
|
|
@ -202,10 +203,9 @@ const App = () => {
|
|||
icon: PrimeIcons.BUILDING,
|
||||
to: '/areasComunes',
|
||||
},
|
||||
|
||||
{ label: 'Reservaciones', icon: PrimeIcons.CALENDAR, to: '/reservaciones'},
|
||||
{ label: 'Comunicados', icon: PrimeIcons.COMMENTS, to: '/registroComunicado' },
|
||||
|
||||
{ label: 'Invitados', icon: PrimeIcons.USERS, to: '/invitadosComunidad' },
|
||||
{ label: 'Reservaciones', icon: PrimeIcons.CALENDAR, to: '/reservaciones'},
|
||||
]
|
||||
},
|
||||
]
|
||||
|
|
@ -471,6 +471,7 @@ const App = () => {
|
|||
<Route path="/areasComunes" component={AreasComunes} />
|
||||
<Route path="/reservaciones" component={Reservaciones} />
|
||||
<Route path="/registroComunicado" component={RegistroComunicado} />
|
||||
<Route path="/invitadosComunidad" component={InvitadosComunidad} />
|
||||
</>
|
||||
)
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,219 @@
|
|||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { Button } from 'primereact/button';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
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 { 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 classNames from 'classnames';
|
||||
|
||||
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 () => {
|
||||
await fetch(`http://localhost:4000/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();
|
||||
}, [getInvitados, invitados]);
|
||||
|
||||
const leftToolbarTemplate = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<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"
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
const headerName = (
|
||||
<>
|
||||
<p>
|
||||
{' '}
|
||||
<FontAwesomeIcon icon={faUserAlt} style={{ color: '#C08135' }} /> Nombre
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
|
||||
const headerTenant = (
|
||||
<>
|
||||
<p>
|
||||
{' '}
|
||||
<FontAwesomeIcon icon={faUserAlt} style={{ color: '#C08135' }} /> Inquilino
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
|
||||
const headerLastName = (
|
||||
<>
|
||||
<p>
|
||||
{' '}
|
||||
<FontAwesomeIcon icon={faUserAlt} style={{ color: '#D7A86E' }} />{' '}
|
||||
Apellido(s)
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
|
||||
const headerPlate = (
|
||||
<p>
|
||||
{' '}
|
||||
<FontAwesomeIcon icon={faIdCardAlt} style={{ color: '#C08135' }} />{' '}
|
||||
Placa
|
||||
</p>
|
||||
);
|
||||
|
||||
const headerDNI = (
|
||||
<p>
|
||||
{' '}
|
||||
<FontAwesomeIcon icon={faIdCardAlt} style={{ color: '#C08135' }} />{' '}
|
||||
Identificación
|
||||
</p>
|
||||
);
|
||||
|
||||
const headerEmail = (
|
||||
<>
|
||||
<p>
|
||||
{' '}
|
||||
<FontAwesomeIcon icon={faAt} style={{ color: '#D7A86E' }} /> Correo
|
||||
Electrónico
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
|
||||
const headerPhone = (
|
||||
<>
|
||||
<p>
|
||||
{' '}
|
||||
<FontAwesomeIcon icon={faPhoneAlt} style={{ color: '#C08135' }} />{' '}
|
||||
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" />
|
||||
<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 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={headerPlate}
|
||||
/>
|
||||
<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={headerTenant}
|
||||
/>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(InvitadosComunidad);
|
||||
Loading…
Reference in New Issue