fix stylos y validaciones del registro
This commit is contained in:
parent
08a1b4a1a6
commit
18bab545e7
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue