Ajput d'un filtre de recherche dans les comptes

core/views/pages/cms.compte.php

@@ -1,41 +1,58 @@
 <?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");
-    }
+$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");
+}
 ?>
 <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">
-    <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>
-</div>
-<?php } ?>
+    <h2 class="bd-title" id="content">
+        <span>Etat des comptes</span>
+    </h2>
+    <?php if (access::ifAccesss("compte-upload")) { ?>
+        <div class="fix-container-button-nav">
+            <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>
+        </div>
+    <?php } ?>
 </header>
-<?php   
-        $banque = banque::getInitialCompte(core::getGet("id"));
-        $etatCompte = banque::getEtatCompte(core::getGet("id"));
-
-        echo core::filAriane(array(
-            "current" => $banque["label"], 
-            "arbo" => array( 
-                "Comptes bancaires" => NULL,
-                $banque["label"] => "/compte-". core::getGet("id") .".html")
-        )); 
-
-    $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(banque::lastRecord(core::getGet("id"))) . "</span> et à cette même date le solde était de <span class=\"fw-bold\">" . banque::getEuro($etatCompte["solde"]) . "</span>",
-    ];
-    callout::print($callout);
+<?php
+$banque = banque::getInitialCompte(core::getGet("id"));
+$etatCompte = banque::getEtatCompte(core::getGet("id"));
+
+echo core::filAriane(array(
+    "current" => $banque["label"],
+    "arbo" => array(
+        "Comptes bancaires" => NULL,
+        $banque["label"] => "/compte-" . core::getGet("id") . ".html"
+    )
+));
+
+$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(banque::lastRecord(core::getGet("id"))) . "</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" 
+        class="table-striped table-hover table-sm"
         data-toggle="table"
         data-show-footer="true"
         data-buttons-align="left"
@@ -45,6 +62,7 @@
         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 ?>">
@@ -58,7 +76,7 @@
                 <th data-sortable="true" data-formatter="dataFormatter" data-field="solde" data-filter-control="input" data-width="150">Solde</th>
             </tr>
         </thead>
-    </table> 
+    </table>
 </div>
 
 <script>
@@ -67,13 +85,13 @@
         currency: 'EUR',
     });
 
-    function dataFormatter(value) { 
+    function dataFormatter(value) {
         return euro.format(value);
     }
 
     function debitFormatter(data) {
         var total = 0;
-        data.forEach(function (row) {
+        data.forEach(function(row) {
             total += parseFloat(row.debit);
         });
         return parseFloat(total) === 0 ? euro.format(0.00) : euro.format(total.toFixed(2));
@@ -81,10 +99,46 @@
 
     function creditFormatter(data) {
         var total = 0;
-        data.forEach(function (row) {
+        data.forEach(function(row) {
             total += parseFloat(row.credit);
         });
         return parseFloat(total) === 0 ? euro.format(0.00) : euro.format(total.toFixed(2));
     }
 
-</script>
+    // 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>