ajout de la modale de confirmation
This commit is contained in:
@@ -1,3 +1,11 @@
|
||||
# orfeo-django-toolkit
|
||||
|
||||
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 = [
|
||||
"Django>=5.2",
|
||||
]
|
||||
authors = [
|
||||
{name = "Charles Goffart"}
|
||||
]
|
||||
license = {text = "MIT"}
|
||||
|
||||
|
||||
[tool.setuptools]
|
||||
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