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:
commit
774c1d0657
|
@ -6,4 +6,3 @@ help = "Per project developer environments"
|
||||||
[[commands]]
|
[[commands]]
|
||||||
package = "nodejs"
|
package = "nodejs"
|
||||||
help = "Node.js"
|
help = "Node.js"
|
||||||
|
|
||||||
|
|
|
@ -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' }}
|
||||||
|
|
|
@ -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