From bc8486e1ba6683bf8b6e3d861fb542d8f9552c50 Mon Sep 17 00:00:00 2001
From: Mariela <mbonilla.guti@gmail.com>
Date: Thu, 1 Sep 2022 02:18:17 -0600
Subject: [PATCH] informacion comunicados

---
 .../web-react/src/components/AreasComunes.js  |   2 +-
 .../src/components/GuardasSeguridad.js        | 114 +++++++++---------
 .../src/components/RegistroComunicado.js      |  77 ++++++++----
 3 files changed, 113 insertions(+), 80 deletions(-)

diff --git a/web-ui/web-react/src/components/AreasComunes.js b/web-ui/web-react/src/components/AreasComunes.js
index ce40ffdc..c74e2e3a 100644
--- a/web-ui/web-react/src/components/AreasComunes.js
+++ b/web-ui/web-react/src/components/AreasComunes.js
@@ -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="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 style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsCommonArea}></Column>
+                        <Column style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }} body={actionsCommonArea}></Column>
                     </DataTable>
                     <Dialog
                         visible={areaDialog}
diff --git a/web-ui/web-react/src/components/GuardasSeguridad.js b/web-ui/web-react/src/components/GuardasSeguridad.js
index 801cb19b..23de0109 100644
--- a/web-ui/web-react/src/components/GuardasSeguridad.js
+++ b/web-ui/web-react/src/components/GuardasSeguridad.js
@@ -317,7 +317,7 @@ const GuardasSeguridad = () => {
     return (
       <React.Fragment>
         <div className="my-2">
-        <Button
+          <Button
             label="Agregar Guarda"
             icon="pi pi-plus"
             className="p-button-primary mr-2"
@@ -549,7 +549,7 @@ const GuardasSeguridad = () => {
               </div>
               <div className='row my-5 justify-content-center'>
                 <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>
                   <div className="p-0 col-12 md:col-12">
                     <div className="p-inputgroup align-items-center justify-content-evenly">
@@ -559,7 +559,7 @@ const GuardasSeguridad = () => {
                   </div>
                 </div>
                 <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>
                   <div className="p-0 col-12  md:col-12" style={{ margin: '0 auto' }}>
@@ -614,74 +614,74 @@ const GuardasSeguridad = () => {
             onHide={hideFormGuardDialog}
           >
             <div className="p-fluid formgrid grid">
-            <div className="field col-12 md:col-6">
-              <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 type="text" id="name" value={guarda.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.name === '' })} />
+              <div className="field col-12 md:col-6">
+                <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 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>
-                {submitted && guarda.name === '' && <small className="p-invalid">Nombre es requerido.</small>}
               </div>
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="name">Apellido(s)</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 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 className="field col-12 md:col-6">
+                <label htmlFor="name">Apellido(s)</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 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>
-                {submitted && guarda.last_name === '' && <small className="p-invalid">Apellidos son requeridos.</small>}
               </div>
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="name">Correo Electrónico</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 type='email' id="email" value={guarda.email} onChange={(e) => onInputChange(e, 'email')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.email === '' })} />
+              <div className="field col-12 md:col-6">
+                <label htmlFor="name">Correo Electrónico</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 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>
-                {submitted && guarda.email === '' && <small className="p-invalid">Correo electrónico es requerido.</small>}
               </div>
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="dni">Identificación</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="dni" value={guarda.dni} onChange={(e) => onInputChange(e, 'dni')} required autoFocus className={classNames({ 'p-invalid': submitted && guarda.dni === '' })} />
+              <div className="field col-12 md:col-6">
+                <label htmlFor="dni">Identificación</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="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>
-                {submitted && guarda.email === '' && <small className="p-invalid">Identificación es requerida.</small>}
               </div>
-            </div>
-            <div className="field col-12 md:col-6">
-              <label htmlFor="phone">Número de teléfono</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-phone"></i>
-                  </span>
-                  <InputText id="phone" value={guarda.phone} onChange={(e) => onInputChange(e, 'phone')} type='tel' required autoFocus className={classNames({ 'p-invalid': submitted && guarda.phone === '' })} />
+              <div className="field col-12 md:col-6">
+                <label htmlFor="phone">Número de teléfono</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-phone"></i>
+                    </span>
+                    <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>
-                {submitted
-                  && guarda.phone === ''
-                  && <small className="p-invalid">Número de teléfono es requerido.</small>}
               </div>
+
             </div>
-           
-          </div>
           </Dialog>
         </div>
       </div>
-     
+
     </div>
   );
 };
diff --git a/web-ui/web-react/src/components/RegistroComunicado.js b/web-ui/web-react/src/components/RegistroComunicado.js
index 945bbc2c..f592e0c1 100644
--- a/web-ui/web-react/src/components/RegistroComunicado.js
+++ b/web-ui/web-react/src/components/RegistroComunicado.js
@@ -37,6 +37,9 @@ const RegistroComunicado = () => {
   const dt = useRef(null);
   const [cookies, setCookie] = useCookies();
   const [globalFilter, setGlobalFilter] = useState(null);
+  const [postDialog, setPostDialog] = useState(false);
+
+
 
   async function listaComunis() {
     let comunicadosResponse = await fetch('http://localhost:4000/post/allPosts', { method: 'GET' });
@@ -127,6 +130,12 @@ const RegistroComunicado = () => {
     return (
       <React.Fragment>
         <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" />
         </div>
       </React.Fragment>
@@ -145,6 +154,8 @@ const RegistroComunicado = () => {
     setComunicado(rowData);
     setComunicadoId(rowData._id);
     setSaveButtonLabel('Actualizar');
+    setPostDialog(true)
+
   }
 
   const cancelEdit = () => {
@@ -177,6 +188,20 @@ const RegistroComunicado = () => {
     setShowDeleteDialog(true);
   }
 
+  const openNewPost = () => {
+    setComunicado(emptyComunicado);
+    setPostDialog(true)
+    setSubmitted(false);
+  };
+
+  const hidePostDialog = () => {
+    setSubmitted(false);
+    setPostDialog(false)
+    setComunicado(emptyComunicado);
+    setSaveButtonLabel('Registrar');
+  }
+
+
   const deleteDialogFooter = (
     <>
       <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 = () => {
     fetch(`http://localhost:4000/post/deletePost/${comunicado._id}`, {
       cache: 'no-cache',
@@ -235,12 +277,15 @@ const RegistroComunicado = () => {
               }}
               body={actions} />
           </DataTable>
-        </div>
-      </div>
-      <div className="col-12">
-        <div className="card">
-          <h5>Registro de un comunicado para la comunidad</h5>
-          <div className="p-fluid formgrid grid">
+          <Dialog
+            visible={postDialog}
+            style={{ width: '650px' }}
+            header="Mantenimiento del Comunicado"
+            modal
+            className="p-fluid"
+            footer={postDialogFooter}
+            onHide={hidePostDialog}>
+            <div className="p-fluid formgrid grid">
             <div className="field col-12 md:col-12">
               <label htmlFor="name">Contenido del comunicado</label>
               <div className="p-0 col-12 md:col-12">
@@ -261,25 +306,13 @@ const RegistroComunicado = () => {
                 </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>
+
+          </Dialog>
         </div>
       </div>
+    
     </div>
   );
 };