حذف پست در Livewire 3 با تأیید SweetAlert2

حذف اطلاعات حساس مانند پست‌ها در سیستم‌های تحت وب، نیازمند دقت بیشتری است. یکی از بهترین روش‌ها برای بهبود تجربه کاربری و جلوگیری از حذف‌های تصادفی، نمایش یک پیام تأیید قبل از حذف است. در این مقاله، نحوه‌ی پیاده‌سازی حذف پست در Livewire 3 همراه با هشدار تأیید SweetAlert2 را بررسی خواهیم کرد.

این روش به کاربران اجازه می‌دهد تا قبل از حذف یک پست، تصمیم خود را دوباره بررسی کنند و در صورت لزوم، درخواست حذف را لغو کنند.

چرا باید از SweetAlert2 استفاده کنیم؟

SweetAlert2 یک کتابخانه JavaScript برای نمایش پیام‌های زیبا و تعاملی در صفحات وب است. این کتابخانه به ما امکان می‌دهد تا پیغام‌های هشدار، تأیید و موفقیت را به شکلی جذاب نمایش دهیم. مزایای استفاده از آن شامل:

• بهبود User Experience: کاربران به‌راحتی متوجه عملیات حذف می‌شوند.
• جلوگیری از حذف تصادفی: با نمایش یک هشدار قبل از حذف، کاربران شانس بیشتری برای لغو درخواست دارند.
• قابلیت Customization بالا: می‌توان ظاهر و عملکرد هشدارها را مطابق نیاز تغییر داد.

مراحل پیاده‌سازی

1. تعریف Method حذف در Component Livewire

در Livewire، برای حذف یک پست، باید متدی ایجاد کنیم که یک Event دریافت کند و عملیات حذف را انجام دهد.

use Livewire\Attributes\On;


#[on('goOn-Delete')]
public function deletePost($id)
{
    checkPermission('destroy-post'); 
    $post = Post::find($id);
    if ($post) {
        $post->delete();
        $this->dispatch('swal-success', 'Post deleted successfully!');
    } else {
        $this->dispatch('swal-error', 'Post not found!');
    }
}

2. ایجاد دکمه حذف در Template Blade

برای ارسال درخواست حذف، یک Button در Template Blade اضافه می‌کنیم. این دکمه یک Event delete-prompt را با شناسه پست به JavaScript ارسال می‌کند.

<button
    class="dropdown-item"
    type="button"
    wire:click="$dispatch('delete-prompt', {{ $post->id }})">
    <i class="bx bx-trash me-1"></i> Delete Post
</button>

3. اضافه کردن SweetAlert2 برای تأیید حذف

اکنون، یک Script JavaScript برای نمایش پیام تأیید و ارسال درخواست حذف در صورت تأیید کاربر اضافه می‌کنیم.

<script>
    window.addEventListener('delete-prompt', (event) => {
        const Id = event.detail;
        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-success mx-2',
                cancelButton: 'btn btn-danger mx-2'
            },
            buttonsStyling: false
        });

        swalWithBootstrapButtons.fire({
            title: 'Are you sure you want to delete this post?',
            text: "Once deleted, this action cannot be undone!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete it.',
            cancelButtonText: 'No, cancel.',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                Livewire.dispatch('goOn-Delete', {
                    id: Id
                });
            } else if (result.dismiss === Swal.DismissReason.cancel) {
                swalWithBootstrapButtons.fire({
                    title: 'Cancelled',
                    text: "Your post was not deleted.",
                    icon: 'error',
                    confirmButtonText: 'OK'
                })
            }
        })
    });
</script>

نتیجه‌گیری

با این روش، هنگام حذف پست در Livewire 3، ابتدا یک پیغام تأیید SweetAlert2 نمایش داده می‌شود. اگر کاربر تأیید کند، پست حذف شده و یک پیام موفقیت نمایش داده خواهد شد. اگر کاربر درخواست را لغو کند، عملیات حذف انجام نمی‌شود و پیام مناسب نمایش داده می‌شود. این تکنیک، از حذف‌های تصادفی جلوگیری کرده و امنیت بیشتری را برای سیستم فراهم می‌کند.

آیا این روش را در پروژه‌های خود استفاده کرده‌اید؟ چه تجربه‌ای در زمینه حذف داده‌ها با Livewire دارید؟ نظرات خود را در بخش دیدگاه‌ها کداکسپرت با ما به اشتراک بگذارید!