Merge pull request #2876 from skaut/2875-Removed-bootstrap-native

Removed bootstrap.native
skaut · Oct 30, 2024 · afdcbfa · afdcbfa
2 parents 2f617e7 + e425937
commit afdcbfa
Show file tree

Hide file tree

Showing 13 changed files with 92 additions and 82 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -11,7 +11,4 @@ updates:
   schedule:
     interval: weekly
     time: "01:00"
-  open-pull-requests-limit: 20
-  ignore:
-  - dependency-name: "bootstrap.native"
-    versions: ["5.x"]
+  open-pull-requests-limit: 20
diff --git a/app/AccountancyModule/CampModule/Components/ExportDialog.php b/app/AccountancyModule/CampModule/Components/ExportDialog.php
@@ -23,11 +23,6 @@ public function __construct(private array $camps, private QueryBus $queryBus)
     {
     }
 
-    public function handleOpen(): void
-    {
-        $this->show();
-    }
-
     protected function beforeRender(): void
     {
         $this->template->setFile(__DIR__ . '/templates/ExportDialog.latte');

diff --git a/app/AccountancyModule/Components/Cashbook/PrefixControl.php b/app/AccountancyModule/Components/Cashbook/PrefixControl.php
@@ -26,11 +26,6 @@ public function __construct(private CashbookId $cashbookId, private PaymentMetho
     {
     }
 
-    public function handleOpen(): void
-    {
-        $this->show();
-    }
-
     public function beforeRender(): void
     {
         $this->template->setFile(__DIR__ . '/templates/PrefixControl.latte');

diff --git a/app/AccountancyModule/Components/Dialog.php b/app/AccountancyModule/Components/Dialog.php
@@ -52,4 +52,14 @@ protected function hide(): void
         $this->opened = false;
         $this->redrawControl();
     }
+
+    public function handleOpen(): void
+    {
+        $this->show();
+    }
+
+    public function handleClose(): void
+    {
+        $this->hide();
+    }
 }
diff --git a/app/AccountancyModule/Components/templates/Dialog.layout.latte b/app/AccountancyModule/Components/templates/Dialog.layout.latte
@@ -1,14 +1,16 @@
-<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 n:href="close" class="btn-close ajax" data-bs-dismiss="modal" aria-label="Close"></a> {* Duplicate call to data-bs-modal to speed up modal closing. *}
+                </div>
+                <div class="modal-body" n:inner-block="dialog-body"></div>
+                <div class="modal-footer" n:inner-block="dialog-footer">
+                    <a n:href="close" class="btn btn-light ajax" data-bs-dismiss="modal">Storno</a> {* Duplicate call to data-bs-modal to speed up modal closing. *}
+                </div>
             </div>
         </div>
     </div>
-</div>
+</div>
diff --git a/app/AccountancyModule/EventModule/components/ExportDialog.php b/app/AccountancyModule/EventModule/components/ExportDialog.php
@@ -23,11 +23,6 @@ public function __construct(private array $events, private QueryBus $queryBus)
     {
     }
 
-    public function handleOpen(): void
-    {
-        $this->show();
-    }
-
     protected function beforeRender(): void
     {
         $this->template->setFile(__DIR__ . '/templates/ExportDialog.latte');

diff --git a/app/AccountancyModule/UnitAccountModule/Components/CreateCashbookDialog.php b/app/AccountancyModule/UnitAccountModule/Components/CreateCashbookDialog.php
@@ -4,7 +4,7 @@
 
 namespace App\AccountancyModule\UnitAccountModule\Components;
 
-use App\AccountancyModule\Components\BaseControl;
+use App\AccountancyModule\Components\Dialog;
 use App\Forms\BaseForm;
 use Model\Cashbook\Commands\Unit\CreateCashbook;
 use Model\Cashbook\Commands\Unit\CreateUnit;
@@ -22,7 +22,7 @@
 use function range;
 use function Safe\array_combine;
 
-final class CreateCashbookDialog extends BaseControl
+final class CreateCashbookDialog extends Dialog
 {
     private const YEARS_RANGE = [-5, 2];
 
@@ -36,13 +36,12 @@ public function __construct(private bool $isEditable, private UnitId $unitId, pr
     {
     }
 
-    public function render(): void
+    public function beforeRender(): void
     {
         $this->template->setFile(__DIR__ . '/templates/CreateCashbookDialog.latte');
         $this->template->setParameters([
             'renderModal' => $this->opened,
         ]);
-        $this->template->render();
     }
 
     public function open(): void

diff --git a/app/AccountancyModule/UnitAccountModule/Components/templates/CreateCashbookDialog.latte b/app/AccountancyModule/UnitAccountModule/Components/templates/CreateCashbookDialog.latte
@@ -1,17 +1,19 @@
-<div n:snippet n:inner-if="$renderModal" class="modal {if $renderModal}rendered{/if}" tabindex="-1">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h4 class="modal-title">Založit pokladní knihu</h4>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <p>Vyberte rok, pro který si přejete založit pokladní knihu</p>
-                {control form}
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Storno</button>
-            </div>
-        </div>
-    </div>
-</div>
+{layout $layout}
+
+{define control $input, $extraClasses}
+    <input n:name="$input" n:class="$input->hasErrors() ? 'is-invalid', form-control, $extraClasses ?? ''">
+{/define}
+
+{define errors $input}
+    <div class="invalid-feedback d-block" n:foreach="$input->getErrors() as $error">{$error}</div>
+{/define}
+
+
+{block dialog-title}Založit pokladní knihu{/block}
+
+{block dialog-body}
+        <p>Vyberte rok, pro který si přejete založit pokladní knihu</p>
+        {control form}
+
+
+{/block}
diff --git a/frontend/ts/ModalExtension.ts b/frontend/ts/ModalExtension.ts
@@ -1,28 +1,52 @@
-import BSN from 'bootstrap.native';
+import { Modal } from "bootstrap";
 
 export class ModalExtension {
+    private modalInstance: Modal | null;
+
     constructor(naja: any) {
         naja.snippetHandler.addEventListener('afterUpdate', (event: any) => this.processSnippet(event.snippet));
+        naja.snippetHandler.addEventListener('beforeUpdate', (event: any) => this.beforeSnippetUpdate(event.snippet));
     }
 
-    private processSnippet(snippet: HTMLElement): void {
-        if (! snippet.classList.contains('modal')) {
+    private beforeSnippetUpdate(snippet: HTMLElement): void
+    {
+        if (! snippet.classList.contains('modal-container')) {
             return;
         }
 
-        const modal = new BSN.Modal(snippet);
+        const modalElement = snippet.querySelector('.modal');
+
+        if (modalElement) {
+            this.modalInstance = Modal.getInstance(modalElement);
+        }
+    }
 
-        if (snippet.innerHTML === '') {
-            modal.hide();
+    private processSnippet(snippet: HTMLElement): void {
+        if (! snippet.classList.contains('modal-container')) {
             return;
         }
 
-        this.initializeButtons(snippet);
+        const modalElement = snippet.querySelector('.modal');
 
-        modal.show();
+        if (modalElement) {
+            const bootstrapModalInstance = new Modal(modalElement);
+            const modalShouldBeVisible = modalElement.innerHTML.trim() !== '';
+
+            if (modalShouldBeVisible) {
+                this.initializeButtons(modalElement);
+                bootstrapModalInstance.show();
+            } else {
+                if (this.modalInstance) {
+                    this.modalInstance.hide();
+                } else {
+                    // This should never happen
+                    console.warn('Modal instance not set! Can\'t close modal');
+                }
+            }
+        }
     }
 
-    private initializeButtons(modal: HTMLElement): void {
+    private initializeButtons(modal: Element): void {
         const forms = modal.querySelectorAll('form');
         const footer = modal.querySelector('.modal-footer');
 
@@ -49,4 +73,4 @@ export class ModalExtension {
         // Hide original buttons
         buttons.forEach(button => button.classList.add('d-none'));
     }
-}
+} 
diff --git a/frontend/ts/ajax.ts b/frontend/ts/ajax.ts
@@ -1,4 +1,3 @@
-import BSN from "bootstrap.native";
 import naja from 'naja';
 // @ts-ignore
 import {ProgressBar} from './ProgressBar';
@@ -27,7 +26,6 @@ export default function (): void {
         initializeSendMassForm(snippet, 'chits-');
         initializeEditForm(snippet,'chits-');
         snippet.querySelectorAll<HTMLElement>('.date').forEach(initializeDatePicker);
-        BSN.initCallback(snippet);
     });
 
     naja.registerExtension(DataGridExtension);

diff --git a/frontend/types/bootstrap.native/index.d.ts b/frontend/types/bootstrap.native/index.d.ts
diff --git a/package.json b/package.json
@@ -11,10 +11,10 @@
         "@fortawesome/free-brands-svg-icons": "^6.6.0",
         "@fortawesome/free-regular-svg-icons": "^6.6.0",
         "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@types/bootstrap": "^5.2.10",
         "@types/nprogress": "^0.2.3",
         "@types/pikaday": "^1.7.9",
         "bootstrap": "^5.3.3",
-        "bootstrap.native": "^4.2.0",
         "moment": "^2.30.1",
         "naja": "1.7.0",
         "nprogress": "^0.2.0",

diff --git a/yarn.lock b/yarn.lock
@@ -1040,20 +1040,22 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.23.tgz#498e41218ab3b6a1419c735e5c6ae2c5ed609b6c"
   integrity sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==
 
+"@popperjs/core@^2.9.2":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@sindresorhus/merge-streams@^2.1.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz#719df7fb41766bc143369eaa0dd56d8dc87c9958"
   integrity sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==
 
-"@thednp/event-listener@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@thednp/event-listener/-/event-listener-1.0.4.tgz#dc92f2318283390089bfad683faa04939a27872f"
-  integrity sha512-EAYzsRiNPdb1yWeisu0WCGUtloHD6P6IpGekJxgBvPR2qNFuMsfQI3XAq+LEJiFKIGKF503JoRfjHcGTO2F+Pw==
-
-"@thednp/shorty@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@thednp/shorty/-/shorty-1.0.3.tgz#65394e7420d2dd42d219f8da759a68f1a54564f0"
-  integrity sha512-PPaERUGmRpi2eWxYUV5yv/pvalPgPOjwKRmRqGMWGuV8xgkvxgtjKIiFJA2D2ei4l4Ih9mEBktDg6Z9+y+To9Q==
+"@types/bootstrap@^5.2.10":
+  version "5.2.10"
+  resolved "https://registry.yarnpkg.com/@types/bootstrap/-/bootstrap-5.2.10.tgz#58506463bccc6602bc051487ad8d3a6458f94c6c"
+  integrity sha512-F2X+cd6551tep0MvVZ6nM8v7XgGN/twpdNDjqS1TUM7YFNEtQYWk+dKAnH+T1gr6QgCoGMPl487xw/9hXooa2g==
+  dependencies:
+    "@popperjs/core" "^2.9.2"
 
 "@types/estree@^1.0.5":
   version "1.0.5"
@@ -1387,14 +1389,6 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
-bootstrap.native@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/bootstrap.native/-/bootstrap.native-4.2.0.tgz#61428b9a296c5d5e590477c086b1d8fa65c47d6b"
-  integrity sha512-KefLTHN76MI/bwPUTipTYtU2YcQPf1ATUmtx8zzTqbx0BVvopp+dFGws23+rEcdnA6N0lff/k8Qs7xgEScb3Dg==
-  dependencies:
-    "@thednp/event-listener" "^1.0.4"
-    "@thednp/shorty" "^1.0.3"
-
 bootstrap@^5.3.3:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.3.tgz#de35e1a765c897ac940021900fcbb831602bac38"