Cedric/mon-petit-cinema
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualiser js/admin.js

Browse Source
This commit is contained in:
Cedric
2026-06-21 14:14:22 +02:00
parent fcbe6a7a3c
commit 93061a268b
1 changed files with 90 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/admin.js
+88 -33
View File
@@ -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 (7 COLONNES ALIGNÉES) ──
// ── RENDU DU TABLEAU (VERSION COMPLÈTE ET CORRIGÉE) ──
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
if (adminPhysicalOnlyFilter) {
filtered = filtered.filter(f =>
!f.streaming ||
f.streaming === 'Disponible en support physique ou Cinéma' ||
f.streaming.trim() === ''
// Filtre support physique / cinéma uniquement
if (isPhysicalOnly) {
filtered = filtered.filter(item => {
const streaming = item.streaming ? item.streaming.trim() : '';
return !streaming || streaming === 'Disponible en support physique ou Cinéma';
});
}
// 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)`;
// 4. Logique de 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);
const startIndex = (currentPage - 1) * 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;">
${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">${getStarsHTML(f.rating)}</span> <span class="rating-text">${parseFloat(f.rating || 0)}/5</span>`
: `<span class="badge-format">${f.format || '-'}</span>`}
</td>
<td>
<td><strong>${item.title}</strong></td>
<td>${item.year || '-'}</td>
<td>${item.director || '-'}</td>
<td>${infoHTML}</td>
<td style="text-align:right;">
<div class="tbl-actions">
<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>
<button onclick="openEditModal('${item.id}')" title="Éditer"><i class="ti ti-edit"></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) {
selectAll.checked = pageItems.length > 0 && pageItems.every(f => selectedIds.has(String(f.id)));
if (!selectAll) return;
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';
}
}