Actualiser js/admin.js

js/admin.js

@@ -35,6 +35,14 @@ function initEventListeners() {
             e.target.classList.remove('open');
         }
     });
+    const searchInput = document.getElementById('search-input');
+    if (searchInput) {
+        searchInput.addEventListener('input', (e) => {
+            searchQuery = e.target.value;
+            currentPage = 1; // Reset à la page 1 à chaque recherche
+            renderAdminTable();
+        });
+    }
 }
 
 // ── CHARGEMENT DES DONNÉES (Anti-cache) ──
@@ -56,32 +64,146 @@ function renderAdminTable() {
     const tbody = document.getElementById('admin-table-body');
     if (!tbody) return;
     tbody.innerHTML = '';
-    const filtered = allItems.filter(item => item.type === currentAdminTab);
+
+    // 1. Filtrage par onglet et recherche
+    let filtered = allItems.filter(item => item.type === currentAdminTab);
+    if (searchQuery) {
+        const q = searchQuery.toLowerCase();
+        filtered = filtered.filter(f => 
+            f.title.toLowerCase().includes(q) || 
+            (f.director && f.director.toLowerCase().includes(q))
+        );
+    }
 
     const countLabel = document.getElementById('admin-count-label');
     if(countLabel) countLabel.textContent = `${filtered.length} élément(s)`;
 
-    filtered.forEach(f => {
+    // 2. Gestion de la pagination
+    const totalPages = Math.ceil(filtered.length / itemsPerPage) || 1;
+    if (currentPage > totalPages) currentPage = totalPages;
+    
+    const startIdx = (currentPage - 1) * itemsPerPage;
+    const pageItems = filtered.slice(startIdx, startIdx + itemsPerPage);
+
+    // 3. Rendu des lignes
+    pageItems.forEach(f => {
         const tr = document.createElement('tr');
+        
+        let infoHtml = '';
+        if (currentAdminTab === 'critique') {
+            const rating = Math.round(f.rating || 0);
+            const stars = '★'.repeat(rating) + '☆'.repeat(5 - rating);
+            infoHtml = `<span class="tbl-stars">${stars}</span>`;
+            
+            // Affichage Streaming ou Physique
+            if (f.streaming && f.streaming !== 'Disponible en support physique ou Cinéma') {
+                infoHtml += `<span class="streaming-badge" title="${f.streaming}">${f.streaming}</span>`;
+            } else {
+                infoHtml += `<span class="physical-badge">🎟️ Cinéma / Physique</span>`;
+            }
+        } else {
+            infoHtml = `<span class="badge-format">${f.format || '-'}</span>`;
+            if(f.length) infoHtml += `<span style="font-size:0.8rem; color:var(--muted);">${f.length}</span>`;
+        }
+
         tr.innerHTML = `
-            <td style="text-align:center;">
+            <td style="text-align:center; width: 40px;">
                 <input type="checkbox" class="film-checkbox" value="${f.id}" onclick="updateBulkBar()">
             </td>
-            <td style="text-align:center;">
+            <td style="width: 60px; text-align:center;">
                 ${f.poster ? `<img src="${f.poster}" class="thumb" alt="Affiche">` : '<div class="thumb-ph"><i class="ti ti-photo"></i></div>'}
             </td>
-            <td><strong>${f.title}</strong></td>
-            <td>${f.year || '-'}</td>
-            <td>${f.director || '-'}</td>
-            <td>${currentAdminTab === 'critique' ? `<span class="tbl-stars">${'★'.repeat(f.rating || 0)}</span>` : `<span class="badge-format">${f.format || '-'}</span>`}</td>
             <td>
-                <div class="tbl-actions">
+                <div class="film-title-cell">
+                    <strong>${f.title}</strong>
+                    <span>${f.year || '-'}</span>
+                </div>
+            </td>
+            <td style="color: var(--text-secondary);">${f.director || '-'}</td>
+            <td>
+                <div class="info-cell">
+                    ${infoHtml}
+                </div>
+            </td>
+            <td class="tbl-actions" style="width: 100px; text-align: right;">
                 <button onclick="openEditModal('${f.id}')" title="Éditer"><i class="ti ti-edit"></i></button>
                 <button class="del" onclick="deleteSingleFilm('${f.id}')" title="Supprimer"><i class="ti ti-trash"></i></button>
-                </div>
             </td>`;
         tbody.appendChild(tr);
     });
+
+    // 4. Rendu de la pagination
+    renderPagination(totalPages, filtered.length);
+}
+
+// ── FONCTIONS DE PAGINATION ──
+function renderPagination(totalPages, totalItems) {
+    const container = document.getElementById('pagination-container');
+    if (!container) return;
+    container.innerHTML = '';
+
+    if (totalItems === 0) {
+        container.innerHTML = '<p style="color:var(--muted); text-align:center; width:100%;">Aucun élément trouvé.</p>';
+        return;
+    }
+
+    // Info
+    const info = document.createElement('span');
+    info.className = 'pagination-info';
+    info.textContent = `Page ${currentPage} sur ${totalPages}`;
+    container.appendChild(info);
+
+    // Prev
+    const prevBtn = document.createElement('button');
+    prevBtn.innerHTML = '<i class="ti ti-chevron-left"></i>';
+    prevBtn.disabled = currentPage === 1;
+    prevBtn.onclick = () => { currentPage--; renderAdminTable(); };
+    container.appendChild(prevBtn);
+
+    // Pages (affichage intelligent : 1 ... 4 5 6 ... 10)
+    const maxButtons = 5;
+    let startPage = Math.max(1, currentPage - Math.floor(maxButtons / 2));
+    let endPage = Math.min(totalPages, startPage + maxButtons - 1);
+    if (endPage - startPage + 1 < maxButtons) {
+        startPage = Math.max(1, endPage - maxButtons + 1);
+    }
+
+    if (startPage > 1) {
+        container.appendChild(createPageBtn(1));
+        if (startPage > 2) container.appendChild(createEllipsis());
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+        container.appendChild(createPageBtn(i));
+    }
+
+    if (endPage < totalPages) {
+        if (endPage < totalPages - 1) container.appendChild(createEllipsis());
+        container.appendChild(createPageBtn(totalPages));
+    }
+
+    // Next
+    const nextBtn = document.createElement('button');
+    nextBtn.innerHTML = '<i class="ti ti-chevron-right"></i>';
+    nextBtn.disabled = currentPage === totalPages;
+    nextBtn.onclick = () => { currentPage++; renderAdminTable(); };
+    container.appendChild(nextBtn);
+}
+
+function createPageBtn(num) {
+    const btn = document.createElement('button');
+    btn.textContent = num;
+    if (num === currentPage) btn.classList.add('active');
+    btn.onclick = () => { currentPage = num; renderAdminTable(); };
+    return btn;
+}
+
+function createEllipsis() {
+    const span = document.createElement('span');
+    span.textContent = '...';
+    span.style.color = 'var(--muted)';
+    span.style.padding = '0 0.5rem';
+    return span;
 }
 
 // ── GESTION DE MASSE ──