Creando un sistema CRUD con Vue y Laravel 20/23

serie-crud-js

20- Mensajes de error en el front

En este post completaremos la alta de empleados.

Teniendo configurado el sistema de validación cabe decir que solo hemos presentado 3 alternativas de control de validaciones pero que cada uno debe decidir cual es la mejor para su proyecto. Muchos prefieren validaciones solo en el front, otros solo en el back, algunos con Form Request, otros usando el objeto Validate. Aquí hemos manejado 3 alternativas sin tomar partido por ninguna.

Lo primero que debemos hacer es la migración de employee que si bien tenemos preparada no hemos ejecutado

php artisan migrate

Eso completara las migraciones faltantes.

Luego en el controlador de Empleado haremos dos cambios y agregaremos el código que falta en crear.

Lo primero es agregar

use Carbon;

En la parte superior. Lo otro es la linea

return [
    'fecha' => ['EL empleado tiene que tener mas de 18 años']
];

la modificaremos apenas cambiando la nomenclatura al ingles que estamos usando para variables, clases, modelos, migración, etc.

return [
    'date' => ['El empleado tiene que tener mas de 18 años']
];

Al final el código quedaría así

public function create(StoreEmployee $request)
{
    $today = Carbon::now();
    $unknow = Carbon::createFromFormat('d-m-Y', $request->birthday);
    if ($unknow->diffInYears($today) < 18) {
        return [
            'date' => ['El empleado tiene que tener mas de 18 años']
        ];
    } else {
        $employee = new Employee();
        $employee->name = $request->name;
        $employee->lastname = $request->lastname;
        $employee->birthday = $unknow;
        $employee->email = $request->email;
        $employee->position_id = $request->position;
        $employee->save();
    }
}

Repasemos lo que va pasando. Primero que nada al usar StoreEmployee para definir la variable $request estamos haciendo la validación del form request. Si eso pasa entonces tenemos la siguiente validación de edad. En caso que pase esa validación guardamos los datos creando un nuevo empleado

Una vez mas hablamos de transparencia del código. Hay maneras mas «cortas» de crear un empleado pero hemos querido exponer linea a linea el código para poder hacer un seguimiento claro de variables y valores.

Los datos aqui guardados son todo los que enviamos del front. El único que podria llamar la atencion es el de la linea

$employee->birthday = $unknow;

$unknow la creamos con la fecha que viene del front para validar la edad y que aprovechamos para guardar el valor en la db.

Ahora pasemos al front.

Toda la magia la tenemos en Axios y por primera vez haremos un control de errores en Axios.

Pondremos el código completo de createEmployee

createEmployee() {
    if (this.validateEmployee()) {
        return;
    }
    let me = this;
    axios.post('{{route('employeecreate')}}', {
                'name': this.nameEmployee,
                'lastname': this.lastnameEmployee,
                'email': this.emailEmployee,
                'birthday': this.birthdayEmployee,
                'position': this.idFilterPosition
            })
        .then(function (response) {
            me.errorMessageEmployee = [];
            me.errorEmployee = 0;
            if (response.data.date) {
                me.errorEmployee = 1;
                me.errorMessageEmployee.push(response.data.date[0]);
            } else {
                me.nameEmployee = '';
                me.lastnameEmployee = '';
                me.emailEmployee = '';
                me.birthdayEmployee = '';
                me.idFilterPosition = 0;
                me.errorEmployee = 0;
                me.errorMessageEmployee = [];
                me.modalEmployee = 0;
                me.closeModal();
            }
        })
        .catch(function (error) {
            me.errorMessageEmployee = [];
            if (error.response && error.response.status === 500) {
                console.log(error.response.data)
            }
            if (error.response && error.response.status === 422) {
                me.errorEmployee = 1;
                error.response.data.email.forEach(function (element) {
                    me.errorMessageEmployee.push(element);
                });
                console.clear();
            } else {
                console.log(error);
            }

        });
},

La primer parte ya la vimos en el post anterior

if (this.validateEmployee()) {
    return;
}

Simplemente validamos que los campos no estén vacíos y en caso contrario ponemos el mensaje de error. Eso lo teníamos en la función validateEmployee

Lo siguiente

axios.post('{{route('employeecreate')}}', {
    'name': this.nameEmployee,
    'lastname': this.lastnameEmployee,
    'email': this.emailEmployee,
    'birthday': this.birthdayEmployee,
    'position': this.idFilterPosition
})

Este código ya casi que es rutinario. Enviamos por post las variables al controlador para la validación y posterior creación de empleado.

Miraremos primero que sucede si ocurre un error

.catch(function (error) {
    me.errorMessageEmployee = [];
    me.errorEmployee=0;
    if (error.response && error.response.status === 500) {
        console.log(error.response.data)
    }
    if (error.response && error.response.status === 422) {
        me.errorEmployee = 1;
        error.response.data.email.forEach(function (element) {
            me.errorMessageEmployee.push(element);
        });
        console.clear();
    } else {
        console.log(error);
    }
})

Lo primero que hacemos es vaciar el array errorMessageEmployee para evitar acumular errores anteriores y ponemos los errores a 0.

Inmediatamente revisamos si existe una variable response en la variable de error. Si existe revisamos que el valor del error (status) sea 422. Recordemos que hemos dicho que las validaciones de Laravel envían una excepción 422 cuando no se pasa la validación. Capturamos ese error y actuamos en consecuencia.

Si el error es de tipo 500 quiere decir que es un error en el código PHP (si se han seguido los paso del post este error no debería saltar, pero si pasa puedes ver en Network en la consola del navegador donde esta generado el error).

Si es 422 actualizamos la variable de error a 1. Lo siguiente es que laravel nos devuelve los mensajes de error en un array

error.response.data.email.forEach(function (element) {
    me.errorMessageEmployee.push(element);
});

Lo que hacemos es recorrer el array y agregar los mensajes de error a nuestro array errorMessageEmployee. Simplemente con eso ya tendremos los errores en el front.

La siguiente linea

console.clear();

Simplemente limpia la consola para que no quede el mensaje rojo de error 422 que queda feo cuando se tiene la consola del navegador abierto.

Hasta ahora solo estamos controlando la validación del form request ahora miremos cuando no hay una excepción y hemos enviado el mensaje de error de edad. Revisemos la otra parte de Axios

.then(function (response) {
    me.errorMessageEmployee = [];
    me.errorEmployee = 0;
    if (response.data.date) {
        me.errorEmployee = 1;
        me.errorMessageEmployee.push(response.data.date[0]);
    } else {
        me.nameEmployee = '';
        me.lastnameEmployee = '';
        me.emailEmployee = '';
        me.birthdayEmployee = '';
        me.idFilterPosition = 0;
        me.errorEmployee = 0;
        me.errorMessageEmployee = [];
        me.modalEmployee = 0;
        me.closeModal();
    }
})

Empezamos como en la parte de errores. Reiniciando el array y poniendo a cero la variable de error.

Luego preguntamos si en la respuesta existe una variable date. Recordemos que esa variable contiene nuestro mensaje de error

return [
    'date' => ['El empleado tiene que tener mas de 18 años']
];

Si es así entonces ponemos el error a 1 y guardamos el valor en el array errorMessageEmployee. Si no es así entonces ponemos a cero o null las variables y cerramos el modal. Simple

Con esto hemos hecho las siguientes cosas

  • Validación de variables en el front
  • Validación de variables en el back con form request
  • Validación de variables de forma personalizada en el back
  • Mostrar a los usuarios los mensajes de errores apropiados.

Solo haremos una acotación final y es que el manejo de excepciones es la mejor y mas segura practica de  validación de errores.

Ahora tenemos un problema de relación. Ya no podemos eliminar Departamentos con cargos que tengan empleados. Ni cargos en la misma situación. A partir de este problema partiremos en el siguiente post.

Código: Github

Siguiente Post: Completando la eliminación de contenido

Comparte este artículo

Entra en la discusión y deja tu comentario

Veces