1. Interraction JS
A l'upload du fichier, nous allons vérifier si le fichier est bien au format .xlxs, puis le lire, le transformer en données JSON et executer son traitement via notre fonction run_import_xlxs_promise().
1.1 A l'upload du fichier
// On file upload -----------------------------------------------
$('#input-file-import-data').on('change', function(e) {
// Init
var fichierXLSX = e.target.files[0];
// Verification du fichier
if( ! fichierXLSX ){
console.log('ERREUR : Fichier manquant');
return;
}
if( ! fichierXLSX.name.endsWith('.xlsx') ){
console.log('ERREUR : Format non .xlsx');
alert('ERREUR : Format souhaité : .xlsx');
$(e.target).val('');
return;
}
// Fonction de lecture
var lecteur = new FileReader();
lecteur.onload = function(e) {
// Init
var contenu = e.target.result;
var classeur = XLSX.read(contenu, { type: 'binary' });
var feuille = classeur.Sheets[classeur.SheetNames[0]];
// Option pour traiter les dates comme du texte
var options = {
header: 1,
cellText: false,
};
var donnees = XLSX.utils.sheet_to_json(feuille, options);
// Vérification des données vides
if (donnees.length === 0 || (donnees.length === 1 && donnees[0].length === 0)) {
console.log('ERREUR : Données vides');
alert('ERREUR : Le fichier semble vide, veuillez réessayer.');
return;
}
// Run script import --- V2 ---
run_import_xlxs_promise(donnees);
};
lecteur.readAsBinaryString(fichierXLSX);
});
1.2 Traitement du fichier
Dans cette fonction de traitement, nous affichons le nombre de documents, récupérons la ligne du header puis nous effectuons un split sur les données afin de ne traiter que les lignes souhaités (si configuré dans le formulaire).
function run_import_xlxs_promise( donnees ) {
// Show nb documents
$('#allItemsCount').text(donnees.length);
// Init data
let queue = Promise.resolve();
let [header, ...requests] = donnees;
// Split data (offset & limit)
let offset = parseInt( $('input#offset').val() ) || 0;
let limit = parseInt( $('input#limit').val() ) || requests.length;
if (offset < limit && offset < requests.length) {
requests = requests.slice(offset, limit);
}
// Configuration
let isPreviewGenerated = document.getElementById('generatePreview').checked || false;
// Suite
[...]
Ensuite, nous utilisons une chaîne de promesses pour exécuter séquentiellement des requêtes AJAX, permettant d'importer des données de manière asynchrone tout en conservant un contrôle sur l'ordre des opérations.
Voici le code ci dessous, nous détaillerons son fonctionnement par la suite :
function run_import_xlxs_promise( donnees ) {
// Suite
[...]
// Browse documents queued
requests.forEach((request, index) => {
queue = queue.then(() => {
return new Promise((resolve, reject) => {
$.ajax({
type: 'POST',
dataType: "json",
url: "/wp-admin/admin-ajax.php",
data: ({
action : 'SID_import_data_mais',
header : header,
data : request,
preview : isPreviewGenerated,
}),
success: function(result) {
// Style
var style = "";
if (result.statut === 'creation') {
style = 'style="background-color:#a1e3a1"';
} else if (result.statut === 'update') {
style = 'style="background-color:#abe6ff"';
} else if (result.statut === 'delete') {
style = 'style="background-color:#ff9494"';
}
// Prevent
if (!Array.isArray(result.thumbnail)) {
result.thumbnail = [];
}
if (typeof result.thumbnail[1] === 'undefined') {
result.thumbnail[1] = '';
}
// Tableau
var tr = $('<tr class="">');
tr.append('<td>' + result.post_id + '</td>');
tr.append('<td>' + result.titre + '</td>');
tr.append('<td style="text-wrap: nowrap;">' + result.dossier + '</td>'); // n_dossier
tr.append('<td>' + result.nom_du_fichier + '</td>');
tr.append('<td>' + result.thumbnail[1] + '</td>');
tr.append('<td ' + style + '>' + result.statut + '</td>');
$("#import-documents").append(tr);
// Return
console.log(result);
$('#itemsCount').text( index + 1 );
resolve();
},
error: function(jqXHR, textStatus, errorThrown) {
console.error('Une requête a échoué', textStatus, errorThrown);
console.error('Erreur:', errorThrown);
console.error('Réponse du serveur:', jqXHR.responseText);
resolve({error: true, message: errorThrown}); // Résolve la promesse avec un objet d'erreur
}
});
});
});
});
// End queue
queue.then(() => {
console.log('Toutes les requêtes ont été exécutées avec succès');
}).catch((error) => {
console.error('Une ou plusieurs requêtes ont échoué');
console.error('Détails de l\'erreur:', error);
});
Traitement des Données
Le script parcourt le tableau donnees en utilisant la méthode forEach. Pour chaque élément, il crée une promesse qui effectue une requête AJAX au serveur WordPress. La requête envoie les données à traiter au moyen de l'action SID_import_data_mais définie dans le code PHP du serveur (fichier /inc/import/mais-ajax.php).
Paramètres de la Requête AJAX
action: Identifiant de l'action à exécuter côté serveur, iciSID_import_data_mais.header: Un en-tête (récupéré dans la partie 1.1) pour accompagner la requête.data: Les données courantes extraites du tableaudonneespour traitement.preview: Indicateur si les prévisualisations (thumbnails) des documents PDF doivent être générées.
Gestion des Réponses
À la réception d'une réponse du serveur, le script met à jour le DOM (du front-end de la page courante) pour afficher les résultats de l'importation :
- Stylisation des Lignes: Selon le statut de la réponse (creation, update, delete), une couleur de fond est appliquée pour visualiser rapidement le résultat de l'opération.
- Construction du Tableau: Les informations pertinentes de chaque document traité sont ajoutées à un tableau HTML visible par l'utilisateur.
- Compteur de Progression: Un compteur est mis à jour pour indiquer le nombre de documents traités.
Gestion des Erreurs
En cas d'échec d'une requête AJAX, le script affiche des messages d'erreur dans la console et continue le traitement des éléments suivants, assurant ainsi que l'exécution de la chaîne de promesses ne s'arrête pas prématurément.