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

fix estilos de formulario de agregar área común

This commit is contained in:
Mariela 2022-08-02 12:27:38 -06:00
parent e449b28e87
commit 2499c0ab64
1 changed files with 81 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
web-ui/web-react/src/components/AreasComunes.js
View File

@ -388,10 +388,10 @@ const AreasComunes = () => {
}; };
function compareTimesMinRequired(hour1, hour2){ function compareTimesMinRequired(hour1, hour2) {
var timeFormat1 = Number(hour1.replace(/[:]/g,'')); var timeFormat1 = Number(hour1.replace(/[:]/g, ''));
var timeFormat2 = Number(hour2.replace(/[:]/g,'')); var timeFormat2 = Number(hour2.replace(/[:]/g, ''));
if(timeFormat1 <= timeFormat2){ if (timeFormat1 <= timeFormat2) {
return true; return true;
} else { } else {
return false; return false;
@ -439,60 +439,83 @@ const AreasComunes = () => {
<div className="p-fluid formgrid grid"> <div className="p-fluid formgrid grid">
<div className="field col-12 md:col-6"> <div className="field col-12 md:col-6">
<label htmlFor="name">Nombre</label> <label htmlFor="name">Nombre</label>
<InputText id="name" <div className="p-0 col-12 md:col-12">
type="text"
onChange={(e) => onInputChange(e, 'name')} <div className="p-inputgroup">
value={commonArea.name} <span className="p-inputgroup-addon p-button p-icon-input-khaki">
required <i className="pi pi-home"></i>
autoFocus </span>
className={classNames({ <InputText id="name"
'p-invalid': submitted && commonArea.name === '', type="text"
})} onChange={(e) => onInputChange(e, 'name')}
/> value={commonArea.name}
{submitted && commonArea.name === '' && ( required
<small className="p-invalid">Nombre es requirido.</small> autoFocus
)} className={classNames({
'p-invalid': submitted && commonArea.name === '',
})}
/>
</div>
{submitted && commonArea.name === '' && (
<small className="p-invalid">Nombre es requirido.</small>
)}
</div>
</div> </div>
<div className="field col-12 md:col-6"> <div className="field col-12 md:col-6">
<label htmlFor="hourMin">Hora apertura</label> <label htmlFor="hourMin">Hora apertura</label>
<InputText id="hourMin" <div className="p-0 col-12 md:col-12">
type="time" <div className="p-inputgroup">
min="00:00" max="23:59" <span className="p-inputgroup-addon p-button p-icon-input-khaki">
step="3600000" <i className="pi pi-home"></i>
onChange={(e) => onInputChange(e, 'hourMin')} </span>
value={commonArea.hourMin} <InputText id="hourMin"
required type="time"
autoFocus min="00:00" max="23:59"
className={classNames({ step="3600000"
'p-invalid': submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin), onChange={(e) => onInputChange(e, 'hourMin')}
})} value={commonArea.hourMin}
/> required
{submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin) && ( autoFocus
<small className="p-invalid">La hora de apertura debe ser menor que la hora de cierre.</small> className={classNames({
)} 'p-invalid': submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin),
})}
/>
</div>
{submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin) && (
<small className="p-invalid">La hora de apertura debe ser menor que la hora de cierre.</small>
)}
</div>
</div> </div>
<div className="field col-12 md:col-6"> <div className="field col-12 md:col-6">
<label htmlFor="hourMax">Hora de cierre</label> <label htmlFor="hourMax">Hora de cierre</label>
<InputText id="hourMax" <div className="p-0 col-12 md:col-12">
type="time" <div className="p-inputgroup">
min="00:00" max="23:59" <span className="p-inputgroup-addon p-button p-icon-input-khaki">
step="3600000" <i className="pi pi-home"></i>
onChange={(e) => onInputChange(e, 'hourMax')} </span>
value={commonArea.hourMax} <InputText id="hourMax"
required type="time"
autoFocus min="00:00" max="23:59"
className={classNames({ step="3600000"
'p-invalid': submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin), onChange={(e) => onInputChange(e, 'hourMax')}
})} value={commonArea.hourMax}
/> required
{submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin) && ( autoFocus
<small className="p-invalid">La hora de cierre debe ser mayor que la hora de apertura</small> className={classNames({
)} 'p-invalid': submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin),
})}
/>
</div>
{submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin) && (
<small className="p-invalid">La hora de cierre debe ser mayor que la hora de apertura</small>
)}
</div>
</div> </div>
<div className="field col-12 md:col-6"> <div className="field col-12 md:col-6">
<label htmlFor="bookable">¿Necesita Reservación?</label> <label htmlFor="bookable">¿Necesita Reservación?</label>
<div className="formgrid grid"> <div className="formgrid grid align-items-end" style={{marginTop: '12px', width: '300px'}}>
<div className="field-radiobutton col-6"> <div className="field-radiobutton col-6">
<RadioButton <RadioButton
inputId="bookable1" inputId="bookable1"
name="bookable" name="bookable"
@ -500,7 +523,11 @@ const AreasComunes = () => {
onChange={onBookableChange} onChange={onBookableChange}
checked={commonArea.bookable === '1'} checked={commonArea.bookable === '1'}
/> />
<label htmlFor="bookable1">Sí</label> <label htmlFor="bookable1">
<span className="p-icon-input-khaki">
<i className="pi pi-check status status-1"></i> Sí
</span>
</label>
</div> </div>
<div className="field-radiobutton col-6"> <div className="field-radiobutton col-6">
<RadioButton <RadioButton
@ -510,7 +537,11 @@ const AreasComunes = () => {
onChange={onBookableChange} onChange={onBookableChange}
checked={commonArea.bookable === '0'} checked={commonArea.bookable === '0'}
/> />
<label htmlFor="bookable2">No</label> <label htmlFor="bookable2">
<span className="p-icon-input-khaki">
<i className="pi pi-times status status-0"></i> No
</span>
</label>
</div> </div>
</div> </div>
</div> </div>