Dialogos en Laravel 12 Inertia 2 + Vue

▶

Los diálogos de confirmación es simplemente un modal o ventana emergente en la cual se ejecuta para mostrar antes de realizar alguna acción como la de eliminar y en la cual podemos colocar otros datos mediante por ejemplo, enlaces en Laravel Inertia.

Voy a emplear los términos de diálogo y modal para referirme al mismo componente porque en principio es lo mismo entonces voy te voy aquí avisando no es del todo como quien dice sencillo mira todo lo que tiene que importar:

import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';

Este es el de delete para simplemente esto lo que me refiero que me hubiera gustado que esté más unificado pero en fin es lo que tenemos entonces aquí lo está importando su uso lo puedes ver aquí dialog trigger:

    <DialogTrigger as-child>
        <Button class="ml-2" variant="destructive" size="sm">
            Delete
        </Button>
    </DialogTrigger>

Este es el accionante para activar el componente padre que es el dialog.

El as-child es para evitar que coloque otro envoltorio al Button de delete.

Cuerpo del dialog

El resto de los componentes no es más que de estructura del modal, quedando de la siguiente forma:

<td class="p-2">
    ***
    <!-- <o-button iconLeft="delete" rounded size="small" variant="danger" @click="confirmDeleteActive = true;
    deletePostRow = p.id;">Delete</o-button> -->
    <Dialog>
        <DialogTrigger as-child>
            <Button class="ml-2" variant="destructive" size="sm">
                Delete
            </Button>
        </DialogTrigger>
        <DialogContent>
            <DialogHeader>
                <DialogTitle>
                    Are you sure you want to delete the record?
                </DialogTitle>
                <DialogDescription>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere laborum
                    omnis s
                </DialogDescription>
            </DialogHeader>
            <DialogFooter>
                <DialogClose as-child>
                    <Button variant="secondary">
                        Cancel
                    </Button>
                </DialogClose>
                <DialogClose as-child>
                    <Button variant="destructive" @click="deletePost(p)">
                        Delete
                    </Button>
                </DialogClose>


            </DialogFooter>
        </DialogContent>
    </Dialog>
</td>
***
import { Button } from '@/components/ui/button';


import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';
***
components: {
    ***
    Button,
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
},
***
deletePost(post) {
    router.delete(route("post.destroy", post.id));
},

Diálogos de confirmación en Laravel Inertia con Oruga UI

Usar componentes como de alert o diálogos de confirmación para preguntar a nuestro usuario si está completamente seguros de la operación que quiere realizar, es un proceso común hoy en dia, en esta entrada veremos cómo podemos realizar este tipo de operaciones en Laravel Inertia usando Oruga UI con el componente de o-modal

Ya hablamos sobre como instalar Oruga UI en Laravel y configurar el mismo, ahora, para crear un modal, con las opciones típicas tenemos:

  <o-modal v-model:active="confirmDeleteActive">
    <p class="p-4">Are you sure you want to delete the record?</p>
    <div class="flex flex-row-reverse gap-2 bg-gray-100 p-3">
      <o-button variant="danger" @click="deleteCategory">Delete</o-button>
      <o-button @click="confirmDeleteActive = false">Cancel</o-button>
    </div>
  </o-modal>

Como puedes ver, definimos algunas opciones para eliminar un registro, en este caso, asociado a un listado, por lo tanto, tenemos N registros que usarán solamente un componente de diálogo, ahora, desde el listado, usamos una propiedad pivote para saber cual queremos eliminar e inmediatamente mostramos el diálogo anterior mediante el v-model de confirmDeleteActive

El componente queda como:

<template>
  <app-layout>
    <div class="container">
      <div class="card">
        <div class="card-body">
          <Link
            class="link-button-default my-3"
            :href="route('category.create')"
            >Create</Link
          >
          <table class="w-full border">
            <thead class="bg-gray-100">
              <tr class="border-b">
                <th class="p-3">Id</th>
                <th class="p-3">Title</th>
                <th class="p-3">Slug</th>
                <th class="p-3">Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr class="border-b" v-for="c in categories.data" :key="c.id">
                <td class="p-2">{{ c.id }}</td>
                <td class="p-2">{{ c.title }}</td>
                <td class="p-2">{{ c.slug }}</td>
                <td class="p-2">
                  <Link
                    class="text-sm mr-4 text-purple-400 hover:text-purple-700"
                    :href="route('category.edit', c.id)"
                    >Edit</Link
                  >
                  <!-- <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>
                </td>
              </tr>
            </tbody>
          </table>
          <!-- <template v-for="l in categories.links" :key="l">
            <Link v-if="!l.active" class="px-2 py-1" :href="l.url" v-html="l.label"/>
            <span v-else class="px-2 py-1 cursor-pointer text-gray-500"  v-html="l.label"  />
        </template> -->
          <pagination class="my-4" :links="categories" />
        </div>
      </div>
    </div>
  </app-layout>
</template>

En cuanto a las funciones, las cuales se llaman desde el diálogo, gracias a los pivotes que hayamos usado para indicar la acción, en este caso, para eliminar, hacemos lo típico, en este caso, realizar la operación para eliminar un registro:

<script>
import { Link } from "@inertiajs/inertia-vue3";
import AppLayout from "@/Layouts/AppLayout";
import Pagination from "@/Shared/Pagination.vue";
import { Inertia } from "@inertiajs/inertia";
export default {
  data() {
    return {
      confirmDeleteActive: false,
      deleteCategoryRow: "",
    };
  },
  components: {
    AppLayout,
    Link,
    Pagination,
  },
  props: {
    categories: Object,
  },
  methods: {
    deleteCategory() {
      Inertia.delete(route("category.destroy", this.deleteCategoryRow));
      this.confirmDeleteActive = false;
    },
  },
};
</script>

El siguiente paso es que aprendas a usar los Mensajes Flash en Laravel Inertia.