modernisation code ; simplification affichage

FossilOrigin-Name: e1b162c4d12b471d8f71c44e29fcce22c466ce789434c6780d2439bb14f3b761

garradin_plugin.ini

@@ -2,7 +2,7 @@ nom="Reçus fiscaux"
 description="Génération de reçus fiscaux pour les dons des membres"
 auteur="jce"
 url="https://git.roflcopter.fr/lesanges/recus-fiscaux-garradin"
-version="0.6"
+version="0.6.4"
 menu=1
 config=1
 min_version="1.1"

templates/versements_personnes.tpl

@@ -7,8 +7,11 @@
     <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" 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"
-    <input type="submit" value="Générer les reçus" form="versements_personnes" onclick="return verifierChoix(this.form)">
+        onclick="montrerMasquerDetails(this.id, 'details.personne', 'toutes les personnes')">Replier toutes les
+        personnes</button>
+    <input type="submit" value="Générer les reçus" form="versements_personnes"
+        onclick="return verifierChoix(this.form)">
 </fieldset>
 
 <form method="post" id="versements_personnes" action="generer_recus.php?type=personne">

www/admin/action.php

@@ -71,14 +71,8 @@ $tpl->register_function('afficher_debut_personne', function ($params)
 
     $personne = $_SESSION['membresDonateurs'][$idUser];
     $out = '<details class="personne" open="open">
-        <summary class="personne">';
+        <summary class="personne">
-    $out .= sprintf('<h4 class="personne">Versements de %s : <span class="total" id="total_%s">0,00 €</span></h4>',
+        <h4 class="personne">';
-                   $personne->nomPrenom,
-                   $idVersement);
-    $out .= '</summary>';
-    $out .= sprintf('
-            <fieldset class="versements" id="versements_%s">',
-                    $idVersement);
     $out .= sprintf('
             <input type="checkbox" id="check_%s"',
                     $idVersement);
@@ -86,10 +80,15 @@ $tpl->register_function('afficher_debut_personne', function ($params)
                     $idVersement,
                     $idVersement);
     $out .= sprintf('
-            <label for="check_%s">Cliquer pour cocher toutes les lignes</label>',
+            <label for="check_%s"></label>',
+                    $idVersement);
+    $out .= sprintf('%s : <span class="total" id="total_%s">0,00 €</span>',
+                   $personne->nomPrenom,
+                   $idVersement);
+    $out .= '</h4></summary>';
+    $out .= sprintf('
+            <fieldset class="versements" id="versements_%s">',
                     $idVersement);
-    $out .= '<br />
-             <hr>';
     return $out;
 });
 

www/admin/script.js

@@ -1,16 +1,18 @@
+"use strict";
+
 /**
  * Fonction appelée quand on (dé)coche la case de sélection globale
  * (dé)sélectionner toutes les cases à cocher de toutes les activités
- * @param id de la case globale
+ * @param {HTMLInputElement} idCaseGlobale id de la case globale
  */
 function cocherDecocherTout(idCaseGlobale)
 {
     // itérer sur la liste des éléments détails : 1 par couple <activité, tarif>
-    var lesDetails = document.querySelectorAll("details.activite");
+    let lesDetails = document.querySelectorAll("details.activite");
-    for (var i = 0; i < lesDetails.length; ++i)
+    for (let i = 0; i < lesDetails.length; ++i)
     {
         // itérer sur les personnes
-        var lesPersonnes = lesDetails[i].querySelectorAll("h4.personne");
+        let lesPersonnes = lesDetails[i].querySelectorAll("h4.personne");
         cocherDecocherLesPersonnes(idCaseGlobale, lesPersonnes);
     }
     // changer le message
@@ -19,26 +21,30 @@ function cocherDecocherTout(idCaseGlobale)
 
 /**
  * idem dans le cas des versements des personnes
+ * @param {HTMLInputElement} idCaseGlobale id de la case globale
  */
 function cocherDecocherToutesLesPersonnes(idCaseGlobale)
 {
-    var lesPersonnes = document.querySelectorAll("h4.personne");
+    let lesPersonnes = document.querySelectorAll("h4.personne");
     cocherDecocherLesPersonnes(idCaseGlobale, lesPersonnes);
     changerMessage(idCaseGlobale.nextElementSibling, idCaseGlobale);
 }
 
+/**
+ * @param {HTMLInputElement} idCaseGlobale
+ * @param {NodeListOf<Element>} lesPersonnes
+ */
 function cocherDecocherLesPersonnes(idCaseGlobale, lesPersonnes)
 {
-    for (var j = 0; j < lesPersonnes.length; ++j)
+    for (let j = 0; j < lesPersonnes.length; ++j)
     {
         // trouver l'élément total de la personne
-        var idTotal = lesPersonnes[j].querySelector("span");
+        let idTotal = lesPersonnes[j].querySelector("span");
         // puis la case à cocher
-        var fieldset = lesPersonnes[j].closest("details").querySelector("fieldset");
+        let idCase = lesPersonnes[j].closest("summary").querySelector("input");
-        var idCase = fieldset.querySelector("input");
         idCase.checked = idCaseGlobale.checked;
         // puis traiter toutes les cases de la personne
-        cocherDecocherPersonne(idCase, idTotal, false);
+        cocherDecocherPersonne(idCase, idTotal);
     }
 }
 
@@ -46,58 +52,54 @@ function cocherDecocherLesPersonnes(idCaseGlobale, lesPersonnes)
  * Fonction appelée quand on (dé)coche la case globale d'une personne
  * - (dé)sélectionner toutes les cases à cocher
  * - faire le total des cases cochées et l'afficher
- *
+ * @param {HTMLInputElement} idCase id de la case qui a été cochée
- * @param id de la case qui a été cochée
+ * @param {HTMLSpanElement} idTotal id de l'élément où afficher le total
- * @param id de l'élément où afficher le total
- * @param changer : vrai, s'il faut changer le message de la personne
  */
-function cocherDecocherPersonne(idCase, idTotal, changer = true)
+function cocherDecocherPersonne(idCase, idTotal)
 {
     // chercher le fieldset des versements
-    var fieldset = idCase.closest("details").querySelector("fieldset");
+    let fieldset = idCase.closest("details").querySelector("fieldset");
-    var listeCases = fieldset.querySelectorAll("input[type=checkbox]");
+    let listeCases = fieldset.querySelectorAll("input[type=checkbox]");
-    for (var i = 0; i < listeCases.length; ++i)
+    for (let i = 0; i < listeCases.length; ++i)
     {
         listeCases[i].checked = idCase.checked;
     }
     // calculer et afficher le total
-    var listeMontants = fieldset.querySelectorAll("span.montant");
+    let listeMontants = fieldset.querySelectorAll("span.montant");
     calculerTotal(listeCases, listeMontants, idTotal);
-    // changer le message
-    if (changer) { changerMessage(idCase.nextElementSibling, idCase); }
 }
 
 /**
  * Fonction appelée quand on (dé)coche la case d'un versement
  * Faire le total des cases cochées et l'afficher
  *
- * @param id de la case qui a été cochée
+ * @param {HTMLInputElement} idCase id de la case qui a été cochée
- * @param id de l'élément où afficher le total
+ * @param {HTMLSpanElement} idTotal id de l'élément où afficher le total
  */
 function cocherDecocherVersement(idCase, idTotal)
 {
-    var fieldset = idCase.closest("fieldset");
+    let fieldset = idCase.closest("fieldset");
-    var listeCases = fieldset.querySelectorAll("input[type=checkbox]");
+    let listeCases = fieldset.querySelectorAll("input[type=checkbox]");
-    var listeMontants = fieldset.querySelectorAll("span.montant");
+    let listeMontants = fieldset.querySelectorAll("span.montant");
     calculerTotal(listeCases, listeMontants, idTotal);
 }
 
 /**
  * Faire le total des cases cochées et l'afficher
- * @param listes des cases
+ * @param {NodeListOf<Element>} listeCases liste des cases
- * @param listes des montants associés
+ * @param {NodeListOf<Element>} listeMontants liste des montants associés
- * @param id de l'élément où afficher le total
+ * @param {HTMLSpanElement} idTotal id de l'élément où afficher le total
  */
 function calculerTotal(listeCases, listeMontants, idTotal)
 {
-    var total = 0;
+    let total = 0;
-    for (var i = 1; i < listeCases.length; ++i)
+    for (let i = 0; i < listeCases.length; ++i)
     {
         if (listeCases[i].checked) {
-            total += parseFloat(listeMontants[i-1].textContent.replace(/\s/g, ""));
+            total += parseFloat(listeMontants[i].textContent.replace(/\s/g, ""));
         }
     }
-    // "afficher" le total
+    // afficher le total
     idTotal.innerHTML =
         total.toLocaleString('fr-FR', {style: 'currency', currency: 'EUR',
                                        minimumFractionDigits: 2});
@@ -105,6 +107,8 @@ function calculerTotal(listeCases, listeMontants, idTotal)
 
 /**
  * changer le message en fonction de l'état coché de la case
+ * @param {Element} message
+ * @param {HTMLInputElement} idCase
  */
 function changerMessage(message, idCase)
 {
@@ -118,13 +122,13 @@ function changerMessage(message, idCase)
 /**
  * fonction appelée lors de la validation du formulaire
  * @return vrai si au moins un choix a été fait
- * @param : formulaire
+ * @param {HTMLFormElement} formulaire
  */
 function verifierChoix(formulaire)
 {
-    var listeCheck = formulaire.getElementsByTagName("input");
+    let listeCheck = formulaire.getElementsByTagName("input");
-    var ok = false;
+    let ok = false;
-    for (var i = 1; i < listeCheck.length; ++i)
+    for (let i = 1; i < listeCheck.length; ++i)
     {
 	if (listeCheck[i].checked)
 	{
@@ -139,39 +143,55 @@ function verifierChoix(formulaire)
     return ok;
 }
 
+/**
+ * afficher et masquer des portions de formulaire selon l'action
+ * @param {HTMLFormElement} formulaire
+ * @param {string} action après envoi du formulaire
+ * @param {any} nomClasse1 classe des éléments à afficher
+ * @param {any} nomClasse2 classe des éléments à masquer
+ */
 function choixMethodeGeneration(formulaire, action, nomClasse1, nomClasse2)
 {
     formulaire.setAttribute('action', 'action.php?action=' + action);
     afficherMasquer(formulaire, nomClasse1, nomClasse2);
 }
 
+/**
+ * afficher et masquer des portions de formulaire
+ * @param {HTMLFormElement} formulaire
+ * @param {any} nomClasse1 classe des éléments à afficher
+ * @param {any} nomClasse2 classe des éléments à masquer
+ */
 function afficherMasquer(formulaire, nomClasse1, nomClasse2)
 {
-    for (var elem of formulaire.querySelectorAll(nomClasse1)) {
+    for (let elem of formulaire.querySelectorAll(nomClasse1)) {
         elem.classList.remove('hidden');
     }
-    for (var elem of formulaire.querySelectorAll(nomClasse2)) {
+    for (let elem of formulaire.querySelectorAll(nomClasse2)) {
         elem.classList.add('hidden');
     }
 }
 
-// vérifier 
+/**
-// - qu'au moins une activité/tarif est sélectionnée
+ * vérifier
-// - qu'un radio de chaque activité/tarif sélectionné a été sélectionné :)
+ * - qu'au moins une activité/tarif est sélectionnée
+ * - qu'un radio de chaque activité/tarif sélectionné a été sélectionné :)
+ * @param {string} idElem id du conteneur des cases à vérifier
+ */
 function verifierCases(idElem)
 {
-    var div = document.getElementById(idElem);
+    let div = document.getElementById(idElem);
-    var nbChoix = 0;
+    let nbChoix = 0;
     // parcourir les cases à cocher
-    for (var idCase of div.querySelectorAll("input[type=checkbox]"))
+    for (let idCase of div.querySelectorAll("input[type=checkbox]"))
     {
         if (idCase.checked) {
             ++nbChoix;
             // vérifier qu'un radio de la même ligne est sélectionné
-            var ligneCorrecte = false;
+            let ligneCorrecte = false;
             // trouver la ligne englobante
-            var ligne = idCase.closest("tr");
+            let ligne = idCase.closest("tr");
-            for (var idRadio of ligne.querySelectorAll('input[type=radio]'))
+            for (let idRadio of ligne.querySelectorAll('input[type=radio]'))
             {
                 if (idRadio.checked) { ligneCorrecte = true; break; }
             }
@@ -187,11 +207,14 @@ function verifierCases(idElem)
     return nbChoix != 0;
 }
 
-// vérifier qu'un radio a été sélectionné dans la div paramètre
+/**
+ * vérifier qu'un radio a été sélectionné dans la div paramètre
+ * @param {string} idElem id du conteneur des radios à vérifier
+ */
 function verifierRadio(idElem)
 {
-    var div = document.getElementById(idElem);
+    let div = document.getElementById(idElem);
-    for (var idRadio of div.querySelectorAll('input[type=radio]'))
+    for (let idRadio of div.querySelectorAll('input[type=radio]'))
     {
         if (idRadio.checked) { return true; }
     }
@@ -199,12 +222,18 @@ function verifierRadio(idElem)
     return false;    
 }
 
+/**
+ * afficher/masquer les détails
+ * @param {string} idElem bouton de masquage/affichage
+ * @param {string} classe des détails à afficher/masquer
+ * @param {string} texte du bouton
+ */
 function montrerMasquerDetails(idElem, classe, texte)
 {
-    var lesDetails = document.querySelectorAll(classe);
+    let lesDetails = document.querySelectorAll(classe);
     if (lesDetails.length > 0)
     {
-        var leBouton = document.getElementById(idElem);
+        let leBouton = document.getElementById(idElem);
         if (leBouton.textContent.startsWith('Replier'))
         {
             // masquer

www/admin/style.css

@@ -32,7 +32,8 @@ summary.personne
     padding-top : 0;
     padding-bottom : 0;
 }
-h3.personne, h4.personne {
+h3.personne, h4.personne
+{
     font-weight : normal;
     background: rgba(var(--gSecondColor), 0.25);
 }