steep/front/js/job-list.js

// Liste de jobs (une colonne du tableau). Reçoit un tableau de jobs via la
// propriété `jobs` et l'id sélectionné via `selected`.

import "./job-card.js";

class JobList extends HTMLElement {
  set jobs(value) {
    this._jobs = Array.isArray(value) ? value : [];
    this.render();
  }

  get jobs() {
    return this._jobs ?? [];
  }

  set selected(value) {
    this._selected = value;
    this.render();
  }

  connectedCallback() {
    if (this._mounted) return;
    this._mounted = true;
    this.render();
  }

  render() {
    const jobs = this.jobs;

    if (jobs.length === 0) {
      this.replaceChildren();
      const empty = document.createElement("p");
      empty.className = "empty";
      empty.textContent = this.getAttribute("empty") || "Nothing here.";
      this.append(empty);
      return;
    }

    // Réconciliation par id : on réutilise les cartes existantes pour préserver
    // l'état replié/déplié de chacune à travers les mises à jour.
    const known = new Map();
    for (const card of this.querySelectorAll("steep-job-card")) {
      if (card.job) known.set(card.job.id, card);
    }

    for (const job of jobs) {
      const card = known.get(job.id) ?? document.createElement("steep-job-card");
      known.delete(job.id);
      card.job = job;
      card.selected = job.id === this._selected;
      this.append(card);
    }

    for (const card of known.values()) card.remove();
  }
}

customElements.define("steep-job-list", JobList);