Javascript

La partie front-end du module d'export des résultats de recherche repose sur des interactions JavaScript pour initier le processus d'exportation et fournir un retour visuel en temps réel à l'utilisateur. Le bouton d'export, situé sur la page des résultats de recherche, sert de point de départ pour l'ensemble du processus.

1. Lancement du script

L'interaction commence lorsque l'utilisateur clique sur le bouton « Télécharger la liste ». Ce bouton est initialement inactif et prend l'état actif (class="runing") dès que le clic est détecté, prévenant ainsi toute action multiple qui pourrait surcharger le serveur ou interférer avec le processus d'exportation en cours.

/assets/main.js

$('body').on("click", "#telecharger-les-resultats:not(.runing)", function() {
    downloadResults(1, []);
});

Cette portion de code attache un écouteur d'événement au bouton d'export. Il vérifie si le bouton n'a pas déjà la classe runing, indiquant qu'une exportation est déjà en cours. Si le bouton est disponible, la fonction downloadResults est appelée avec un argument initial indiquant la première page de résultats à exporter et un tableau vide pour accumuler les données.

2. Gestion de la Progression

Une fois l'exportation initiée, le processus est géré de manière asynchrone via des appels AJAX successifs. Chaque appel traite un segment de données (défini par la pagination) et envoie les informations à l'utilisateur sur l'avancement de l'opération.

/assets/main.js

function downloadResults(page, accumulatedData) {
    $('#telecharger-les-resultats').addClass('runing');
    
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: '/wp-admin/admin-ajax.php',
        data: {
            action: 'downloadResultsAjax',
            page: page
        },
        success: function(result) {
            if(result.data && result.data.length > 0) {
                accumulatedData = accumulatedData.concat(result.data);
            }
            $('#telecharger-les-resultats .progress').html("(" + parseInt((result.page / result.total) * 100) + "%)");
            if(result.page < result.total) {
                downloadResults(result.page + 1, accumulatedData);
            } else {
                createAndDownloadCSV(accumulatedData);
                $('#telecharger-les-resultats').removeClass('runing');
            }
        }
    });
}

La fonction php downloadResults() réalise l'appel AJAX, transmettant la page courante des résultats à exporter. À chaque réponse réussie, les données reçues sont ajoutées à un accumulateur. En parallèle, une mise à jour visuelle est faite sur le bouton d'export pour afficher le pourcentage de progression, offrant ainsi un retour immédiat à l'utilisateur sur l'état d'avancement du processus.

Nous détaillons son fonctionnement sur la page : Intéractions PHP

Une fois toutes les pages de résultats traitées, la fonction js createAndDownloadCSV() est appelée, générant le fichier CSV final et déclenchant le téléchargement automatique sur le dispositif de l'utilisateur, marquant ainsi la fin du processus d'exportation.

Cette interaction JavaScript assure une expérience utilisateur fluide et informative, permettant un contrôle précis sur le processus d'exportation et garantissant que l'utilisateur reste informé à chaque étape.

3. Export du fichier final

Après avoir recueilli et accumulé toutes les données nécessaires à travers les multiples appels AJAX, la dernière étape du processus consiste à générer le fichier CSV final et à le mettre à disposition de l'utilisateur pour téléchargement. Cette opération est réalisée par la fonction createAndDownloadCSV.

La fonction createAndDownloadCSV prend en charge la création du contenu CSV à partir des données accumulées :

• Création des En-têtes : La première étape consiste à extraire les clés du premier objet des données comme en-têtes de colonne du fichier CSV. Ces en-têtes sont ensuite jointes en une seule chaîne de caractères, séparées par des points-virgules.
• Génération des Lignes : Chaque objet dans l'ensemble des données représente une ligne du fichier CSV. Pour chaque objet, les valeurs sont récupérées, potentiellement ajustées pour échapper les guillemets doubles (afin de préserver les chaînes contenant des guillemets dans les données CSV), et jointes en une ligne. Chaque ligne est ajoutée au CSV final suivie d'un saut de ligne.
• Encodage UTF-8 : Pour s'assurer que le fichier CSV respecte l'encodage UTF-8, un Byte Order Mark (BOM) est ajouté au début du contenu CSV. Cela aide notamment lors de l'ouverture du fichier CSV dans des applications comme Microsoft Excel, garantissant que les caractères spéciaux sont correctement affichés.
• Téléchargement Automatique : Le contenu CSV est encapsulé dans un objet Blob, utilisé ensuite pour créer une URL temporaire. Un élément <a> est dynamiquement créé et configuré avec cette URL ainsi que le nom souhaité pour le fichier téléchargeable. Un clic programmé sur cet élément déclenche le téléchargement du fichier, après quoi l'élément est retiré du document pour nettoyer le DOM.

/assets/main.js

function createAndDownloadCSV(data) {
    // Headers from the first object's keys
    var headers = Object.keys(data[0]);
    var csv = headers.join(';') + '\n';

    // Iterate through each row
    data.forEach(function(row) {
        var line = headers.map(function(header) {
            return row[header] ? '"' + row[header].toString().replace(/"/g, '""') + '"' : '';
        }).join(';');
        csv += line + '\n';
    });

    // UTF-8 BOM
    var BOM = '\uFEFF';

    // Create and download CSV
    var blob = new Blob([BOM + csv], {type: 'text/csv;charset=utf-8'});
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = 'ARCHIVES-SNCF-resultats-de-recherche.csv';
    document.body.appendChild(a);
    a.click();
    a.remove();
}