js/views/collection.js — lentelė ir puslapiavimas

Kodo stulpelyje — js/views/collection.js. renderCollection() iš getFilteredFavorites() gauna jau surikiuotą ir nufiltruotą sąrašą, apskaičiuoja puslapius ir atpjauna dabartinį su slice.

Puslapiavimo matematika — trys eilutės:

const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));
const page = Math.min(currentPage, totalPages);          // apsauga: puslapis gali „pasenti"
const pageRows = rows.slice(start, start + pageSize);

Math.min(currentPage, totalPages) svarbus: jei buvai 5-ame puslapyje, o paieška paliko tik 2 puslapius, currentPage liktų 5 ir lentelė būtų tuščia. „Prispaudžiam" jį prie realaus maksimumo.

Rikiavimo antraštės ir initCollection — vėl delegavimo modelis (3 pamoka): po vieną klausytoją kiekvienai antraštei, kuris kviečia setSort(stulpelis). Rodyklės (▲/▼) atsinaujina pagal dabartinį sortKey/sortDir.

Atkreipk dėmesį, ko čia NĖRA: nė vieno renderCollection() kvietimo po setSort/setPage. Nereikia — jie kviečia notify(), o main.js prenumerata (9 pamoka) perpiešia. Lentelė tik aprašo, kaip atrodo dabartinė būsena.

Patarimas. renderPagination piešia po mygtuką kiekvienam puslapiui — gerai kelioms dešimtims. Tūkstančiams eilučių rodytum tik „1 … 5 6 7 … 40". Bet principas tas pats: puslapių valdikliai — irgi išvestinis būsenos vaizdas (currentPage, totalPages), o ne atskirai saugoma būsena.

collection.js SUKURTI

Sukurk šį failą kataloge js/views/

// "My Collection" — a sortable, searchable, paginated table.
// It reads getState() and calls state actions (setSort/setPage), which notify()
// → this view re-renders itself. No manual wiring (thanks to lesson 9).
// (Thumbnail / notes / actions columns trimmed here to focus on sort+paginate.)

import { getState, getFilteredFavorites, setPage, setSort } from '../state.js';
import { formatDateHuman } from '../utils.js';

const tbody = document.getElementById('collection-body');
const paginationEl = document.getElementById('pagination');

export function renderCollection() {
  const { currentPage, pageSize } = getState();
  const rows = getFilteredFavorites();                  // searched + sorted (state.js)

  // --- pagination maths ---
  const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));
  const page = Math.min(currentPage, totalPages);       // clamp: page may be stale
  const start = (page - 1) * pageSize;
  const pageRows = rows.slice(start, start + pageSize);  // just this page's slice

  tbody.innerHTML = '';
  const frag = document.createDocumentFragment();
  pageRows.forEach(fav => frag.appendChild(createRow(fav)));
  tbody.appendChild(frag);

  renderPagination(totalPages, page);
  updateSortArrows();
}

function createRow(fav) {
  const tr = document.createElement('tr');

  const title = document.createElement('td');
  title.textContent = fav.title;

  const date = document.createElement('td');
  date.textContent = formatDateHuman(fav.date);

  const rating = document.createElement('td');
  rating.textContent = fav.rating > 0
    ? '★'.repeat(fav.rating) + '☆'.repeat(5 - fav.rating)
    : 'Not rated';

  tr.append(title, date, rating);
  return tr;
}

function renderPagination(totalPages, page) {
  paginationEl.innerHTML = '';
  if (totalPages <= 1) return;
  for (let p = 1; p <= totalPages; p++) {
    const btn = document.createElement('button');
    btn.className = 'page-btn' + (p === page ? ' active' : '');
    btn.textContent = String(p);
    btn.addEventListener('click', () => setPage(p));    // setPage → notify → re-render
    paginationEl.appendChild(btn);
  }
}

function updateSortArrows() {
  const { sortKey, sortDir } = getState();
  document.querySelectorAll('.sort-btn').forEach(btn => {
    btn.querySelector('.arrow').textContent =
      btn.dataset.sort === sortKey ? (sortDir === 'asc' ? '▲' : '▼') : '';
  });
}

export function initCollection() {
  // One listener per sortable header → setSort(column)
  document.querySelectorAll('.sort-btn').forEach(btn => {
    btn.addEventListener('click', () => setSort(btn.dataset.sort));
  });
}