Confirmation Dialogs in Laravel Inertia with Oruga UI

- Andrés Cruz

En español
Confirmation Dialogs in Laravel Inertia with 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>

Recuerda que esto forma parte de mi curso sobre Laravel Inertia

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.