fix(cms.compte): améliore les filtres avancés et la logique de recherche

core/views/pages/cms.compte.php

@@ -13,9 +13,9 @@ $etatCompte = banque::getEtatCompte(core::getGet("id"));
         <span>Etat des comptes</span>
     </h2>
     <?php
-        if (access::ifAccesss("compte-upload")) { ?>
+    if (access::ifAccesss("compte-upload")) { ?>
         <div class="fix-container-button-nav">
-            <?php if($banque["import"] == "manuel"){ ?>
+            <?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>
@@ -35,7 +35,7 @@ echo core::filAriane(array(
 ));
 
 $lastRecord = banque::lastRecord(core::getGet("id"));
-if(!empty($lastRecord)){
+if (!empty($lastRecord)) {
     $callout = [
         "type" => "info",
         "h4" => "Note",
@@ -44,22 +44,106 @@ if(!empty($lastRecord)){
     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>
+
+<!-- Panel de filtres avancés avec checkboxes multi-sélection -->
+<div class="card mb-3" id="advancedFiltersPanel">
+    <div class="card-header d-flex justify-content-between align-items-center" style="cursor: pointer;" onclick="toggleAdvancedFilters()">
+        <span><i class="bi bi-funnel"></i> Filtres avancés</span>
+        <i class="bi bi-chevron-up" id="advancedFiltersIcon"></i>
+    </div>
+    <div class="card-body" id="advancedFiltersBody">
+        <div class="row">
+            <!-- Filtre par plage de dates -->
+            <div class="col-lg-3 col-md-6 mb-3">
+                <label class="form-label fw-bold">Période</label>
+                <div class="d-flex align-items-center">
+                    <input type="date" id="dateDebut" class="form-control form-control-sm me-2">
+                    <span class="me-2">à</span>
+                    <input type="date" id="dateFin" class="form-control form-control-sm">
+                </div>
+                <small class="text-muted">Filtrer entre deux dates</small>
+            </div>
+
+            <!-- Filtre par mots-clés sur le label -->
+            <div class="col-lg-3 col-md-6 mb-3">
+                <label class="form-label fw-bold">Mots-clés dans le Label</label>
+                <input type="text" class="form-control form-control-sm" id="search-label-keywords" placeholder="Ex: bourse enpayout">
+                <small class="text-muted">Mots-clés séparés par des espaces</small>
+            </div>
+
+            <!-- Filtre par montant (recherche exacte ou plage) -->
+            <div class="col-lg-3 col-md-6 mb-3">
+                <label class="form-label fw-bold">Recherche montant</label>
+                <div class="d-flex align-items-center">
+                    <select id="searchMontantColonne" class="form-select form-select-sm me-2" style="width: 100px;">
+                        <option value="all">Tous</option>
+                        <option value="debit">Débit</option>
+                        <option value="credit">Crédit</option>
+                        <option value="solde">Solde</option>
+                    </select>
+                    <input type="text" class="form-control form-control-sm" id="searchMontant" placeholder="Ex: 5086 ou >1000">
+                </div>
+                <small class="text-muted">Recherche exacte ou avec opérateur</small>
+            </div>
+
+        </div>
+
+        <div class="row">
+
+            <!-- Filtre par plage de montant Débit -->
+            <div class="col-lg-3 col-md-6 mb-3">
+                <label class="form-label fw-bold">Plage Débit</label>
+                <div class="d-flex align-items-center">
+                    <input type="number" step="0.01" id="minDebit" class="form-control form-control-sm me-2" placeholder="Min" style="width: 100px;">
+                    <span class="me-2">à</span>
+                    <input type="number" step="0.01" id="maxDebit" class="form-control form-control-sm" placeholder="Max" style="width: 100px;">
+                </div>
+            </div>
+
+            <!-- Filtre par plage de montant Crédit -->
+            <div class="col-lg-3 col-md-6 mb-3">
+                <label class="form-label fw-bold">Plage Crédit</label>
+                <div class="d-flex align-items-center">
+                    <input type="number" step="0.01" id="minCredit" class="form-control form-control-sm me-2" placeholder="Min" style="width: 100px;">
+                    <span class="me-2">à</span>
+                    <input type="number" step="0.01" id="maxCredit" class="form-control form-control-sm" placeholder="Max" style="width: 100px;">
+                </div>
+            </div>
+
+            <!-- Filtre par plage de Solde -->
+            <div class="col-lg-3 col-md-6 mb-3">
+                <label class="form-label fw-bold">Plage Solde</label>
+                <div class="d-flex align-items-center">
+                    <input type="number" step="0.01" id="minSolde" class="form-control form-control-sm me-2" placeholder="Min" style="width: 100px;">
+                    <span class="me-2">à</span>
+                    <input type="number" step="0.01" id="maxSolde" class="form-control form-control-sm" placeholder="Max" style="width: 100px;">
+                </div>
+            </div>
+        </div>
+
+        <div class="mt-2">
+            <button type="button" class="btn btn-sm btn-primary me-2" onclick="applyAdvancedFilters()">
+                <i class="bi bi-funnel-fill"></i> Appliquer les filtres
+            </button>
+            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="clearAllAdvancedFilters()">
+                <i class="bi bi-x-circle"></i> Réinitialiser les filtres
+            </button>
+            <span class="ms-3 text-muted" id="filterInfo"></span>
         </div>
     </div>
 </div>
 
+<style>
+    #advancedFiltersPanel .card-header:hover {
+        background-color: #f8f9fa;
+    }
+
+    #search-label-keywords::placeholder {
+        font-style: italic;
+        color: #adb5bd;
+    }
+</style>
+
 <div>
     <table
         id="table"
@@ -76,15 +160,16 @@ if(!empty($lastRecord)){
         data-side-pagination="client"
         data-page-size="25"
         data-page-list="[25, 50, 100, 250, all]"
-        data-url="<?php echo $jsonTarget ?>">
+        data-url="<?php echo $jsonTarget ?>"
+        data-filter-control-visible="false">
         <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>
+                <th data-sortable="true" data-formatter="dataFormatter" data-field="debit" data-width="150" data-footer-formatter="debitFormatter">Débit</th>
+                <th data-sortable="true" data-formatter="dataFormatter" data-field="credit" data-width="150" data-footer-formatter="creditFormatter">Crédit</th>
+                <th data-sortable="true" data-formatter="dataFormatter" data-field="solde" data-width="150">Solde</th>
             </tr>
         </thead>
     </table>
@@ -96,6 +181,91 @@ if(!empty($lastRecord)){
         currency: 'EUR',
     });
 
+    // Données originales
+    let originalData = [];
+
+    // Fonction de filtre personnalisée pour les montants (accepte format décimal et euro)
+    function filterMontant(searchValue, value, field, data) {
+        if (!searchValue || searchValue.trim() === '') return true;
+
+        // Valeur numérique brute de la donnée
+        const numValue = parseFloat(data[field]) || 0;
+
+        // Valeur absolue pour faciliter la recherche
+        const absNumValue = Math.abs(numValue);
+
+        // Normaliser la recherche : remplacer virgule par point et supprimer les espaces/symboles
+        let searchNormalized = searchValue.trim()
+            .replace(/\s/g, '') // Supprimer espaces
+            .replace(/€/g, '') // Supprimer symbole euro
+            .replace(/\./g, '') // Supprimer les points (séparateurs milliers)
+            .replace(/,/g, '.'); // Remplacer virgule par point (décimale)
+
+        // Vérifier si c'est une comparaison (>, <, >=, <=, =)
+        let operator = null;
+        if (searchNormalized.startsWith('>=')) {
+            operator = '>=';
+            searchNormalized = searchNormalized.substring(2);
+        } else if (searchNormalized.startsWith('<=')) {
+            operator = '<=';
+            searchNormalized = searchNormalized.substring(2);
+        } else if (searchNormalized.startsWith('>')) {
+            operator = '>';
+            searchNormalized = searchNormalized.substring(1);
+        } else if (searchNormalized.startsWith('<')) {
+            operator = '<';
+            searchNormalized = searchNormalized.substring(1);
+        } else if (searchNormalized.startsWith('=')) {
+            operator = '=';
+            searchNormalized = searchNormalized.substring(1);
+        }
+
+        const searchNum = parseFloat(searchNormalized);
+
+        if (isNaN(searchNum)) {
+            // Si ce n'est pas un nombre, faire une recherche textuelle sur la valeur formatée
+            const formattedValue = euro.format(numValue).toLowerCase();
+            return formattedValue.includes(searchValue.toLowerCase());
+        }
+
+        // Comparaison numérique
+        if (operator) {
+            switch (operator) {
+                case '>':
+                    return numValue > searchNum;
+                case '<':
+                    return numValue < searchNum;
+                case '>=':
+                    return numValue >= searchNum;
+                case '<=':
+                    return numValue <= searchNum;
+                case '=':
+                    return Math.abs(numValue - searchNum) < 0.01;
+            }
+        }
+
+        // Sans opérateur : recherche de correspondance exacte ou partielle
+        // Correspondance exacte (avec tolérance)
+        if (Math.abs(numValue - searchNum) < 0.01 || Math.abs(absNumValue - searchNum) < 0.01) {
+            return true;
+        }
+
+        // Recherche partielle : vérifier si le nombre entier recherché est présent
+        // Convertir en entier pour la comparaison (ex: 5086 dans 5086.00)
+        const intPart = Math.floor(absNumValue);
+        const searchInt = Math.floor(searchNum);
+
+        if (intPart === searchInt) {
+            return true;
+        }
+
+        // Recherche textuelle dans le nombre formaté
+        const numStr = absNumValue.toFixed(2);
+        const searchStr = searchInt.toString();
+
+        return numStr.startsWith(searchStr) || intPart.toString().includes(searchStr);
+    }
+
     function dataFormatter(value) {
         return euro.format(value);
     }
@@ -116,40 +286,231 @@ if(!empty($lastRecord)){
         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;
+    // Toggle du panneau de filtres avancés
+    function toggleAdvancedFilters() {
+        const body = document.getElementById('advancedFiltersBody');
+        const icon = document.getElementById('advancedFiltersIcon');
+        if (body.style.display === 'none') {
+            body.style.display = 'block';
+            icon.className = 'bi bi-chevron-up';
+        } else {
+            body.style.display = 'none';
+            icon.className = 'bi bi-chevron-down';
+        }
+    }
+
+    // Convertir une date en objet Date (supporte DD/MM/YYYY et YYYY-MM-DD)
+    function parseDate(dateStr) {
+        if (!dateStr) return null;
 
-        // Récupérer toutes les données du tableau
-        var allData = $('#table').bootstrapTable('getData');
+        // Format DD/MM/YYYY
+        if (dateStr.includes('/')) {
+            const parts = dateStr.split('/');
+            if (parts.length === 3) {
+                return new Date(parseInt(parts[2]), parseInt(parts[1]) - 1, parseInt(parts[0]), 0, 0, 0);
+            }
+        }
 
-        // 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;
+        // Format YYYY-MM-DD (format ISO/MySQL)
+        if (dateStr.includes('-')) {
+            const parts = dateStr.split('-');
+            if (parts.length === 3 && parts[0].length === 4) {
+                return new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]), 0, 0, 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);
+        return null;
+    }
+
+    // Appliquer tous les filtres avancés
+    function applyAdvancedFilters() {
+        // Récupérer les dates (format ISO: YYYY-MM-DD depuis input type="date")
+        const dateDebutStr = document.getElementById('dateDebut').value;
+        const dateFinStr = document.getElementById('dateFin').value;
+
+        let dateDebut = null;
+        let dateFin = null;
+
+        if (dateDebutStr) {
+            const parts = dateDebutStr.split('-');
+            dateDebut = new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]), 0, 0, 0);
+        }
+
+        if (dateFinStr) {
+            const parts = dateFinStr.split('-');
+            // Mettre la date de fin à 23:59:59 pour inclure toute la journée
+            dateFin = new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]), 23, 59, 59);
+        }
+
+        // Récupérer les mots-clés saisis (séparés par espaces)
+        const keywordsInput = document.getElementById('search-label-keywords').value.trim();
+        const keywords = keywordsInput.split(/\s+/).filter(k => k.length > 0).map(k => k.toUpperCase());
+
+        // Récupérer la recherche de montant et la colonne sélectionnée
+        const searchMontant = document.getElementById('searchMontant').value.trim();
+        const searchMontantColonne = document.getElementById('searchMontantColonne').value;
+
+        const minDebit = parseFloat(document.getElementById('minDebit').value);
+        const maxDebit = parseFloat(document.getElementById('maxDebit').value);
+        const minCredit = parseFloat(document.getElementById('minCredit').value);
+        const maxCredit = parseFloat(document.getElementById('maxCredit').value);
+        const minSolde = parseFloat(document.getElementById('minSolde').value);
+        const maxSolde = parseFloat(document.getElementById('maxSolde').value);
+
+        let filteredData = originalData.filter(row => {
+            // Filtre par plage de dates
+            if (dateDebut || dateFin) {
+                const rowDate = parseDate(row.date);
+                // Si pas de date valide sur la ligne et qu'on filtre par date, exclure la ligne
+                if (!rowDate) return false;
+                if (dateDebut && rowDate < dateDebut) return false;
+                if (dateFin && rowDate > dateFin) return false;
+            }
+
+            // Filtre par mots-clés dans le label (TOUS les mots-clés doivent être présents)
+            if (keywords.length > 0) {
+                const labelUpper = (row.label || '').toUpperCase();
+                const hasAllKeywords = keywords.every(keyword => labelUpper.includes(keyword));
+                if (!hasAllKeywords) return false;
+            }
+
+            // Filtre par recherche de montant (selon la colonne sélectionnée)
+            if (searchMontant) {
+                let match = false;
+                if (searchMontantColonne === 'all') {
+                    const matchDebit = filterMontant(searchMontant, null, 'debit', row);
+                    const matchCredit = filterMontant(searchMontant, null, 'credit', row);
+                    const matchSolde = filterMontant(searchMontant, null, 'solde', row);
+                    match = matchDebit || matchCredit || matchSolde;
+                } else {
+                    match = filterMontant(searchMontant, null, searchMontantColonne, row);
+                }
+                if (!match) return false;
+            }
+
+            // Filtre par plage de débit
+            const debit = parseFloat(row.debit) || 0;
+            if (!isNaN(minDebit) && debit < minDebit) return false;
+            if (!isNaN(maxDebit) && debit > maxDebit) return false;
+
+            // Filtre par plage de crédit
+            const credit = parseFloat(row.credit) || 0;
+            if (!isNaN(minCredit) && credit < minCredit) return false;
+            if (!isNaN(maxCredit) && credit > maxCredit) return false;
+
+            // Filtre par plage de solde
+            const solde = parseFloat(row.solde) || 0;
+            if (!isNaN(minSolde) && solde < minSolde) return false;
+            if (!isNaN(maxSolde) && solde > maxSolde) return false;
+
+            return true;
         });
 
         // Recharger le tableau avec les données filtrées
         $('#table').bootstrapTable('load', filteredData);
+        updateFilterInfo(filteredData.length, keywords);
     }
 
-    // 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 = '';
+    // Réinitialiser tous les filtres avancés
+    function clearAllAdvancedFilters() {
+        // Réinitialiser les dates
+        document.getElementById('dateDebut').value = '';
+        document.getElementById('dateFin').value = '';
+
+        // Réinitialiser les champs numériques
+        document.getElementById('minDebit').value = '';
+        document.getElementById('maxDebit').value = '';
+        document.getElementById('minCredit').value = '';
+        document.getElementById('maxCredit').value = '';
+        document.getElementById('minSolde').value = '';
+        document.getElementById('maxSolde').value = '';
+
+        // Réinitialiser la barre de recherche des mots-clés
+        document.getElementById('search-label-keywords').value = '';
 
-        // Recharger toutes les données depuis l'URL d'origine
-        $('#table').bootstrapTable('refresh');
+        // Réinitialiser la recherche de montant
+        document.getElementById('searchMontant').value = '';
+        document.getElementById('searchMontantColonne').value = 'all';
+
+        // Recharger les données originales
+        $('#table').bootstrapTable('load', originalData);
+
+        updateFilterInfo(originalData.length, []);
+
+        // Réinitialiser aussi les filtres de la table
+        $('#table').bootstrapTable('clearFilterControl');
+    }
+
+    // Mettre à jour l'info des filtres actifs
+    function updateFilterInfo(count, keywords) {
+        const infoEl = document.getElementById('filterInfo');
+        const activeFilters = [];
+
+        const dateDebut = document.getElementById('dateDebut').value;
+        const dateFin = document.getElementById('dateFin').value;
+        if (dateDebut || dateFin) {
+            activeFilters.push(`Période: ${dateDebut || 'début'} à ${dateFin || 'fin'}`);
+        }
+
+        if (keywords && keywords.length > 0) {
+            activeFilters.push(`Mots-clés: "${keywords.join(' + ')}"`);
+        }
+
+        const searchMontant = document.getElementById('searchMontant').value;
+        if (searchMontant) {
+            const colonneLabels = {
+                'all': 'Tous',
+                'debit': 'Débit',
+                'credit': 'Crédit',
+                'solde': 'Solde'
+            };
+            const colonne = document.getElementById('searchMontantColonne').value;
+            activeFilters.push(`Montant (${colonneLabels[colonne]}): "${searchMontant}"`);
+        }
+
+        const minDebit = document.getElementById('minDebit').value;
+        const maxDebit = document.getElementById('maxDebit').value;
+        if (minDebit || maxDebit) {
+            activeFilters.push(`Débit: ${minDebit || '0'} - ${maxDebit || '∞'}`);
+        }
+
+        const minCredit = document.getElementById('minCredit').value;
+        const maxCredit = document.getElementById('maxCredit').value;
+        if (minCredit || maxCredit) {
+            activeFilters.push(`Crédit: ${minCredit || '0'} - ${maxCredit || '∞'}`);
+        }
+
+        const minSolde = document.getElementById('minSolde').value;
+        const maxSolde = document.getElementById('maxSolde').value;
+        if (minSolde || maxSolde) {
+            activeFilters.push(`Solde: ${minSolde || '0'} - ${maxSolde || '∞'}`);
+        }
+
+        if (activeFilters.length > 0) {
+            infoEl.innerHTML = `<strong>${count}</strong> ligne(s) affichée(s) | Filtres actifs: ${activeFilters.join(', ')}`;
+        } else {
+            infoEl.innerHTML = `<strong>${count || originalData.length}</strong> ligne(s) au total`;
+        }
     }
 
-    // Appliquer le filtre lorsque l'utilisateur clique sur le bouton "Filtrer"
-    document.getElementById('filterButton').addEventListener('click', filterByPrice);
+    // Initialisation
+    $(document).ready(function() {
+        const $table = $('#table');
 
-    // Réinitialiser le filtre lorsque l'utilisateur clique sur le bouton "Réinitialiser"
-    document.getElementById('resetButton').addEventListener('click', resetFilter);
+        // Attendre que les données soient chargées
+        $table.on('load-success.bs.table', function(e, data) {
+            // Sauvegarder les données originales
+            originalData = data;
+            updateFilterInfo(data.length, []);
+        });
+
+        // Permettre d'appliquer le filtre avec la touche Entrée sur les champs texte
+        ['search-label-keywords', 'searchMontant'].forEach(id => {
+            document.getElementById(id).addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    applyAdvancedFilters();
+                }
+            });
+        });
+    });
 </script>