You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
184 lines
8.8 KiB
184 lines
8.8 KiB
import React from "react";
|
|
import Swal from 'sweetalert2'
|
|
export default function Singup({ thisAdmin, usuarioAeditar, setUsuarioAeditar, isExpanded, toggleExpansion, actualizarUsuaruio }) {
|
|
console.log("EditarTemporal", thisAdmin)
|
|
function handleInputChange(e) {
|
|
setUsuarioAeditar({
|
|
...usuarioAeditar,
|
|
[e.target.name]: e.target.value,
|
|
});
|
|
}
|
|
|
|
async function handleSubmit(e) {
|
|
// Acá lo que tengo que hacer es traer los datos del usuario al que le hice click
|
|
e.preventDefault(); //No queremos que el formulario haga refres de la pagina
|
|
toggleExpansion(!isExpanded)
|
|
try {
|
|
await actualizarUsuaruio(usuarioAeditar)
|
|
} catch (error) {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Oops...',
|
|
text: error?.response?.data?.message,
|
|
})
|
|
}
|
|
}
|
|
|
|
function cancelarEdicion(e) {
|
|
toggleExpansion(!isExpanded)
|
|
setUsuarioAeditar({
|
|
rfid: "",
|
|
dni: "",
|
|
name: "",
|
|
telefono: "",
|
|
email: "",
|
|
sexo: "",
|
|
date: "",
|
|
admin: thisAdmin
|
|
});
|
|
}
|
|
|
|
return (
|
|
<React.StrictMode>
|
|
|
|
<div className={`${isExpanded ? `block` : `hidden`
|
|
} flex flex-row w-full content-center justify-center`}>
|
|
<form
|
|
className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col my-2"
|
|
onSubmit={handleSubmit}>
|
|
<h2 className="pb-2 text-center text-gray-700 text-xl">Agregar usuario para la tarjeta <b>{usuarioAeditar.rfid}</b></h2>
|
|
|
|
<div className="-mx-3 md:flex mb-6">
|
|
<div className="md:w-1/2 px-3 mb-6 md:mb-0">
|
|
<label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Nombre completo
|
|
</label>
|
|
<input
|
|
onChange={handleInputChange}
|
|
value={usuarioAeditar.name}
|
|
className="appearance-none block w-full bg-grey-lighter text-gray-700 border border-red rounded py-3 px-4 mb-3 focus:border-gray-700"
|
|
id="grid-name"
|
|
name="name"
|
|
type="text"
|
|
placeholder="Nombre y apellido" />
|
|
</div>
|
|
<div className="md:w-1/2 px-3">
|
|
<label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
DNI
|
|
</label>
|
|
<input
|
|
onChange={handleInputChange}
|
|
value={usuarioAeditar.dni}
|
|
className="appearance-none block w-full bg-grey-lighter text-gray-700 border border-grey-lighter rounded py-3 px-4 focus:border-gray-700"
|
|
id="grid-din"
|
|
name="dni"
|
|
type="text"
|
|
placeholder="37245063" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="-mx-3 md:flex mb-6">
|
|
<div className="md:w-1/2 px-3 mb-6 md:mb-0">
|
|
<label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Teléfono
|
|
</label>
|
|
<input
|
|
onChange={handleInputChange}
|
|
value={usuarioAeditar.telefono}
|
|
className="appearance-none block w-full bg-grey-lighter text-gray-700 border border-red rounded py-3 px-4 mb-3 focus:border-gray-700"
|
|
id="grid-telefono"
|
|
name="telefono"
|
|
type="text"
|
|
placeholder="XXXXXXXXXX" />
|
|
|
|
</div>
|
|
<div className="md:w-1/2 px-3">
|
|
<label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Email
|
|
</label>
|
|
<input
|
|
onChange={handleInputChange}
|
|
value={usuarioAeditar.email}
|
|
className="appearance-none block w-full bg-grey-lighter text-gray-700 border border-grey-lighter rounded py-3 px-4 focus:border-gray-700"
|
|
id="grid-email"
|
|
name="email"
|
|
type="text"
|
|
placeholder="tu@email.com" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="-mx-3 md:flex mb-6">
|
|
<div className="md:w-1/3 px-3 mb-6 md:mb-0">
|
|
<label className="block appearance-none uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Fecha de nacimiento
|
|
</label>
|
|
<input
|
|
onChange={handleInputChange}
|
|
value={usuarioAeditar.date}
|
|
className="appearance-none block w-full bg-grey-lighter text-gray-700 border border-red rounded py-3 px-4 mb-3 focus:border-gray-700"
|
|
id="grid-date"
|
|
type="date"
|
|
name="date"
|
|
placeholder="Nombre Apellido" />
|
|
</div>
|
|
<div className="md:w-1/3 px-3">
|
|
<label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Sexo
|
|
</label>
|
|
<div className="relative">
|
|
<select
|
|
onChange={handleInputChange}
|
|
value={usuarioAeditar.sexo}
|
|
className="block appearance-none w-full bg-white border border-grey-lighter text-gray-700 py-3 px-4 pr-8 rounded focus:border-gray-700"
|
|
id="grid-sexo"
|
|
name="sexo"
|
|
>
|
|
<option className="appearance-none text-gray-700">Selecciona</option>
|
|
<option className="appearance-none text-gray-700">Masculino</option>
|
|
<option className="appearance-none text-gray-700">Femenino</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="md:w-1/3 px-3">
|
|
<label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
|
Grupo de Trabajo
|
|
</label>
|
|
<input
|
|
onChange={handleInputChange}
|
|
value={usuarioAeditar.grupo}
|
|
className="appearance-none block w-full bg-grey-lighter text-gray-700 border border-grey-lighter rounded py-3 px-4 focus:border-gray-700"
|
|
id="grid-grupo"
|
|
name="grupo"
|
|
type="text"
|
|
placeholder="90210" />
|
|
</div>
|
|
</div>
|
|
<div className="-mx-3 md:flex mb-6 self-center justify-center">
|
|
<button
|
|
className="mb-2 self-center text-sm px-2 py-2 mx-2 leading-none font-bold border rounded text-gray-700 border-gray-700 hover:bg-gray-700 hover:text-white "
|
|
type="submit"
|
|
>
|
|
Guardar
|
|
</button>
|
|
<button
|
|
className="mb-2 self-center text-sm px-2 py-2 mx-2 leading-none font-bold border rounded text-red-700 border-red-700 hover:bg-red-700 hover:text-white hover:bg-red-700"
|
|
type="button"
|
|
name="cancelarEdicion"
|
|
id="borrar"
|
|
onClick={cancelarEdicion}
|
|
>
|
|
Cancelar
|
|
</button>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</form>
|
|
</div>
|
|
|
|
</React.StrictMode>
|
|
);
|
|
}
|
|
|