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

add infodialog

This commit is contained in:
Eduardo Quiros 2022-08-16 17:49:10 -06:00
parent 83383888d2
commit ab338109d1
No known key found for this signature in database
GPG Key ID: B77F36C3F12720B4
2 changed files with 74 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web-ui/web-react/src/components/Inquilinos.js
View File

@ -15,6 +15,7 @@ import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons'
import { faHashtag } from '@fortawesome/free-solid-svg-icons' import { faHashtag } from '@fortawesome/free-solid-svg-icons'
import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons' import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons'
import { useCookies } from 'react-cookie' import { useCookies } from 'react-cookie'
import InfoDialog from './generic/InfoDialog'
const Inquilinos = () => { const Inquilinos = () => {
let emptyTenant = { let emptyTenant = {
@ -43,6 +44,7 @@ const Inquilinos = () => {
const [communitiesList, setCommunitiesList] = useState([]) const [communitiesList, setCommunitiesList] = useState([])
const [communityId, setCommunityId] = useState(null) const [communityId, setCommunityId] = useState(null)
const [submitted, setSubmitted] = useState(false) const [submitted, setSubmitted] = useState(false)
let [openInfoDialog] = useState(false)
const toast = useRef(null) const toast = useRef(null)
const dt = useRef(null) const dt = useRef(null)
@ -144,6 +146,10 @@ const Inquilinos = () => {
}) })
} }
function openDialog() {
openInfoDialog = true
}
const deleteSelectedTenants = () => { const deleteSelectedTenants = () => {
let _tenants = tenants.filter((val) => !selectedTentants.includes(val)) let _tenants = tenants.filter((val) => !selectedTentants.includes(val))
setTenants(_tenants) 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 ( return (
<div className='grid'> <div className='grid'>
<div className='col-12'> <div className='col-12'>
@ -619,6 +632,7 @@ const Inquilinos = () => {
/> />
</div> </div>
<Button label='Registrar' onClick={registrarInquilino} /> <Button label='Registrar' onClick={registrarInquilino} />
<Button label='testDialog' onClick={openDialog} />
</div> </div>
</div> </div>
</div> </div>

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

@ -1,4 +1,6 @@
import React from 'react' import React from 'react'
import { Dialog } from 'primereact/dialog'
import { Button } from 'primereact/button'
class InfoDialog extends React.Component { class InfoDialog extends React.Component {
constructor(props) { constructor(props) {
@ -15,75 +17,81 @@ class InfoDialog extends React.Component {
onClose = () => this.setState({ openInfoDialog: false }) onClose = () => this.setState({ openInfoDialog: false })
render() { render() {
return ( return (
<Dialog <div>
visible={this.state.openInfoDialog} <Dialog
style={{ width: '650px' }} visible={this.state.openInfoDialog}
modal style={{ width: '650px' }}
className='p-fluid' modal
header={this.props.header} className='p-fluid'
footer={this.state.footer} header={this.props.header}
> footer={this.state.footer}
<div className='container text-center'> >
<div className='row my-4'> <div className='container text-center'>
<div className='col-4 md:col-4'> <div className='row my-4'>
<p>Nombre</p>
<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>
</div>
</div>
<div className='col-4 md:col-4'> <div className='col-4 md:col-4'>
<p>Apellido(s)</p> <p>Nombre</p>
<div <div
className='p-0 col-2 md:col-2' className='p-0 col-2 md:col-2'
style={{ margin: '0 auto' }} style={{ margin: '0 auto' }}
> >
<div className='p-inputgroup align-items-center justify-content-evenly'> <div className='p-inputgroup align-items-center justify-content-evenly'>
<i className='pi pi-user icon-khaki' /> <i className='pi pi-user icon-khaki' />
<p>{this.props.info.last_name}</p> <p>{this.props.info.name}</p>
</div>
</div>
<div className='col-4 md:col-4'>
<p>Apellido(s)</p>
<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.last_name}</p>
</div>
</div>
</div>
<div className='col-4 md:col-4'>
<p>Identificación</p>
<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.dni}</p>
</div>
</div> </div>
</div> </div>
</div> </div>
<div className='col-4 md:col-4'> <div className='row my-5 justify-content-center'>
<p>Identificación</p> <div className=' col-4 md:col-4'>
<div <p>Teléfono</p>
className='p-0 col-2 md:col-2' <div className='p-0 col-10 md:col-10'>
style={{ margin: '0 auto' }} <div className='p-inputgroup align-items-center justify-content-evenly'>
> <i className='pi pi-phone icon-khaki'></i>
<div className='p-inputgroup align-items-center justify-content-evenly'> <p>{this.props.info.phone}</p>
<i className='pi pi-user icon-khaki' /> </div>
<p>{this.props.info.dni}</p>
</div> </div>
</div> </div>
</div> <div className=' col-6 md:col-6'>
</div> <p>Correo Electrónico</p>
<div className='row my-5 justify-content-center'> <div
<div className=' col-4 md:col-4'> className='p-0 col-10 md:col-10'
<p>Teléfono</p> style={{ margin: '0 auto' }}
<div className='p-0 col-10 md:col-10'> >
<div className='p-inputgroup align-items-center justify-content-evenly'> <div className='p-inputgroup align-items-center justify-content-evenly'>
<i className='pi pi-phone icon-khaki'></i> <i className='pi pi-envelope icon-khaki'></i>
<p>{this.props.info.phone}</p> <p>{this.props.info.email}</p>
</div> </div>
</div>
</div>
<div className=' col-6 md:col-6'>
<p>Correo Electrónico</p>
<div
className='p-0 col-10 md:col-10'
style={{ margin: '0 auto' }}
>
<div className='p-inputgroup align-items-center justify-content-evenly'>
<i className='pi pi-envelope icon-khaki'></i>
<p>{this.props.info.email}</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </Dialog>
</Dialog> </div>
) )
} }
} }
export default InfoDialog