Change working modals and modal-toggle.

Repeat restore open modal after validation errors.

Author: tabuna

resources/js/controllers/modal_controller.js

@@ -116,7 +116,7 @@ export default class extends ApplicationController {
 
         // Load deferred data if URL is specified and no validation errors are present
         if (Object.keys(this.parametersValue).length !== 0 && !options.validateError) {
-            this.asyncLoadData(JSON.parse(options.params));
+            this.asyncLoadData(options.params);
         }
 
         // Store the last open modal options
@@ -130,13 +130,13 @@ export default class extends ApplicationController {
      * Open the last modal if validation errors are present.
      */
     openLastModal() {
-        const lastOpenModal = this.getLastOpenModal();
-
         // If no validation errors are present, do nothing
         if (this.element.querySelectorAll('.invalid-feedback').length === 0) {
             return;
         }
 
+        const lastOpenModal = this.lastOpenModal();
+
         // Reopen the last modal if it matches the current slug
         if (lastOpenModal && lastOpenModal.slug === this.slugValue) {
             this.element.classList.remove('fade', 'in');
@@ -167,21 +167,21 @@ export default class extends ApplicationController {
      * @param options - Modal options to store.
      */
     storeLastOpenModal(options) {
-        sessionStorage.setItem(this.SESSION_KEY_FOR_LAST_OPEN_MODAL, JSON.stringify(options));
+        window.sessionStorage.setItem(this.constructor.SESSION_KEY_FOR_LAST_OPEN_MODAL, JSON.stringify(options));
     }
 
     /**
      * Retrieve the last opened modal options from session storage.
      * @returns {Object|false} - The last opened modal options or false if not found.
      */
-    getLastOpenModal() {
-        return JSON.parse(sessionStorage.getItem(this.SESSION_KEY_FOR_LAST_OPEN_MODAL)) ?? false;
+    lastOpenModal() {
+        return JSON.parse(sessionStorage.getItem(this.constructor.SESSION_KEY_FOR_LAST_OPEN_MODAL)) ?? false;
     }
 
     /**
      * Clear the last opened modal options from session storage.
      */
     clearLastOpenModal() {
-        sessionStorage.removeItem(this.SESSION_KEY_FOR_LAST_OPEN_MODAL);
+        sessionStorage.removeItem(this.constructor.SESSION_KEY_FOR_LAST_OPEN_MODAL);
     }
 }

resources/js/controllers/modal_toggle_controller.js

@@ -2,14 +2,35 @@ import ApplicationController from "./application_controller";
 
 export default class extends ApplicationController {
 
+    static values = {
+        title: {
+            type: String,
+            default: null,
+        },
+        key: {
+            type: String,
+        },
+        action: {
+            type: String,
+        },
+        parameters: {
+            type: Object,
+        },
+        open: {
+            type: Boolean,
+            default: false,
+        },
+    }
+
     /**
      *
      */
     connect() {
         setTimeout(() => {
-            if (!this.data.get('open')) {
+            if (!this.openValue) {
                 return;
             }
+
             this.modal.classList.remove('fade', 'in');
             this.targetModal();
         });
@@ -20,14 +41,15 @@ export default class extends ApplicationController {
      * @returns {*}
      */
     targetModal(event) {
-        this.application.getControllerForElementAndIdentifier(this.modal, 'modal')
+        this.application
+            .getControllerForElementAndIdentifier(this.modal, 'modal')
             .open({
-                title: this.data.get('title') || this.modal.dataset.modalTitle,
-                submit: this.data.get('action'),
-                params: this.data.get('params', '[]'),
+                title: this.titleValue || this.modal.dataset.modalTitle,
+                submit: this.actionValue,
+                params: this.parametersValue,
             });
 
-        if(event) {
+        if (event) {
             return event.preventDefault();
         }
     }
@@ -37,6 +59,13 @@ export default class extends ApplicationController {
      * @returns {HTMLElement}
      */
     get modal() {
-        return document.getElementById(`screen-modal-${this.data.get('key')}`);
+
+        let modal = document.getElementById(`screen-modal-${this.keyValue}`);
+
+        if (modal === null) {
+            this.toast('The modal element does not exist.', 'warning');
+        }
+
+        return modal;
     }
 }

resources/views/actions/modal.blade.php

@@ -3,18 +3,20 @@
             {{ $attributes }}
             data-controller="modal-toggle"
             data-action="click->modal-toggle#targetModal"
-            data-modal-toggle-title="{{ $modalTitle ?? $title ??  '' }}"
-            data-modal-toggle-key="{{ $modal ?? '' }}"
-            data-modal-toggle-async="{{ $async }}"
-            data-modal-toggle-params='@json($parameters)'
-            data-modal-toggle-action="{{ $action }}"
-            data-modal-toggle-open="{{ $open }}"
+            data-modal-toggle-open-value="{{ var_export($open) }}"
+            data-modal-toggle-title-value="{{ $modalTitle ?? $title ??  '' }}"
+            data-modal-toggle-key-value="{{ $modal ?? '' }}"
+            data-modal-toggle-action-value="{{ $action }}"
+
+            @if(!empty($parameters))
+                data-modal-toggle-parameters-value='@json($parameters)'
+            @endif
     >
 
         @isset($icon)
             <x-orchid-icon :path="$icon" class="overflow-visible"/>
         @endisset
 
-        <span>{{ $name ?? '' }}</span>
+        {{ $name ?? '' }}
     </button>
 @endcomponent