From 29de1953a9e5f5a94314a3d3993b248b258e282d Mon Sep 17 00:00:00 2001
From: Dorazil <dorazil@webwings.cz>
Date: Fri, 18 Oct 2024 10:40:28 +0200
Subject: [PATCH] Fix dialog

---
 .../CampModule/Components/ExportDialog.php    |  5 ++++
 .../Components/templates/Dialog.layout.latte  | 22 ++++++++--------
 frontend/ts/ModalExtension.ts                 | 25 +++++++++++--------
 3 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/app/AccountancyModule/CampModule/Components/ExportDialog.php b/app/AccountancyModule/CampModule/Components/ExportDialog.php
index 80f73708a..bb83f5fd4 100644
--- 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
index 3e4496e7f..64a4939d1 100644
--- 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
index de62aca98..9e13686b8 100644
--- a/frontend/ts/ModalExtension.ts
+++ b/frontend/ts/ModalExtension.ts
@@ -1,4 +1,4 @@
-import BSN from 'bootstrap.native';
+import { Modal } from "bootstrap";
 
 export class ModalExtension {
     constructor(naja: any) {
@@ -6,23 +6,26 @@ export class ModalExtension {
     }
 
     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');