add infodialog

web-ui/web-react/src/components/Inquilinos.js

@@ -15,6 +15,7 @@ import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons'
 import { faHashtag } from '@fortawesome/free-solid-svg-icons'
 import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons'
 import { useCookies } from 'react-cookie'
+import InfoDialog from './generic/InfoDialog'
 
 const Inquilinos = () => {
   let emptyTenant = {
@@ -43,6 +44,7 @@ const Inquilinos = () => {
   const [communitiesList, setCommunitiesList] = useState([])
   const [communityId, setCommunityId] = useState(null)
   const [submitted, setSubmitted] = useState(false)
+  let [openInfoDialog] = useState(false)
   const toast = useRef(null)
   const dt = useRef(null)
 
@@ -144,6 +146,10 @@ const Inquilinos = () => {
     })
   }
 
+  function openDialog() {
+    openInfoDialog = true
+  }
+
   const deleteSelectedTenants = () => {
     let _tenants = tenants.filter((val) => !selectedTentants.includes(val))
     setTenants(_tenants)
@@ -418,6 +424,13 @@ const Inquilinos = () => {
     )
   }
 
+  const testInquilino = {
+    name: 'Juan', // Nombre
+    last_name: 'Pérez', // Apellidos
+    email: 'jperez@gmail.com',
+    phone: '+57 300 1234567', // Teléfono
+  }
+
   return (
     <div className='grid'>
       <div className='col-12'>
@@ -619,6 +632,7 @@ const Inquilinos = () => {
               />
             </div>
             <Button label='Registrar' onClick={registrarInquilino} />
+            <Button label='testDialog' onClick={openDialog} />
           </div>
         </div>
       </div>

web-ui/web-react/src/components/generic/InfoDialog.js

@@ -1,4 +1,6 @@
 import React from 'react'
+import { Dialog } from 'primereact/dialog'
+import { Button } from 'primereact/button'
 
 class InfoDialog extends React.Component {
   constructor(props) {
@@ -15,6 +17,7 @@ class InfoDialog extends React.Component {
   onClose = () => this.setState({ openInfoDialog: false })
   render() {
     return (
+      <div>
         <Dialog
           visible={this.state.openInfoDialog}
           style={{ width: '650px' }}
@@ -27,7 +30,10 @@ class InfoDialog extends React.Component {
             <div className='row my-4'>
               <div className='col-4 md:col-4'>
                 <p>Nombre</p>
-              <div className='p-0 col-2 md:col-2' style={{ margin: '0 auto' }}>
+                <div
+                  className='p-0 col-2 md:col-2'
+                  style={{ margin: '0 auto' }}
+                >
                   <div className='p-inputgroup align-items-center justify-content-evenly'>
                     <i className='pi pi-user icon-khaki' />
                     <p>{this.props.info.name}</p>
@@ -84,6 +90,8 @@ class InfoDialog extends React.Component {
             </div>
           </div>
         </Dialog>
+      </div>
     )
   }
 }
+export default InfoDialog