Added:

- new simpler modal without bootstrap
- new loadingbutton component
- cleanupsome old code
- toolbar adjusments

assets/controllers/addmanga_controller.js

@@ -0,0 +1,14 @@
+// assets/controllers/addmanga_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    index: Number
+  }
+
+  openModal(event) {
+    event.preventDefault()
+    const openEvent = new CustomEvent(`openAddMangaModal${this.indexValue}`)
+    document.dispatchEvent(openEvent)
+  }
+}

assets/controllers/bootstrap-modal_controller.js

@@ -1,21 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-import { Modal } from 'bootstrap';
-
-/**
- * Allows you to dispatch a "modal:close" JavaScript event to close it.
- *
- * This is useful inside a LiveComponent, where you can emit a browser event
- * to open or close the modal.
- *
- * See templates/components/BootstrapModal.html.twig to see how this is
- * attached to Bootstrap modal.
- */
-/* stimulusFetch: 'lazy' */
-export default class extends Controller {
-  modal = null;
-
-  connect() {
-    this.modal = Modal.getOrCreateInstance(this.element);
-    document.addEventListener('modal:close', () => this.modal.hide());
-  }
-}

assets/controllers/loading_button_controller.js

@@ -0,0 +1,21 @@
+// assets/controllers/loading_button_controller.js
+import {Controller} from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["text", "loader"];
+  static values = {form: String};
+
+  startLoading(event) {
+    event.preventDefault();
+    this.textTarget.classList.add("hidden");
+    this.loaderTarget.classList.remove("hidden");
+    this.element.disabled = true;
+
+    if (this.hasFormValue) {
+      const form = document.getElementById(this.formValue);
+      if (form) {
+        form.submit();
+      }
+    }
+  }
+}

assets/controllers/modal_controller.js

@@ -0,0 +1,37 @@
+// assets/controllers/modal_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["modal"]
+  static values = {
+    openTrigger: String,
+    closeTrigger: String
+  }
+
+  connect() {
+    if (this.hasOpenTriggerValue) {
+      document.addEventListener(this.openTriggerValue, this.open.bind(this))
+    }
+    if (this.hasCloseTriggerValue) {
+      document.addEventListener(this.closeTriggerValue, this.close.bind(this))
+    }
+  }
+
+  disconnect() {
+    if (this.hasOpenTriggerValue) {
+      document.removeEventListener(this.openTriggerValue, this.open.bind(this))
+    }
+    if (this.hasCloseTriggerValue) {
+      document.removeEventListener(this.closeTriggerValue, this.close.bind(this))
+    }
+  }
+
+  open() {
+    console.log("Opening modal...")
+    this.modalTarget.classList.remove('hidden')
+  }
+
+  close() {
+    this.modalTarget.classList.add('hidden')
+  }
+}

assets/controllers/toolbar_controller.js

@@ -26,7 +26,8 @@ export default class extends Controller {
   }
 
   editManga() {
-    console.log("Editing manga...");
+    const event = new CustomEvent('openEditModal');
+    document.dispatchEvent(event);
   }
 
   deleteMangas() {
@@ -34,13 +35,17 @@ export default class extends Controller {
   }
 
   deleteManga() {
-    console.log("Deleting manga...");
+    const event = new CustomEvent('openDeleteModal');
+    document.dispatchEvent(event);
   }
 
   showOptions() {
     console.log("Showing options...");
   }
 
+  expandAll() {
+    console.log("Expanding all...");
+  }
   changeView(event) {
     event.preventDefault();
     const viewOption = event.currentTarget.dataset.view;