Fix dialog

skaut · Oct 18, 2024 · 29de195 · 29de195
1 parent 2f617e7
commit 29de195
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 21 deletions.
diff --git a/app/AccountancyModule/CampModule/Components/ExportDialog.php b/app/AccountancyModule/CampModule/Components/ExportDialog.php
@@ -28,6 +28,11 @@ public function handleOpen(): void
         $this->show();
     }
 
+    public function handleClose(): void
+    {
+        $this->hide();
+    }
+
     protected function beforeRender(): void
     {
         $this->template->setFile(__DIR__ . '/templates/ExportDialog.latte');

diff --git a/app/AccountancyModule/Components/templates/Dialog.layout.latte b/app/AccountancyModule/Components/templates/Dialog.layout.latte
@@ -1,13 +1,15 @@
-<div n:snippet n:inner-if="$renderModal" class="modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" n:inner-block="dialog-title"></h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body" n:inner-block="dialog-body"></div>
-            <div class="modal-footer" n:inner-block="dialog-footer">
-                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Storno</button>
+<div n:snippet class="modal-container">
+    <div n:inner-if="$renderModal" class="modal" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" n:inner-block="dialog-title"></h5>
+                    <a href="{plink exportDialog:close!}" class="btn-close" aria-label="Close"></a>
+                </div>
+                <div class="modal-body" n:inner-block="dialog-body"></div>
+                <div class="modal-footer" n:inner-block="dialog-footer">
+                    <a href="{plink exportDialog:close!}" class="btn btn-light">Storno</a>
+                </div>
             </div>
         </div>
     </div>

diff --git a/frontend/ts/ModalExtension.ts b/frontend/ts/ModalExtension.ts
@@ -1,28 +1,31 @@
-import BSN from 'bootstrap.native';
+import { Modal } from "bootstrap";
 
 export class ModalExtension {
     constructor(naja: any) {
         naja.snippetHandler.addEventListener('afterUpdate', (event: any) => this.processSnippet(event.snippet));
     }
 
     private processSnippet(snippet: HTMLElement): void {
-        if (! snippet.classList.contains('modal')) {
+        if (! snippet.classList.contains('modal-container')) {
             return;
         }
 
-        const modal = new BSN.Modal(snippet);
+        const modalElement = snippet.querySelector('.modal');
 
-        if (snippet.innerHTML === '') {
-            modal.hide();
-            return;
-        }
+        if (modalElement) {
+            const bootstrapModalInstance = new Modal(modalElement);
+            const modalShouldBeVisible = modalElement.innerHTML !== '';
 
-        this.initializeButtons(snippet);
-
-        modal.show();
+            if (modalShouldBeVisible) {
+                this.initializeButtons(modalElement);
+                bootstrapModalInstance.show();
+            } else {
+                bootstrapModalInstance.hide();
+            }
+        }
     }
 
-    private initializeButtons(modal: HTMLElement): void {
+    private initializeButtons(modal: Element): void {
         const forms = modal.querySelectorAll('form');
         const footer = modal.querySelector('.modal-footer');