diff --git a/resources/js/__modals.js b/resources/js/__modals.js new file mode 100644 index 0000000..57f973e --- /dev/null +++ b/resources/js/__modals.js @@ -0,0 +1,59 @@ +document.addEventListener('alpine:init', () => { + Alpine.directive('confirm-modal', (el, _, {evaluate}) => { + el.addEventListener('click', e => { + e.preventDefault() + + const modal = document.getElementById('global-confirm-modal') + const dataset = el.dataset + + console.log('Dataset:', dataset) + + document.getElementById('confirm-title').innerHTML = dataset.title || 'Confirm Action' + document.getElementById('confirm-message').innerHTML = dataset.message || 'Are you sure you want to proceed?' + document.getElementById('confirm-cancel').innerHTML = dataset.cancelLabel || 'Cancel' + document.getElementById('confirm-confirm').innerHTML = dataset.confirmLabel || 'Confirm' + + + document.getElementById('confirm-confirm').addEventListener('click', () => { + if (dataset.url) { + window.location.href = dataset.url + } else if (dataset.action) { + const form = document.createElement('form') + form.method = 'POST' + form.action = dataset.action + + // Add CSRF + const csrf = document.querySelector('meta[name="csrf-token"]')?.content + if (csrf) { + const csrfInput = document.createElement('input') + csrfInput.type = 'hidden' + csrfInput.name = '_token' + csrfInput.value = csrf + form.appendChild(csrfInput) + } + + // Add _method if not POST + if (dataset.method && dataset.method.toUpperCase() !== 'POST') { + const methodInput = document.createElement('input') + methodInput.type = 'hidden' + methodInput.name = '_method' + methodInput.value = dataset.method + form.appendChild(methodInput) + } + + document.body.appendChild(form) + form.submit() + } else { + console.error('No URL or action specified for confirmation.') + modal.close() + } + }) + + document.getElementById('confirm-cancel').addEventListener('click', () => { + modal.close() + }) + + modal.showModal() + }) + }) +}) diff --git a/resources/js/app.js b/resources/js/app.js new file mode 100644 index 0000000..190d74a --- /dev/null +++ b/resources/js/app.js @@ -0,0 +1 @@ +import './__modals' \ No newline at end of file diff --git a/resources/views/components/modals/global-confirm-modal.blade.php b/resources/views/components/modals/global-confirm-modal.blade.php new file mode 100644 index 0000000..e23a255 --- /dev/null +++ b/resources/views/components/modals/global-confirm-modal.blade.php @@ -0,0 +1,12 @@ +{{--Put this on your app layout for global confirmation modals.--}} + + + + \ No newline at end of file