Creando un sistema CRUD con Vue y Laravel 21/23

serie-crud-js

21- Completando la eliminación de contenido

Primero que nada tocaremos en controlador de departamentos. Solo la función delete que ahora tenemos así

public function delete($id)
{
    $departure = Departure::find($id);
    $departure->positions()->delete();
    $departure->delete();
}

La cambiaremos así:

public function delete($id)
{
    $departure = Departure::find($id);
    $positions = $departure->positions()->get();

    foreach($positions as $position){
        $position->employees()->delete();
    }
    
    $departure->positions()->delete();
    $departure->delete();
}

Expliquemos como esta funcionando.

Buscamos el departamento que vamos a borrar. Obtenemos  los cargos relacionados y los recorremos todos para eliminar los empleados relacionados de cada uno.

Luego ya eliminamos los cargos y la final el departamento

El cambio en Cargos seria. Así lo tenemos:

public function delete($id)
{
    Position::find($id)->delete();
}

Y lo cambiaremos así:

public function delete($id)
{
    $position = Position::find($id);
    $position->employees()->delete();
    $position->delete();
}

Buscamos el cargo seleccionado con el id. Eliminamos todos los empleados relacionados. Eliminamos el cargo.

Ahora modificaremos el QueryController que era el que nos devolvía los datos al front. Actualmente lo tenemos así:

public function allQuery(Request $request)
{
    if (!$request->ajax()) {
    	return redirect('/');
    }

    return [
        'departures' => Departure::with('positions')->get(),
        'positions'  => Position::with('departure')->get()
    ];
}

Primero que nada  agregaremos

use App\Employee;

En la cabecera y modificaremos la función así:

public function allQuery(Request $request)
{
    if (!$request->ajax()) {
    	return redirect('/');
    }

    return [
        'departures' => Departure::with('positions')->get(),
        'positions'  => Position::with('departure')->get(),
        'employee'   => Employee::with('position')->get()
    ];
}

Hemos agregado la linea Employee para enviar también los empleados en los datos al front .

Los empleados nos llegaran con sus datos mas los datos del cargo. Pero tocaremos el modelo un poco para obtener dos datos mas:

  • El departamento relacionado al cargo
  • La edad del Empleado

Ademas la fecha de nacimiento nos llegaria en formato YY/MM/DD y la queremos en formato DD/MM/YY

Iremos al modelo cambiaremos algunas cosas.

Lo primero el formato. Nuestro campo se llama birthday y crearemos la siguiente funcion en el modelo

public function getBirthdayAttribute($value)
{
    return Carbon::parse($value)->format('d-m-Y');
}

Agregando

use Carbon\Carbon;

En la cabecera. Este tipo de  función se llama Accesor en Laravel y modifica el valor obtenido de la base de datos devolviendo un resultado. En este caso solo modificamos el formato. Es una función automática y solo existiendo ya nos da el resultado en la consulta eloquent.

$value que usamos en la función es el valor que viene desde la base de datos.

Ahora agregaremos la siguiente linea al modelo

protected $appends = ['years', 'departure'];

Con esta linea estamos creando dos nuevos atributos del modelo que no existen en la base de datos. Para cada atributo debemos crear una función que nos devuelva el valor esperado.

La primera que haremos es la relacionada con el atributo years

public function getYearsAttribute()
{
    $hoy = Carbon::now();
    $fecha = Carbon::parse($this->birthday);
    return $fecha->diffInYears($hoy);
}

Primero creamos una variable con la fecha de hoy. Segundo creamos una fecha desde el valor birthday de la db.

Vemos un detalle. No tenemos el parámetro $value porque  este atributo no  existe en la db y por lo tanto no recibe un valor desde ella en su lugar hacemos referencia a $this para usar la variable birthday del modelo.

Al final devolvemos la diferencia en años entre las dos fechas.

La siguiente función es

public function getDepartureAttribute()
{
    $departure = Departure::find(Position::find($this->position_id)->departure_id);

    return [
        'title' => $departure->title,
        'id' => $departure->id
    ];
}

Para que esto funcione agregaremos dos use en la cabecera

use App\Departure;
use App\Position;

Lo que hacemos en la primer linea es buscar el departamento relacionado con el cargo del empleado. Luego devolvemos un array con el id y el titulo.

Ahora tenemos en el resultado de Empleado.

  • Los datos del empleado
  • Los datos del cargo relacionado
  • Datos del departamento relacionado
  • Un atributo nuevo de edad automático generado en el modelo.

Lo que nos queda ahora es mostrar los datos en el front.

Primero cambiaremos el código de la función que usamos para mantener actualizados los datos

allQuery() {
    let me = this;
    axios.get('{{ route('allQuery') }}')
        .then(function (response) {
            let answer = response.data;
            me.departures = answer.departures;
            me.positions = answer.positions;
            me.employee = answer.employee;

        })
        .catch(function (error) {
            console.log(error);
        });
}

Solo hemos agregado

me.employee = answer.employee;

Con lo que tendremos los valores de los empleados actualizados.

Como el post se ha alargado mostraremos los datos en el siguiente.

Código: Github

Siguiente post: Mostrando Empleado.

Comparte este artículo

Entra en la discusión y deja tu comentario

Veces