CMS-CSE/core/views/pages/cms.compte.php

<?php
$jsonTarget = "/json.php?file=banque-lignes-" . core::getGet("id");
if (debug::isFile("debug")) {
    debug::log(debug::getBadge($jsonTarget, "OUVRIR LE JSON : " . $jsonTarget), "JSON chargé en arrière plan");
}

$banque = banque::getInitialCompte(core::getGet("id"));
$etatCompte = banque::getEtatCompte(core::getGet("id"));

?>
<header class="d-flex flex-column flex-md-row align-items-md-center p-3 bg-light ">
    <h2 class="bd-title" id="content">
        <span>Etat des comptes</span>
    </h2>
    <?php
        if (access::ifAccesss("compte-upload")) { ?>
        <div class="fix-container-button-nav">
            <?php if($banque["import"] == "manuel"){ ?>
                <a href="/?p=compte-insert&add=<?php echo core::getGet("id") ?>"><button type="submit" class="btn btn-outline-success btn-sm"><?php icon::getFont(["icon" => "bi bi-file-earmark-plus"]) ?> Ajouter une ligne</button></a>
            <?php } else { ?>
                <a href="/?p=compte-upload&add=<?php echo core::getGet("id") ?>"><button type="submit" class="btn btn-outline-success btn-sm"><?php icon::getFont(["icon" => "bi bi-file-earmark-plus"]) ?> Charger un CSV</button></a>
            <?php } ?>
        </div>
    <?php } ?>
</header>
<?php

echo core::filAriane(array(
    "current" => $banque["label"] . ((!empty($banque["compte"])) ? " [" . $banque["compte"] . "]" : NULL),
    "arbo" => array(
        "Comptes bancaires" => NULL,
        $banque["label"] . ((!empty($banque["compte"])) ? " [" . $banque["compte"] . "]" : NULL) => "/compte-" . core::getGet("id") . ".html"
    )
));

$lastRecord = banque::lastRecord(core::getGet("id"));
if(!empty($lastRecord)){
    $callout = [
        "type" => "info",
        "h4" => "Note",
        "p" => "La dernier import des données du compte a été réalisée le <span class=\"fw-bold\">" . core::convertDate($lastRecord) . "</span> et à cette même date le solde était de <span class=\"fw-bold\">" . banque::getEuro($etatCompte["solde"]) . "</span>",
    ];
    callout::print($callout);
}
?>
<div class="card">
    <div class="card-body">
        <h5 class="card-title">Rechercher une transaction</h5>
        <div class="d-flex align-items-center mb-3">
            <label for="minPrice" class="me-2">Entre</label>
            <input type="number" id="minPrice" class="form-control me-3" style="width: 150px;">

            <label for="maxPrice" class="me-2">et</label>
            <input type="number" id="maxPrice" class="form-control me-3" style="width: 150px;">

            <button id="filterButton" class="btn btn-primary ms-3">Filtrer</button>
            <button id="resetButton" class="btn btn-secondary ms-3">Réinitialiser</button>
        </div>
    </div>
</div>

<div>
    <table
        id="table"
        class="table-striped table-hover table-sm"
        data-toggle="table"
        data-show-footer="true"
        data-buttons-align="left"
        data-filter-control="true"
        data-flat="true"
        data-sort-name="num"
        data-sort-order="desc"
        data-show-export="true"
        data-pagination="true"
        data-side-pagination="client"
        data-page-size="25"
        data-page-list="[25, 50, 100, 250, all]"
        data-url="<?php echo $jsonTarget ?>">
        <thead>
            <tr>
                <th data-sortable="true" data-field="num" data-width="20">#</th>
                <th data-sortable="true" data-field="date" data-filter-control="input" data-width="160">Date</th>
                <th data-sortable="true" data-field="label" data-filter-control="input">Label</th>
                <th data-sortable="true" data-formatter="dataFormatter" data-field="debit" data-filter-control="input" data-width="150" data-footer-formatter="debitFormatter" data-filter-control-placeholder="Ex. 1.250,00 €">Débit</th>
                <th data-sortable="true" data-formatter="dataFormatter" data-field="credit" data-filter-control="input" data-width="150" data-footer-formatter="creditFormatter" data-filter-control-placeholder="Ex. 1.250,00 €">Crédit</th>
                <th data-sortable="true" data-formatter="dataFormatter" data-field="solde" data-filter-control="input" data-width="150" data-filter-control-placeholder="Ex. 1.250,00 €">Solde</th>
            </tr>
        </thead>
    </table>
</div>

<script>
    let euro = Intl.NumberFormat('de-DE', {
        style: 'currency',
        currency: 'EUR',
    });

    function dataFormatter(value) {
        return euro.format(value);
    }

    function debitFormatter(data) {
        var total = 0;
        data.forEach(function(row) {
            total += parseFloat(row.debit);
        });
        return parseFloat(total) === 0 ? euro.format(0.00) : euro.format(total.toFixed(2));
    }

    function creditFormatter(data) {
        var total = 0;
        data.forEach(function(row) {
            total += parseFloat(row.credit);
        });
        return parseFloat(total) === 0 ? euro.format(0.00) : euro.format(total.toFixed(2));
    }

    // Fonction pour filtrer par plage de prix
    function filterByPrice() {
        var minPrice = parseFloat(document.getElementById('minPrice').value) || -Infinity;
        var maxPrice = parseFloat(document.getElementById('maxPrice').value) || Infinity;

        // Récupérer toutes les données du tableau
        var allData = $('#table').bootstrapTable('getData');

        // Filtrer les données en fonction des valeurs min/max
        var filteredData = allData.filter(function(row) {
            var debit = parseFloat(row.debit) || 0;
            var credit = parseFloat(row.credit) || 0;

            // Vérifier si l'une des colonnes (débit ou crédit) est dans la plage
            return (debit >= minPrice && debit <= maxPrice) || (credit >= minPrice && credit <= maxPrice);
        });

        // Recharger le tableau avec les données filtrées
        $('#table').bootstrapTable('load', filteredData);
    }

    // Fonction pour réinitialiser le filtre et recharger toutes les données
    function resetFilter() {
        // Vider les champs de saisie
        document.getElementById('minPrice').value = '';
        document.getElementById('maxPrice').value = '';

        // Recharger toutes les données depuis l'URL d'origine
        $('#table').bootstrapTable('refresh');
    }

    // Appliquer le filtre lorsque l'utilisateur clique sur le bouton "Filtrer"
    document.getElementById('filterButton').addEventListener('click', filterByPrice);

    // Réinitialiser le filtre lorsque l'utilisateur clique sur le bouton "Réinitialiser"
    document.getElementById('resetButton').addEventListener('click', resetFilter);
</script>