Laravel Inertia 11 Uso del componente de Modal o Dialogo con Vue
Para mostrar el modal, usamos una propiedad booleana y para manejar el registro que queremos eliminar, usamos otra propiedad que contiene el id del registro que queremos eliminar; así que, creamos las propiedades respectivas:
data() {
return {
confirmDeleteActive: false,
deleteCategoryRow: "",
};
},Desde el apartado de acciones en el listado, ahora, la operación para eliminar, lo único que va a realizar es, registrar el ID del post que se quiere eliminar:
Creamos una función que elimine el post:
import { Link, router } from "@inertiajs/vue3"
***
methods: {
deleteCategory() {
router.delete(route("category.destroy", this.deleteCategoryRow));
this.confirmDeleteActive = false;
},
},Y finalmente, volviendo a los botones de acción, el de cancelar, lo único que hace es ocultar el modal con la propiedad que se encarga de indicar si el modal es visible o no:
<o-button @click="confirmDeleteActive = false">Cancel</o-button>Y el de conformación, llama a la función definida anteriormente:
<o-button variant="danger" @click="deleteCategory">Delete</o-button>Y desde el listado:
<!-- <Link as="button" type="button" method="DELETE" class="text-sm text-red-400 hover:text-red-700 ml-2" :href="route('category.destroy', c.id)">Delete</Link> -->
<o-button iconLeft="delete" rounded size="small" variant="danger" @click=" confirmDeleteActive = true; deleteCategoryRow = c.id;">Delete</o-button>
Así que, para usar este modal en vez del de Oruga, podemos definirlo como:resources/js/Pages/Dashboard/Post/Index.vue
<confirmation-modal :show="confirmDeleteActive">
<template v-slot:title> Confirmation </template>
<template v-slot:content>
<p class="p-4">Are you sure you want to delete the record?</p>
</template>
<template v-slot:footer>
<o-button variant="danger" @click="deletePost">Delete</o-button>
<div class="mr-3"></div>
<o-button @click="confirmDeleteActive = false">Cancel</o-button>
</template>
</confirmation-modal>Recuerda importar:
import ConfirmationModal from "@/Components/ConfirmationModal.vue";
export default {
data() {
return {
confirmDeleteActive: false,
deletePostRow: "",
};
},
components: {
ConfirmationModal,
},
//***Creamos una función que elimine el post:
import { Link, router } from "@inertiajs/vue3"
***
methods: {
deleteCategory() {
router.delete(route("category.destroy", this.deleteCategoryRow));
this.confirmDeleteActive = false;
},
},Transcripción del vídeo
La siguiente implementación que vamos a realizar es colocar aquí un diálogo de confirmación antes de realizar la acción para eso aquí podemos emplear el componente de modal de oruga ui recuerda escribes aquí oruga ui venimos aquí y buscamos el de moda que se encuentra aquí abajo y aquí tenemos el funcionamiento muy sencillo por defecto Esto es lo que tenemos bueno el botón Para activarlo otro botón para cancelarlo que no sé dónde está y aquí tenemos el modal mediante un bmel esto es una propiedad o lo que sea una variable de tipo Boolean que indica si este activo un true o no está activo un falso y por aquí el contenido eso sería prácticamente todo y ahí luego podemos colocar algunos botones de acciones por ejemplo estos para obviamente poder manejarlo en este caso cerrarlo u ocultarlo bueno en este caso ya lo están utilizando aquí en algún método pero con variar el valor del v-modal es más que suficiente Y eso es lo que nosotros vamos a implementar ya que tenemos oruga ui instalado en nuestra aplicación Así que la implementación es muy sencilla te la voy mostrando aquí hay componente de modal mediante el config delete active que indica si se está mostrando o no nuestro mensaje y los botones de acción por lo demás aquí definimos el par de variables una que indica si va a estar activo o no el modal y por aquí otra que indica cuál es la categoría que vamos a eliminar creamos un método:
import { Link, router } from "@inertiajs/vue3"
***
methods: {
deleteCategory() {
router.delete(route("category.destroy", this.deleteCategoryRow));
this.confirmDeleteActive = false;
},
},Ahora ya que aquí también es un punto importante ahora vamos a tener un solo modal y solamente una forma de acceder al mismo es decir aquí tenemos que hacer un paso de por medio cuando le demos aquí eliminar esto no lo va a eliminar simplemente va a mostrar el modal Y a partir de ahí también va a establecer la categoría que queremos eliminar por lo tanto va a ser esas dos acciones y cuando le pegu amos aquí un click a eliminar al model finalmente vamos a eliminarlo Entonces esta es la función que se va a encargar de eliminarlo en sí que se va a llamar desde el modal muy importante por lo demás aquí podemos aprovechar la característica que tenemos en View en la cual podemos ejecutar cierto javascript de una vez desde el template Entonces no hace falta definir métodos adicionales Y en este caso cuando le peguemos a cancelar del modal vamos a ocultarlo y cuando le peguemos aquí al modal a eliminar al botón de delete Entonces vamos a llamar al método que te mostraba anteriormente que se encarga de eliminar finalmente la categoría y bueno el botón que tenemos actualmente o el enlace que tenemos aquí actualmente de delete lo que va a hacer Sería para ver dónde está simplemente establecer ahí los valores uno para mostrar el model y dos para establecer ahí la categoría que queremos eliminar que no lo veo ahora aquí está es lo que hacen también puedes hacerlo mediante un método aparte pero también de esta forma funciona sin problemas:
<o-button variant="danger" @click="deleteCategory">Delete</o-button>Puede que haya mareado un poquito pero vamos a realizar la implementación esta implementación lo voy a llevar a cabo mediante el Index de la categoría tal cual veías entonces voy a comenzar aquí desde la parte del Script que creo que sería la más sencilla escribimos Data aquí tenemos el bloque de Data y escribimos método y aquí tenemos el bloque de los métodos aquí Entonces vamos allá lo primero es el par de variables confir delete active igual a falso coma aquí voy a colocar delete y voy a colocar categoría Recuerda que esto al final lo vamos a replicar también para el de los post Así que si lo quieres copiar más fácilmente coloca delete Road o algo por el estilo delete record o lo que tú quieras Yo como lo tengo así en el libro voy a mantenerlo así ya que tampoco está mal y Esto va a colocarlo igual a vacío pudiera colocarlo igual a cero Pero bueno da igual aquí somos muy libres con los tipos de datos el siguiente es el método delete categoría aquí lo mismo que te indicaba antes ya que lo vamos a replicar pudieras colocarle delete record o algo por el estilo o destroy o algo así ya eso quedan de cosa tuya y por aquí hacemos la operación también vamos a necesitar importar aquí el router:
import { Link, router } from "@inertiajs/vue3"Colocamos router router punto delete punto Root indicamos la ruta con nombre category punto destroyed por aquí como parámetro le pasamos dis pun delete category Road también pudiera ser ID porque realmente no le estamos pasando Row sino el ID pero así lo dejé entonces voy a implementarlo de esta forma este ser todo el javascript aquí me parece entonces falta ya crear el bendito modal por acá arriba:
<o-button iconLeft="delete" rounded size="small" variant="danger" @click=" confirmDeleteActive = true; deleteCategoryRow = c.id;">Delete</o-button>
Así que, para usar este modal en vez del de Oruga, podemos definirlo como:Luego establecemos los botones voy a colocarlo aquí o model entonces recordemos que tenemos el v-model dos puntos active:
<o-modal v-model:active="confirmDeleteActive">Y mediante el de delete para ver cómo lo llamamos el de confir confir delete active indica si lo vamos a mostrar o no por defecto mientras maquetamos puedes colocarlo aquí en true ahorita lo colocamos otra vez en falso para que sea más fácilmente visualizable con esto ya debería aparecer algo por acá Fíjate que aparece esta bonita pantalla negro así ofuscado o con el mejor dicho con la opacidad y ahora por aquí vamos a implementar el model aquí puedes colocar cualquier cosa como te he comentado voy a colocarle un padding de unos cuatro por aquí voy a colocar el mensaje luego lo traduzco seguro que deseas eliminar el registro seleccionado otra vez ahí coloca lo que tú quieras y esta parte sería para las acciones ya con esto por aquí va a aparecer el mensaje de pantalla pero no tenemos así una forma para confirmar y es para eso que vamos a implementar el siguiente bloque por aquí colocamos Class voy a alinear los botones mediante Flex y voy a colocar aquí un Flex ro reverse y ahorita te explico el porqué de esto o por qué lo voy obligatorio Y a partir de aquí los componentes de o buton de oruga aquí coloco delete:
<o-button iconLeft="delete" rounded size="small" variant="danger" @click=" confirmDeleteActive = true; deleteCategoryRow = c.id;">Delete</o-button>
Así que, para usar este modal en vez del de Oruga, podemos definirlo como:Sería bueno ahorita lo implementamos y el de Cancer vamos a entrar de Por qué coloco este bendito Flex por aquí van a aparecer nuestros botones yo coloco aquí el reverse no por por molestarme la vida sino es porque quiero alinearlos aquí a la derecha no me gustan aquí me gusta más aquí a la derecha y es por eso que aquí coloco la opción de reverse lo que pasa que el reverse también aquí me invierte Esto entonces tú Aquí define cuál quieres primero el cancel o delete aquí los voy a invertir aquí Fíjate que aparece primero delete y cancel Entonces yo como quiero el de delete más hacia la derecha lo coloco aquí de esta forma porque es precisamente por el reverse bueno y puedes hacer pruebas simplemente quita esto y ya y aquí Recuerda que también tenemos el de Call pero yo no lo voy a alinear tipo columna y poco más entonces problema que que tenemos todo muy pegado entonces colocamos aquí un padding de por ejemplo nivel 3 es creo que está bien y no me gusta el color de fondo quiero que haga un poquito de contraste entonces voy a colocarle aquí un borde un color de fondo de un 100 por ejemplo y ya con esto lo rompemos Claro está e Flex row reverse:
<div class="flex flex-row-reverse gap-2 bg-gray-100 p-3">
<o-button variant="danger" @click="deletePost">Delete</o-button>
<o-button @click="confirmDeleteActive = false">Cancel</o-button>
</div>
</o-modal>
L coloco acá y ahí lo tenemos los botones todavía muy pegados aquí pudiéramos colocarlo un margen aunque los botones no Ne toman los márgenes el componente de oruga o podemos colocar aquí mejor un Gap que es el margen de los de las grillas y los Flex y le colocamos aquí alguna cantidad y lo tenemos separado Perfecto entonces para este bueno para este voy a colocar variant igual a Danger que indica que es una opción peligrosa mediante color de rojo es en este caso porque vamos a eliminar nuestra categoría y aquí finalmente los eventos clit Entonces qué es lo que vamos a hacer en este primero bueno comencé por el difícil mejor voy a comenzar de acá colocamos el de confirm delete active igual a true Ya que en este punto es donde se mostraría y aquí sería igual a falso no perdón para ver no este es el que elimina llama el de delete categoría al método a secas y esto sería ya Prácticamente todo por aquí si le damos aquí acá Dale al Cancelar no le des a este debería de [Música] ocultarse m que le Ah es que lo coloque en true es falso Ahí está de esta forma Entonces ya en este punto podemos bajar un poquito Aquí voy a colocarlo en falso para que no se nos olvide subimos otra vez y por aquí vamos a variar nuestra ruta Aquí voy a colocarle también al enlace Bueno ahorita lo hago mejor que es el padding para que no aparezca pegado o Button coloco Button Aquí más o menos lo mismo Bueno Este es un poquito más complicado aquí colocamos el confirm delete active en true Entonces qué es lo que tenemos de momento bueno Y coloco aquí delete voy a colocarle ya de una el varian para salir de esto en Danger Dios mío Danger el size en sm aquí aparece todo pegado los botones o estos componentes no me agarran las clases es decir si aquí le coloco una clase tuviera que colocarle un di Supongo yo marg left do 3 no lo toma bueno un dos lo que me salió no lo toma ahí Fíjate que aparece todo pegado por alguna razón no me toma el la clase así funciona Pues es lo que me refiero entonces se lo voy a colocar aquí al enlace que si lo toma margin right si quisieras colocarlo entonces tuvieras que colocarle Ah un di o algo por encima del uton y luego colocarle ahí tu margin Ahí está entonces de momento tenemos para mostrarlo y ocultarlo es lo que hemos implementado y aquí para eliminarlo pero el de eliminar que es el Recuerdas lo que llama esta función que tenemos aquí el delete categoría que a la final es el que llama el que tenemos acá falta definirle el delete category Row que es realmente el ID Entonces esto también lo podemos hacer por acá Aquí también pudieras implementar una función aparte como tú quieras pero estoy aquí aprovechando un poquito las características de javascript que me permite implementar cierta lógica aquí a nivel del template entonces así si me ahorro algunas funciones aparte de esto también lo que nosotros vamos a hacer sería seleccionar la categoría aquí colocamos delete categoría igual al ID y esto sería ya Prácticamente todo De igual manera te recomiendo para que vayas viendo el proceso más claramente ya que es un poquito enredado Recuerda que son estos pasos intermedios es porque solamente tenemos un model anteriormente teníamos en N enlaces para eliminar es decir si teníamos 10 enlaces teníamos 10 categorías o mejor dicho si teníamos 10 categorías teníamos 10 enlaces pero en este caso solamente tenemos un model por lo tanto lo tenemos que configurar de esta forma Aquí voy a colocar un console.log que diga delete categoría row y aquí retorno aquí por cierto también faltó ocultar el modal puedes colocarlo antes o después de esto colocamos confirm delete active igual a falso para ocultarlo Ya que en ese punto ya hizo su trabajo entonces en este punto si venimos acá voy a darle aquí a delete deberíamos de ver el ID que queremos eliminar por pantalla que tiene que coincidir con este Claro está Si ves otra cosa y lo tienes que corregir Entonces en este punto voy a quitar todo esto voy a crearme aquí una categoría por si tengo algún Post establecido con eso no eliminarlo doy a crear voy a la siguiente página y doy eliminar y aquí elimina perfectamente tal cual puedes ver y no tenemos ningún error así que de esta forma pudimos implementar un diálogo de confirmación para inertia empleando oruga.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter