fix stylos y validaciones del registro

This commit is contained in:
Mariela 2022-08-22 11:00:08 -06:00
parent 08a1b4a1a6
commit 18bab545e7
1 changed files with 227 additions and 105 deletions

View File

@ -15,6 +15,22 @@ import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
import classNames from 'classnames'; import classNames from 'classnames';
const AdministradoresSistema = () => { const AdministradoresSistema = () => {
let emptySysAdmin = {
_id: null,
dni: '',
name: '',
last_name: '',
email: '',
phone: '',
password: '',
user_type: '1',
status: '1',
status_text: '',
};
const [administrators, setAdministrators] = useState([]); const [administrators, setAdministrators] = useState([]);
const [urlFetch, setUrlFetch] = useState( const [urlFetch, setUrlFetch] = useState(
'http://localhost:4000/user/findAdminSistema/', 'http://localhost:4000/user/findAdminSistema/',
@ -37,19 +53,6 @@ const AdministradoresSistema = () => {
const [editAdminDialog, setEditAdminDialog] = useState(false); const [editAdminDialog, setEditAdminDialog] = useState(false);
let emptySysAdmin = {
_id: null,
dni: '',
name: '',
last_name: '',
email: '',
phone: '',
password: '',
user_type: '1',
status: '1',
status_text: '',
};
async function fetchP() { async function fetchP() {
let nombres = await fetch(urlFetch, { method: 'GET' }); let nombres = await fetch(urlFetch, { method: 'GET' });
let adminRes = await nombres.json(); let adminRes = await nombres.json();
@ -82,13 +85,29 @@ const AdministradoresSistema = () => {
} }
const findRepeated = (name, value) => {
let _administrators = [...administrators];
let value_filtered = _administrators.filter(item => item[`${name}`] === value);
return value_filtered.length
}
function guardarAdmin() { function guardarAdmin() {
let _administrators = [...administrators]; let _administrators = [...administrators];
let _admin = { ...sysadmin }; let _admin = { ...sysadmin };
if (sysadmin._id) {
if (sysadmin.name && sysadmin.dni && sysadmin.last_name && sysadmin.email && if (_admin.name && _admin.dni && _admin.last_name && _admin.email &&
sysadmin.phone) { _admin.phone) {
if (findRepeated('email', _admin.email) || findRepeated('dni', _admin.dni)) {
setSubmitted(true);
} else {
if (_admin._id) {
fetch('http://localhost:4000/user/updateAdminSystem/', { fetch('http://localhost:4000/user/updateAdminSystem/', {
cache: 'no-cache', cache: 'no-cache',
@ -126,31 +145,18 @@ const AdministradoresSistema = () => {
err => console.log('Ocurrió un error con el fetch', err) err => console.log('Ocurrió un error con el fetch', err)
); );
} else {
setSubmitted(true);
}
} else { } else {
var data = {
dni: document.getElementById('identificacion').value,
name: document.getElementById('nombre').value,
last_name: document.getElementById('apellidos').value,
email: document.getElementById('correo_electronico').value,
phone: document.getElementById('telefono').value,
password: document.getElementById('correo_electronico').value,
user_type: "1", //1 es admin
status: "1"
};
setSysAdmin(data)
fetch('http://localhost:4000/user/createAdminSystem/', { fetch('http://localhost:4000/user/createAdminSystem/', {
cache: 'no-cache', cache: 'no-cache',
method: 'POST', method: 'POST',
body: JSON.stringify(data), body: JSON.stringify(_admin),
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
} }
@ -175,6 +181,17 @@ const AdministradoresSistema = () => {
} }
} }
} else {
setSubmitted(true);
}
}
const cambiarStatusUser = () => { const cambiarStatusUser = () => {
if (sysadmin.status == '1') { if (sysadmin.status == '1') {
sysadmin.status = '0'; sysadmin.status = '0';
@ -256,11 +273,14 @@ const AdministradoresSistema = () => {
const infoAdmin = (sysadmin) => { const infoAdmin = (sysadmin) => {
setSysAdmin({ ...sysadmin }); setSysAdmin({ ...sysadmin });
setAdminDialog(true); setAdminDialog(true);
}; };
const hideEditAdminDialog = () => { const hideEditAdminDialog = () => {
setSubmitted(false); setSubmitted(false);
setEditAdminDialog(false); setEditAdminDialog(false);
setSysAdmin(emptySysAdmin);
}; };
const editAdmin = (sysadmin) => { const editAdmin = (sysadmin) => {
@ -862,9 +882,10 @@ const AdministradoresSistema = () => {
</div> </div>
{submitted && sysadmin.name === '' && {submitted && sysadmin.name === '' &&
<small className="p-invalid">Nombre es requirido.</small>} <small className="p-invalid">Nombre es requirido.</small>}
</div> </div>
</div> </div>
<div className="field col-12 md:col-6"> <div className="field col-6 md:col-6">
<label htmlFor="apellidos">Apellido(s)</label> <label htmlFor="apellidos">Apellido(s)</label>
<div className="p-0 col-12 md:col-12"> <div className="p-0 col-12 md:col-12">
<div className="p-inputgroup"> <div className="p-inputgroup">
@ -897,13 +918,16 @@ const AdministradoresSistema = () => {
required required
autoFocus autoFocus
className={classNames({ className={classNames({
'p-invalid': submitted && sysadmin.email === '', 'p-invalid': submitted && (sysadmin.email === '' || findRepeated('email', sysadmin.email) > 0),
})} })}
/> />
</div> </div>
{submitted && sysadmin.email === '' && ( {submitted && sysadmin.email === '' && (
<small className="p-invalid">Correo electrónico es requerido.</small> <small className="p-invalid">Correo electrónico es requerido.</small>
)} )}
{submitted && findRepeated('email', sysadmin.email) > 0 &&
<small className="p-invalid">Correo electrónico se encuentra repetido.</small>
}
</div> </div>
</div> </div>
<div className="field col-12 md:col-6"> <div className="field col-12 md:col-6">
@ -918,13 +942,16 @@ const AdministradoresSistema = () => {
required required
autoFocus autoFocus
className={classNames({ className={classNames({
'p-invalid': submitted && sysadmin.dni === '', 'p-invalid': submitted && (sysadmin.dni === '' || findRepeated('dni', sysadmin.dni)),
})} })}
/> />
</div> </div>
{submitted && sysadmin.dni === '' && ( {submitted && sysadmin.dni === '' && (
<small className="p-invalid">Identificación es requerida.</small> <small className="p-invalid">Identificación es requerida.</small>
)} )}
{submitted && findRepeated('dni', sysadmin.dni) > 0 &&
<small className="p-invalid">Identificación se encuentra repetida.</small>
}
</div> </div>
</div> </div>
<div className="field col-12"> <div className="field col-12">
@ -959,29 +986,124 @@ const AdministradoresSistema = () => {
<div className="card"> <div className="card">
<h5>Registro de un administrador del sistema</h5> <h5>Registro de un administrador del sistema</h5>
<div className="p-fluid formgrid grid"> <div className="p-fluid formgrid grid">
<div className="field col-12 md:col-6"> <div className="field col-6 md:col-6">
<label htmlFor="nombre">Nombre</label> <label htmlFor="name">Nombre</label>
<InputText id="nombre" type="text" />
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-user"></i>
</span>
<InputText id="name" value={sysadmin.name}
onChange={(e) => onInputChange(e, 'name')}
required
autoFocus
className={classNames({
'p-invalid': submitted && sysadmin.name === '',
})}
/>
</div> </div>
<div className="field col-12 md:col-6"> {submitted && sysadmin.name === '' &&
<label htmlFor="apellidos">Apellido(s)</label> <small className="p-invalid">Nombre es requirido.</small>}
<InputText id="apellidos" type="text" />
</div> </div>
<div className="field col-12 md:col-6"> </div>
<div className="field col-6 md:col-6">
<label htmlFor="last_name">Apellido(s)</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-user"></i>
</span>
<InputText id="last_name" value={sysadmin.last_name}
onChange={(e) => onInputChange(e, 'last_name')}
required
autoFocus
className={classNames({
'p-invalid': submitted && sysadmin.last_name === '',
})}
/>
</div>
{submitted && sysadmin.last_name === '' && (
<small className="p-invalid">Apellido(s) es requerido.</small>
)}
</div>
</div>
<div className="field col-6 md:col-6">
<label htmlFor="correo_electronico">Correo electrónico</label> <label htmlFor="correo_electronico">Correo electrónico</label>
<InputText id="correo_electronico" type="email" /> <div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-at"></i>
</span>
<InputText type="email" id="correo_electronico" value={sysadmin.email}
onChange={(e) => onInputChange(e, 'email')}
required
autoFocus
className={classNames({
'p-invalid': submitted && (sysadmin.email === '' || findRepeated('email', sysadmin.email) > 0),
})}
/>
</div>
{submitted && sysadmin.email === '' && (
<small className="p-invalid">Correo electrónico es requerido.</small>
)}
{submitted && findRepeated('email', sysadmin.email) > 0 &&
<small className="p-invalid">Correo electrónico se encuentra repetido.</small>
}
</div>
</div>
<div className="field col-6 md:col-6">
<label htmlFor="dni">Identificación</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-id-card"></i>
</span>
<InputText type="text" id="dni" value={sysadmin.dni}
onChange={(e) => onInputChange(e, 'dni')}
required
autoFocus
className={classNames({
'p-invalid': submitted && (sysadmin.dni === '' || findRepeated('dni', sysadmin.dni) > 0),
})}
/>
</div>
{submitted && sysadmin.dni === '' && (
<small className="p-invalid">Identificación es requerida.</small>
)}
{submitted && findRepeated('dni', sysadmin.dni) > 0 &&
<small className="p-invalid">Identificación se encuentra repetida.</small>
}
</div> </div>
<div className="field col-12 md:col-6">
<label htmlFor="identificacion">Identificación</label>
<InputText id="identificacion" type="text" />
</div> </div>
<div className="field col-12"> <div className="field col-12">
<label htmlFor="telefono">Teléfono</label> <label htmlFor="phone">Teléfono</label>
<InputText type="tel" id="telefono" pattern="[0-9]{8}" /> <div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-phone"></i>
</span>
<InputText type="tel" id="phone" pattern="[0-9]{8}"
value={sysadmin.phone}
onChange={(e) => onInputChange(e, 'phone')}
required
autoFocus
className={classNames({
'p-invalid': submitted && sysadmin.phone === '',
})}
/>
</div> </div>
<Button label="Registrar" onClick={guardarAdmin}></Button> {submitted && sysadmin.phone === '' && (
<small className="p-invalid">Teléfono es requerido.</small>
)}
</div> </div>
</div> </div>
<Button label="Guardar cambios" onClick={guardarAdmin}></Button>
</div>
</div>
</div> </div>
</div> </div>
); );