add dialog
This commit is contained in:
parent
614b058b13
commit
c3d114f61e
|
|
@ -15,7 +15,6 @@ 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'
|
||||
import classNames from 'classnames';
|
||||
|
||||
const Inquilinos = () => {
|
||||
|
|
@ -46,7 +45,7 @@ const Inquilinos = () => {
|
|||
const [houseNumber, setHouseNumber] = useState([])
|
||||
const [housesList, setHousesList] = useState([])
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
const [showInfoDialog, setShowInfoDialog] = useState(false)
|
||||
const [infoDialogVisible, setShowInfoDialog] = useState(false)
|
||||
const toast = useRef(null)
|
||||
const dt = useRef(null)
|
||||
const [cookies] = useCookies()
|
||||
|
|
@ -95,7 +94,7 @@ const Inquilinos = () => {
|
|||
|
||||
useEffect(() => {
|
||||
tenantsList()
|
||||
}, [tenantsList])
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
getCommunity()
|
||||
|
|
@ -228,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 = ''
|
||||
|
|
@ -240,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'
|
||||
|
|
@ -348,6 +363,17 @@ const Inquilinos = () => {
|
|||
</>
|
||||
)
|
||||
|
||||
const infoDialogFooter = (
|
||||
<>
|
||||
<Button
|
||||
label='Cerrar'
|
||||
icon='pi pi-times'
|
||||
className='p-button-text'
|
||||
onClick={hideInfoDialog}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
const headerName = (
|
||||
<>
|
||||
<p>
|
||||
|
|
@ -553,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' }}
|
||||
|
|
@ -641,7 +737,6 @@ const Inquilinos = () => {
|
|||
{submitted && tenant.last_name === '' && <small className="p-invalid">Apellidos son requeridos.</small>}
|
||||
</div>
|
||||
</div>
|
||||
<Button label='testDialog' onClick={openDialog} />
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="name">Correo Electrónico</label>
|
||||
<div className="p-0 col-12 md:col-12">
|
||||
|
|
|
|||
Loading…
Reference in New Issue