pagination sur le filtrage

autopost/server.js

@@ -238,11 +238,12 @@ autopostRouter.get('/', async (req, res) => {
 		  </div>
 		</div>
 
-		<nav aria-label="Page navigation" class="mb-4">
+		<nav id="pagination" aria-label="Page navigation" class="mb-4">
 		  <ul class="inline-flex items-center -space-x-px">
 			<li>
-			  ${ page > 1
+			  ${
-	  ? `<a href="/autopost/?page=${page - 1}" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700">Précédent</a>`
+				page > 1
+				  ? `<a href="/autopost/?page=${page - 1}" data-page="${page - 1}" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700">Précédent</a>`
 				  : `<span class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-l-lg">Précédent</span>`
 			  }
 			</li>
@@ -250,13 +251,15 @@ autopostRouter.get('/', async (req, res) => {
 			  <span class="px-4 py-2 leading-tight text-gray-700 bg-white border border-gray-300">Page ${page} sur ${totalPages}</span>
 			</li>
 			<li>
-			  ${ page < totalPages
+			  ${
-	  ? `<a href="/autopost/?page=${page + 1}" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700">Suivant</a>`
+				page < totalPages
+				  ? `<a href="/autopost/?page=${page + 1}" data-page="${page + 1}" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700">Suivant</a>`
 				  : `<span class="px-3 py-2 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-r-lg">Suivant</span>`
 			  }
 			</li>
 		  </ul>
 		</nav>
+
 		<div class="overflow-x-auto">
 		<table class="min-w-full border border-gray-700 shadow-lg rounded-lg overflow-hidden">
 		  <thead class="bg-gray-900 text-gray-300 uppercase text-sm">
@@ -450,12 +453,26 @@ autopostRouter.get('/', async (req, res) => {
 		  </div>
 	  
 	<script>
+		// --- State ---
+		const INITIAL_PAGE = ${page};
+		const INITIAL_TOTAL_PAGES = ${totalPages};
+		const PAGE_LIMIT = ${limit};
+		
+		let currentPage = INITIAL_PAGE;
+		let currentTotalPages = INITIAL_TOTAL_PAGES;
+		let activeFilter = null;   // number | null
+		let activeQuery  = '';     // string
+		
+		
+		// --- Rendering: table ---
 		function updateTable(rows) {
-			  var tbody = $("table tbody");
+			var tbody = $('table tbody');
 			tbody.empty();
+		
 			rows.forEach(function(row) {
 				var statusText = '';
 				var statusClass = '';
+		
 				switch (parseInt(row.status)) {
 					case 0:
 						statusText = 'EN ATTENTE';
@@ -484,14 +501,17 @@ autopostRouter.get('/', async (req, res) => {
 				var logLink = (parseInt(row.status) === 1 || parseInt(row.status) === 2)
 					? ' | <a href="#" class="log-link text-blue-400 hover:underline" data-filename="' + row.nom + '">Log</a>'
 					: '';
+		
 				var mediainfoLink = (parseInt(row.status) === 0 || parseInt(row.status) === 1 || parseInt(row.status) === 2)
 					? ' | <a href="#" class="mediainfo-link text-blue-400 hover:underline" data-filename="' + row.nom + '">Mediainfo</a>'
 					: '';
+		
 				var dlLink = (parseInt(row.status) === 1)
 					? ' | <a href="/autopost/dl?name=' + encodeURIComponent(row.nom) + '" class="dl-link text-blue-400 hover:underline">DL</a>'
 					: '';
 		
-				var tr = '<tr id="row-'+row.id+'" data-status="'+row.status+'" class="odd:bg-gray-800 even:bg-gray-700">'+
+				var tr =
+					'<tr id="row-' + row.id + '" data-status="' + row.status + '" class="odd:bg-gray-800 even:bg-gray-700">' +
 						'<td class="px-4 py-2 border border-gray-700 whitespace-nowrap">' + row.nom + '</td>' +
 						'<td class="px-4 py-2 border border-gray-700 status-text whitespace-nowrap ' + statusClass + '">' + statusText + '</td>' +
 						'<td class="px-4 py-2 border border-gray-700">' + row.id + '</td>' +
@@ -501,94 +521,132 @@ autopostRouter.get('/', async (req, res) => {
 							logLink + mediainfoLink + dlLink +
 						'</td>' +
 					'</tr>';
+		
 				tbody.append(tr);
 			});
 		}
 		
-		  $(document).ready(function(){
-				let searchTimer = null;
-			  $("#searchInput").on("keyup", function() {
-				clearTimeout(searchTimer); // annule le timer précédent
 		
+		// --- Rendering: pagination ---
+		function renderPaginationHTML(page, totalPages) {
+			var prevDisabled = page <= 1;
+			var nextDisabled = page >= totalPages;
+		
+			var h = '';
+			h += '<ul class="inline-flex items-center -space-x-px">';
+			h +=   '<li>';
+			if (prevDisabled) {
+				h += '<span class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-l-lg">Précédent</span>';
+			} else {
+				h += '<a href="/autopost/?page=' + (page - 1) + '" data-page="' + (page - 1) + '" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700">Précédent</a>';
+			}
+			h +=   '</li>';
+			h +=   '<li><span class="px-4 py-2 leading-tight text-gray-700 bg-white border border-gray-300">Page ' + page + ' sur ' + totalPages + '</span></li>';
+			h +=   '<li>';
+			if (nextDisabled) {
+				h += '<span class="px-3 py-2 leading-tight text-gray-500 bg-gray-200 border border-gray-300 rounded-r-lg">Suivant</span>';
+			} else {
+				h += '<a href="/autopost/?page=' + (page + 1) + '" data-page="' + (page + 1) + '" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700">Suivant</a>';
+			}
+			h +=   '</li>';
+			h += '</ul>';
+		
+			return h;
+		}
+		
+		function updatePagination(page, totalPages) {
+			$('#pagination').html(renderPaginationHTML(page, totalPages));
+		}
+		
+		
+		// --- Data loading ---
+		function loadPage(p) {
+			const targetPage = Math.max(1, parseInt(p, 10) || 1);
+		
+			const isFilter = activeFilter !== null;
+			const url = isFilter ? '/autopost/filter' : '/autopost/search';
+			const data = isFilter
+				? { status: activeFilter, page: targetPage, limit: PAGE_LIMIT }
+				: { q: activeQuery || '', page: targetPage, limit: PAGE_LIMIT };
+		
+			$.ajax({
+				url: url,
+				type: 'GET',
+				data: data,
+				dataType: 'json',
+				success: function(resp) {
+					updateTable(resp.rows);
+					currentPage = resp.page;
+					currentTotalPages = resp.totalPages;
+					updatePagination(currentPage, currentTotalPages);
+				},
+				error: function(jqXHR, textStatus, errorThrown) {
+					if (textStatus !== 'abort') {
+						console.error('Erreur AJAX :', textStatus, errorThrown);
+						alert('Erreur lors du chargement de la page.');
+					}
+				}
+			});
+		}
+		
+		
+		// --- DOM bindings ---
+		$(document).ready(function() {
+			// Recherche
+			let searchTimer = null;
+			$('#searchInput').on('keyup', function() {
+				clearTimeout(searchTimer);
 				let q = $(this).val();
 		
 				searchTimer = setTimeout(function() {
-				  $.ajax({
+					activeQuery = q || '';
-					url: '/autopost/search',
+					activeFilter = null; // on sort du mode filtre
-					type: 'GET',
+					$('.filter-card').removeClass('ring-4 ring-white/40');
-					data: { q: q },
+					loadPage(1);         // charge page 1 avec pagination AJAX
-					dataType: 'json',
-					success: function(data) {
-					  updateTable(data);
-					  $(".filter-card").removeClass("ring-4 ring-white/40"); 
 					toggleShowAllButton();
-					},
+				}, 300);
-					error: function(jqXHR, textStatus, errorThrown) {
-					  // On ignore l'erreur si la requête a été annulée volontairement
-					  if (textStatus !== "abort") {
-						console.error('Erreur AJAX :', textStatus, errorThrown);
-						alert("Erreur lors de la recherche.");
-					  }
-					}
-				  });
-				}, 300); // 300ms après la dernière frappe
 			});
 		
+			// Pagination: intercepter et paginer en AJAX (liste, recherche ou filtre)
+			$(document).on('click', '#pagination a[data-page]', function(e) {
+				e.preventDefault();
+				const p = parseInt($(this).data('page'), 10);
+				if (!isNaN(p)) loadPage(p);
+			});
 		
+			// Affichage/masquage du bouton "Tout afficher"
 			function toggleShowAllButton() {
-				if ($(".filter-card.ring-4").length === 0) {
+				if ($('.filter-card.ring-4').length === 0) {
 					$('#showAll').addClass('hidden');
 				} else {
 					$('#showAll').removeClass('hidden');
 				}
 			}
 		
-	  
 			// Filtrage par clic sur une card
-			  $(document).on("click", ".filter-card", function () {
+			$(document).on('click', '.filter-card', function() {
-				  const status = parseInt($(this).data("status"), 10);
+				const status = parseInt($(this).data('status'), 10);
 		
-				  $(".filter-card").removeClass("ring-4 ring-white/40");
+				$('.filter-card').removeClass('ring-4 ring-white/40');
-				  $(this).addClass("ring-4 ring-white/40");
+				$(this).addClass('ring-4 ring-white/40');
 		
-				  $.ajax({
+				activeFilter = status;
-					  url: '/autopost/filter',
+				activeQuery = '';  // on sort du mode recherche
-					  type: 'GET',
+				loadPage(1);       // page 1 du filtre
-					  data: { status },
-					  dataType: 'json',
-					  success: function (data) {
-						  updateTable(data);
 				toggleShowAllButton();
-					  },
-					  error: function () {
-						  alert("Erreur lors du filtrage.");
-					  }
 			});
-			  });
-			  
 		
 			// Bouton tout afficher
-			  $(document).on("click", "#showAll", function () {
+			$(document).on('click', '#showAll', function() {
-				  $(".filter-card").removeClass("ring-4 ring-white/40");
+				$('.filter-card').removeClass('ring-4 ring-white/40');
-			  
+				activeFilter = null;
-				  $.ajax({
+				activeQuery = $('#searchInput').val() || '';
-					  url: '/autopost/search',
+				loadPage(1); // si recherche vide => liste complète, sinon recherche paginée
-					  type: 'GET',
-					  data: { q: $("#searchInput").val() || "" },
-					  dataType: 'json',
-					  success: function (data) {
-						  updateTable(data);
 				toggleShowAllButton();
-					  },
-					  error: function () {
-						  alert("Erreur lors du chargement des données.");
-					  }
-				  });
 			});
 		
-		
+			// Edition (ouvrir modale)
-			  // Edition
+			$(document).on('click', '.edit-link', function(e) {
-			  $(document).on("click", ".edit-link", function(e) {
 				e.preventDefault();
 				var releaseId = $(this).data('id');
 				var currentStatus = $(this).data('status');
@@ -598,7 +656,6 @@ autopostRouter.get('/', async (req, res) => {
 				$('#editModal').removeClass('hidden').fadeIn();
 			});
 		
-			  // Suppression
 			// ---------- Confirmation de suppression (modale) ----------
 			var pendingDeleteId = null;
 		
@@ -627,7 +684,6 @@ autopostRouter.get('/', async (req, res) => {
 			$(document).on('click', '.delete-link', function(e) {
 				e.preventDefault();
 				var releaseId = $(this).data('id');
-				  // Récupère le nom dans la 1ère cellule de la ligne (évite d’ajouter data-name partout)
 				var name = $(this).closest('tr').find('td:first').text().trim();
 				openConfirmModal(releaseId, name);
 			});
@@ -659,8 +715,8 @@ autopostRouter.get('/', async (req, res) => {
 					url: '/autopost/delete/' + releaseId,
 					type: 'POST',
 					success: function() {
-					  // Effet visuel sur la ligne puis suppression
+						$('#row-' + releaseId)
-					  $('#row-' + releaseId).css('outline', '2px solid rgba(239,68,68,0.6)')
+							.css('outline', '2px solid rgba(239,68,68,0.6)')
 							.fadeOut('300', function(){ $(this).remove(); });
 						showToast('Enregistrement supprimé');
 					},
@@ -674,44 +730,44 @@ autopostRouter.get('/', async (req, res) => {
 			});
 		
 			// Affichage log
-			  $(document).on("click", ".log-link", function(e) {
+			$(document).on('click', '.log-link', function(e) {
 				e.preventDefault();
-				var filename = $(this).data("filename");
+				var filename = $(this).data('filename');
 				$.ajax({
 					url: '/autopost/log',
 					type: 'GET',
 					data: { name: filename },
 					dataType: 'json',
 					success: function(data) {
-					$("#logContent").html(data.content);
+						$('#logContent').html(data.content);
-					$("#logModal").removeClass('hidden').fadeIn();
+						$('#logModal').removeClass('hidden').fadeIn();
 					},
 					error: function() {
-					alert("Erreur lors du chargement du fichier log.");
+						alert('Erreur lors du chargement du fichier log.');
 					}
 				});
 			});
 		
 			// Affichage mediainfo
-			  $(document).on("click", ".mediainfo-link", function(e) {
+			$(document).on('click', '.mediainfo-link', function(e) {
 				e.preventDefault();
-				var filename = $(this).data("filename");
+				var filename = $(this).data('filename');
 				$.ajax({
 					url: '/autopost/mediainfo',
 					type: 'GET',
 					data: { name: filename },
 					dataType: 'json',
 					success: function(data) {
-					$("#mediainfoContent").text(data.content);
+						$('#mediainfoContent').text(data.content);
-					$("#mediainfoModal").removeClass('hidden').fadeIn();
+						$('#mediainfoModal').removeClass('hidden').fadeIn();
 					},
 					error: function() {
-					alert("Erreur lors du chargement du fichier mediainfo.");
+						alert('Erreur lors du chargement du fichier mediainfo.');
 					}
 				});
 			});
 		
-			  // Fermeture modales
+			// Fermeture modales (croix + clic overlay)
 			$('.close').click(function() {
 				$(this).closest('.fixed').fadeOut(function() {
 					$(this).addClass('hidden');
@@ -726,16 +782,17 @@ autopostRouter.get('/', async (req, res) => {
 				}
 			});
 		
-			  // Edition formulaire
+			// Edition: submit
 			$('#editForm').submit(function(e) {
 				e.preventDefault();
 				var releaseId = $('#releaseId').val();
 				var newStatus = $('#statusSelect').val();
+		
 				$.ajax({
 					url: '/autopost/edit/' + releaseId,
 					type: 'POST',
 					data: { status: newStatus },
-				  success: function(data) {
+					success: function() {
 						var statusText = '';
 						var statusClass = '';
 						switch (parseInt(newStatus)) {
@@ -762,29 +819,32 @@ autopostRouter.get('/', async (req, res) => {
 							default:
 								statusText = 'INCONNU';
 						}
+		
 						var row = $('#row-' + releaseId);
 						row.find('.status-text')
 							.removeClass('bg-cyan-500 bg-green-300 bg-red-300 bg-pink-300 bg-yellow-300')
 							.addClass(statusClass)
 							.text(statusText);
+		
 						$('#editModal').fadeOut(function() {
 							$(this).addClass('hidden');
 						});
 					},
 					error: function() {
-					alert("Erreur lors de la mise à jour.");
+						alert('Erreur lors de la mise à jour.');
 					}
 				});
 			});
 		});
-			// Bouton copie du JSON
+		
-			  document.getElementById("copyMediainfoBtn").addEventListener("click", function () {
+		// --- Copy Mediainfo JSON button ---
-				const content = document.getElementById("mediainfoContent").textContent;
+		document.getElementById('copyMediainfoBtn').addEventListener('click', function() {
+			const content = document.getElementById('mediainfoContent').textContent;
 			navigator.clipboard.writeText(content).then(() => {
-				  this.textContent = "✅ Copié !";
+				this.textContent = '✅ Copié !';
-				  setTimeout(() => this.textContent = "📋 Copier JSON", 2000);
+				setTimeout(() => this.textContent = '📋 Copier JSON', 2000);
-				}).catch(err => {
+			}).catch(function(err) {
-				  alert("Erreur lors de la copie : " + err);
+				alert('Erreur lors de la copie : ' + err);
 			});
 		});
 	  </script>
@@ -801,19 +861,36 @@ autopostRouter.get('/', async (req, res) => {
 // --------------------------- Recherche -----------------------------
 autopostRouter.get('/search', async (req, res) => {
   const q = req.query.q || "";
-	const searchQuery = "%" + q + "%";
+  const page = parseInt(req.query.page, 10) || 1;
+  const limit = parseInt(req.query.limit, 10) || 100;
+  const offset = (page - 1) * limit;
+  const searchQuery = `%${q}%`;
+
   try {
-		const [rows] = await db.query(
+	const [countRows] = await db.query(
-			`SELECT nom, status, id FROM \`${config.DB_TABLE}\` WHERE nom LIKE ? ORDER BY id DESC LIMIT 500`,
+	  `SELECT COUNT(*) AS total FROM \`${config.DB_TABLE}\` WHERE nom LIKE ?`,
 	  [searchQuery]
 	);
-		res.json(rows);
+	const total = countRows[0].total;
+	const totalPages = Math.max(1, Math.ceil(total / limit));
+
+	const [rows] = await db.query(
+	  `SELECT nom, status, id
+	   FROM \`${config.DB_TABLE}\`
+	   WHERE nom LIKE ?
+	   ORDER BY (status = 2) DESC, id DESC
+	   LIMIT ? OFFSET ?`,
+	  [searchQuery, limit, offset]
+	);
+
+	res.json({ rows, page, limit, total, totalPages });
   } catch (err) {
 	console.error(err.message);
 	res.status(500).json({ error: "Erreur lors de la requête." });
   }
 });
 
+
 // --------------------------- Log -----------------------------
 autopostRouter.get('/log', (req, res) => {
   const filename = req.query.name;
@@ -990,18 +1067,37 @@ autopostRouter.post('/delete/:id', async (req, res) => {
 	}
 });
 
-// --------------------------- Fultrage -----------------------------
+// --------------------------- Filtrage -----------------------------
 autopostRouter.get('/filter', async (req, res) => {
-	const status = req.query.status;
+  const status = Number.isFinite(parseInt(req.query.status, 10))
-	if (status === undefined) {
+	? parseInt(req.query.status, 10)
+	: null;
+  if (status === null) {
 	return res.status(400).json({ error: "Status non fourni." });
   }
+
+  const page = parseInt(req.query.page, 10) || 1;
+  const limit = parseInt(req.query.limit, 10) || 100;
+  const offset = (page - 1) * limit;
+
   try {
-		const [rows] = await db.query(
+	const [countRows] = await db.query(
-			`SELECT nom, status, id FROM \`${config.DB_TABLE}\` WHERE status = ? ORDER BY id DESC LIMIT 500`,
+	  `SELECT COUNT(*) AS total FROM \`${config.DB_TABLE}\` WHERE status = ?`,
 	  [status]
 	);
-		res.json(rows);
+	const total = countRows[0].total;
+	const totalPages = Math.max(1, Math.ceil(total / limit));
+
+	const [rows] = await db.query(
+	  `SELECT nom, status, id
+	   FROM \`${config.DB_TABLE}\`
+	   WHERE status = ?
+	   ORDER BY id DESC
+	   LIMIT ? OFFSET ?`,
+	  [status, limit, offset]
+	);
+
+	res.json({ rows, page, limit, total, totalPages });
   } catch (err) {
 	console.error(err.message);
 	res.status(500).json({ error: "Erreur lors de la requête." });