From c601c843c60b498d8c47cee80e95f07868f5cd26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89loi=20Rivard?= <eloi@yaal.coop>
Date: Wed, 13 Dec 2023 14:10:28 +0100
Subject: [PATCH] refactor: split every modal template in its own file

---
 web/b3desk/templates/meeting/card.html        |   4 +-
 web/b3desk/templates/meeting/list.html        |   4 +-
 web/b3desk/templates/meeting/modals.html      | 124 ------------------
 .../templates/meeting/modals/delete.html      |  18 +++
 .../templates/meeting/modals/invite.html      |  52 ++++++++
 .../templates/meeting/modals/recordings.html  |  54 ++++++++
 6 files changed, 130 insertions(+), 126 deletions(-)
 delete mode 100644 web/b3desk/templates/meeting/modals.html
 create mode 100644 web/b3desk/templates/meeting/modals/delete.html
 create mode 100644 web/b3desk/templates/meeting/modals/invite.html
 create mode 100644 web/b3desk/templates/meeting/modals/recordings.html

diff --git a/web/b3desk/templates/meeting/card.html b/web/b3desk/templates/meeting/card.html
index fee73950..b39e8966 100644
--- a/web/b3desk/templates/meeting/card.html
+++ b/web/b3desk/templates/meeting/card.html
@@ -4,4 +4,6 @@ <h4 class="fr-card__title">{{ meeting.name }}</h4>
     {% include 'meeting/row.html' %}
   </div>
 </div>
-{% include 'meeting/modals.html' %}
+{% include 'meeting/modals/delete.html' %}
+{% include 'meeting/modals/invite.html' %}
+{% include 'meeting/modals/recordings.html' %}
diff --git a/web/b3desk/templates/meeting/list.html b/web/b3desk/templates/meeting/list.html
index af9d0c0d..1c4a1227 100644
--- a/web/b3desk/templates/meeting/list.html
+++ b/web/b3desk/templates/meeting/list.html
@@ -18,7 +18,9 @@ <h3 class="fr-text--lg fr-mt-1-5v">{{ meeting.name }}</h3>
       {% include 'meeting/row.html' %}
     </div>
   </div>
-  {% include 'meeting/modals.html' %}
+  {% include 'meeting/modals/delete.html' %}
+  {% include 'meeting/modals/invite.html' %}
+  {% include 'meeting/modals/recordings.html' %}
   {% endfor %}
   {% if meetings|length and config.get("SATISFACTION_POLL_URL") %}
     <iframe id="iframe-poll"
diff --git a/web/b3desk/templates/meeting/modals.html b/web/b3desk/templates/meeting/modals.html
deleted file mode 100644
index 41abb00f..00000000
--- a/web/b3desk/templates/meeting/modals.html
+++ /dev/null
@@ -1,124 +0,0 @@
-<!-- Inviter -->
-<div class="modal-template" id="share-{{ meeting.id }}">
-    <div class="modal-body">
-        <h2 class="fr-h4">Inviter les modérateurs</h2>
-        <p>En leur envoyant l’adresse ci-dessous :</p>
-        <div class="fr-grid-row fr-text--sm">
-          <div class="fr-col-xs-9 fr-col-sm-10">
-            <code id="meeting-{{ meeting.id }}-moderator-url">{{ meeting.moderator_signin_url }}</code>
-          </div>
-          <div class="fr-col">
-            <button type="button" class="btn-copy fr-btn fr-btn--primary" id="meeting-{{ meeting.id }}-moderator-copy" onclick="navigator.clipboard.writeText('{{ meeting.moderator_signin_url }}');" title="Copier le lien modérateur dans le presse-papiers">
-              <span class="ri-clipboard-line"></span>
-            </button>
-          </div>
-        </div>
-        <p>
-          <a class="fr-link" target="_blank" rel="noopener" href="{{ url_for("routes.join_meeting_as_role", meeting_id=meeting.id, role="moderator") }}">Rejoindre {{ the_meeting }} en tant que modérateur principal</a>
-        </p>
-
-        <h2 class="fr-h4">Inviter les participants</h2>
-        <p>En leur envoyant l’adresse ci-dessous :</p>
-        <div class="fr-grid-row fr-text--sm">
-          <div class="fr-col-xs-9 fr-col-sm-10">
-            <code id="meeting-{{ meeting.id }}-attendee-url">{{ meeting.attendee_signin_url }}</code>
-          </div>
-          <div class="fr-col">
-            <button type="button" class="btn-copy fr-btn fr-btn--primary" id="meeting-{{ meeting.id }}-attendee-copy" onclick="navigator.clipboard.writeText('{{ meeting.attendee_signin_url }}');" title="Copier le lien participant dans le presse-papiers">
-              <span class="ri-clipboard-line"></span>
-            </button>
-          </div>
-        </div>
-        <p>
-          <a class="fr-link" target="_blank" rel="noopener" href="{{ url_for("routes.join_meeting_as_role", meeting_id=meeting.id, role="attendee") }}">Rejoindre {{ the_meeting }} en tant que participant</a>
-        </p>
-
-        <h2 class="fr-h4">Inviter les participants authentifiés {% if config.OIDC_ATTENDEE_SERVICE_NAME %}via {{ config.OIDC_ATTENDEE_SERVICE_NAME }} {% endif %}</h2>
-        <p>En leur envoyant l’adresse ci-dessous :</p>
-        <div class="fr-grid-row fr-text--sm">
-          <div class="fr-col-xs-9 fr-col-sm-10">
-            <code id="meeting-{{ meeting.id }}-authenticated-attendee-url">{{ meeting.authenticated_attendee_signin_url }}</code>
-          </div>
-          <div class="fr-col">
-            <button type="button" class="btn-copy fr-btn fr-btn--primary" id="meeting-{{ meeting.id }}-authenticated-attendee-copy" onclick="navigator.clipboard.writeText('{{ meeting.authenticated_attendee_signin_url }}');" title="Copier le lien participant authentifié dans le presse-papiers">
-              <span class="ri-clipboard-line"></span>
-            </button>
-          </div>
-        </div>
-        <p>
-          <a class="fr-link" target="_blank" rel="noopener" href="{{ url_for("routes.join_meeting_as_authenticated", meeting_id=meeting.id) }}">Rejoindre {{ the_meeting }} en tant que participant authentifié</a>
-        </p>
-    </div>
-</div>
-<!-- Supprimer -->
-<div class="modal-template" id="delete-{{ meeting.id }}">
-  <div class="modal-body modal-body--center">
-    <p>Voulez-vous vraiment supprimer {{ the_meeting }} <em>{{ meeting.name }}</em> ?</p>
-    <div class="fr-highlight warning" id="meeting-delete-video-warning">
-      <p>
-        En supprimant {{ this_meeting }} vous supprimerez aussi les enregistrements qui lui sont rattachés.
-      </p>
-    </div>
-
-    <form action="{{ url_for("routes.delete_meeting") }}" method="POST" class="delete">
-      <button type="submit" class="fr-btn fr-btn--primary" >Supprimer</button>
-      <button type="reset" class="fr-btn fr-btn--secondary js-modal-close" >Annuler</button>
-      {% include 'meeting/id.html' %}
-      {% include 'meeting/csrf.html' %}
-    </form>
-  </div>
-</div>
-<!-- Enregistrements -->
-<div class="modal-template" id="recordings-{{ meeting.id }}">
-  <div class="modal-body modal-body--center">
-    {% if meeting.running %}
-      <p>{% trans the_meeting=the_meeting.capitalize %}{{ the_meeting }} est toujours en cours. Si un enregistrement est en cours, il ne sera encodé qu'après la fin {{ of_the_meeting }}.{% endtrans %}</p>
-    {% endif %}
-    <p>{% trans %}Après la fin d'{{ a_meeting }}, l'encodage de l'enregistrement peut prendre autant de temps que la durée {{ of_the_meeting }}.{% endtrans %}</p>
-    <p>{% trans %}Si aucun modérateur ne met fin {{ to_the_meeting }}, un délai supplémentaire de plusieurs minutes s'ajoute après que tous les utilisateurs l'aient quitté.{% endtrans %}</p>
-    {% for r in meeting.recordings %}
-    <h3>{{ r.name }} - {{ r.participants }}</h3>
-    <div class="fr-table fr-table--bordered fr-table--layout-fixed">
-      <table>
-        <thead>
-          <th>{% trans %}Images{% endtrans %}</th>
-          <th>{% trans %}Lien{% endtrans %}</th>
-        </thead>
-        <tbody>
-        {% for p in r.playbacks %}
-          {% for f in p %}
-          <tr>
-            <td>
-              <div class="fr-grid-row fr-grid-row--gutters">
-              {% for i in f.images %}
-              <div class="fr-col">
-                <img alt="{{ i.alt }}" title="{{ i.alt }}" src="{{ i.url }}"/>
-              </div>
-              {% endfor %}
-              </div>
-            </td>
-            <td style="vertical-align: middle">
-              <div class="fr-grid-row fr-grid-row--gutters">
-                <a class="fr-btn fr-btn--primary" target="_blank" rel="noopener" href="{{ f.url }}"><span class="fr-fi-play-line"></span></a>
-                <a href="#"
-                class="fr-btn fr-btn--primary js-modal js-modal-close"
-                title="{% trans meeting_name=meeting.name %}Supprimer video de {{ meeting_name }}{% endtrans %}"
-                aria-label="{% trans meeting_name=meeting.name %}Supprimer video de {{ meeting_name }}{% endtrans %}"
-                data-modal-content-id="delete-video-{{ r.recordID }}"
-                data-modal-title="{% trans %}Suppression d'enregistrement{% endtrans %}"
-                data-modal-close-text="x"
-                data-modal-close-title="Fermer la fenêtre modale"><span class="fr-fi-delete-line"></span></a>
-                <button type="button" class="btn-copy fr-btn fr-btn--primary" id="meeting-{{ meeting.id }}-moderator-copy" onclick="navigator.clipboard.writeText('{{ f.url }}');" title="{% trans %}Copier le lien de l'enregistrement dans le presse-papiers{% endtrans %}">
-                  <span class="ri-clipboard-line"></span>
-                </button>
-              </div>
-            </td>
-          </tr>
-          {% endfor %}
-        {% endfor %}
-        </tbody>
-      </table>
-    </div>
-    {% endfor %}
-  </div>
-</div>
diff --git a/web/b3desk/templates/meeting/modals/delete.html b/web/b3desk/templates/meeting/modals/delete.html
new file mode 100644
index 00000000..97d747cd
--- /dev/null
+++ b/web/b3desk/templates/meeting/modals/delete.html
@@ -0,0 +1,18 @@
+<!-- Supprimer -->
+<div class="modal-template" id="delete-{{ meeting.id }}">
+  <div class="modal-body modal-body--center">
+    <p>Voulez-vous vraiment supprimer {{ the_meeting }} <em>{{ meeting.name }}</em> ?</p>
+    <div class="fr-highlight warning" id="meeting-delete-video-warning">
+      <p>
+        En supprimant {{ this_meeting }} vous supprimerez aussi les enregistrements qui lui sont rattachés.
+      </p>
+    </div>
+
+    <form action="{{ url_for("routes.delete_meeting") }}" method="POST" class="delete">
+      <button type="submit" class="fr-btn fr-btn--primary" >Supprimer</button>
+      <button type="reset" class="fr-btn fr-btn--secondary js-modal-close" >Annuler</button>
+      {% include 'meeting/id.html' %}
+      {% include 'meeting/csrf.html' %}
+    </form>
+  </div>
+</div>
diff --git a/web/b3desk/templates/meeting/modals/invite.html b/web/b3desk/templates/meeting/modals/invite.html
new file mode 100644
index 00000000..14a16383
--- /dev/null
+++ b/web/b3desk/templates/meeting/modals/invite.html
@@ -0,0 +1,52 @@
+<!-- Inviter -->
+<div class="modal-template" id="share-{{ meeting.id }}">
+    <div class="modal-body">
+        <h2 class="fr-h4">Inviter les modérateurs</h2>
+        <p>En leur envoyant l’adresse ci-dessous :</p>
+        <div class="fr-grid-row fr-text--sm">
+          <div class="fr-col-xs-9 fr-col-sm-10">
+            <code id="meeting-{{ meeting.id }}-moderator-url">{{ meeting.moderator_signin_url }}</code>
+          </div>
+          <div class="fr-col">
+            <button type="button" class="btn-copy fr-btn fr-btn--primary" id="meeting-{{ meeting.id }}-moderator-copy" onclick="navigator.clipboard.writeText('{{ meeting.moderator_signin_url }}');" title="Copier le lien modérateur dans le presse-papiers">
+              <span class="ri-clipboard-line"></span>
+            </button>
+          </div>
+        </div>
+        <p>
+          <a class="fr-link" target="_blank" rel="noopener" href="{{ url_for("routes.join_meeting_as_role", meeting_id=meeting.id, role="moderator") }}">Rejoindre {{ the_meeting }} en tant que modérateur principal</a>
+        </p>
+
+        <h2 class="fr-h4">Inviter les participants</h2>
+        <p>En leur envoyant l’adresse ci-dessous :</p>
+        <div class="fr-grid-row fr-text--sm">
+          <div class="fr-col-xs-9 fr-col-sm-10">
+            <code id="meeting-{{ meeting.id }}-attendee-url">{{ meeting.attendee_signin_url }}</code>
+          </div>
+          <div class="fr-col">
+            <button type="button" class="btn-copy fr-btn fr-btn--primary" id="meeting-{{ meeting.id }}-attendee-copy" onclick="navigator.clipboard.writeText('{{ meeting.attendee_signin_url }}');" title="Copier le lien participant dans le presse-papiers">
+              <span class="ri-clipboard-line"></span>
+            </button>
+          </div>
+        </div>
+        <p>
+          <a class="fr-link" target="_blank" rel="noopener" href="{{ url_for("routes.join_meeting_as_role", meeting_id=meeting.id, role="attendee") }}">Rejoindre {{ the_meeting }} en tant que participant</a>
+        </p>
+
+        <h2 class="fr-h4">Inviter les participants authentifiés {% if config.OIDC_ATTENDEE_SERVICE_NAME %}via {{ config.OIDC_ATTENDEE_SERVICE_NAME }} {% endif %}</h2>
+        <p>En leur envoyant l’adresse ci-dessous :</p>
+        <div class="fr-grid-row fr-text--sm">
+          <div class="fr-col-xs-9 fr-col-sm-10">
+            <code id="meeting-{{ meeting.id }}-authenticated-attendee-url">{{ meeting.authenticated_attendee_signin_url }}</code>
+          </div>
+          <div class="fr-col">
+            <button type="button" class="btn-copy fr-btn fr-btn--primary" id="meeting-{{ meeting.id }}-authenticated-attendee-copy" onclick="navigator.clipboard.writeText('{{ meeting.authenticated_attendee_signin_url }}');" title="Copier le lien participant authentifié dans le presse-papiers">
+              <span class="ri-clipboard-line"></span>
+            </button>
+          </div>
+        </div>
+        <p>
+          <a class="fr-link" target="_blank" rel="noopener" href="{{ url_for("routes.join_meeting_as_authenticated", meeting_id=meeting.id) }}">Rejoindre {{ the_meeting }} en tant que participant authentifié</a>
+        </p>
+    </div>
+</div>
diff --git a/web/b3desk/templates/meeting/modals/recordings.html b/web/b3desk/templates/meeting/modals/recordings.html
new file mode 100644
index 00000000..27fd282c
--- /dev/null
+++ b/web/b3desk/templates/meeting/modals/recordings.html
@@ -0,0 +1,54 @@
+<!-- Enregistrements -->
+<div class="modal-template" id="recordings-{{ meeting.id }}">
+  <div class="modal-body modal-body--center">
+    {% if meeting.running %}
+      <p>{% trans the_meeting=the_meeting.capitalize %}{{ the_meeting }} est toujours en cours. Si un enregistrement est en cours, il ne sera encodé qu'après la fin {{ of_the_meeting }}.{% endtrans %}</p>
+    {% endif %}
+    <p>{% trans %}Après la fin d'{{ a_meeting }}, l'encodage de l'enregistrement peut prendre autant de temps que la durée {{ of_the_meeting }}.{% endtrans %}</p>
+    <p>{% trans %}Si aucun modérateur ne met fin {{ to_the_meeting }}, un délai supplémentaire de plusieurs minutes s'ajoute après que tous les utilisateurs l'aient quitté.{% endtrans %}</p>
+    {% for r in meeting.recordings %}
+    <h3>{{ r.name }} - {{ r.participants }}</h3>
+    <div class="fr-table fr-table--bordered fr-table--layout-fixed">
+      <table>
+        <thead>
+          <th>{% trans %}Images{% endtrans %}</th>
+          <th>{% trans %}Lien{% endtrans %}</th>
+        </thead>
+        <tbody>
+        {% for p in r.playbacks %}
+          {% for f in p %}
+          <tr>
+            <td>
+              <div class="fr-grid-row fr-grid-row--gutters">
+              {% for i in f.images %}
+              <div class="fr-col">
+                <img alt="{{ i.alt }}" title="{{ i.alt }}" src="{{ i.url }}"/>
+              </div>
+              {% endfor %}
+              </div>
+            </td>
+            <td style="vertical-align: middle">
+              <div class="fr-grid-row fr-grid-row--gutters">
+                <a class="fr-btn fr-btn--primary" target="_blank" rel="noopener" href="{{ f.url }}"><span class="fr-fi-play-line"></span></a>
+                <a href="#"
+                class="fr-btn fr-btn--primary js-modal js-modal-close"
+                title="{% trans meeting_name=meeting.name %}Supprimer video de {{ meeting_name }}{% endtrans %}"
+                aria-label="{% trans meeting_name=meeting.name %}Supprimer video de {{ meeting_name }}{% endtrans %}"
+                data-modal-content-id="delete-video-{{ r.recordID }}"
+                data-modal-title="{% trans %}Suppression d'enregistrement{% endtrans %}"
+                data-modal-close-text="x"
+                data-modal-close-title="Fermer la fenêtre modale"><span class="fr-fi-delete-line"></span></a>
+                <button type="button" class="btn-copy fr-btn fr-btn--primary" id="meeting-{{ meeting.id }}-moderator-copy" onclick="navigator.clipboard.writeText('{{ f.url }}');" title="{% trans %}Copier le lien de l'enregistrement dans le presse-papiers{% endtrans %}">
+                  <span class="ri-clipboard-line"></span>
+                </button>
+              </div>
+            </td>
+          </tr>
+          {% endfor %}
+        {% endfor %}
+        </tbody>
+      </table>
+    </div>
+    {% endfor %}
+  </div>
+</div>