Update alpine handling

This commit is contained in:
DariusIII
2026-02-20 09:58:35 +01:00
parent a372ffc0bb
commit 0823bef407
5 changed files with 55 additions and 10 deletions
+17 -1
View File
@@ -23,13 +23,21 @@ Alpine.data('commentDeleteModal', () => ({
init() {
this._baseUrl = this.$el.dataset.deleteUrl || '';
// Listen for delete button clicks via delegation (CSP-safe, no $dispatch with inline objects)
var self = this;
document.addEventListener('click', function(e) {
var btn = e.target.closest('.comment-delete-btn');
if (btn) {
self.openModal(btn.dataset.commentId, btn.dataset.commentText);
}
});
},
openModal(id, text) {
this.commentId = id;
this.commentText = text;
this.open = true;
const form = this.$refs.deleteForm;
var form = this.$refs.deleteForm;
if (form) {
form.action = this._baseUrl + '?id=' + id;
}
@@ -49,6 +57,14 @@ Alpine.data('categoryDeleteModal', () => ({
init() {
this._baseUrl = this.$el.dataset.deleteUrl || '';
// Listen for delete button clicks via delegation (CSP-safe, no $dispatch with inline objects)
var self = this;
document.addEventListener('click', function(e) {
var btn = e.target.closest('.category-delete-btn');
if (btn) {
self.openModal(btn.dataset.categoryId);
}
});
},
openModal(id) {
@@ -118,9 +118,8 @@
<i class="fa fa-edit"></i>
</a>
<button type="button"
class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
class="category-delete-btn text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
data-category-id="{{ $category->id }}"
x-on:click="$dispatch('open-category-delete-modal', { id: $el.dataset.categoryId })"
title="Delete Category">
<i class="fa fa-trash"></i>
</button>
@@ -159,7 +158,6 @@
<!-- Delete Confirmation Modal -->
<div x-data="categoryDeleteModal"
data-delete-url="{{ url('/admin/category-delete') }}"
x-on:open-category-delete-modal.window="openModal($event.detail.id)"
x-show="open"
x-cloak
class="fixed inset-0 bg-gray-600/50 overflow-y-auto h-full w-full z-50">
@@ -190,7 +188,5 @@
</div>
</div>
</div>
{{-- Scripts moved to resources/js/csp-safe.js --}}
@endsection
@@ -121,11 +121,10 @@
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button type="button"
class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 transition"
class="comment-delete-btn text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 transition"
title="Delete"
data-comment-id="{{ $comment->id }}"
data-comment-text="{{ addslashes(Str::limit($comment->text, 50)) }}"
x-on:click="$dispatch('open-delete-modal', { id: $el.dataset.commentId, text: $el.dataset.commentText })">
data-comment-text="{{ addslashes(Str::limit($comment->text, 50)) }}">
<i class="fas fa-trash"></i>
</button>
</td>
@@ -151,7 +150,6 @@
<!-- Delete Confirmation Modal -->
<div x-data="commentDeleteModal"
data-delete-url="{{ url('admin/comment-delete') }}"
x-on:open-delete-modal.window="openModal($event.detail.id, $event.detail.text)"
x-show="open"
x-cloak
class="fixed inset-0 bg-gray-900/50 flex items-center justify-center z-50 transition-opacity">