Creando un sistema CRUD con Vue y Laravel 22/23

serie-crud-js

22- Mostrando Empleado. 

Ahora pasaremos al los últimos pasos de esta serie. Primero mostraremos empleado en el listado del front. Cambiamos:

<div class="columns">
     Tabla Empleados
</div>

Por:

<div class="columns">
    <div class="column is-12">
        <div v-if="!employee.length">
            No hay Empleados
        </div>
        <table v-else class="table" style="font-size: 10px">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Nombre</th>
                    <th>Apellido</th>
                    <th>Correo</th>
                    <th>Fecha de nacimiento</th>
                    <th>Edad</th>
                    <th>Cargo</th>
                    <th>Departamento</th>
                    <th>Eliminar</th>
                    <th>Editar</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="employ in employee">
                    <td>@{{ employ.id }}</td>
                    <td>@{{ employ.name }}</td>
                    <td>@{{ employ.lastname }}</td>
                    <td>@{{ employ.email }}</td>
                    <td>@{{ employ.birthday }}</td>
                    <td>@{{ employ.years }}</td>
                    <td>@{{ employ.position.title }}</td>
                    <td>@{{ employ.departure.title }}</td>
                    <td @click="openModal('employee','delete',employ)">
                        <i class="fa fa-ban" aria-hidden="true"></i>
                    </td>
                    <td @click="openModal('employee','update',employ)">
                        <i class="fa fa-pencil" aria-hidden="true"></i>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

La mayoría de este código lo conocemos y hemos visto ya. El atributo de edad aparece como un atributo mas (years) y las relaciones aparecen atributos con propiedades. El nombre de ambos atributos los definimos en models como hemos visto anteriormente. Un detalle: Hemos usado una fuente de letra más pequeña porque como mostramos muchos datos quedaba todo muy apretado.

Es solo un detalle estético para este proyecto porque a lo mejor lo logico seria mostrar menos datos en la tabla.

Ahora tratemos un  tema interesante. El componente de fecha. Cuando es un alta funciona perfectamente, pero cuando sea eliminar deberá tener la fecha y además no permitir hacer cambios. Eso lo cambiaremos por un input readonly.

Para la modificación el componente debería tener la fecha pero además permitir modificarlo.

Otra cosa con los controles de validación. Para eliminar no son necesarios pero para la modificación si bien casi todos son los mismo tenemos uno que no.

Si recordamos en la creación de un empleado verificamos que el correo sea único. Ahora nos encontramos con un problema y es que si no se modifica el correo la validación encontrará que ese correo ya existe en la base de datos y nos  daría error.

Para ello Laravel nos da una salida. Primero crearemos el nuevo form request en la línea de comando:

php artisan make:request UpdateEmployee

Luego abrimos App/Http/Requests/UpdateEmployee.php y lo dejamos así:

public function authorize()
{
    return true;
}

/**
 * Get the validation rules that apply to the request.
 *
 * @return array
 */
public function rules()
{
    return [
        'email'=>'required|unique:employees,email,'.$this->id.'|email'
    ];
}

public function messages()
{
    return [
        'email.required' => 'El correo es requerido',
        'email.unique'  => 'El correo debe ser unico',
        'email.email'  => 'El formato del correo no es correcto'
    ];
}

Es casi idéntico al form request que creamos antes pero tenemos este cambio

return [
    'email'=>'required|unique:employees,email,'.$this->id.'|email'
];

Unique acepta 4 parámetros. Aquí usaremos tres que en orden son

  • Tabla de la Base de Datos
  • Campo de la tabla
  • Excepción

Antes solo usábamos el nombre de la tabla. Aquí usamos los 3. ¿De donde sale $this->id ? Ese valor lo enviamos en el request cuando hagamos la modificación  para indicar qué elemento se va a modificar y aquí le estamos indicando que el email debe ser único a excepción del elemento con ese id en la db. De esa manera podemos enviar el email sin modificar pero si se ha modificado se verifica que sea único.

Lo siguiente que tocaremos es el componente. Usaremos algo que no hemos usado aún props

Props define una propiedad del componente (algo así como los atributos html) y a través de ellos podemos enviar datos al componente.

Llamaremos a la propiedad today.

Abriremos nuestro archivo resources/assets/js/componentes/datepicker.vue y donde tenemos

export default {
        data() {

cambiaremos así

export default {
    props: {
        today: {
            type: String,
            default: '',
            required: false
        }
    },
    data() {
  • Hemos creado una propiedad.
  • La hemos llamado today.
  • La hemos definido como String,
  • Con un valor por defecto »
  • No es obligatorio.

Luego solo haremos una modificación en las variables.

startTime: {
    time: ''
},

por

startTime: {
    time: this.today
},

Si recordamos es esa la variable que contiene el valor inicial del datepicker y aquí le estamos asignando el valor que nos envíen a través de la propiedad.

Aquí no necesitamos tocar nada más. Solo que ahora en la línea de comando hay que ejecutar

npm run dev

para que los cambios tengan efecto.

Ahora haremos un cambio en el modal. Buscaremos este código

<birthdayPicker :birthday.sync="birthdayEmployee"></birthdayPicker>

y lo cambiaremos asi

<birthdayPicker :birthday.sync="birthdayEmployee"
      v-if="modalEmployee==1 || modalEmployee==2"  :today="birthdayEmployee"></birthdayPicker>
<input class="input" v-model="birthdayEmployee" readonly v-if="modalEmployee==3">

En el componente hemos agregamos una  condición para que solo se muestre en la creación y la actualización, y estamos usando la propiedad con el valor de la fecha de nacimiento que en la creación tendrá » y en la actualización tendrá la fecha  del empleado elegido.

En cambio cuando se seleccione eliminar se mostrará un input readonly con el valor y de esa manera evitamos que se pueda cambiar el valor.

A partir de aquí el código de vuelve bastante trivial. Solo algún detalle para completar ambos procesos que completaremos en el siguiente post.

Código: Github

Siguiente post: Completando el CRUD

Comparte este artículo

Entra en la discusión y deja tu comentario

Veces