Editar registros en base a evento click en Laravel Inertia

Para la opción de edición de un to do, vamos a hacerlo desde el mismo listado sin usar un componente de modal; lo que realizaremos es que, cuando demos un click sobre el SPAN del nombre del to do, colocaremos un INPUT en su lugar con el nombre del to do que vamos a editar:

resources/js/Pages/Todo/Index.vue

<li v-for="t in todos" class="border py-3 px-4 mt-2" :key="t">
 <span v-show="!t.editMode" @click="t.editMode = true">
   {{ t.name }}
 </span>
 <TextInput v-show="t.editMode == true" v-model="t.name" @keyup.enter="update(t)" />
 <button @click="remove" class="float-right">
  ***
 </button>
</li>
***
update(todo) {
 console.log(todo.name);
 todo.editMode = false;
},

Como puedes ver en el código anterior, para eso, se emplea una opción que no viene en el listado por defecto, llamada "editMode", y dependiendo del valor de la misma:
true, entramos en modo de edición y por lo tanto, ocultamos el SPAN y mostramos el campo de texto.
false, entramos en modo de lectura y por lo tanto, mostramos el SPAN y ocultamos el campo de texto.

Gracias a la reactividad de Vue, al cambiar cualquier opción del to do, como el nombre o el "editMode" automáticamente los cambios se verán reflejados en el template, es importante notar que, estamos creando v-models a partir del array de todos los to do.

El método de update del to do se llama al detectar la tecla de enter: @keyup.enter="update(t)".

El proceso de actualización del to do:

app/Http/Controllers/TodoController.php

public function update(Todo $todo, Request $request)
{
   Todo::where("id", $todo['id'])->where('user_id', auth()->id())->update(['name' => $data['name']]);
   return back();
}

Creamos la ruta:

routes/web.php

Route::group([
   'prefix' => 'todo',
   'middleware' => 'auth:sanctum',
   config('jetstream.auth_session'),
   'verified'
], function () {
   Route::get('/', [App\Http\Controllers\TodoController::class, 'index'])->name('todo.index');
   Route::post('store', [App\Http\Controllers\TodoController::class, 'store'])->name('todo.store');
   Route::put('update/{todo}', [App\Http\Controllers\TodoController::class, 'update'])->name('todo.update');
});

Finalmente, creamos el proceso para actualizar el to do desde el cliente:

resources/js/Pages/Todo/Index.vue

update(todo) {
 todo.editMode = false;

 router.put(route("todo.update", todo.id), {
   name: todo.name,
 });
},

Con esto, al dar un click sobre algun to do del listado, entramos a modo edición.

Transcripción del vídeo

Ahora vamos con la parte de editar un todo que puede parecer sencillo y es sencillo pero hay varias cositas que hay que hacer lo primero es cómo lo quieres manejar ya que desde el cliente 1 formas de hacerlo desde el controlador ya no tenemos tantas opciones ya que viene siendo lo mismo un controlador pero desde aquí puedes hacer muchas cosas por ejemplo una sería pasar la información del todo por aquí arriba cosa que no me gusta mucho porque suponte que tenemos 20 todos queremos Acceder al 20 que está por aquí abajo y movernos para acá para editarlo pues parecer un poco confuso porque es mucha brincadera así que yo prefiero editarlo aquí directamente como quien dice en línea para eso es muy sencillo inclusive tuviéramos ahí un par de manera de hacerlo ya que también podemos editar lo que es directamente colocando contable en true a cualquier cosa en este caso un párrafo y ahí podemos editar:

<p contenteditable="true">This is an editable paragraph.</p>

Habilitar un input de tipo texto para la edición

Entonces sería algo curioso hubiera que ver cómo lo pudiéramos llevar también con Vue pero no vamos a llegar a esto ya que no hace falta complicarse de más entonces qué es lo que vamos a hacer o cuál es mi como quien dice el desarrollo que propongo vamos a tener aquí el spam que no sé si ya lo tenemos o tiramos el texto ahí a secas perfecto ya tenemos el SPAN entonces si le pegamos un evento click ya aco lo podemos asociar a cualquier cosa no solamente un botón entramos en modo de edición y cómo sabemos esto básicamente con esta opción que vamos a inventarnos es decir se define aquí directamente en Vue ya que esto obviamente no forma parte del modelo y si estamos en modo de edición le colocamos un true y por lo tanto entraría en este condicional y lo que hacemos es crear un campo de texto en este caso de tipo de tipo input que ya nosotros conocemos y por aquí le establecemos como p model lo que es uno de los items del listado de todos díjate que aquí tenemos como que dos trucos por una parte definir el V-model de la siguiente forma con como quien dice con una opción que no está definida a perse en el bloque de data sino directamente como parte de todos y por otra parte lo que es el uso como quien dice estas opciones de generadas bajo demanda por lo demás aquí al darle un key enter entonces utilizamos este método que vamos a implementar esto debería estar en negrita porque creo que no lo he implementado y entramos en el modo de de edición o mejor dicho ya ahí editamos nuestro todo por lo demás faltaría crear el controlador nada raro aquí importantísimo que le coloques el user id para evitar que un usuario pueda editar el todo simplemente por el identificador de otro usuario y creamos la ruta y aquí también le colocamos bueno hacemos la actualización al método todo que tenemos acá 

<li v-for="t in todos" class="border py-3 px-4 mt-2" :key="t">
  <span v-show="!t.editMode" @click="t.editMode = true">
    {{ t.name }}
  </span>
  <TextInput v-show="t.editMode == true" v-model="t.name" @keyup.enter="update(t)" />
  <button @click="remove" class="float-right">
   ***
  </button>
</li>
***
update(todo) {
  todo.editMode = false;

  router.put(route("todo.update", todo.id), {
    name: todo.name,
  });
},

Entonces vamos a comenzar aquí por lo más sencillo que sería aquí la parte del controlador Entonces por aquí creo un método voy a llamarlo comate en el cual recibimos el todo que queremos editar y también aquí recibimos el request coloco request y por ahí que hacemos la operación todo Where ID es igual a todo ID También es importante que lo hagamos así porque as ya tenemos o sabemos que es un todo existente ya que si le pasamos otra cosa y daría un 44 Entonces ya a partir de aquí lo que es el bloqueo por el user ID colocamos we user ID lo sacamos del usuario autenticado importantísimo y aquí una vez colocado las cláusulas lo actualizamos colocamos elate Y en este caso sería solamente para el nombre así que colocamos name va a ser igual a request bueno y puedes como te comentaba antes utilizar algunas validaciones que le quieras colocar al request y demás cosa que bueno lo puedo hacer aquí también facilito sería esto que no lo coloqué en el libro solo debería de colocar también colocamos esto y aquí accedemos a la Data que en este caso es name es lo único que queremos cambiar ya que lo que es el orden y lo que es el user ID eso obviamente no lo cambiamos al menos no desde acá que es solamente para actualizar el nombre y eso sería prácticamente todo por aquí abrimos el de web y aquí lo tengo por aquí voy a crear mi ruta sería de tipo put:

public function update(Todo $todo, Request $request)
{
    Todo::where("id", $todo['id'])->where('user_id', auth()->id())->update(['name' => $data['name']]);
    return back();
}

Route::put('update/{todo}', [App\Http\Controllers\TodoController::class, 'update'])->name('todo.update');

Perfecto ahí estoy bien Entonces ya aquí colocamos els en este caso asociado al input text que tenemos acá arriba bueno text input text input aquí colocaría el Else ya que esto se va a mostrar solamente cuando estamos en modo de edición recuerda que aquí tenemos el negado por lo tanto se mostraría Cuando esto es true el negado sería falso se mostraría esto que es cuando estamos en modo de edición bien aparte de esto coloco aquí el v-model, lo siguiente sería el @ keyup que es cuando presionamos una tecla en este caso solamente queremos escuchar el enter; así que colocamos el modificador de enter y aquí le indicamos qué es lo que tiene que hacer que es llamar al update:

  <span v-show="!t.editMode" @click="t.editMode = true">
    {{ t.name }}
  </span>
  <TextInput v-show="t.editMode == true" v-model="t.name" @keyup.enter="update(t)" />

Perfecto aquí digo que por más que sea pudiéramos tener problemas con el formulario vamos a ver fíjate que aparece eso ahí tuviéramos que cubrirlo creo que lo hacemos más adelante pero si no simplemente es un una opción más que indique si estás creando estás editando en base al último método o algo así para evitar esto y lo puedes colocar aquí creo que lo hacemos más adelante pero por que es para que lo tengas también presente por lo demás ya aquí terminamos la operación y ya podemos editar nuestro todo.

29-10-2024 - Andrés Cruz

In english

• Categoría
• /
• Laravel
• /
• Editar registros en base a evento click en Laravel Inertia