ajout de la modale de confirmation

README.md

@@ -1,3 +1,11 @@
 # orfeo-django-toolkit
 
-Un set de composants utile pour les applications web.
+Un set de composants utile pour les applications web.
+
+---
+
+## Installation
+
+pip install git+https://git.booflix.fr/Orfeo/orfeo-django-toolkit.git
+
+---

docs/recipes/confimation_modla.md

@@ -0,0 +1,21 @@
+## Initialisation de la modale
+
+Dans le fichier template de base, ajouter :
+
+- `{% include 'orfeo_generic_confirmation_modal.html' %}`
+- `{% include 'orfeo_generic_confirmation_modal.html' %}`
+
+La modale générique peut maintenant être utilisé partout, avec des fonctions de cette forme :
+
+```
+async function deletePressed(){
+    const confirmed = await confirmDialog.show({
+        title: "Suppression",
+        message: "Supprimer cet élément ?"
+    });
+
+    if (confirmed) {
+        // suppression, fetch ect...
+    }
+}
+```

pyproject.toml

@@ -11,6 +11,11 @@ requires-python = ">=3.13"
 dependencies = [
     "Django>=5.2",
 ]
+authors = [
+    {name = "Charles Goffart"}
+]
+license = {text = "MIT"}
+
 
 [tool.setuptools]
 package-dir = {"" = "src"}

src/orfeo_django_toolkit/static/orfeo_django_toolkit/js/orfeo_generic_confirmation_modal.js

@@ -0,0 +1,63 @@
+class ConfirmDialog {
+
+    constructor() {
+        this.modalElement = document.getElementById("orfeo_generic_confirmation_modal");
+        this.modal = new bootstrap.Modal(this.modalElement);
+
+        this.title = this.modalElement.querySelector(".modal-title");
+        this.body = this.modalElement.querySelector(".modal-body");
+        this.ok = document.getElementById("confirmModalOk");
+    }
+
+    show(options = {}) {
+
+        this.title.textContent = options.title ?? "Confirmation";
+        this.body.innerHTML = options.message ?? "Êtes-vous sûr ?";
+
+        this.ok.textContent = options.confirmText ?? "Confirmer";
+
+        this.ok.className = "btn";
+        this.ok.classList.add(options.confirmClass ?? "btn-danger");
+
+        return new Promise(resolve => {
+
+            const confirm = () => {
+                cleanup();
+                this.modal.hide();
+                resolve(true);
+            };
+
+            const cancel = () => {
+                cleanup();
+                resolve(false);
+            };
+
+            const cleanup = () => {
+                this.ok.removeEventListener("click", confirm);
+                this.modalElement.removeEventListener("hidden.bs.modal", cancel);
+            };
+
+            this.ok.addEventListener("click", confirm, { once: true });
+            this.modalElement.addEventListener("hidden.bs.modal", cancel, { once: true });
+
+            this.modal.show();
+        });
+    }
+}
+
+const confirmDialog = new ConfirmDialog();
+/* exemple d'utilisation
+
+async function deletePressed(){
+    const confirmed = await confirmDialog.show({
+        title: "Suppression",
+        message: "Supprimer cet élément ?"
+    });
+
+    if (confirmed) {
+        // suppression, fetch ect...
+    }
+}
+
+
+*/

src/orfeo_django_toolkit/templates/orfeo_django_toolkit/orfeo_generic_confirmation_modal.html

@@ -0,0 +1,26 @@
+
+<div class="modal fade" id="orfeo_generic_confirmation_modal" tabindex="-1" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+
+                <div class="modal-header">
+                    <h5 class="modal-title">Confirmation</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+
+                <div class="modal-body">
+                    Êtes-vous sûr ?
+                </div>
+
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+                        Annuler
+                    </button>
+                    <button type="button" class="btn btn-danger" id="confirmModalOk">
+                        Confirmer
+                    </button>
+                </div>
+
+            </div>
+        </div>
+    </div>