ajout de la modale de confirmation
This commit is contained in:
@@ -1,3 +1,11 @@
|
|||||||
# orfeo-django-toolkit
|
# 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
|
||||||
|
|
||||||
|
---
|
||||||
|
|||||||
@@ -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...
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
@@ -11,6 +11,11 @@ requires-python = ">=3.13"
|
|||||||
dependencies = [
|
dependencies = [
|
||||||
"Django>=5.2",
|
"Django>=5.2",
|
||||||
]
|
]
|
||||||
|
authors = [
|
||||||
|
{name = "Charles Goffart"}
|
||||||
|
]
|
||||||
|
license = {text = "MIT"}
|
||||||
|
|
||||||
|
|
||||||
[tool.setuptools]
|
[tool.setuptools]
|
||||||
package-dir = {"" = "src"}
|
package-dir = {"" = "src"}
|
||||||
|
|||||||
+63
@@ -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...
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
*/
|
||||||
+26
@@ -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>
|
||||||
Reference in New Issue
Block a user