katoikia-app/web-ui/web-react/src/components/Inquilinos.js

105 lines
3.5 KiB
JavaScript
Raw Normal View History

import { Button } from 'primereact/button';
import { Dropdown } from 'primereact/dropdown';
2022-07-25 04:38:48 +00:00
import { InputText } from 'primereact/inputtext';
import React, { useEffect, useState } from 'react';
const Inquilinos = () => {
const [communitiesList, setCommunitiesList] = useState([]);
2022-07-25 04:38:48 +00:00
const communityIdList = communitiesList.map((community) => community.id);
async function getCommunites() {
2022-07-25 04:38:48 +00:00
let response = await fetch(
'http://localhost:4000/community/allCommunities',
{ method: 'GET' },
);
let list = await response.json();
setCommunitiesList(list.message);
}
useEffect(() => {
getCommunites();
2022-07-25 04:38:48 +00:00
}, []);
function registrarInquilino() {
let data = {
2022-07-27 02:13:47 +00:00
dni: document.getElementById('identificacion').value,
name: document.getElementById('nombre').value,
last_name: document.getElementById('apellidos').value,
phone: document.getElementById('telefono').value,
email: document.getElementById('correo_electronico').value,
community_id: document.getElementById('numero_vivienda').value,
2022-07-27 02:13:47 +00:00
password: document.getElementById('password').value,
2022-07-20 00:28:41 +00:00
user_type: '3',
status: '1',
2022-07-25 04:38:48 +00:00
};
2022-07-20 00:28:41 +00:00
fetch('http://localhost:3000/api/createUser', {
method: 'POST',
cache: 'no-cache',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
},
}).then((response) => {
if (response.ok) {
2022-07-25 04:38:48 +00:00
alert('Inquilino registrado correctamente');
2022-07-20 00:28:41 +00:00
} else {
2022-07-25 04:38:48 +00:00
alert('Error al registrar inquilino');
2022-07-20 00:28:41 +00:00
}
2022-07-25 04:38:48 +00:00
});
}
2022-07-18 01:20:03 +00:00
return (
<div className="grid">
<div className="col-12">
<div className="card">
<h5 className="card-header">Registrar Inquilino</h5>
<div className="p-fluid formgrid grid">
2022-07-28 03:02:59 +00:00
<div className="field col-12 md:col-6">
2022-07-27 02:13:47 +00:00
<label htmlFor="nombre">Nombre</label>
2022-07-27 02:14:32 +00:00
<InputText type="text" className="form-control" id="nombre" />
2022-07-27 02:13:47 +00:00
</div>
2022-07-28 03:02:59 +00:00
<div className="field col-12 md:col-6">
2022-07-27 02:13:47 +00:00
<label htmlFor="apellidos">Apellidos</label>
2022-07-27 02:14:32 +00:00
<InputText type="text" className="form-control" id="apellidos" />
2022-07-27 02:13:47 +00:00
</div>
2022-07-28 03:02:59 +00:00
<div className="field col-12 md:col-6">
2022-07-27 02:13:47 +00:00
<label htmlFor="identificacion">Identificación</label>
2022-07-27 02:14:32 +00:00
<InputText
type="text"
className="form-control"
id="identificacion"
/>
2022-07-27 02:13:47 +00:00
</div>
2022-07-28 03:02:59 +00:00
<div className="field col-12 md:col-6">
<label htmlFor="correo_electronico">Correo electrónico</label>
2022-07-25 04:38:48 +00:00
<InputText
type="email"
className="form-control"
id="correo_electronico"
/>
</div>
2022-07-28 03:02:59 +00:00
<div className="field col-12 md:col-6">
<label htmlFor="numero_vivienda">Número de Vivienda</label>
2022-07-25 04:38:48 +00:00
<Dropdown
id="numero_vivienda"
value={communityIdList[0]}
options={communitiesList}
/>
2022-07-20 00:28:41 +00:00
</div>
2022-07-28 03:02:59 +00:00
<div className="field col-12 md:col-6">
2022-07-27 02:13:47 +00:00
<label htmlFor="identificacion">Identificación</label>
2022-07-27 02:14:32 +00:00
<InputText
type="password"
className="form-control"
id="identificacion"
/>
2022-07-27 02:13:47 +00:00
</div>
2022-07-25 04:38:48 +00:00
<Button label="Registrar" onClick={registrarInquilino} />
2022-07-20 00:28:41 +00:00
</div>
2022-07-18 01:20:03 +00:00
</div>
</div>
</div>
2022-07-25 04:38:48 +00:00
);
};
2022-07-18 01:30:06 +00:00
2022-07-25 04:38:48 +00:00
export default React.memo(Inquilinos);