Amélioration de l'UX lors de l'import d'un événement

src/agenda_culturel/static/js/modal.js

@@ -1,8 +1,16 @@
 let visibleModal = null;
+var escapeOk = true;
+
+const toggleModalNoEscape = (event) => {
+  toggleModal(event, true);
+  escapeOk = false;
+}
 
 // Toggle modal
-const toggleModal = (event) => {
+const toggleModal = (event, avoidPrevent=false) => {
-  event.preventDefault();
+  escapeOk = true;
+  if (!avoidPrevent)
+    event.preventDefault();
   const modal = document.getElementById(event.currentTarget.getAttribute("data-target"));
   typeof modal != "undefined" && modal != null && isModalOpen(modal)
     ? closeModal(modal)
@@ -28,15 +36,16 @@ const openModal = (modal) => {
 
 // Close modal
 const closeModal = (modal) => {
-  visibleModal = null;
+  if (escapeOk) {
-  document.documentElement.style.removeProperty("--scrollbar-width");
+    visibleModal = null;
-  modal.removeAttribute("open");
+    document.documentElement.style.removeProperty("--scrollbar-width");
+    modal.removeAttribute("open");
+  }
 };
 
 // Close with a click outside
 document.addEventListener("click", (event) => {
   if (visibleModal != null) {
-    console.log("bordel");
     const modalContent = visibleModal.querySelector("article");
     const isClickInside = modalContent.contains(event.target);
     !isClickInside && closeModal(visibleModal);

src/agenda_culturel/templates/agenda_culturel/event_form.html

@@ -18,7 +18,11 @@
 
 {% load static_content_extra %}
 
+{% if object %}
 <h1>Édition de l'événement {{ object.title }} ({{ object.start_day }})</h1>
+{% else %}
+<h1>Édition de l'événement importé</h1>
+{% endif %}
 
 <form method="post">{% csrf_token %}
     {{ form.media }}

src/agenda_culturel/templates/agenda_culturel/import.html

@@ -14,6 +14,8 @@
     <script src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
     <script src="{% static 'recurrence/js/recurrence-widget.js' %}"></script>
     <script src="{% static 'recurrence/js/recurrence-widget.init.js' %}"></script>
+
+    <script src="{% static 'js/modal.js' %}"></script>
 {% endblock %}
 
 
@@ -36,10 +38,14 @@
             {% csrf_token %}
             {{ form.media }}
             {{ form.as_p }}
-            <input type="submit" value="Lancer l'import">
+            <input type="submit" value="Lancer l'import" id="import-button" data-target="modal-import" onClick="toggleModalNoEscape(event)">
         </form>
 </article>
-
+<dialog id="modal-import">
+    <article aria-busy="true">
+        Veuillez patienter, lien en cours d'importation...
+    </article>
+</dialog>
 <article>
     <header>
     <h2>Ajout manuel</h2>