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

45
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,6 +439,12 @@ 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>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText id="name" <InputText id="name"
type="text" type="text"
onChange={(e) => onInputChange(e, 'name')} onChange={(e) => onInputChange(e, 'name')}
@ -449,12 +455,19 @@ const AreasComunes = () => {
'p-invalid': submitted && commonArea.name === '', 'p-invalid': submitted && commonArea.name === '',
})} })}
/> />
</div>
{submitted && commonArea.name === '' && ( {submitted && commonArea.name === '' && (
<small className="p-invalid">Nombre es requirido.</small> <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>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText id="hourMin" <InputText id="hourMin"
type="time" type="time"
min="00:00" max="23:59" min="00:00" max="23:59"
@ -467,12 +480,19 @@ const AreasComunes = () => {
'p-invalid': submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin), 'p-invalid': submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin),
})} })}
/> />
</div>
{submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin) && ( {submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin) && (
<small className="p-invalid">La hora de apertura debe ser menor que la hora de cierre.</small> <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>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText id="hourMax" <InputText id="hourMax"
type="time" type="time"
min="00:00" max="23:59" min="00:00" max="23:59"
@ -485,14 +505,17 @@ const AreasComunes = () => {
'p-invalid': submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin), 'p-invalid': submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin),
})} })}
/> />
</div>
{submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin) && ( {submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin) && (
<small className="p-invalid">La hora de cierre debe ser mayor que la hora de apertura</small> <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>