(PC-29891)[BO] feat: use build_modal_form more often in BO

pass-culture · May 24, 2024 · ed8b86f · ed8b86f
1 parent 5c1844b
commit ed8b86f
Show file tree

Hide file tree

Showing 14 changed files with 56 additions and 442 deletions.
diff --git a/api/src/pcapi/routes/backoffice/pro_users/blueprint.py b/api/src/pcapi/routes/backoffice/pro_users/blueprint.py
@@ -288,7 +288,7 @@ def _user_can_be_deleted(user: users_models.User) -> bool:
 def _get_delete_kwargs(user: users_models.User) -> dict:
     kwargs = {
         "can_be_deleted": _user_can_be_deleted(user),
-        "delete_dest": url_for("backoffice_web.pro_user.delete", user_id=user.id),
+        "delete_dst": url_for("backoffice_web.pro_user.delete", user_id=user.id),
         "delete_form": pro_users_forms.DeleteProUser(),
     }
     return kwargs

diff --git a/api/src/pcapi/routes/backoffice/templates/accounts/get/general.html b/api/src/pcapi/routes/backoffice/templates/accounts/get/general.html
@@ -26,37 +26,7 @@ <h5 class="card-title">
           </h5>
           <div class="d-flex row-reverse justify-content-end flex-grow-1">
             {% if edit_account_form %}
-              <button class="btn btn-outline-primary lead fw-bold mt-2 justify-content-end"
-                      data-bs-toggle="modal"
-                      data-bs-target="#edit-account-modal"
-                      type="button">Modifier les informations</button>
-              <div class="modal modal-lg fade"
-                   id="edit-account-modal"
-                   tabindex="-1"
-                   aria-labelledby="edit-account-modal-label"
-                   aria-hidden="true">
-                <div class="modal-dialog modal-dialog-centered">
-                  <div class="modal-content">
-                    <form action="{{ edit_account_dst }}"
-                          name="{{ edit_account_dst | action_to_name }}"
-                          method="post">
-                      <div class="modal-header">
-                        <h5 class="modal-title">Modifier les informations</h5>
-                      </div>
-                      <div class="modal-body">
-                        <div class="form-floating my-3">{{ build_form_fields_group(edit_account_form) }}</div>
-                      </div>
-                      <div class="modal-footer">
-                        <button type="button"
-                                class="btn btn-outline-primary"
-                                data-bs-dismiss="modal">Annuler</button>
-                        <button type="submit"
-                                class="btn btn-primary">Enregistrer</button>
-                      </div>
-                    </form>
-                  </div>
-                </div>
-              </div>
+              {{ build_modal_form("edit-account", edit_account_dst, edit_account_form, "Modifier les informations", "Modifier les informations", "Enregistrer") }}
             {% endif %}
             {% if user.isActive %}
               <div class="mx-3 pt-2 pc-brevo-logo-link">
@@ -161,42 +131,18 @@ <h6 class="card-subtitle text-muted">
           <div class="d-flex flex-column ms-auto align-items-end justify-content-end mb-1">
             {% if suspension_form %}
               {% if user.isActive %}
-                <div>{{ build_modal_form("suspend", suspension_dst, suspension_form, "Suspendre le compte", "Confirmer la suspension") }}</div>
+                <div>
+                  {{ build_modal_form("suspend-public-account", suspension_dst, suspension_form, "Suspendre le compte", "Suspendre le compte", "Confirmer la suspension") }}
+                </div>
               {% else %}
-                <div>{{ build_modal_form("unsuspend", suspension_dst, suspension_form, "Réactiver le compte", "Confirmer la réactivation") }}</div>
+                <div>
+                  {{ build_modal_form("unsuspend-public-account", suspension_dst, suspension_form, "Réactiver le compte", "Réactiver le compte", "Confirmer la réactivation") }}
+                </div>
               {% endif %}
             {% endif %}
             {% if manual_review_form %}
-              <button class="btn btn-outline-primary lead fw-bold mt-2 justify-content-end"
-                      data-bs-toggle="modal"
-                      data-bs-target="#review-public-account-modal"
-                      type="button">Revue manuelle</button>
-              <div class="modal modal-lg fade"
-                   id="review-public-account-modal"
-                   tabindex="-1"
-                   aria-labelledby="review-public-account-modal-label"
-                   aria-hidden="true">
-                <div class="modal-dialog modal-dialog-centered">
-                  <div class="modal-content">
-                    <form action="{{ manual_review_dst }}"
-                          name="{{ manual_review_dst | action_to_name }}"
-                          method="post">
-                      <div class="modal-header">
-                        <h5 class="modal-title">Revue manuelle</h5>
-                      </div>
-                      <div class="modal-body">
-                        <div class="form-floating my-3">{{ build_form_fields_group(manual_review_form) }}</div>
-                      </div>
-                      <div class="modal-footer">
-                        <button type="button"
-                                class="btn btn-outline-primary"
-                                data-bs-dismiss="modal">Annuler</button>
-                        <button type="submit"
-                                class="btn btn-primary">Enregistrer</button>
-                      </div>
-                    </form>
-                  </div>
-                </div>
+              <div>
+                {{ build_modal_form("review-public-account", manual_review_dst, manual_review_form, "Revue manuelle", "Revue manuelle", "Enregistrer") }}
               </div>
             {% endif %}
             {% if anonymize_form %}

diff --git a/api/src/pcapi/routes/backoffice/templates/admin/users_generator.html b/api/src/pcapi/routes/backoffice/templates/admin/users_generator.html
@@ -109,6 +109,6 @@ <h5 class="card-title">
         {% endif %}
       </div>
     </div>
-    <div>{{ build_modal_form("generate", dst, form, "Générer un nouvel utilisateur", "Générer") }}</div>
+    <div>{{ build_modal_form("generate-user", dst, form, "Générer un nouvel utilisateur", "Générer un nouvel utilisateur", "Générer") }}</div>
   </div>
 {% endblock page %}
diff --git a/api/src/pcapi/routes/backoffice/templates/bank_account/get.html b/api/src/pcapi/routes/backoffice/templates/bank_account/get.html
@@ -1,5 +1,5 @@
 {% import "components/clipboard.html" as clipboard %}
-{% from "components/forms.html" import build_form_fields_group with context %}
+{% from "components/generic_modal.html" import build_modal_form with context %}
 {% import "components/links.html" as links %}
 {% from "components/presentation/details/tabs.html" import build_details_tab %}
 {% from "components/presentation/details/tabs.html" import build_details_tabs_wrapper %}
@@ -22,36 +22,7 @@ <h2 class="card-title text-primary">{{ bank_account.label }}</h2>
             <div class="d-flex row-reverse justify-content-end flex-grow-1">
               {% if edit_form %}
                 {% set edit_bank_account_aria_described_by_id = random_hash() %}
-                <button class="btn btn-outline-primary lead fw-bold mt-2 mx-2"
-                        data-bs-toggle="modal"
-                        data-bs-target="#edit-bank-account-modal"
-                        type="button">Modifier les informations</button>
-                <div class="modal modal-lg fade"
-                     id="edit-bank-account-modal"
-                     tabindex="-1"
-                     aria-describedby="{{ edit_bank_account_aria_described_by_id }}"
-                     aria-hidden="true">
-                  <div class="modal-dialog modal-dialog-centered">
-                    <div class="modal-content">
-                      <form action="{{ url_for("backoffice_web.bank_account.update_bank_account", bank_account_id=bank_account.id) }}"
-                            name="{{ url_for("backoffice_web.bank_account.update_bank_account", bank_account_id=bank_account.id) | action_to_name }}"
-                            method="post">
-                        <div class="modal-header"
-                             id="{{ edit_bank_account_aria_described_by_id }}">
-                          <h5 class="modal-title">Modifier les informations du compte bancaire</h5>
-                        </div>
-                        <div class="modal-body pb-3">{{ build_form_fields_group(edit_form) }}</div>
-                        <div class="modal-footer">
-                          <button type="button"
-                                  class="btn btn-outline-primary"
-                                  data-bs-dismiss="modal">Annuler</button>
-                          <button type="submit"
-                                  class="btn btn-primary">Enregistrer</button>
-                        </div>
-                      </form>
-                    </div>
-                  </div>
-                </div>
+                {{ build_modal_form("edit-bank-account", url_for("backoffice_web.bank_account.update_bank_account", bank_account_id=bank_account.id) , edit_form, "Modifier les informations", "Modifier les informations du compte bancaire", "Enregistrer") }}
               {% endif %}
               {% if dms_stats %}
                 <a href="{{ dms_stats.url }}"

diff --git a/api/src/pcapi/routes/backoffice/templates/components/generic_modal.html b/api/src/pcapi/routes/backoffice/templates/components/generic_modal.html
@@ -1,10 +1,14 @@
-{% macro build_modal_form(modal_id, dst, form, title, button_text, description) %}
+{% macro build_modal_form(modal_id, dst, form, button_text, title, submit_button_text, description, icon) %}
   {% set modal_aria_described_by_id = random_hash() %}
   <button class="btn btn-outline-primary lead fw-bold mt-2"
           data-bs-toggle="modal"
-          data-bs-target=".pc-{{ modal_id }}-modal"
-          type="button">{{ title }}</button>
-  <div class="modal modal-lg fade pc-{{ modal_id }}-modal"
+          data-bs-target="#{{ modal_id }}-modal"
+          type="button">
+    {% if icon %}<i class="bi {{ icon }}"></i>{% endif %}
+    {{ button_text }}
+  </button>
+  <div class="modal modal-lg fade"
+       id="{{ modal_id }}-modal"
        tabindex="-1"
        aria-describedby="{{ modal_aria_described_by_id }}"
        aria-hidden="true">
@@ -19,11 +23,9 @@
             {% if description %}<p>{{ description }}</p>{% endif %}
             <div class="form-group">
               {% for form_field in form %}
-                {% if form_field.errors %}
-                  <div class="w-100 my-4">
-                    {% for error in form_field.errors %}<p class="text-warning lead">{{ error }}</p>{% endfor %}
-                  </div>
-                {% endif %}
+                <div class="w-100 my-4">
+                  {% for error in form_field.errors %}<p class="text-warning lead">{{ error }}</p>{% endfor %}
+                </div>
                 {{ form_field }}
               {% endfor %}
             </div>
@@ -33,7 +35,7 @@
                     class="btn btn-outline-primary"
                     data-bs-dismiss="modal">Annuler</button>
             <button type="submit"
-                    class="btn btn-primary">{{ button_text }}</button>
+                    class="btn btn-primary">{{ submit_button_text }}</button>
           </div>
         </form>
       </div>

diff --git a/api/src/pcapi/routes/backoffice/templates/components/public_accounts/registration_steps.html b/api/src/pcapi/routes/backoffice/templates/components/public_accounts/registration_steps.html
@@ -94,7 +94,7 @@ <h5 class="modal-title">Détails techniques</h5>
                           <div class="form-floating my-3">
                             <pre>
                              <code><br />{{ fraud_action['technicalDetails']  | tojson(indent=4) | safe | empty_string_if_null }}</code>
-                          </pre>
+                            </pre>
                           </div>
                         </div>
                         <div class="modal-footer">

diff --git a/api/src/pcapi/routes/backoffice/templates/multiple_offers/search_result.html b/api/src/pcapi/routes/backoffice/templates/multiple_offers/search_result.html
@@ -60,6 +60,7 @@ <h6 class="card-subtitle my-4 text-muted"></h6>
               {% if incompatibility_form %}
                 <div>
                   {{ build_modal_form("set-gcu-incompatible", url_for('.set_product_gcu_incompatible') , incompatibility_form,
+                  "Rendre le livre et les offres associées incompatibles avec les CGU",
                   "Rendre le livre et les offres associées incompatibles avec les CGU", "Confirmer",
                   "⚠️ Êtes-vous sûr de vouloir rendre le produit incompatible et rejeter les offres associées ?") }}
                 </div>
@@ -86,7 +87,7 @@ <h6 class="card-subtitle my-4 text-muted"></h6>
               {% if offer_criteria_form %}
                 <div class="search-results-modal-container">
                   {{ build_modal_form("add-criteria", url_for('.add_criteria_to_offers') , offer_criteria_form,
-                  "Tag des offres", "Enregistrer",
+                  "Tag des offres", "Tag des offres", "Enregistrer",
                   "⚠️ " + active_offers_count|string + " offres actives associées à cet EAN-13 seront affectées") }}
                 </div>
               {% endif %}

diff --git a/api/src/pcapi/routes/backoffice/templates/offer/details.html b/api/src/pcapi/routes/backoffice/templates/offer/details.html
@@ -1,6 +1,7 @@
 {% import "components/clipboard.html" as clipboard %}
 {% import "components/links.html" as links %}
 {% from "components/forms.html" import build_form_fields_group with context %}
+{% from "components/generic_modal.html" import build_modal_form with context %}
 {% from "components/presentation/details/tabs.html" import build_details_tab %}
 {% from "components/presentation/details/tabs.html" import build_details_tabs_wrapper %}
 {% from "components/presentation/details/tabs.html" import build_details_tab_content %}
@@ -61,36 +62,7 @@ <h2 class="card-title mb-3 text-primary">{{ links.build_offer_name_to_pc_pro_lin
               {% endif %}
               {% if edit_offer_venue_form %}
                 {% set edit_offer_venue_aria_described_by_id = random_hash() %}
-                <button class="btn btn-outline-primary lead fw-bold mt-2 mx-2"
-                        data-bs-toggle="modal"
-                        data-bs-target="#edit-offer-venue-modal"
-                        type="button">Modifier le lieu</button>
-                <div class="modal modal-lg fade"
-                     id="edit-offer-venue-modal"
-                     tabindex="-1"
-                     aria-describedby="{{ edit_offer_venue_aria_described_by_id }}"
-                     aria-hidden="true">
-                  <div class="modal-dialog modal-dialog-centered">
-                    <div class="modal-content">
-                      <form action="{{ url_for("backoffice_web.offer.edit_offer_venue", offer_id=offer.id) }}"
-                            name="{{ url_for("backoffice_web.offer.edit_offer_venue", offer_id=offer.id) | action_to_name }}"
-                            method="post">
-                        <div class="modal-header"
-                             id="{{ edit_offer_venue_aria_described_by_id }}">
-                          <h5 class="modal-title">Modifier le lieu de l'offre</h5>
-                        </div>
-                        <div class="modal-body pb-3">{{ build_form_fields_group(edit_offer_venue_form) }}</div>
-                        <div class="modal-footer">
-                          <button type="button"
-                                  class="btn btn-outline-primary"
-                                  data-bs-dismiss="modal">Annuler</button>
-                          <button type="submit"
-                                  class="btn btn-primary">Enregistrer</button>
-                        </div>
-                      </form>
-                    </div>
-                  </div>
-                </div>
+                {{ build_modal_form("edit-offer-venue", url_for("backoffice_web.offer.edit_offer_venue", offer_id=offer.id) , edit_offer_venue_form, "Modifier le lieu", "Modifier le lieu", "Enregistrer") }}
               {% endif %}
             </div>
             <div class="col-2"></div>