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:
GitHub
commit
774c1d0657
|
|
@ -6,4 +6,3 @@ help = "Per project developer environments"
|
|||
[[commands]]
|
||||
package = "nodejs"
|
||||
help = "Node.js"
|
||||
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ const Inquilinos = () => {
|
|||
const [houseNumber, setHouseNumber] = useState([])
|
||||
const [housesList, setHousesList] = useState([])
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
const [infoDialogVisible, setShowInfoDialog] = useState(false)
|
||||
const toast = useRef(null)
|
||||
const dt = useRef(null)
|
||||
const [cookies] = useCookies()
|
||||
|
|
@ -93,7 +94,7 @@ const Inquilinos = () => {
|
|||
|
||||
useEffect(() => {
|
||||
tenantsList()
|
||||
}, [tenantsList])
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
getCommunity()
|
||||
|
|
@ -226,6 +227,17 @@ const Inquilinos = () => {
|
|||
setChangeStatusTenantDialog(true)
|
||||
}
|
||||
|
||||
const hideInfoDialog = () => {
|
||||
setSubmitted(false);
|
||||
setShowInfoDialog(false);
|
||||
setTenant(emptyTenant);
|
||||
}
|
||||
|
||||
const infoTenant = (tenant) => {
|
||||
setTenant(tenant);
|
||||
setShowInfoDialog(true);
|
||||
}
|
||||
|
||||
const actionsTenant = (rowData) => {
|
||||
let icono = ''
|
||||
let text = ''
|
||||
|
|
@ -238,6 +250,11 @@ const Inquilinos = () => {
|
|||
}
|
||||
return (
|
||||
<div className='actions'>
|
||||
<Button
|
||||
icon="pi pi-exclamation-circle"
|
||||
className="p-button-rounded p-button-info mt-2 mx-2"
|
||||
onClick={() => infoTenant(rowData)}
|
||||
/>
|
||||
<Button
|
||||
icon={`${icono}`}
|
||||
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 = (
|
||||
<>
|
||||
<p>
|
||||
|
|
@ -551,6 +579,76 @@ const Inquilinos = () => {
|
|||
body={actionsTenant}
|
||||
></Column>
|
||||
</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
|
||||
visible={deleteTenantDialog}
|
||||
style={{ width: '450px' }}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
Loading…
Reference in New Issue