lafrite/gestion_projets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Porter le cycle de vie et l'horizon dans le modèle, en version 5

Browse Source 
L'état n'est pas un champ : il se lit dans horizon, completedDate,
discardedDate et la présence de phases. Les phases commandent, sauf
quand on a prononcé quelque chose.

L'emprise d'un projet retombe sur son horizon faute de phases, et une
saisie n'est jamais réécrite par un calcul : un projet qui perd sa
dernière phase retrouve l'horizon qu'il avait déclaré.

Clore un projet termine aussi toutes ses phases, seule opération du
cycle qui écrase des données. phasesParMois devient entreesParMois :
elle émet aussi les projets sans phase, à leur horizon.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Bertrand Benjamin
2026-08-09 14:57:34 +02:00
parent 3c7cff3ac6
commit 8404f12656
4 changed files with 1003 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

418
js/model.js
View File

@@ -15,18 +15,34 @@
/**
* Version du format de fichier.
*
* Elle a changé pour la dernière fois quand le projet a reçu des `notes` (v4).
* Un champ ajouté n'oblige pourtant à rien : la v3 se relit sans encombre, et
* le validateur ne refuse qu'un fichier *plus récent* que lui. C'est justement
* là qu'est la raison d'incrémenter — le validateur reconstruit chaque projet
* champ par champ et laisse tomber ce qu'il ne connaît pas. Sans ce numéro, un
* binaire antérieur ouvrirait un fichier v4 sans broncher et en effacerait
* toutes les notes de projet à la première sauvegarde.
* Elle a changé pour la dernière fois quand le projet a reçu son cycle de vie —
* `horizon`, `completedDate`, `discardedDate` (v5). Un champ ajouté n'oblige
* pourtant à rien : la v4 se relit sans encombre, et le validateur ne refuse
* qu'un fichier *plus récent* que lui. C'est justement là qu'est la raison
* d'incrémenter — le validateur reconstruit chaque projet champ par champ et
* laisse tomber ce qu'il ne connaît pas. Sans ce numéro, un binaire antérieur
* ouvrirait un fichier v5 sans broncher et en effacerait tous les horizons à la
* première sauvegarde.
*/
export const VERSION_FORMAT = 4;
export const VERSION_FORMAT = 5;
export const STATUTS = ['todo', 'doing', 'done', 'blocked'];
/**
* États d'un projet, dans l'ordre du cycle de vie.
*
* Contrairement au statut d'une phase, ce n'est **pas** un champ du fichier : il
* se déduit de `etatProjet()`. Voir docs/decisions.md, section 27.
*/
export const ETATS = ['considered', 'engaged', 'completed', 'discarded'];
export const LIBELLES_ETAT = {
considered: 'Envisagé',
engaged: 'Engagé',
completed: 'Terminé',
discarded: 'Écarté',
};
export const LIBELLES_STATUT = {
todo: 'À venir',
doing: 'En cours',
@@ -56,6 +72,7 @@ export const MOIS_LONGS = [
];
const MOTIF_DATE = /^\d{4}-\d{2}-\d{2}$/;
const MOTIF_MOIS = /^\d{4}-\d{2}$/;
const MOTIF_COULEUR = /^#[0-9a-f]{6}$/i;
const MS_PAR_JOUR = 86400000;
@@ -165,6 +182,58 @@ export function formaterMois(mois) {
return `${MOIS_LONGS[Number(mois.slice(5, 7)) - 1]} ${mois.slice(0, 4)}`;
}
// ---------------------------------------------------------------------------
// Mois
// ---------------------------------------------------------------------------
//
// Le mois est le grain de l'horizon d'un projet envisagé (décision 27). Comme
// les dates, il se manipule en chaîne — « AAAA-MM » se compare et se trie comme
// du texte, ce qui évite tout objet Date dans les comparaisons.
/** Vrai si la chaîne est un mois « AAAA-MM » plausible. */
export function moisValide(valeur) {
if (typeof valeur !== 'string' || !MOTIF_MOIS.test(valeur)) return false;
const numero = Number(valeur.slice(5, 7));
return numero >= 1 && numero <= 12;
}
/** Mois en cours, au format « AAAA-MM ». */
export function moisCourant() {
return moisDe(aujourdhui());
}
/** Premier jour d'un mois : « 2027-03 » → « 2027-03-01 ». */
export function premierJourDuMois(mois) {
return `${mois}-01`;
}
/**
* Dernier jour d'un mois : « 2027-03 » → « 2027-03-31 ».
*
* Le jour 0 du mois suivant est le dernier du mois demandé — `Date.UTC` fait le
* report d'année tout seul, décembre compris.
*/
export function dernierJourDuMois(mois) {
const annee = Number(mois.slice(0, 4));
const numero = Number(mois.slice(5, 7));
return depuisUTC(Date.UTC(annee, numero, 0));
}
/** Décale un mois d'un nombre de mois, éventuellement négatif. */
export function ajouterMois(mois, nombre) {
const annee = Number(mois.slice(0, 4));
const numero = Number(mois.slice(5, 7));
return depuisUTC(Date.UTC(annee, numero - 1 + nombre, 1)).slice(0, 7);
}
/** Nombre de mois de `debut` à `fin`, signé. Deux mois égaux donnent 0. */
export function ecartMois(debut, fin) {
return (
(Number(fin.slice(0, 4)) - Number(debut.slice(0, 4))) * 12 +
(Number(fin.slice(5, 7)) - Number(debut.slice(5, 7)))
);
}
/**
* Période d'une phase, abrégée pour une liste où le mois est déjà écrit en
* titre : « 12 » pour un jalon, « 12 → 30 » pour une tâche qui tient dans le
@@ -292,6 +361,106 @@ export function teinteTag(tag) {
return hachage;
}
// ---------------------------------------------------------------------------
// Cycle de vie et horizon
// ---------------------------------------------------------------------------
/**
* État d'un projet, déduit de ses données. Voir docs/decisions.md, section 27.
*
* Une seule règle : **les phases commandent l'état, sauf quand on a prononcé
* quelque chose**. Terminer et écarter sont des décisions — livré n'est pas
* clos, et abandonner n'est pas une conséquence des dates —, elles laissent
* donc une trace horodatée. Le reste se déduit : un projet qui a des phases est
* engagé, un projet qui n'en a pas encore est envisagé.
*
* Un projet ne peut pas porter les deux dates à la fois — les transitions
* ci-dessous s'en assurent —, mais un fichier retouché à la main le pourrait :
* l'écartement l'emporte, pour que la lecture reste déterministe.
*/
export function etatProjet(projet) {
if (projet.discardedDate) return 'discarded';
if (projet.completedDate) return 'completed';
return projet.phases.length ? 'engaged' : 'considered';
}
/**
* Vrai si le projet passe le filtre par état.
*
* Disjonctif, là où le filtre par tags est conjonctif (`projetFiltre`) : un
* projet porte plusieurs tags mais un seul état, si bien que cocher un état de
* plus ne peut qu'élargir la sélection. Une liste vide laisse tout passer, mais
* l'interface n'en pose jamais : elle part des états qu'on veut voir d'ordinaire
* — les écartés n'en font pas partie.
*/
export function projetFiltreEtat(projet, etatsActifs) {
if (!etatsActifs.length) return true;
return etatsActifs.includes(etatProjet(projet));
}
/**
* Emprise d'un horizon, ramenée en dates pour être dessinée : du premier jour
* de son premier mois au dernier jour de son dernier. Null si le projet n'en a
* pas.
*/
export function bornesHorizon(projet) {
if (!projet.horizon) return null;
return {
start: premierJourDuMois(projet.horizon.start),
end: dernierJourDuMois(projet.horizon.end),
};
}
/**
* Emprise temporelle d'un projet, quel que soit son état.
*
* L'emprise se calcule depuis les phases ; un projet qui n'en a pas encore la
* déclare à la main, c'est son horizon. Les phases gagnent donc toujours, et
* l'horizon n'est qu'une valeur de repli — jamais réécrite par le calcul, ce
* qui fait qu'un projet ayant perdu sa dernière phase retrouve l'horizon qu'il
* avait déclaré.
*/
export function empriseProjet(projet) {
return bornesProjet(projet) ?? bornesHorizon(projet);
}
/**
* Vrai si le projet réclame une date : envisagé sans horizon, ou dont l'horizon
* est déjà passé.
*
* C'est le garde-fou qui empêche la liste des envisagés de devenir une décharge
* (décision 27). Plutôt qu'un plafond ou une péremption qui effacerait — deux
* choses interdites par la crainte d'oublier —, un projet dont l'horizon est
* dépassé se signale : on repousse, ou on écarte.
*
* Les deux cas se confondent volontairement en un seul signal. Un projet hérité
* d'un fichier en version 4, sans phase et sans horizon, réclame une date au
* même titre qu'un projet qu'on visait pour le trimestre dernier.
*/
export function projetADater(projet, mois = moisCourant()) {
if (etatProjet(projet) !== 'considered') return false;
return !projet.horizon || projet.horizon.end < mois;
}
/**
* Horizon rendu lisible : « mars 2027 », « mars → juin 2027 »,
* « novembre 2026 → février 2027 ».
*
* L'année n'est écrite qu'une fois quand les deux bornes la partagent : comme
* pour la période d'une phase (`formaterPeriode`), son apparition en tête
* signale à elle seule le débordement.
*/
export function formaterHorizon(horizon) {
if (!horizon) return '';
if (horizon.start === horizon.end) return formaterMois(horizon.start);
const memeAnnee = horizon.start.slice(0, 4) === horizon.end.slice(0, 4);
const debut = memeAnnee
? MOIS_LONGS[Number(horizon.start.slice(5, 7)) - 1]
: formaterMois(horizon.start);
return `${debut} → ${formaterMois(horizon.end)}`;
}
// ---------------------------------------------------------------------------
// Validation
// ---------------------------------------------------------------------------
@@ -337,11 +506,15 @@ export function validerPlanning(donnees) {
}
idsProjets.add(projet.id);
if (projet.baselineDate !== undefined && !dateValide(projet.baselineDate)) {
throw new ErreurValidation(
`Projet ${repere} : « baselineDate » n'est pas une date valide (${projet.baselineDate}).`
);
for (const cle of ['baselineDate', 'completedDate', 'discardedDate']) {
if (projet[cle] !== undefined && !dateValide(projet[cle])) {
throw new ErreurValidation(
`Projet ${repere} : « ${cle} » n'est pas une date valide (${projet[cle]}).`
);
}
}
const horizon = validerHorizon(projet.horizon, repere);
if (!Array.isArray(projet.phases)) {
throw new ErreurValidation(`Projet ${repere} : « phases » doit être un tableau.`);
}
@@ -363,6 +536,9 @@ export function validerPlanning(donnees) {
// bloquer le chargement d'un planning entier pour un champ mal typé serait
// disproportionné là où le champ n'engage aucun calcul.
notes: typeof projet.notes === 'string' ? projet.notes : '',
...(horizon ? { horizon } : {}),
...(projet.completedDate ? { completedDate: projet.completedDate } : {}),
...(projet.discardedDate ? { discardedDate: projet.discardedDate } : {}),
...(projet.baselineDate ? { baselineDate: projet.baselineDate } : {}),
phases: trierPhases(phases),
};
@@ -371,6 +547,33 @@ export function validerPlanning(donnees) {
return { version: VERSION_FORMAT, projects: projets };
}
/**
* L'horizon est facultatif — aucun fichier en version 4 n'en porte — mais s'il
* est là, il est vérifié aussi strictement que les dates d'une phase et non
* réparé en silence comme le sont le statut ou les notes : il décide d'une
* position sur la frise, et un horizon avalé laisserait un projet envisagé
* invisible sans qu'on sache pourquoi.
*/
function validerHorizon(horizon, repere) {
if (horizon === undefined) return undefined;
if (!horizon || typeof horizon !== 'object') {
throw new ErreurValidation(`Projet ${repere} : « horizon » doit être un objet.`);
}
if (!moisValide(horizon.start) || !moisValide(horizon.end)) {
throw new ErreurValidation(
`Projet ${repere} : l'horizon doit porter deux mois « AAAA-MM » ` +
`(${horizon.start} → ${horizon.end}).`
);
}
// « AAAA-MM » se compare comme du texte.
if (horizon.end < horizon.start) {
throw new ErreurValidation(
`Projet ${repere} : la fin de l'horizon (${horizon.end}) précède son début (${horizon.start}).`
);
}
return { start: horizon.start, end: horizon.end };
}
/**
* Les tags sont facultatifs — un fichier en version 2 n'en a aucun — mais s'ils
* sont là, ils doivent être des chaînes : un tag avalé en silence parce qu'il
@@ -479,13 +682,21 @@ export function bornesProjet(projet) {
return { start: debut, end: fin };
}
/** Étendue de tous les projets visibles réunis. Null si rien à afficher. */
/**
* Étendue de tous les projets visibles réunis. Null si rien à afficher.
*
* Elle sert à cadrer la fenêtre au premier affichage, et prend donc l'emprise
* plutôt que les seules phases : sans cela, un planning fait de projets encore
* tous envisagés s'ouvrirait sur rien. Les écartés en sont exclus — ils ne
* s'affichent pas d'ordinaire, et un projet abandonné il y a trois ans n'a pas à
* tirer la vue en arrière.
*/
export function bornesPlanning(planning) {
let debut = null;
let fin = null;
for (const projet of planning.projects) {
if (projet.hidden) continue;
const bornes = bornesProjet(projet);
if (projet.hidden || etatProjet(projet) === 'discarded') continue;
const bornes = empriseProjet(projet);
if (!bornes) continue;
if (debut === null || versUTC(bornes.start) < versUTC(debut)) debut = bornes.start;
if (fin === null || versUTC(bornes.end) > versUTC(fin)) fin = bornes.end;
@@ -572,37 +783,59 @@ export function formulerDerive(jours) {
// ---------------------------------------------------------------------------
/**
* Toutes les phases du planning regroupées par mois, projets mêlés.
* Tout ce que le planning fait arriver, regroupé par mois, projets mêlés.
*
* Une phase est rattachée au **mois de son début**, et à lui seul. Une phase de
* trois mois n'apparaît donc qu'une fois, au mois où elle démarre : la liste
* répond à « qu'est-ce qui commence, et quand », question à laquelle la frise
* répond mal parce qu'elle éparpille les départs sur autant de couloirs qu'il y
* a de projets. La répéter dans chaque mois traversé en aurait fait un tableau
* de charge — utile, mais c'est une autre vue, et le doublon coûte la lecture
* en diagonale qui fait tout l'intérêt de celle-ci. Sa fin est écrite sur la
* ligne, ce qui suffit à voir qu'elle déborde.
* Deux sortes d'entrées y cohabitent, et la seconde est venue plus tard :
*
* Les deux tamis de la frise s'appliquent de la même façon (timeline.js) : le
* filtre par tags retire le projet, l'œil (`hidden`) aussi — un projet dont on
* a masqué les barres n'a pas à revenir par la liste.
* - une **phase**, rattachée au mois de son début et à lui seul. Une phase de
* trois mois n'apparaît donc qu'une fois, au mois où elle démarre : la liste
* répond à « qu'est-ce qui commence, et quand », question à laquelle la frise
* répond mal parce qu'elle éparpille les départs sur autant de couloirs qu'il
* y a de projets. La répéter dans chaque mois traversé en aurait fait un
* tableau de charge — utile, mais c'est une autre vue, et le doublon coûte la
* lecture en diagonale qui fait tout l'intérêt de celle-ci. Sa fin est écrite
* sur la ligne, ce qui suffit à voir qu'elle déborde.
* - un **projet sans phase**, rattaché au premier mois de son horizon. Il n'a
* rien à lister autrement, donc il ne paraissait nulle part ici — alors qu'un
* projet visé pour mars 2027 *arrive* bel et bien en mars 2027. L'omettre
* revenait à dire que la liste ne montre que l'engagé, quand toute la
* conception pose qu'un projet envisagé n'est pas hors du temps (décision 27).
* La règle porte sur l'absence de phases et non sur l'état, exactement comme
* `empriseProjet` : un projet écarté avant d'avoir été engagé n'a lui non plus
* que son horizon pour se situer, et il doit se retrouver là quand on ouvre le
* cimetière.
*
* Les tamis de la frise s'appliquent tous de la même façon (timeline.js) : le
* filtre par tags retire le projet, celui par état aussi, et l'œil (`hidden`)
* de même — un projet dont on a masqué les barres n'a pas à revenir par la
* liste, et un projet écarté n'a pas à peupler les mois à venir.
*
* Les mois sans rien ne sont pas représentés : intercaler « novembre 2026 —
* rien » entre deux mois pleins allongerait la liste de tout le temps mort d'un
* planning, alors que l'absence se lit déjà dans le saut d'un titre à l'autre.
*
* @returns {Array<{mois: string, entrees: Array<{projet: object, phase: object}>}>}
* @returns {Array<{mois: string, entrees: Array<{projet: object, phase?: object, horizon?: object}>}>}
* trié du plus ancien au plus récent, chaque mois trié par date puis par nom.
*/
export function phasesParMois(planning, tagsActifs = []) {
export function entreesParMois(planning, tagsActifs = [], etatsActifs = []) {
const groupes = new Map();
const poser = (mois, entree) => {
if (!groupes.has(mois)) groupes.set(mois, []);
groupes.get(mois).push(entree);
};
for (const projet of planning.projects) {
if (projet.hidden || !projetFiltre(projet, tagsActifs)) continue;
if (!projetFiltreEtat(projet, etatsActifs)) continue;
for (const phase of projet.phases) {
const mois = moisDe(phase.start);
if (!groupes.has(mois)) groupes.set(mois, []);
groupes.get(mois).push({ projet, phase });
poser(moisDe(phase.start), { projet, phase });
}
// Un projet sans horizon n'a rien à quoi se rattacher : il se signale déjà
// dans la colonne de la frise, où sa pastille « à dater » réclame une date.
if (!projet.phases.length && projet.horizon) {
poser(projet.horizon.start, { projet, horizon: projet.horizon });
}
}
@@ -612,18 +845,40 @@ export function phasesParMois(planning, tagsActifs = []) {
mois,
entrees: groupes.get(mois).sort(
(a, b) =>
versUTC(a.phase.start) - versUTC(b.phase.start) ||
versUTC(debutEntree(a)) - versUTC(debutEntree(b)) ||
a.projet.name.localeCompare(b.projet.name, 'fr') ||
a.phase.name.localeCompare(b.phase.name, 'fr')
nomEntree(a).localeCompare(nomEntree(b), 'fr')
),
}));
}
/**
* Date à laquelle une entrée commence, pour le tri. Un horizon n'ayant pas de
* jour, il prend le premier du mois — ce qui le place en tête des entrées de son
* mois, à sa place : c'est ce qui est le moins arrêté qui ouvre la liste.
*/
function debutEntree(entree) {
return entree.phase ? entree.phase.start : premierJourDuMois(entree.horizon.start);
}
function nomEntree(entree) {
return entree.phase ? entree.phase.name : entree.projet.name;
}
// ---------------------------------------------------------------------------
// Modifications
// ---------------------------------------------------------------------------
export function creerProjet(planning, nom, tags = []) {
/**
* Un projet naît **envisagé** : sans phase, avec pour seul ancrage un horizon
* d'un mois, celui où on le crée.
*
* Ce mois par défaut n'est pas une prévision, c'est une position de départ — la
* barre paraît sous les yeux, là où on regarde, et se repousse aussitôt. Naître
* sans horizon aurait été plus honnête mais invisible, et la décision 27 pose
* qu'un projet envisagé n'est jamais hors du temps.
*/
export function creerProjet(planning, nom, tags = [], mois = moisCourant()) {
const id = fabriquerId(nom, planning.projects.map((p) => p.id));
return {
id,
@@ -633,10 +888,103 @@ export function creerProjet(planning, nom, tags = []) {
collapsed: false,
hidden: false,
notes: '',
horizon: { start: mois, end: mois },
phases: [],
};
}
/**
* Pose l'horizon d'un projet. Les bornes se remettent d'aplomb plutôt que d'être
* refusées : la saisie se fait au fil de la frappe, et un instant où la fin
* précède le début est l'état normal de quelqu'un qui écrit son intervalle.
*/
export function definirHorizon(projet, debut, fin = debut) {
return { ...projet, horizon: { start: debut, end: fin < debut ? debut : fin } };
}
/**
* Repousse — ou avance — l'horizon d'un nombre de mois, largeur conservée.
*
* C'est le seul geste qui déplace un horizon. La barre d'un projet envisagé ne
* se glisse pas au jour : l'imprécision doit rester visible, et l'interdire
* physiquement vaut mieux que de compter sur une convention (décision 27).
*/
export function decalerHorizon(projet, mois) {
if (!projet.horizon) return projet;
return {
...projet,
horizon: {
start: ajouterMois(projet.horizon.start, mois),
end: ajouterMois(projet.horizon.end, mois),
},
};
}
/**
* Acte la clôture d'un projet, et **termine toutes ses phases avec lui**.
*
* Livré n'est pas clos : c'est quelqu'un qui le prononce, même quand une phase
* traîne encore en « à venir ». Mais prononcer la clôture d'un projet dont une
* phase resterait bloquée laisserait la frise se contredire — la barre
* cumulative garderait ses segments pâles sous une ligne éteinte, et la vue par
* mois annoncerait des tâches à venir dans un projet fini.
*
* L'opération est donc **destructive** et ne se défait pas : `rouvrirProjet` ne
* peut pas savoir laquelle des phases était bloquée et laquelle était à venir.
* D'où la confirmation demandée par l'interface dès qu'une phase resterait à
* changer (docs/decisions.md, section 27).
*/
export function terminerProjet(projet, date = aujourdhui()) {
return {
...projet,
completedDate: date,
discardedDate: undefined,
phases: projet.phases.map((phase) =>
phase.status === 'done' ? phase : { ...phase, status: 'done' }
),
};
}
/** Vrai si clore le projet changerait le statut d'au moins une de ses phases. */
export function clotureEcraseDesStatuts(projet) {
return projet.phases.some((phase) => phase.status !== 'done');
}
/**
* Annule la clôture : le projet retourne à l'état que ses phases commandent.
*
* Les statuts, eux, restent à « terminé » — ils ont été écrasés à la clôture, et
* rien ne dit ce qu'ils valaient avant. C'est le prix de l'opération, et la
* raison pour laquelle elle se confirme.
*/
export function rouvrirProjet(projet) {
return { ...projet, completedDate: undefined };
}
/**
* Écarte un projet. Ce n'est pas le supprimer : il quitte la frise mais garde
* tout, notes comprises — la raison pour laquelle on a dit non a de la valeur le
* jour où la même idée revient.
*
* La date est le seul ancrage temporel qui reste à un projet jamais engagé, dont
* l'horizon a cessé d'être une prévision. Elle est posée, jamais saisie.
*/
export function ecarterProjet(projet, date = aujourdhui()) {
return { ...projet, discardedDate: date, completedDate: undefined };
}
/**
* Sort un projet du cimetière. Aucune destination à choisir : puisque les états
* se déduisent, retirer l'écartement suffit — le projet retrouve seul l'état que
* ses données commandent, engagé s'il a des phases, envisagé sinon.
*
* Son horizon, lui, est resté celui d'avant : il se signalera aussitôt comme
* dépassé, et c'est voulu.
*/
export function reanimerProjet(projet) {
return { ...projet, discardedDate: undefined };
}
export function creerPhase(projet, nom, debut, fin, options = {}) {
const id = fabriquerId(nom, projet.phases.map((p) => p.id));
const jalon = Boolean(options.milestone);

121
js/mois.js
View File

@@ -19,15 +19,19 @@
*/
import {
LIBELLES_ETAT,
LIBELLES_STATUT,
aujourdhui,
duree,
entreesParMois,
etatProjet,
formaterDateLongue,
formaterHorizon,
formaterMois,
formaterPeriode,
moisDe,
phasesParMois,
projetFiltre,
projetFiltreEtat,
} from './model.js';
import { aplatirMarkdown } from './markdown.js';
import { rendreMarkdown } from './notes.js';
@@ -38,13 +42,13 @@ import { pastillesTags } from './tags.js';
*
* @param {HTMLElement} conteneur
* @param {object} planning
* @param {object} options { tagsActifs }
* @param {object} options { tagsActifs, etatsActifs }
*/
export function rendreMois(conteneur, planning, { tagsActifs = [] } = {}) {
const groupes = phasesParMois(planning, tagsActifs);
export function rendreMois(conteneur, planning, { tagsActifs = [], etatsActifs = [] } = {}) {
const groupes = entreesParMois(planning, tagsActifs, etatsActifs);
if (!groupes.length) {
conteneur.replaceChildren(messageVide(planning, tagsActifs));
conteneur.replaceChildren(messageVide(planning, tagsActifs, etatsActifs));
return;
}
@@ -65,8 +69,10 @@ export function rendreMois(conteneur, planning, { tagsActifs = [] } = {}) {
* Le cas des projets masqués mérite son message : rien à l'écran ne rappelle
* l'œil ici, puisque la liste n'a pas de colonne de libellés où le rouvrir.
*/
function messageVide(planning, tagsActifs) {
const retenus = planning.projects.filter((projet) => projetFiltre(projet, tagsActifs));
function messageVide(planning, tagsActifs, etatsActifs = []) {
const retenus = planning.projects.filter(
(projet) => projetFiltre(projet, tagsActifs) && projetFiltreEtat(projet, etatsActifs)
);
const paragraphe = document.createElement('p');
paragraphe.className = 'mois__vide';
@@ -120,18 +126,89 @@ function construireGroupe({ mois, entrees }, moisCourant, tagsActifs) {
return section;
}
/** « 4 tâches · 2 jalons », en taisant celui des deux qui vaut zéro. */
/** « 4 tâches · 2 jalons · 1 envisagé », en taisant ce qui vaut zéro. */
function resumerCompte(entrees) {
const jalons = entrees.filter(({ phase }) => phase.milestone).length;
const taches = entrees.length - jalons;
const sansPhase = entrees.filter(({ horizon }) => horizon);
// Les projets sans phase ne se comptent pas ensemble : « 3 envisagés » et
// « 3 écartés » ne disent pas du tout la même chose du mois qui vient.
const envisages = sansPhase.filter(({ projet }) => etatProjet(projet) === 'considered').length;
const ecartes = sansPhase.length - envisages;
const jalons = entrees.filter(({ phase }) => phase?.milestone).length;
const taches = entrees.length - jalons - sansPhase.length;
const morceaux = [];
if (taches) morceaux.push(`${taches} tâche${taches > 1 ? 's' : ''}`);
if (jalons) morceaux.push(`${jalons} jalon${jalons > 1 ? 's' : ''}`);
if (envisages) morceaux.push(`${envisages} envisagé${envisages > 1 ? 's' : ''}`);
if (ecartes) morceaux.push(`${ecartes} écarté${ecartes > 1 ? 's' : ''}`);
return morceaux.join(' · ');
}
function construireEntree({ projet, phase }, tagsActifs) {
function construireEntree(entree, tagsActifs) {
return entree.horizon
? construireEntreeHorizon(entree, tagsActifs)
: construireEntreePhase(entree, tagsActifs);
}
/**
* Ligne d'un projet qui n'a pas de phase : mêmes colonnes que celle d'une phase,
* pour que la liste reste une grille qu'on lit en diagonale, mais un contenu qui
* dit partout que rien n'est arrêté.
*
* L'intitulé est en italique et l'emplacement du statut porte l'état : c'est
* bien la même question — qu'est-ce qui arrive, et où ça en est — posée à un
* objet qui n'a pas encore de dates. Un projet écarté avant d'avoir été engagé
* passe par ici lui aussi, et se lit « Écarté » à la même place.
*/
function construireEntreeHorizon({ projet, horizon }, tagsActifs) {
const etat = etatProjet(projet);
const ligne = document.createElement('li');
ligne.className = 'mois-entree mois-entree--envisage';
ligne.dataset.etat = etat;
ligne.style.setProperty('--couleur-projet', projet.color);
if (projet.notes) ligne.classList.add('mois-entree--commentee');
ligne.title =
`${projet.name}\n\n${LIBELLES_ETAT[etat]} — ${formaterHorizon(horizon)}` +
(projet.notes ? `\n\n${aplatirMarkdown(projet.notes)}` : '');
ligne.append(triangle(projet.notes, projet.name));
const marque = document.createElement('span');
marque.className = 'mois-entree__marque';
ligne.append(marque);
const dates = document.createElement('span');
dates.className = 'mois-entree__dates';
// Le mois du groupe est déjà écrit en titre : on n'en répète que la fin quand
// l'horizon déborde, comme `formaterPeriode` le fait pour une phase.
dates.textContent = horizon.start === horizon.end ? '—' : `→ ${formaterMois(horizon.end)}`;
ligne.append(dates);
const nomProjet = document.createElement('span');
nomProjet.className = 'mois-entree__projet';
nomProjet.textContent = projet.name;
ligne.append(nomProjet);
ligne.append(pastillesTags(projet.tags, tagsActifs));
const nom = document.createElement('span');
nom.className = 'mois-entree__nom';
nom.textContent = formaterHorizon(horizon);
ligne.append(nom);
const statut = document.createElement('span');
statut.className = 'mois-entree__statut';
statut.dataset.statut = etat;
statut.textContent = LIBELLES_ETAT[etat];
ligne.append(statut);
if (projet.notes) ligne.append(notes(projet.notes));
return ligne;
}
function construireEntreePhase({ projet, phase }, tagsActifs) {
const ligne = document.createElement('li');
ligne.className = `mois-entree mois-entree--${phase.status}`;
ligne.style.setProperty('--couleur-projet', projet.color);
@@ -141,7 +218,7 @@ function construireEntree({ projet, phase }, tagsActifs) {
if (phase.notes) ligne.classList.add('mois-entree--commentee');
ligne.title = infobulle(projet, phase);
ligne.append(triangle(phase));
ligne.append(triangle(phase.notes, phase.name));
// La marque reprend les formes de la frise — losange pour un jalon, barre
// pour une tâche — pour qu'on reconnaisse au même dessin ce qu'on a appris à
@@ -179,7 +256,7 @@ function construireEntree({ projet, phase }, tagsActifs) {
statut.textContent = LIBELLES_STATUT[phase.status];
ligne.append(statut);
if (phase.notes) ligne.append(notes(phase));
if (phase.notes) ligne.append(notes(phase.notes));
return ligne;
}
@@ -196,9 +273,13 @@ function construireEntree({ projet, phase }, tagsActifs) {
* Les lignes sans notes reçoivent tout de même une case vide : les colonnes de
* la grille sont comptées, et il n'y a pas de raison qu'une phase commentée
* décale toutes les autres.
*
* Il reçoit le texte et le nom plutôt que l'objet qui les porte : une ligne de
* projet envisagé déplie les notes du projet là où une ligne de phase déplie les
* siennes, et le triangle n'a pas à savoir laquelle des deux il sert.
*/
function triangle(phase) {
if (!phase.notes) {
function triangle(texte, nom) {
if (!texte) {
const vide = document.createElement('span');
vide.className = 'mois-entree__plier';
return vide;
@@ -210,9 +291,9 @@ function triangle(phase) {
bouton.dataset.action = 'notes';
bouton.setAttribute('aria-expanded', 'false');
// La ligne entière déplie, mais elle n'est pas focusable : ce bouton est le
// seul chemin clavier vers les notes, il lui faut donc un nom qui dise de
// quelle phase il parle.
bouton.setAttribute('aria-label', `Notes de ${phase.name}`);
// seul chemin clavier vers les notes, il lui faut donc un nom qui dise de quoi
// il parle.
bouton.setAttribute('aria-label', `Notes de ${nom}`);
bouton.title = 'Afficher les notes';
bouton.textContent = '▶';
return bouton;
@@ -230,10 +311,10 @@ function triangle(phase) {
* qu'on n'y casse rien. On les voit cochées ou non, ce qui est justement ce
* qu'on vient y chercher quand on fait le point.
*/
function notes(phase) {
function notes(texte) {
const bloc = document.createElement('div');
bloc.className = 'mois-entree__notes';
bloc.append(rendreMarkdown(phase.notes));
bloc.append(rendreMarkdown(texte));
bloc.hidden = true;
return bloc;
}