simplification affichage détails

FossilOrigin-Name: e47b52d7676b4829e1dea5de3acf64bb3fd7da6c9b3dccef76390856d985f461

templates/versements_activites.tpl

@@ -4,14 +4,10 @@
 <h2>Versements par activité et tarif</h2>
 
 <fieldset class="noprint">
-    {* <div class="noprint"> *}
         <input type="checkbox" class="check_global" id="check_global" onclick="cocherDecocherTout(check_global)" />
         <label for="check_global">Cliquer pour cocher toutes les lignes</label>
-        <button type="button" data-icon="↑" class="icn-btn" id="close_details_activite">Replier toutes les activités</button>
+        <button type="button" data-icon="↑" class="icn-btn" id="close_details_activite" onclick="montrerMasquerDetails(this.id, 'details.activite', 'toutes les activités')">Replier toutes les activités</button>
-            <button type="button" data-icon="↓" class="icn-btn" id="open_details_activite">Déplier toutes les activités</button>
+        <button type="button" data-icon="↑" class="icn-btn" id="close_details_personne" onclick="montrerMasquerDetails(this.id, 'details.personne', 'toutes les personnes')">Replier toutes les personnes</button>
-        <button type="button" data-icon="↑" class="icn-btn" id="close_details_personne">Replier toutes les personnes</button>
-        <button type="button" data-icon="↓" class="icn-btn" id="open_details_personne">Déplier toutes les personnes</button>
-    {* </div> *}
 </fieldset>
 
 <form method="post" id="versements_activites" action="generer_activites.php">
@@ -55,7 +51,7 @@
                 {afficher_versement versement=$versement rang=$i}
             {/if}
         {/if}
-    {/foreach} {* Itération sur les versements *}
+    {/foreach}  {* Itération sur les versements *}
     </fieldset> {* fin versements d'une personne *}
     </details>  {* fin versements d'une personne *}
     </details>  {* fin tarif *}
@@ -63,35 +59,8 @@
     <input type="submit" value="Générer les reçus" onclick="return verifierChoix(this.form)">
 </form>
 
-{* scripts pour cases à cocher *}
+{* scripts divers *}
 <script src="script.js"></script>
 
-{literal}
-    <script type="text/javascript">
-        // ouvrir/fermer les détails des activités
-        document.querySelector('#open_details_activite').onclick = () => {
-            document.querySelectorAll('details.activite').forEach((e) => {
-                e.setAttribute('open', 'open');
-            });
-        };
-        document.querySelector('#close_details_activite').onclick = () => {
-            document.querySelectorAll('details.activite').forEach((e) => {
-                e.removeAttribute('open');
-            });
-        };
-        // ouvrir/fermer les détails des personnes
-        document.querySelector('#open_details_personne').onclick = () => {
-            document.querySelectorAll('details.personne').forEach((e) => {
-                e.setAttribute('open', 'open');
-            });
-        };
-        document.querySelector('#close_details_personne').onclick = () => {
-            document.querySelectorAll('details.personne').forEach((e) => {
-                e.removeAttribute('open');
-            });
-        };
-    </script>
-{/literal}
-
 <!-- footer -->
 {include file="admin/_foot.tpl"}

templates/versements_personnes.tpl

@@ -4,13 +4,10 @@
 <h2>Versements par personne</h2>
 
 <fieldset class="noprint">
-    {* <div class="noprint"> *}
         <input type="checkbox" class="check_global" id="check_global"
             onclick="cocherDecocherToutesLesPersonnes(check_global)" />
         <label for="check_global">Cliquer pour cocher toutes les lignes</label>
-        <button type="button" data-icon="↑" class="icn-btn" id="close_details_personne">Replier toutes les personnes</button>
+        <button type="button" data-icon="↑" class="icn-btn" id="close_details_personne" onclick="montrerMasquerDetails(this.id, 'details.personne', 'toutes les personnes')">Replier toutes les personnes</button>
-        <button type="button" data-icon="↓" class="icn-btn" id="open_details_personne">Déplier toutes les personnes</button>
-    {* </div> *}
 </fieldset>
 
 <form method="post" id="versements_personnes" action="generer_personnes.php">
@@ -44,24 +41,8 @@
     <input type="submit" value="Générer les reçus" onclick="return verifierChoix(this.form)">
 </form>
 
-{* scripts pour cases à cocher *}
+{* scripts divers *}
 <script src="script.js"></script>
 
-{literal}
-    <script type="text/javascript">
-        // ouvrir/fermer les détails
-        document.querySelector('#open_details_personne').onclick = () => {
-            document.querySelectorAll('details.personne').forEach((e) => {
-                e.setAttribute('open', 'open');
-            });
-        };
-        document.querySelector('#close_details_personne').onclick = () => {
-            document.querySelectorAll('details.personne').forEach((e) => {
-                e.removeAttribute('open');
-            });
-        };
-    </script>
-{/literal}
-
 <!-- footer -->
 {include file="admin/_foot.tpl"}

www/admin/script.js

@@ -49,9 +49,9 @@ function cocherDecocherLesPersonnes(idCaseGlobale, lesPersonnes)
  *
  * @param id de la case qui a été cochée
  * @param id de l'élément où afficher le total
- * @param changerMessage : vrai, s'il faut changer le message de la personne
+ * @param changer : vrai, s'il faut changer le message de la personne
  */
-function cocherDecocherPersonne(idCase, idTotal, changerMessage = true)
+function cocherDecocherPersonne(idCase, idTotal, changer = true)
 {
     // chercher le fieldset des versements
     var fieldset = idCase.closest("details").querySelector("fieldset");
@@ -64,7 +64,7 @@ function cocherDecocherPersonne(idCase, idTotal, changerMessage = true)
     var listeMontants = fieldset.querySelectorAll("span.montant");
     calculerTotal(listeCases, listeMontants, idTotal);
     // changer le message
-    if (changerMessage) { changerMessage(idCase.nextElementSibling, idCase); }
+    if (changer) { changerMessage(idCase.nextElementSibling, idCase); }
 }
 
 /**
@@ -195,3 +195,30 @@ function verifierRadio(idElem)
     alert("Erreur : il faut sélectionner un taux de réduction");
     return false;    
 }
+
+function montrerMasquerDetails(idElem, classe, texte)
+{
+    var lesDetails = document.querySelectorAll(classe);
+    if (lesDetails.length > 0)
+    {
+        var leBouton = document.getElementById(idElem);
+        if (leBouton.textContent.startsWith('Replier'))
+        {
+            // masquer
+            lesDetails.forEach((e) => {
+                e.removeAttribute('open');
+            });
+            leBouton.textContent = "Déplier " + texte;
+            leBouton.setAttribute('data-icon', '↓');
+        }
+        else
+        {
+            // montrer
+            lesDetails.forEach((e) => {
+                e.setAttribute('open', 'open');
+            });
+            leBouton.textContent = "Replier " + texte;
+            leBouton.setAttribute('data-icon', '↑');
+        }
+    }
+}