Actualiser js/admin.js

js/admin.js

@@ -80,6 +80,14 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 function initEventListeners() {
+    const physicalCheckbox = document.getElementById('admin-physical-checkbox');
+    if (physicalCheckbox) {
+        physicalCheckbox.addEventListener('change', (e) => {
+            adminPhysicalOnlyFilter = e.target.checked;
+            currentPage = 1;
+            renderAdminTable();
+        });
+    }
     const filmForm = document.getElementById('film-form');
     if (filmForm) filmForm.addEventListener('submit', saveFilmForm);
     
@@ -137,70 +145,117 @@ function getFilteredItems() {
     return filtered;
 }
 
-// ── RENDU DU TABLEAU (6 COLONNES) ──
+// ── RENDU DU TABLEAU (VERSION COMPLÈTE ET CORRIGÉE) ──
-// ── RENDU DU TABLEAU (7 COLONNES ALIGNÉES) ──
 function renderAdminTable() {
     const tbody = document.getElementById('admin-table-body');
     if (!tbody) return;
     tbody.innerHTML = '';
 
+    // 1. Récupération des valeurs de filtrage
     const searchInput = document.getElementById('search-input');
-    const currentSearch = searchInput ? searchInput.value.toLowerCase() : '';
+    const query = searchInput ? searchInput.value.toLowerCase().trim() : '';
+    
+    const physicalCheckbox = document.getElementById('admin-physical-checkbox');
+    const isPhysicalOnly = physicalCheckbox ? physicalCheckbox.checked : false;
 
+    // 2. Filtrage des données
     let filtered = allItems.filter(item => item.type === currentAdminTab);
 
-    // FILTRE PHYSIQUE UNIQUEMENT
+    // Filtre support physique / cinéma uniquement
-    if (adminPhysicalOnlyFilter) {
+    if (isPhysicalOnly) {
-        filtered = filtered.filter(f => 
+        filtered = filtered.filter(item => {
-            !f.streaming || 
+            const streaming = item.streaming ? item.streaming.trim() : '';
-            f.streaming === 'Disponible en support physique ou Cinéma' ||
+            return !streaming || streaming === 'Disponible en support physique ou Cinéma';
-            f.streaming.trim() === ''
+        });
+    }
+
+    // Filtre recherche
+    if (query) {
+        filtered = filtered.filter(item =>
+            item.title.toLowerCase().includes(query) ||
+            (item.director && item.director.toLowerCase().includes(query))
         );
     }
-    
-    const filtered = getFilteredItems();
 
+    // 3. Mise à jour du compteur
     const countLabel = document.getElementById('admin-count-label');
-    if(countLabel) countLabel.textContent = `${filtered.length} élément(s)`;
+    if (countLabel) countLabel.textContent = `${filtered.length} élément(s)`;
 
+    // 4. Logique de pagination
     const totalPages = Math.ceil(filtered.length / itemsPerPage) || 1;
     if (currentPage > totalPages) currentPage = totalPages;
-    const startIdx = (currentPage - 1) * itemsPerPage;
+    const startIndex = (currentPage - 1) * itemsPerPage;
-    const pageItems = filtered.slice(startIdx, startIdx + itemsPerPage);
+    const pageItems = filtered.slice(startIndex, startIndex + itemsPerPage);
 
-    pageItems.forEach(f => {
+    // 5. Génération des lignes (6 colonnes : Checkbox, Titre, Année, Réalisateur, Info, Actions)
+    pageItems.forEach(item => {
         const tr = document.createElement('tr');
-        const isChecked = selectedIds.has(String(f.id)) ? 'checked' : '';
+        const isChecked = selectedIds.has(String(item.id)) ? 'checked' : '';
         
+        const infoHTML = currentAdminTab === 'critique'
+            ? `<span class="tbl-stars">${getStarsHTML(item.rating)}</span>`
+            : `<span class="badge-format">${item.format || '-'}</span>`;
+
         tr.innerHTML = `
             <td style="text-align:center;">
-                <input type="checkbox" class="film-checkbox" value="${f.id}" ${isChecked} onclick="toggleSingleSelect('${f.id}', this)">
+                <input type="checkbox" class="film-checkbox" value="${item.id}" ${isChecked} onclick="handleFilmCheckbox(this)">
             </td>
-            <td style="text-align:center;">
+            <td><strong>${item.title}</strong></td>
-                ${f.poster ? `<img src="${f.poster}" class="thumb" alt="Affiche">` : '<div class="thumb-ph"><i class="ti ti-photo"></i></div>'}
+            <td>${item.year || '-'}</td>
-            </td>
+            <td>${item.director || '-'}</td>
-            <td><strong>${f.title}</strong></td>
+            <td>${infoHTML}</td>
-            <td>${f.year || '-'}</td>
+            <td style="text-align:right;">
-            <td>${f.director || '-'}</td>
-            <td>
-                ${currentAdminTab === 'critique' 
-                    ? `<span class="tbl-stars">${getStarsHTML(f.rating)}</span> <span class="rating-text">${parseFloat(f.rating || 0)}/5</span>` 
-                    : `<span class="badge-format">${f.format || '-'}</span>`}
-            </td>
-            <td>
                 <div class="tbl-actions">
-                    <button onclick="openEditModal('${f.id}')" title="Éditer"><i class="ti ti-edit"></i></button>
+                    <button onclick="openEditModal('${item.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>
+                    <button class="del" onclick="deleteSingleFilm('${item.id}')" title="Supprimer"><i class="ti ti-trash"></i></button>
                 </div>
-            </td>`;
+            </td>
+        `;
         tbody.appendChild(tr);
     });
 
+    // 6. Rendu de la pagination
     renderPagination(totalPages, filtered.length);
-    
+
+    // 7. Synchronisation de la case "Tout sélectionner"
+    syncSelectAllCheckbox();
+}
+
+// ── GESTION DES CHECKBOXES INDIVIDUELLES ─
+function handleFilmCheckbox(checkbox) {
+    const id = checkbox.value;
+    if (checkbox.checked) {
+        selectedIds.add(id);
+    } else {
+        selectedIds.delete(id);
+    }
+    updateBulkBar();
+    syncSelectAllCheckbox();
+}
+
+// ─ SYNCHRONISATION DU "TOUT SÉLECTIONNER" ──
+function syncSelectAllCheckbox() {
     const selectAll = document.getElementById('select-all-checkbox');
-    if (selectAll) {
+    if (!selectAll) return;
-        selectAll.checked = pageItems.length > 0 && pageItems.every(f => selectedIds.has(String(f.id)));
+    
+    const visibleCheckboxes = document.querySelectorAll('#admin-table-body .film-checkbox');
+    const allChecked = visibleCheckboxes.length > 0 && Array.from(visibleCheckboxes).every(cb => cb.checked);
+    
+    selectAll.checked = allChecked;
+}
+
+// ── BARRE D'ACTIONS GROUPÉES ──
+function updateBulkBar() {
+    const bulkBar = document.getElementById('bulk-actions-bar');
+    const bulkCount = document.getElementById('bulk-count');
+    
+    if (!bulkBar || !bulkCount) return;
+
+    if (selectedIds.size > 0) {
+        bulkBar.style.display = 'flex';
+        bulkCount.textContent = selectedIds.size;
+    } else {
+        bulkBar.style.display = 'none';
     }
 }