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

informacion comunicados

This commit is contained in:
Mariela 2022-09-01 02:18:17 -06:00
parent 33d1a328a5
commit bc8486e1ba
3 changed files with 113 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -636,7 +636,7 @@ const AreasComunes = () => {
<Column field="hourMax" sortable header={headerHourMax} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}> </Column> <Column field="hourMax" sortable header={headerHourMax} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}> </Column>
<Column field="bookable" sortable header={headerBookable} body={bookableBodyTemplate} style={{ flexGrow: 1, flexBasis: '200px', minWidth: '200px', wordBreak: 'break-word' }}></Column> <Column field="bookable" sortable header={headerBookable} body={bookableBodyTemplate} style={{ flexGrow: 1, flexBasis: '200px', minWidth: '200px', wordBreak: 'break-word' }}></Column>
<Column field="status" sortable header={headerStatus} body={statusBodyTemplate} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></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={actionsCommonArea}></Column> <Column style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }} body={actionsCommonArea}></Column>
</DataTable> </DataTable>
<Dialog <Dialog
visible={areaDialog} visible={areaDialog}

112
web-ui/web-react/src/components/GuardasSeguridad.js
View File

@ -317,7 +317,7 @@ const GuardasSeguridad = () => {
return ( return (
<React.Fragment> <React.Fragment>
<div className="my-2"> <div className="my-2">
<Button <Button
label="Agregar Guarda" label="Agregar Guarda"
icon="pi pi-plus" icon="pi pi-plus"
className="p-button-primary mr-2" className="p-button-primary mr-2"
@ -549,7 +549,7 @@ const GuardasSeguridad = () => {
</div> </div>
<div className='row my-5 justify-content-center'> <div className='row my-5 justify-content-center'>
<div className=" col-6 md:col-6"> <div className=" col-6 md:col-6">
<i className="pi pi-phone icon-khaki"></i> <i className="pi pi-phone icon-khaki"></i>
<p><strong>Teléfono</strong></p> <p><strong>Teléfono</strong></p>
<div className="p-0 col-12 md:col-12"> <div className="p-0 col-12 md:col-12">
<div className="p-inputgroup align-items-center justify-content-evenly"> <div className="p-inputgroup align-items-center justify-content-evenly">
@ -559,7 +559,7 @@ const GuardasSeguridad = () => {
</div> </div>
</div> </div>
<div className=" col-6 md:col-6"> <div className=" col-6 md:col-6">
<i className="pi pi-envelope icon-khaki"></i> <i className="pi pi-envelope icon-khaki"></i>
<p><strong>Correo Electrónico</strong></p> <p><strong>Correo Electrónico</strong></p>
<div className="p-0 col-12 md:col-12" style={{ margin: '0 auto' }}> <div className="p-0 col-12 md:col-12" style={{ margin: '0 auto' }}>
@ -614,70 +614,70 @@ const GuardasSeguridad = () => {
onHide={hideFormGuardDialog} onHide={hideFormGuardDialog}
> >
<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-0 col-12 md:col-12">
<div className="p-inputgroup"> <div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i> <i className="pi pi-home"></i>
</span> </span>
<InputText type="text" id="name" value={guarda.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.name === '' })} /> <InputText type="text" id="name" value={guarda.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.name === '' })} />
</div>
{submitted && guarda.name === '' && <small className="p-invalid">Nombre es requerido.</small>}
</div> </div>
{submitted && guarda.name === '' && <small className="p-invalid">Nombre es requerido.</small>}
</div> </div>
</div> <div className="field col-12 md:col-6">
<div className="field col-12 md:col-6"> <label htmlFor="name">Apellido(s)</label>
<label htmlFor="name">Apellido(s)</label> <div className="p-0 col-12 md:col-12">
<div className="p-0 col-12 md:col-12"> <div className="p-inputgroup">
<div className="p-inputgroup"> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <i className="pi pi-home"></i>
<i className="pi pi-home"></i> </span>
</span> <InputText type="text" id="last_name" value={guarda.last_name} onChange={(e) => onInputChange(e, 'last_name')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.last_name === '' })} />
<InputText type="text" id="last_name" value={guarda.last_name} onChange={(e) => onInputChange(e, 'last_name')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.last_name === '' })} /> </div>
{submitted && guarda.last_name === '' && <small className="p-invalid">Apellidos son requeridos.</small>}
</div> </div>
{submitted && guarda.last_name === '' && <small className="p-invalid">Apellidos son requeridos.</small>}
</div> </div>
</div> <div className="field col-12 md:col-6">
<div className="field col-12 md:col-6"> <label htmlFor="name">Correo Electrónico</label>
<label htmlFor="name">Correo Electrónico</label> <div className="p-0 col-12 md:col-12">
<div className="p-0 col-12 md:col-12"> <div className="p-inputgroup">
<div className="p-inputgroup"> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <i className="pi pi-home"></i>
<i className="pi pi-home"></i> </span>
</span> <InputText type='email' id="email" value={guarda.email} onChange={(e) => onInputChange(e, 'email')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.email === '' })} />
<InputText type='email' id="email" value={guarda.email} onChange={(e) => onInputChange(e, 'email')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.email === '' })} /> </div>
{submitted && guarda.email === '' && <small className="p-invalid">Correo electrónico es requerido.</small>}
</div> </div>
{submitted && guarda.email === '' && <small className="p-invalid">Correo electrónico es requerido.</small>}
</div> </div>
</div> <div className="field col-12 md:col-6">
<div className="field col-12 md:col-6"> <label htmlFor="dni">Identificación</label>
<label htmlFor="dni">Identificación</label> <div className="p-0 col-12 md:col-12">
<div className="p-0 col-12 md:col-12"> <div className="p-inputgroup">
<div className="p-inputgroup"> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <i className="pi pi-home"></i>
<i className="pi pi-home"></i> </span>
</span> <InputText id="dni" value={guarda.dni} onChange={(e) => onInputChange(e, 'dni')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.dni === '' })} />
<InputText id="dni" value={guarda.dni} onChange={(e) => onInputChange(e, 'dni')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.dni === '' })} /> </div>
{submitted && guarda.email === '' && <small className="p-invalid">Identificación es requerida.</small>}
</div> </div>
{submitted && guarda.email === '' && <small className="p-invalid">Identificación es requerida.</small>}
</div> </div>
</div> <div className="field col-12 md:col-6">
<div className="field col-12 md:col-6"> <label htmlFor="phone">Número de teléfono</label>
<label htmlFor="phone">Número de teléfono</label> <div className="p-0 col-12 md:col-12">
<div className="p-0 col-12 md:col-12"> <div className="p-inputgroup">
<div className="p-inputgroup"> <span className="p-inputgroup-addon p-button p-icon-input-khaki">
<span className="p-inputgroup-addon p-button p-icon-input-khaki"> <i className="pi pi-phone"></i>
<i className="pi pi-phone"></i> </span>
</span> <InputText id="phone" value={guarda.phone} onChange={(e) => onInputChange(e, 'phone')} type='tel' required autoFocus className={classNames({ 'p-invalid': submitted && guarda.phone === '' })} />
<InputText id="phone" value={guarda.phone} onChange={(e) => onInputChange(e, 'phone')} type='tel' required autoFocus className={classNames({ 'p-invalid': submitted && guarda.phone === '' })} /> </div>
{submitted
&& guarda.phone === ''
&& <small className="p-invalid">Número de teléfono es requerido.</small>}
</div> </div>
{submitted
&& guarda.phone === ''
&& <small className="p-invalid">Número de teléfono es requerido.</small>}
</div> </div>
</div>
</div> </div>
</Dialog> </Dialog>
</div> </div>
</div> </div>

77
web-ui/web-react/src/components/RegistroComunicado.js
View File

@ -37,6 +37,9 @@ const RegistroComunicado = () => {
const dt = useRef(null); const dt = useRef(null);
const [cookies, setCookie] = useCookies(); const [cookies, setCookie] = useCookies();
const [globalFilter, setGlobalFilter] = useState(null); const [globalFilter, setGlobalFilter] = useState(null);
const [postDialog, setPostDialog] = useState(false);
async function listaComunis() { async function listaComunis() {
let comunicadosResponse = await fetch('http://localhost:4000/post/allPosts', { method: 'GET' }); let comunicadosResponse = await fetch('http://localhost:4000/post/allPosts', { method: 'GET' });
@ -127,6 +130,12 @@ const RegistroComunicado = () => {
return ( return (
<React.Fragment> <React.Fragment>
<div className="my-2"> <div className="my-2">
<Button
label="Agregar Comunicado"
icon="pi pi-plus"
className="p-button-primary mr-2"
onClick={openNewPost}
/>
<Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" /> <Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" />
</div> </div>
</React.Fragment> </React.Fragment>
@ -145,6 +154,8 @@ const RegistroComunicado = () => {
setComunicado(rowData); setComunicado(rowData);
setComunicadoId(rowData._id); setComunicadoId(rowData._id);
setSaveButtonLabel('Actualizar'); setSaveButtonLabel('Actualizar');
setPostDialog(true)
} }
const cancelEdit = () => { const cancelEdit = () => {
@ -177,6 +188,20 @@ const RegistroComunicado = () => {
setShowDeleteDialog(true); setShowDeleteDialog(true);
} }
const openNewPost = () => {
setComunicado(emptyComunicado);
setPostDialog(true)
setSubmitted(false);
};
const hidePostDialog = () => {
setSubmitted(false);
setPostDialog(false)
setComunicado(emptyComunicado);
setSaveButtonLabel('Registrar');
}
const deleteDialogFooter = ( const deleteDialogFooter = (
<> <>
<Button label="Cancelar" icon="pi pi-times" className="p-button-secondary" onClick={() => setShowDeleteDialog(false)} /> <Button label="Cancelar" icon="pi pi-times" className="p-button-secondary" onClick={() => setShowDeleteDialog(false)} />
@ -184,6 +209,23 @@ const RegistroComunicado = () => {
</> </>
); );
const postDialogFooter = (
<>
<Button
label={`${saveButtonLabel}`}
icon="pi pi-check"
className="p-button-primary"
onClick={saveComunicado}
/>
<Button
label="Cerrar"
icon="pi pi-times"
className="p-button-text"
onClick={hidePostDialog}
/>
</>
);
const deleteComunicado = () => { const deleteComunicado = () => {
fetch(`http://localhost:4000/post/deletePost/${comunicado._id}`, { fetch(`http://localhost:4000/post/deletePost/${comunicado._id}`, {
cache: 'no-cache', cache: 'no-cache',
@ -235,12 +277,15 @@ const RegistroComunicado = () => {
}} }}
body={actions} /> body={actions} />
</DataTable> </DataTable>
</div> <Dialog
</div> visible={postDialog}
<div className="col-12"> style={{ width: '650px' }}
<div className="card"> header="Mantenimiento del Comunicado"
<h5>Registro de un comunicado para la comunidad</h5> modal
<div className="p-fluid formgrid grid"> className="p-fluid"
footer={postDialogFooter}
onHide={hidePostDialog}>
<div className="p-fluid formgrid grid">
<div className="field col-12 md:col-12"> <div className="field col-12 md:col-12">
<label htmlFor="name">Contenido del comunicado</label> <label htmlFor="name">Contenido del comunicado</label>
<div className="p-0 col-12 md:col-12"> <div className="p-0 col-12 md:col-12">
@ -261,25 +306,13 @@ const RegistroComunicado = () => {
</div> </div>
</div> </div>
</div> </div>
<div style={{
display: "flex",
justifyContent: "center",
gap: "10px",
width: "100%"
}}>
<Button
label={`${saveButtonLabel}`}
onClick={saveComunicado}
/>
{saveButtonLabel === 'Actualizar' && (
<Button
label="Cancelar"
onClick={cancelEdit}
className="p-button-danger" />)}
</div>
</div> </div>
</Dialog>
</div> </div>
</div> </div>
</div> </div>
); );
}; };