fix estilo del estado
This commit is contained in:
parent
2262484188
commit
e2d151e155
|
@ -89,8 +89,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-icon-input-khaki {
|
.p-icon-input-khaki {
|
||||||
border-top-right-radius: 0!important;
|
border-top-right-radius: 0 !important;
|
||||||
border-bottom-right-radius: 0!important;
|
border-bottom-right-radius: 0 !important;
|
||||||
border-color: #C08135;
|
border-color: #C08135;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
}
|
|
@ -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}>
|
||||||
|
|
Loading…
Reference in New Issue