Merge pull request #181 from DeimosPr4/51-us-54-ver-información-inquilino

51 us 54 ver información inquilino
This commit is contained in:
Eduardo Quiros 2022-08-22 02:13:41 +00:00 committed by GitHub
commit 774c1d0657
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 196 additions and 2 deletions

View File

@ -6,4 +6,3 @@ help = "Per project developer environments"
[[commands]] [[commands]]
package = "nodejs" package = "nodejs"
help = "Node.js" help = "Node.js"

View File

@ -45,6 +45,7 @@ const Inquilinos = () => {
const [houseNumber, setHouseNumber] = useState([]) const [houseNumber, setHouseNumber] = useState([])
const [housesList, setHousesList] = useState([]) const [housesList, setHousesList] = useState([])
const [submitted, setSubmitted] = useState(false) const [submitted, setSubmitted] = useState(false)
const [infoDialogVisible, setShowInfoDialog] = useState(false)
const toast = useRef(null) const toast = useRef(null)
const dt = useRef(null) const dt = useRef(null)
const [cookies] = useCookies() const [cookies] = useCookies()
@ -93,7 +94,7 @@ const Inquilinos = () => {
useEffect(() => { useEffect(() => {
tenantsList() tenantsList()
}, [tenantsList]) }, [])
useEffect(() => { useEffect(() => {
getCommunity() getCommunity()
@ -226,6 +227,17 @@ const Inquilinos = () => {
setChangeStatusTenantDialog(true) setChangeStatusTenantDialog(true)
} }
const hideInfoDialog = () => {
setSubmitted(false);
setShowInfoDialog(false);
setTenant(emptyTenant);
}
const infoTenant = (tenant) => {
setTenant(tenant);
setShowInfoDialog(true);
}
const actionsTenant = (rowData) => { const actionsTenant = (rowData) => {
let icono = '' let icono = ''
let text = '' let text = ''
@ -238,6 +250,11 @@ const Inquilinos = () => {
} }
return ( return (
<div className='actions'> <div className='actions'>
<Button
icon="pi pi-exclamation-circle"
className="p-button-rounded p-button-info mt-2 mx-2"
onClick={() => infoTenant(rowData)}
/>
<Button <Button
icon={`${icono}`} icon={`${icono}`}
className='p-button-rounded p-button-warning mt-2 mx-2' className='p-button-rounded p-button-warning mt-2 mx-2'
@ -346,6 +363,17 @@ const Inquilinos = () => {
</> </>
) )
const infoDialogFooter = (
<>
<Button
label='Cerrar'
icon='pi pi-times'
className='p-button-text'
onClick={hideInfoDialog}
/>
</>
);
const headerName = ( const headerName = (
<> <>
<p> <p>
@ -551,6 +579,76 @@ const Inquilinos = () => {
body={actionsTenant} body={actionsTenant}
></Column> ></Column>
</DataTable> </DataTable>
<Dialog
visible={infoDialogVisible}
style={{ width: '650px' }}
header="Información del Inquilino"
modal
className="p-fluid"
footer={infoDialogFooter}
onHide={hideInfoDialog}>
<div className='container text-center'>
<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-inputgroup align-items-center justify-content-evenly">
<i className="pi pi-user icon-khaki"></i>
<p>{tenant.name}</p>
</div>
</div>
</div>
<div className=" col-4 md:col-4">
<p>Apellido(s)</p>
<div className="p-0 col-6 md:col-6" style={{ margin: '0 auto' }}>
<div className="p-inputgroup align-items-center justify-content-evenly">
<i className="pi pi-user icon-khaki"></i>
<p>{tenant.last_name}</p>
</div>
</div>
</div>
<div className=" col-4 col-md-4 md:col-4">
<p>Identificación</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-id-card icon-khaki"></i>
<p>{tenant.dni}</p>
</div>
</div>
</div>
</div>
<div className='row my-5 justify-content-center'>
</div>
<div className='row my-5 justify-content-center'>
<div className=" col-4 md:col-4">
<p>Teléfono</p>
<div className="p-0 col-10 md:col-10">
<div className="p-inputgroup align-items-center justify-content-evenly">
<i className="pi pi-phone icon-khaki"></i>
<p>{tenant.phone}</p>
</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>{tenant.email}</p>
</div>
</div>
</div>
</div>
</div>
</Dialog>
<Dialog <Dialog
visible={deleteTenantDialog} visible={deleteTenantDialog}
style={{ width: '450px' }} style={{ width: '450px' }}

View File

@ -0,0 +1,97 @@
import React from 'react'
import { Dialog } from 'primereact/dialog'
import { Button } from 'primereact/button'
class InfoDialog extends React.Component {
constructor(props) {
super(props)
this.state = {
openInfoDialog: false,
footer: (
<>
<Button label='Cerrar' icon='pi pi-times' onClick={this.onClose} />
</>
),
}
}
onClose = () => this.setState({ openInfoDialog: false })
render() {
return (
<div>
<Dialog
visible={this.state.openInfoDialog}
style={{ width: '650px' }}
modal
className='p-fluid'
header={this.props.header}
footer={this.state.footer}
>
<div className='container text-center'>
<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-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'>
<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 className='row my-5 justify-content-center'>
<div className=' col-4 md:col-4'>
<p>Teléfono</p>
<div className='p-0 col-10 md:col-10'>
<div className='p-inputgroup align-items-center justify-content-evenly'>
<i className='pi pi-phone icon-khaki'></i>
<p>{this.props.info.phone}</p>
</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>
</Dialog>
</div>
)
}
}
export default InfoDialog