aem_moniteurs/aem_gestion/templates/eleves/eleve_lettrer.pt

<metal:block use-macro="main_template">
<div metal:fill-slot="content">

<style>

.form-group input[type="checkbox"] + .btn-group > label span {
    width: 20px;
}

.form-group input[type="checkbox"] + .btn-group > label span:first-child {
    display: none;
}
.form-group input[type="checkbox"] + .btn-group > label span:last-child {
    display: inline-block;   
}

.form-group input[type="checkbox"]:checked + .btn-group > label span:first-child {
    display: inline-block;
}
.form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {
    display: none;   
}
</style>

    <div class="row">
		<form id="lettrer-form" role="form" action="${url}" method="post">
            <div class="form-group">
                <div class="col-md-offset-4 col-md-5">
                    
                    <button class="btn btn-danger" type="submit"  id="btn-lettrer" name="form.lettrer" disabled="disabled"> 
                    <span class="glyphicon"></span>&nbsp;Lettrer</button>
                    <button class="btn btn-default" class="btn btn-default"  type="submit" disabled="disabled" id="btn-delettrer" name="form.delettrer" >
                        <span class=""></span> Delettrer</button>
                    <button class="btn btn-default"  type="submit" id="btn-auto-lettrer" name="form.auto-lettrer">
                        <span class="glyphicon"></span> Lettrer auto</button>
                    <input type="checkbox" class="hidden" name="fancy-checkbox-default" id="fancy-checkbox-default" autocomplete="off" />
                    <div class="btn-group">
                        <label for="fancy-checkbox-default" class="btn btn-default">
                            <span class="glyphicon glyphicon-ok"></span>
                            <span> </span>
                        </label>
                        <label for="fancy-checkbox-default" class="btn btn-default active">
                            Afficher tout
                        </label>
                    </div>

                </div>
            </div>
            <br/>
            <br/>
            <div class="form-group">
                <label class="control-label col-md-6" id="solde-select">Solde selection : 0.0 €</label>
            </div>
            <br/>
            <br/>
			<div class="form-group" id="table-form-lettrer">
                 <div class="col-md-12">
                    <table id="table-lettrer" class="table table-striped table-bordered">
                        <thead>
                            <th>
                                <th>Date</th>
                                <th>Designation</th>
                                <th class="text-center">Montant du</th>
                                <th>Versement</th>
                                <th>Mode</th>
                                <th class="text-center">Date Val</th>
                                <th class="text-center">Mt Valeur</th>
                                <th class="text-center">Lettre</th>
                            </th>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                 </div>
                <br />
                <br />
            </div>
            <input type="hidden" name="solde" id="solde" value="0" />
            <div class="form-group">
            <div class="col-md-5">
                <a class="btn btn-default" tal:condition="eleve.CD_CLI != 0" href="${request.application_url}/fiche_eleve/${eleve.CD_CLI}#compte">
                    <span class="glyphicon glyphicon-chevron-left"></span> Annuler</a>
            </div>
        </div>
		</form>
	</div><!-- row -->
	<br />
    <script>
    $(document).ready(function() {
        var dataCompte = ${dt_compte};
        var solde = parseFloat(0.0 );
        var nbselection = 0 ;
        var filterdataCompte = dataCompte.filter(d => d[8] === 0);

        function parseValue(elementvalue){
            //parse string
            var stringparse = elementvalue.replaceAll(',','.').replaceAll('€','').replaceAll( /\s+/g, '')
            var value = parseFloat(stringparse).toFixed(2)
            return value ;
        }


        $('#table-form-lettrer').on('change', ':checkbox', function () {
            var obj = JSON.stringify($(this).val(), null, 4)
            var stringobj = JSON.parse(obj).replaceAll("'",'"')
            var jsonobj = JSON.parse(stringobj)
            if(jsonobj[5] === null){
                var montant = -parseFloat(parseValue(jsonobj[3]))
            }
            else{
                var montant =parseFloat(parseValue(jsonobj[4]))
            }
            if ($(this).is(':checked')) {
                solde = solde + montant ;
                nbselection += 1 ;
            } else {
                solde = solde - montant ;
                nbselection -= 1 ;
            }
            $('#solde').val(solde)
            $('#solde-select').text('Solde selection : '+solde.toFixed(2)+' €')
            if(parseFloat(solde) === 0 && nbselection > 0 ){
                $('#btn-lettrer').prop("disabled", false);
            }
            else{
                $('#btn-lettrer').prop("disabled", true);
            }
            if(nbselection === 1 && jsonobj[8] != 0){
                $('#btn-delettrer').prop("disabled", false);
            }
            else{
                $('#btn-delettrer').prop("disabled", true);
            }
        });

        var otable = $('#table-lettrer').DataTable({
            data: filterdataCompte,
            pageLength: 100,
            bFilter:false,
            bSort : true,
            language: {
                url: 'https://cdn.datatables.net/plug-ins/1.10.16/i18n/French.json'
            },
            'columnDefs': [
                {
                    'targets': 0,
                    'render': function(data, type, row, meta){
                        if(type === 'display'){
                            var elvalue = JSON.stringify({ ...row }).replaceAll('"',"'");
                            data = '<div class="checkbox"><input type="checkbox" name="selected[]"  value="'+elvalue+'" class="dt-checkboxes"><label></label></div>';
                        }
                        return data;
                    },
                }
            ],
            'select': 'multi',
            'order': [[1, 'asc']],
        })

         $('#fancy-checkbox-default').on('change',function(){
            if(!this.checked){
                var filterdataCompte = dataCompte.filter(d => d[8] === 0);
                otable.clear()
                otable.rows.add(filterdataCompte).draw()
                $('#btn-lettrer').show();
            }
            else{
                otable.clear()
                otable.rows.add(dataCompte).draw();
                $('#btn-lettrer').hide();
            }
            nbselection = 0 ;
        })

    });
    </script>
</div>
</metal:block>