Dialogs in Laravel 12 Inertia 2 + Vue

▶

Confirmation dialogs are simply modals or pop-up windows that appear before performing actions such as deleting, and in which we can place other data using, for example, links in Laravel Inertia.

I'm going to use the terms "dialog" and "modal" to refer to the same component because, in principle, they're the same thing. So, I'll warn you here, it's not entirely simple. Look at everything that's important:

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

This is the delete for simply this what I mean that I would have liked it to be more unified but anyway it is what we have so here it is importing its use you can see here dialog trigger:

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

This is the trigger to activate the parent component, which is the dialog.

The as-child is to prevent you from placing another wrapper around the delete button.

Body of the dialogue

The rest of the components are nothing more than the structure of the modal, and are as follows:

<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));
},

Confirmation Dialogs in Laravel Inertia with Oruga UI

Using components like alerts or confirmation dialogs to ask our user if they are completely sure of the operation they want to perform is a common process today. In this post, we'll see how we can perform this type of operation in Laravel Inertia using Oruga UI with the o-modal component.

We already talked about how to install Oruga UI in Laravel and configure it. Now, to create a modal with the typical options, we have:

   <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>

As you can see, we define some options to delete a record, in this case, associated with a listing. Therefore, we have N records that will only use one dialogue component. Now, from the listing, we use a pivot property to know which one we want to delete, and we immediately show the previous dialogue using the v-model of confirmDeleteActive.

The component looks like this:

<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>

Regarding the functions, which are called from the dialogue, thanks to the pivots we used to indicate the action, in this case, to delete, we do the typical operation, which is to perform the operation to delete a record:

<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>

The next step is for you to learn how to use Flash Messages in Laravel Inertia.