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

add column headers

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

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

@ -1,11 +1,19 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useEffect, useState, useRef } from 'react';
import { Button } from 'primereact/button' import { InputText } from 'primereact/inputtext';
import { InputText } from 'primereact/inputtext' import { Button } from 'primereact/button';
import { Column } from 'primereact/column' import { DataTable } from 'primereact/datatable';
import { DataTable } from 'primereact/datatable' import { Column } from 'primereact/column';
import { Toast } from 'primereact/toast' import { Toast } from 'primereact/toast';
import { Toolbar } from 'primereact/toolbar' import { Dialog } from 'primereact/dialog';
import { useCookies } from 'react-cookie'; 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 InvitadosComunidad = () => {
const [cookies] = useCookies(); const [cookies] = useCookies();
@ -28,9 +36,9 @@ const InvitadosComunidad = () => {
setInvitados(data); setInvitados(data);
}) })
} }
useEffect(() => { useEffect(() => {
getInvitados(); getInvitados();
}, [invitados]); }, [invitados]);
const leftToolbarTemplate = () => { const leftToolbarTemplate = () => {
@ -55,6 +63,51 @@ const InvitadosComunidad = () => {
) )
} }
const headerName = (
<>
<p>{' '}
<FontAwesomeIcon icon={faUserAlt} style={{ color: "#C08135" }} /> {' '}
Nombre
</p>
</>
)
const headerLastName = (
<>
<p>
{' '}
<FontAwesomeIcon icon={faUserAlt} style={{ color: "#D7A86E" }} />{' '}
Apellido(s)
</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 = ( 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>
@ -99,14 +152,14 @@ const InvitadosComunidad = () => {
globalFilter={globalFilter} globalFilter={globalFilter}
emptyMessageTemplate='No se encontraron invitados' emptyMessageTemplate='No se encontraron invitados'
> >
<Column field='name' header='Nombre' sortable /> <Column field='name' header='Nombre' sortable header={headerName} />
<Column field='last_name' header='Apellido' sortable /> <Column field='last_name' header='Apellido' sortable header={headerLastName} />
<Column field='dni' header='DNI' sortable /> <Column field='dni' header='DNI' sortable header={headerDNI} />
<Column field='number_plate' header='Placa' sortable /> <Column field='number_plate' header='Placa' sortable header={headerDNI} />
<Column field='telefono' header='Teléfono' sortable /> <Column field='telefono' header='Teléfono' sortable header={headerPhone} />
<Column field='email' header='Email' sortable /> <Column field='email' header='Email' sortable header={headerEmail} />
<Column field='date_entry' header='Fecha de registro' sortable /> <Column field='date_entry' header='Fecha de registro' sortable header={headerName} />
<Column field='tenant_name' header='Inquilino' sortable /> <Column field='tenant_name' header='Inquilino' sortable header={headerName} />
</DataTable> </DataTable>
</div> </div>
</div> </div>