agregar columna de estado en la tabla

This commit is contained in:
Mariela 2022-08-02 22:48:36 -06:00
parent 8428463a9e
commit 5f2e2e764e
2 changed files with 33 additions and 4 deletions

View File

@ -262,7 +262,7 @@ const AdministradoresSistema = () => {
<div className="actions"> <div className="actions">
<Button <Button
icon={`${icono}`} icon={`${icono}`}
className={`p-button-rounded p-button-warning mt-2 mx-2`} className="p-button-rounded p-button-warning mt-2 mx-2"
onClick={() => confirmChangeStatusAdminSystem(rowData)} onClick={() => confirmChangeStatusAdminSystem(rowData)}
title={`${text}`} title={`${text}`}
/> />
@ -419,6 +419,7 @@ const AdministradoresSistema = () => {
</p> </p>
</> </>
); );
const headerStatus = ( const headerStatus = (
<> <>
<p> {' '} <p> {' '}

View File

@ -15,6 +15,7 @@ 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 { faEllipsis } from '@fortawesome/free-solid-svg-icons'; import { faEllipsis } from '@fortawesome/free-solid-svg-icons';
import { faHashtag } from '@fortawesome/free-solid-svg-icons'; import { faHashtag } from '@fortawesome/free-solid-svg-icons';
import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
import { useCookies } from "react-cookie"; import { useCookies } from "react-cookie";
@ -288,12 +289,12 @@ const Inquilinos = () => {
<div className="actions"> <div className="actions">
<Button <Button
icon={`${icono}`} icon={`${icono}`}
className={`p-button-rounded p-button-warning mt-2 mx-2`} className="p-button-rounded p-button-warning mt-2 mx-2"
onClick={() => confirmChangeStatusTenant(rowData)} onClick={() => confirmChangeStatusTenant(rowData)}
title={`${text}`} title={`${text}`}
/> />
<Button icon="pi pi-trash" <Button icon="pi pi-trash"
className="p-button-rounded p-button-danger mt-2" className="p-button-rounded p-button-danger mt-2 mx-2"
onClick={() => confirmDeleteTenant(rowData)} /> onClick={() => confirmDeleteTenant(rowData)} />
</div> </div>
); );
@ -397,6 +398,26 @@ const Inquilinos = () => {
</> </>
) )
const headerStatus = (
<>
<p> {' '}
<FontAwesomeIcon icon={faCircleQuestion} style={{ color: "#D7A86E" }} />{' '}
Estado
</p>
</>
)
const statusBodyTemplate = (rowData) => {
return (
<>
<span
className={`status status-${rowData.status}`}
>
{rowData.status_text}
</span>
</>
);
};
return ( return (
<div className="grid"> <div className="grid">
@ -418,7 +439,14 @@ const Inquilinos = () => {
<Column field="email" sortable header={headerEmail} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column> <Column field="email" sortable header={headerEmail} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
<Column field="phone" header={headerPhone} style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px', wordBreak: 'break-word' }}></Column> <Column field="phone" header={headerPhone} style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px', wordBreak: 'break-word' }}></Column>
<Column field="number_house" sortable header={headerNumberHouse} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word', justifyContent: 'center' }}></Column> <Column field="number_house" sortable header={headerNumberHouse} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word', justifyContent: 'center' }}></Column>
<Column style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }} body={actionsTenant}></Column> <Column
field="status"
sortable
header={headerStatus}
body={statusBodyTemplate}
style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>
</Column>
<Column style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsTenant}></Column>
</DataTable> </DataTable>
<Dialog visible={deleteTenantDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteTenantDialogFooter} onHide={hideDeleteTenantDialog}> <Dialog visible={deleteTenantDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteTenantDialogFooter} onHide={hideDeleteTenantDialog}>
<div className="flex align-items-center justify-content-center"> <div className="flex align-items-center justify-content-center">