simplification affichage détails

FossilOrigin-Name: e47b52d7676b4829e1dea5de3acf64bb3fd7da6c9b3dccef76390856d985f461
This commit is contained in:
engel 2022-03-30 07:52:19 +00:00
parent 328789b923
commit 1d6225ae6d
3 changed files with 36 additions and 59 deletions

View File

@ -4,14 +4,10 @@
<h2>Versements par activité et tarif</h2> <h2>Versements par activité et tarif</h2>
<fieldset class="noprint"> <fieldset class="noprint">
{* <div class="noprint"> *}
<input type="checkbox" class="check_global" id="check_global" onclick="cocherDecocherTout(check_global)" /> <input type="checkbox" class="check_global" id="check_global" onclick="cocherDecocherTout(check_global)" />
<label for="check_global">Cliquer pour cocher toutes les lignes</label> <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> </fieldset>
<form method="post" id="versements_activites" action="generer_activites.php"> <form method="post" id="versements_activites" action="generer_activites.php">
@ -55,7 +51,7 @@
{afficher_versement versement=$versement rang=$i} {afficher_versement versement=$versement rang=$i}
{/if} {/if}
{/if} {/if}
{/foreach} {* Itération sur les versements *} {/foreach} {* Itération sur les versements *}
</fieldset> {* fin versements d'une personne *} </fieldset> {* fin versements d'une personne *}
</details> {* fin versements d'une personne *} </details> {* fin versements d'une personne *}
</details> {* fin tarif *} </details> {* fin tarif *}
@ -63,35 +59,8 @@
<input type="submit" value="Générer les reçus" onclick="return verifierChoix(this.form)"> <input type="submit" value="Générer les reçus" onclick="return verifierChoix(this.form)">
</form> </form>
{* scripts pour cases à cocher *} {* scripts divers *}
<script src="script.js"></script> <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 --> <!-- footer -->
{include file="admin/_foot.tpl"} {include file="admin/_foot.tpl"}

View File

@ -4,13 +4,10 @@
<h2>Versements par personne</h2> <h2>Versements par personne</h2>
<fieldset class="noprint"> <fieldset class="noprint">
{* <div class="noprint"> *}
<input type="checkbox" class="check_global" id="check_global" <input type="checkbox" class="check_global" id="check_global"
onclick="cocherDecocherToutesLesPersonnes(check_global)" /> onclick="cocherDecocherToutesLesPersonnes(check_global)" />
<label for="check_global">Cliquer pour cocher toutes les lignes</label> <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> </fieldset>
<form method="post" id="versements_personnes" action="generer_personnes.php"> <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)"> <input type="submit" value="Générer les reçus" onclick="return verifierChoix(this.form)">
</form> </form>
{* scripts pour cases à cocher *} {* scripts divers *}
<script src="script.js"></script> <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 --> <!-- footer -->
{include file="admin/_foot.tpl"} {include file="admin/_foot.tpl"}

View File

@ -49,9 +49,9 @@ function cocherDecocherLesPersonnes(idCaseGlobale, lesPersonnes)
* *
* @param id de la case qui a été cochée * @param id de la case qui a été cochée
* @param id de l'élément afficher le total * @param id de l'élément 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 // chercher le fieldset des versements
var fieldset = idCase.closest("details").querySelector("fieldset"); var fieldset = idCase.closest("details").querySelector("fieldset");
@ -64,7 +64,7 @@ function cocherDecocherPersonne(idCase, idTotal, changerMessage = true)
var listeMontants = fieldset.querySelectorAll("span.montant"); var listeMontants = fieldset.querySelectorAll("span.montant");
calculerTotal(listeCases, listeMontants, idTotal); calculerTotal(listeCases, listeMontants, idTotal);
// changer le message // 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"); alert("Erreur : il faut sélectionner un taux de réduction");
return false; 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', '↑');
}
}
}