fix estilo del estado

This commit is contained in:
Mariela 2022-08-01 01:01:01 -06:00
parent 2262484188
commit e2d151e155
2 changed files with 60 additions and 26 deletions

View File

@ -7118,3 +7118,33 @@
.p-button.p-button-danger:enabled:focus { .p-button.p-button-danger:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black; box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black;
} }
.status {
border-radius: var(--border-radius);
padding: 0.25em 0.5rem;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.3px;
}
.status.status-1 {
background: #c8e6c9!important;
color: #256029!important;
}
.status.status-0 {
background: #ffcdd2;
color: #c63737;
}
.status.status-2 {
background: #feedaf;
color: #8a5340;
}
.status.status--1 {
background: #565656;
color: #f7f9f7;
}

View File

@ -24,16 +24,11 @@ const AreasComunes = () => {
_id: null, _id: null,
dni: '', dni: '',
name: '', name: '',
last_name: '', hourMin: '',
email: '', hourMax: '',
phone: '',
password: '',
confirmPassword: '',
community_id: '', community_id: '',
community_name: '', bookable: '1',
user_type: '2', bookable_text: '',
date_entry: new Date(),
status: '1'
}; };
const [commonAreaList, setCommonAreaList] = useState([]); const [commonAreaList, setCommonAreaList] = useState([]);
@ -53,7 +48,16 @@ const AreasComunes = () => {
.then((response) => response.json()) .then((response) => response.json())
.then(data => data.message) .then(data => data.message)
.then(data => { .then(data => {
setCommonAreaList(data) if(data) {
data.map(item => {
if(item.bookable == '1') {
item.bookable_text = 'Disponible';
} else{
item.bookable_text = 'Cerrado';
}
})
}
setCommonAreaList(data);
}); });
} }
@ -248,19 +252,20 @@ const AreasComunes = () => {
</> </>
) )
const headerCommuntiy = (
<>
<p>
{' '}
<FontAwesomeIcon icon={faHomeAlt} style={{ color: "#C08135" }} />{' '}
Comunidad</p>
</>
)
const statusBodyTemplate = (rowData) => {
return (
<>
<span
className={`status status-${rowData.bookable}`}
>
{rowData.bookable_text}
</span>
</>
);
};
return ( return (
<div className="grid"> <div className="grid">
<div className="col-12"> <div className="col-12">
<Toast ref={toast} /> <Toast ref={toast} />
@ -274,10 +279,9 @@ const AreasComunes = () => {
globalFilter={globalFilter} emptyMessage="No hay administradores de comunidades registrados."> globalFilter={globalFilter} emptyMessage="No hay administradores de comunidades registrados.">
<Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column> <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
<Column field="name" sortable header={headerName} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column> <Column field="name" sortable header={headerName} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
<Column field="hour_min" header={headerHourMin} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }} alignFrozen="left"></Column> <Column field="hourMin" header={headerHourMin} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }} alignFrozen="left"></Column>
<Column field="hour_max" header={headerHourMax} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}> </Column> <Column field="hourMax" header={headerHourMax} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}> </Column>
<Column field="bookable" sortable header={headerBookable} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column> <Column field="bookable" sortable header={headerBookable} body={statusBodyTemplate} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
<Column field="community_name" sortable header={headerCommuntiy} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
<Column style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }} body={actionsCommonArea}></Column> <Column style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }} body={actionsCommonArea}></Column>
</DataTable> </DataTable>
<Dialog visible={deleteCommonAreaDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteCommonAreaDialogFooter} onHide={hideDeleteCommonAreaDialog}> <Dialog visible={deleteCommonAreaDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteCommonAreaDialogFooter} onHide={hideDeleteCommonAreaDialog}>