Ajouter une vue des tâches et jalons groupés par mois
La frise répond mal à « qu'est-ce qui arrive le mois prochain » : la question traverse les projets, alors que la frise les range précisément en couloirs séparés. Il fallait balayer une colonne de dates à travers tous les couloirs en gardant en tête ce qu'on avait vu plus haut — d'où le tableur ressorti à côté. Deux boutons dans la barre d'outils basculent vers une liste qui déroule toutes les phases, projets mêlés, dans l'ordre du calendrier. Chaque ligne se lit quand, chez qui, puis quoi : période, projet et ses tags, intitulé, statut. Une phase est rattachée au seul mois de son début. La répéter dans chaque mois traversé aurait donné 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. Les mois sans rien ne sont pas représentés : l'absence se lit déjà dans le saut d'un titre au suivant. La liste ne s'édite pas, et ce n'est pas une lacune à combler : déplacer une phase demande de voir ce qu'elle chevauche et ce qu'elle repousse, or c'est justement ce voisinage que l'ordre chronologique dissout. Seules les pastilles de tags restent cliquables — filtrer ne change pas les données. Le filtre par tags vaut pour les deux vues, sans rien changer à sa mécanique, si bien qu'on ne se demande jamais si l'une montre plus que l'autre. L'œil (hidden) écarte un projet de la liste comme il écarte ses barres. La vue choisie n'est pas enregistrée, contrairement à la largeur de la colonne des libellés : cette largeur est un réglage d'écran, la vue est un geste de consultation. L'outil s'ouvre donc sur la frise, celle où l'on modifie. Le défilement horizontal de la frise, lui, est mémorisé le temps de l'aller-retour, puisque masquer un élément lui fait perdre son scrollLeft. Deux extractions au passage, chacune parce que deux vues sœurs en ont besoin et qu'aucune n'a à importer l'autre : les noms de mois et le formatage des dates rejoignent model.js, les pastilles de tags un module tags.js. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
97
js/app.js
97
js/app.js
@@ -11,7 +11,8 @@ import { creerPanneau } from './detail.js';
|
||||
import { creerPanneauProjet } from './projet.js';
|
||||
import { creerDialogueConfirmation, creerMenu } from './menu.js';
|
||||
import { decalerAuClavier, etirerAuClavier, installerGlisser } from './drag.js';
|
||||
import { PIXELS_PAR_JOUR, formaterDateLongue, rendre } from './timeline.js';
|
||||
import { PIXELS_PAR_JOUR, rendre } from './timeline.js';
|
||||
import { rendreMois, revelerMoisCourant } from './mois.js';
|
||||
import { creerStockage, viderAvantFermeture } from './storage.js';
|
||||
import {
|
||||
COULEURS,
|
||||
@@ -23,6 +24,7 @@ import {
|
||||
creerPhase,
|
||||
creerProjet,
|
||||
figerReference,
|
||||
formaterDateLongue,
|
||||
libererReference,
|
||||
normaliserTags,
|
||||
planningVide,
|
||||
@@ -45,6 +47,8 @@ const refs = {
|
||||
entete: $('entete'),
|
||||
couloirs: $('couloirs'),
|
||||
frise: $('frise'),
|
||||
vueMois: $('vue-mois'),
|
||||
onglets: $('onglets'),
|
||||
etat: $('etat-sauvegarde'),
|
||||
messageVide: $('message-vide'),
|
||||
messageFiltre: $('message-filtre'),
|
||||
@@ -60,6 +64,27 @@ let planning = planningVide();
|
||||
let echelle = null;
|
||||
let selection = null; // { projet, phase }
|
||||
|
||||
/**
|
||||
* Vue affichée : 'frise' ou 'mois'. État de vue, comme le filtre et la fenêtre
|
||||
* temporelle — jamais enregistré.
|
||||
*
|
||||
* Contrairement à la largeur de la colonne, qui est un réglage d'écran, la vue
|
||||
* choisie est un geste de consultation : on passe par la liste pour faire le
|
||||
* point, on revient à la frise pour travailler. La retrouver au rechargement
|
||||
* imposerait à la séance suivante le regard de la précédente ; l'outil s'ouvre
|
||||
* donc toujours sur la frise, qui est celle où l'on modifie.
|
||||
*/
|
||||
let vue = 'frise';
|
||||
|
||||
/**
|
||||
* Défilement horizontal de la frise au moment où on l'a quittée.
|
||||
*
|
||||
* Masquer un élément lui fait perdre son `scrollLeft` : sans cette mémoire, un
|
||||
* aller-retour par la liste ramènerait la frise à son extrême gauche, soit des
|
||||
* années avant ce qu'on regardait.
|
||||
*/
|
||||
let defilementFrise = 0;
|
||||
|
||||
/**
|
||||
* Tags sélectionnés dans la barre de filtres. Comme la fenêtre temporelle,
|
||||
* c'est un état de **vue** : jamais enregistré, jamais partagé.
|
||||
@@ -201,15 +226,26 @@ function dessiner() {
|
||||
// Filtrer jusqu'à ne plus rien retenir est facile avec un ET : sans ce
|
||||
// message, la frise vide laisserait croire que les projets ont disparu.
|
||||
refs.messageFiltre.hidden = !aDesProjets || retenus.length > 0;
|
||||
refs.frise.hidden = !aDesProjets || retenus.length === 0;
|
||||
|
||||
// Les deux vues partagent le même sort face aux messages : ce qui n'a aucun
|
||||
// projet à montrer n'en a pas davantage à lister.
|
||||
const aQuelqueChoseAMontrer = aDesProjets && retenus.length > 0;
|
||||
refs.frise.hidden = !aQuelqueChoseAMontrer || vue !== 'frise';
|
||||
refs.vueMois.hidden = !aQuelqueChoseAMontrer || vue !== 'mois';
|
||||
|
||||
peindreFiltres();
|
||||
peindreOnglets();
|
||||
|
||||
if (!aDesProjets) {
|
||||
echelle = null;
|
||||
return;
|
||||
}
|
||||
|
||||
if (vue === 'mois') {
|
||||
rendreMois(refs.vueMois, planning, { tagsActifs });
|
||||
return;
|
||||
}
|
||||
|
||||
elargirPourContenir();
|
||||
echelle = rendre(refs, planning, { fenetre, selection, tagsActifs });
|
||||
|
||||
@@ -309,6 +345,49 @@ function effacerFiltres() {
|
||||
refs.effacerFiltres.addEventListener('click', effacerFiltres);
|
||||
$('effacer-filtres-vide').addEventListener('click', effacerFiltres);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Bascule entre la frise et la vue par mois
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function peindreOnglets() {
|
||||
for (const onglet of refs.onglets.querySelectorAll('[data-vue]')) {
|
||||
onglet.setAttribute('aria-pressed', String(onglet.dataset.vue === vue));
|
||||
}
|
||||
}
|
||||
|
||||
function basculerVue(suivante) {
|
||||
if (suivante === vue || !suivante) return;
|
||||
|
||||
if (vue === 'frise') defilementFrise = refs.frise.scrollLeft;
|
||||
vue = suivante;
|
||||
|
||||
// Les deux panneaux modifient une phase ou un projet ; la vue par mois se
|
||||
// lit, elle ne s'édite pas. Les laisser ouverts par-dessus une liste où plus
|
||||
// rien ne désigne leur objet en ferait des fenêtres orphelines.
|
||||
panneau.fermer();
|
||||
panneauProjet.fermer();
|
||||
|
||||
dessiner();
|
||||
|
||||
// Les deux restaurations sont synchrones : l'élément vient d'être démasqué,
|
||||
// et lire ou écrire `scroll*` force le calcul de mise en page dont elles ont
|
||||
// besoin.
|
||||
if (vue === 'frise') refs.frise.scrollLeft = defilementFrise;
|
||||
else revelerMoisCourant(refs.vueMois);
|
||||
}
|
||||
|
||||
refs.onglets.addEventListener('click', (evenement) => {
|
||||
const onglet = evenement.target.closest('[data-vue]');
|
||||
if (onglet) basculerVue(onglet.dataset.vue);
|
||||
});
|
||||
|
||||
// La vue par mois n'a ni barres ni poignées, mais ses pastilles de tags
|
||||
// filtrent comme celles de la colonne des libellés.
|
||||
refs.vueMois.addEventListener('click', (evenement) => {
|
||||
const pastille = evenement.target.closest('[data-action="tag"]');
|
||||
if (pastille) basculerTag(pastille.dataset.tag);
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Largeur de la colonne des libellés
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -783,6 +862,12 @@ async function supprimerLeProjet(projet) {
|
||||
* que celle qui sert ensuite à les modifier.
|
||||
*/
|
||||
function nouveauProjet() {
|
||||
// Un projet naît sans phase : il n'apparaîtrait nulle part dans une liste qui
|
||||
// ne montre que des tâches et des jalons, et le bouton semblerait sans effet.
|
||||
// On revient donc à la frise, où le nouveau couloir se voit — et où l'on
|
||||
// pourra lui ajouter ses phases.
|
||||
basculerVue('frise');
|
||||
|
||||
// Un filtre actif préremplit les tags : quand on crée un projet en ne
|
||||
// regardant que les projets « client », c'en est presque toujours un — et
|
||||
// sans cela le nouveau venu naîtrait invisible, hors du filtre courant.
|
||||
@@ -795,7 +880,13 @@ function nouveauProjet() {
|
||||
// Barre d'outils
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
$('aller-aujourdhui').addEventListener('click', () => centrerSur(aujourdhui()));
|
||||
// « Aujourd'hui » veut dire la même chose dans les deux vues — ramène-moi à la
|
||||
// date du jour — même si le geste diffère : un défilement horizontal sur la
|
||||
// frise, vertical dans la liste.
|
||||
$('aller-aujourdhui').addEventListener('click', () => {
|
||||
if (vue === 'mois') revelerMoisCourant(refs.vueMois);
|
||||
else centrerSur(aujourdhui());
|
||||
});
|
||||
$('nouveau-projet').addEventListener('click', nouveauProjet);
|
||||
$('premier-projet').addEventListener('click', nouveauProjet);
|
||||
|
||||
|
||||
104
js/model.js
104
js/model.js
@@ -29,6 +29,21 @@ export const COULEURS = [
|
||||
'#8b5cf6', '#06b6d4', '#ec4899', '#84cc16',
|
||||
];
|
||||
|
||||
/**
|
||||
* Noms de mois, en deux longueurs. Ils vivent ici plutôt que dans une vue :
|
||||
* la frise et la vue par mois les emploient toutes les deux, et aucune des deux
|
||||
* n'a à dépendre de l'autre pour écrire « septembre ».
|
||||
*/
|
||||
export const MOIS_COURTS = [
|
||||
'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin',
|
||||
'juil.', 'août', 'sept.', 'oct.', 'nov.', 'déc.',
|
||||
];
|
||||
|
||||
export const MOIS_LONGS = [
|
||||
'janvier', 'février', 'mars', 'avril', 'mai', 'juin',
|
||||
'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre',
|
||||
];
|
||||
|
||||
const MOTIF_DATE = /^\d{4}-\d{2}-\d{2}$/;
|
||||
const MOTIF_COULEUR = /^#[0-9a-f]{6}$/i;
|
||||
const MS_PAR_JOUR = 86400000;
|
||||
@@ -123,6 +138,43 @@ export function semaineISO(texte) {
|
||||
};
|
||||
}
|
||||
|
||||
/** Date « AAAA-MM-JJ » rendue lisible : « 12 sept. 2026 ». */
|
||||
export function formaterDateLongue(date) {
|
||||
const [a, m, j] = date.split('-');
|
||||
return `${j} ${MOIS_COURTS[Number(m) - 1]} ${a}`;
|
||||
}
|
||||
|
||||
/** Mois d'une date, sous la forme « AAAA-MM » — la clé de regroupement. */
|
||||
export function moisDe(date) {
|
||||
return date.slice(0, 7);
|
||||
}
|
||||
|
||||
/** Mois « AAAA-MM » rendu lisible : « septembre 2026 ». */
|
||||
export function formaterMois(mois) {
|
||||
return `${MOIS_LONGS[Number(mois.slice(5, 7)) - 1]} ${mois.slice(0, 4)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
* mois, « 12 → 4 nov. » pour une qui en déborde, « 12 → 4 janv. 2027 » pour une
|
||||
* qui déborde de l'année. Rien n'est répété tant que rien ne change, ce qui
|
||||
* fait de l'apparition d'un mois — ou d'une année — le signal du dépassement.
|
||||
*/
|
||||
export function formaterPeriode(phase) {
|
||||
const quantieme = (date) => String(Number(date.slice(8, 10)));
|
||||
if (phase.milestone) return quantieme(phase.start);
|
||||
|
||||
if (phase.end.slice(0, 7) === phase.start.slice(0, 7)) {
|
||||
return `${quantieme(phase.start)} → ${quantieme(phase.end)}`;
|
||||
}
|
||||
|
||||
const moisFin = MOIS_COURTS[Number(phase.end.slice(5, 7)) - 1];
|
||||
const anneeFin =
|
||||
phase.end.slice(0, 4) === phase.start.slice(0, 4) ? '' : ` ${phase.end.slice(0, 4)}`;
|
||||
return `${quantieme(phase.start)} → ${quantieme(phase.end)} ${moisFin}${anneeFin}`;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Identifiants
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -499,6 +551,58 @@ export function formulerDerive(jours) {
|
||||
return jours > 0 ? `+${quantite}` : `−${quantite}`;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Regroupement par mois
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toutes les phases du planning regroupées 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.
|
||||
*
|
||||
* 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.
|
||||
*
|
||||
* 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}>}>}
|
||||
* trié du plus ancien au plus récent, chaque mois trié par date puis par nom.
|
||||
*/
|
||||
export function phasesParMois(planning, tagsActifs = []) {
|
||||
const groupes = new Map();
|
||||
|
||||
for (const projet of planning.projects) {
|
||||
if (projet.hidden || !projetFiltre(projet, tagsActifs)) 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 });
|
||||
}
|
||||
}
|
||||
|
||||
return [...groupes.keys()]
|
||||
.sort() // « AAAA-MM » se trie comme du texte
|
||||
.map((mois) => ({
|
||||
mois,
|
||||
entrees: groupes.get(mois).sort(
|
||||
(a, b) =>
|
||||
versUTC(a.phase.start) - versUTC(b.phase.start) ||
|
||||
a.projet.name.localeCompare(b.projet.name, 'fr') ||
|
||||
a.phase.name.localeCompare(b.phase.name, 'fr')
|
||||
),
|
||||
}));
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Modifications
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
220
js/mois.js
Normal file
220
js/mois.js
Normal file
@@ -0,0 +1,220 @@
|
||||
/**
|
||||
* Vue par mois : toutes les tâches et tous les jalons du planning en une seule
|
||||
* liste, regroupés par mois de début, projets mêlés.
|
||||
*
|
||||
* C'est la vue transversale que la frise ne peut pas donner. Sur la frise,
|
||||
* chaque projet a son couloir : savoir ce qui démarre en octobre demande de
|
||||
* balayer une colonne de dates à travers tous les couloirs. Ici les projets se
|
||||
* mêlent et l'ordre est celui du calendrier — la question « qu'est-ce qui
|
||||
* arrive le mois prochain » se lit d'un coup d'œil.
|
||||
*
|
||||
* Lecture seule, et sans exception : aucune poignée, aucun glisser, un clic sur
|
||||
* une ligne n'ouvre rien. La vue sert à faire le point, pas à arbitrer ; les
|
||||
* dates se modifient là où elles se voient les unes par rapport aux autres,
|
||||
* c'est-à-dire sur la frise. Seules les pastilles de tags restent cliquables —
|
||||
* filtrer ne change pas les données, c'est une façon de regarder.
|
||||
*
|
||||
* Comme timeline.js, le rendu est complet à chaque appel : on reconstruit le
|
||||
* DOM depuis l'état plutôt que d'appliquer des différences.
|
||||
*/
|
||||
|
||||
import {
|
||||
LIBELLES_STATUT,
|
||||
aujourdhui,
|
||||
duree,
|
||||
formaterDateLongue,
|
||||
formaterMois,
|
||||
formaterPeriode,
|
||||
moisDe,
|
||||
phasesParMois,
|
||||
projetFiltre,
|
||||
} from './model.js';
|
||||
import { pastillesTags } from './tags.js';
|
||||
|
||||
/**
|
||||
* Reconstruit la liste dans son conteneur.
|
||||
*
|
||||
* @param {HTMLElement} conteneur
|
||||
* @param {object} planning
|
||||
* @param {object} options { tagsActifs }
|
||||
*/
|
||||
export function rendreMois(conteneur, planning, { tagsActifs = [] } = {}) {
|
||||
const groupes = phasesParMois(planning, tagsActifs);
|
||||
|
||||
if (!groupes.length) {
|
||||
conteneur.replaceChildren(messageVide(planning, tagsActifs));
|
||||
return;
|
||||
}
|
||||
|
||||
const moisCourant = moisDe(aujourdhui());
|
||||
conteneur.replaceChildren(
|
||||
...groupes.map((groupe) => construireGroupe(groupe, moisCourant, tagsActifs))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Le cas « rien à montrer » n'a pas une seule cause, et elles ne se règlent pas
|
||||
* de la même façon : des projets encore vides attendent qu'on leur ajoute des
|
||||
* phases, un filtre trop serré attend qu'on le desserre, des projets masqués
|
||||
* attendent qu'on rouvre l'œil. Les messages généraux d'app.js ne couvrent
|
||||
* aucun des trois — ils parlent de projets, quand cette vue ne montre que des
|
||||
* phases.
|
||||
*
|
||||
* 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));
|
||||
|
||||
const paragraphe = document.createElement('p');
|
||||
paragraphe.className = 'mois__vide';
|
||||
|
||||
if (retenus.length && retenus.every((projet) => projet.hidden)) {
|
||||
paragraphe.textContent =
|
||||
'Tous les projets retenus sont masqués de la frise : leurs tâches ne sont pas listées ' +
|
||||
'ici non plus. Le menu ⋯ de la frise les rétablit.';
|
||||
} else if (tagsActifs.length) {
|
||||
paragraphe.textContent = 'Aucune tâche ni jalon dans les projets retenus par le filtre.';
|
||||
} else {
|
||||
paragraphe.textContent = 'Aucune tâche ni jalon : les projets du planning sont encore vides.';
|
||||
}
|
||||
|
||||
return paragraphe;
|
||||
}
|
||||
|
||||
function construireGroupe({ mois, entrees }, moisCourant, tagsActifs) {
|
||||
const section = document.createElement('section');
|
||||
section.className = 'mois-groupe';
|
||||
section.dataset.mois = mois;
|
||||
if (mois === moisCourant) section.dataset.courant = 'true';
|
||||
|
||||
const titre = document.createElement('h2');
|
||||
titre.className = 'mois-groupe__titre';
|
||||
|
||||
const nom = document.createElement('span');
|
||||
nom.className = 'mois-groupe__nom';
|
||||
nom.textContent = formaterMois(mois);
|
||||
titre.append(nom);
|
||||
|
||||
if (mois === moisCourant) {
|
||||
const marque = document.createElement('span');
|
||||
marque.className = 'mois-groupe__courant';
|
||||
marque.textContent = 'ce mois-ci';
|
||||
titre.append(marque);
|
||||
}
|
||||
|
||||
const compte = document.createElement('span');
|
||||
compte.className = 'mois-groupe__compte';
|
||||
compte.textContent = resumerCompte(entrees);
|
||||
titre.append(compte);
|
||||
|
||||
section.append(titre);
|
||||
|
||||
const liste = document.createElement('ul');
|
||||
liste.className = 'mois-entrees';
|
||||
liste.append(...entrees.map((entree) => construireEntree(entree, tagsActifs)));
|
||||
section.append(liste);
|
||||
|
||||
return section;
|
||||
}
|
||||
|
||||
/** « 4 tâches · 2 jalons », en taisant celui des deux qui vaut zéro. */
|
||||
function resumerCompte(entrees) {
|
||||
const jalons = entrees.filter(({ phase }) => phase.milestone).length;
|
||||
const taches = entrees.length - jalons;
|
||||
|
||||
const morceaux = [];
|
||||
if (taches) morceaux.push(`${taches} tâche${taches > 1 ? 's' : ''}`);
|
||||
if (jalons) morceaux.push(`${jalons} jalon${jalons > 1 ? 's' : ''}`);
|
||||
return morceaux.join(' · ');
|
||||
}
|
||||
|
||||
function construireEntree({ projet, phase }, tagsActifs) {
|
||||
const ligne = document.createElement('li');
|
||||
ligne.className = `mois-entree mois-entree--${phase.status}`;
|
||||
ligne.style.setProperty('--couleur-projet', projet.color);
|
||||
if (phase.milestone) ligne.classList.add('mois-entree--jalon');
|
||||
ligne.title = infobulle(projet, phase);
|
||||
|
||||
// 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 à
|
||||
// lire là-bas.
|
||||
const marque = document.createElement('span');
|
||||
marque.className = 'mois-entree__marque';
|
||||
ligne.append(marque);
|
||||
|
||||
const dates = document.createElement('span');
|
||||
dates.className = 'mois-entree__dates';
|
||||
dates.textContent = formaterPeriode(phase);
|
||||
ligne.append(dates);
|
||||
|
||||
// Le projet précède la phase : c'est l'ordre dans lequel on nomme les choses
|
||||
// — « le cadrage du site web », pas l'inverse —, et il donne au regard une
|
||||
// colonne stable où retrouver la provenance avant de lire l'intitulé.
|
||||
const nomProjet = document.createElement('span');
|
||||
nomProjet.className = 'mois-entree__projet';
|
||||
nomProjet.textContent = projet.name;
|
||||
ligne.append(nomProjet);
|
||||
|
||||
// Les tags suivent le projet, qu'ils qualifient — pas la phase, qui n'en
|
||||
// porte pas. Toujours posés, même vides : les colonnes de la grille sont
|
||||
// comptées, et un projet sans tag ferait autrement glisser toute la ligne.
|
||||
ligne.append(pastillesTags(projet.tags, tagsActifs));
|
||||
|
||||
const nom = document.createElement('span');
|
||||
nom.className = 'mois-entree__nom';
|
||||
nom.textContent = phase.name;
|
||||
ligne.append(nom);
|
||||
|
||||
const statut = document.createElement('span');
|
||||
statut.className = 'mois-entree__statut';
|
||||
statut.dataset.statut = phase.status;
|
||||
statut.textContent = LIBELLES_STATUT[phase.status];
|
||||
ligne.append(statut);
|
||||
|
||||
return ligne;
|
||||
}
|
||||
|
||||
function infobulle(projet, phase) {
|
||||
const jours = duree(phase);
|
||||
return (
|
||||
`${phase.name}\n${projet.name}\n\n` +
|
||||
(phase.milestone
|
||||
? `Jalon du ${formaterDateLongue(phase.start)}`
|
||||
: `${formaterDateLongue(phase.start)} → ${formaterDateLongue(phase.end)}` +
|
||||
` (${jours} jour${jours > 1 ? 's' : ''})`) +
|
||||
`\n${LIBELLES_STATUT[phase.status]}` +
|
||||
(phase.notes ? `\n\n${phase.notes}` : '')
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Amène le mois courant en haut de la vue, ou à défaut le premier mois qui le
|
||||
* suit.
|
||||
*
|
||||
* Sans cela, la liste s'ouvre sur le mois le plus ancien du planning — souvent
|
||||
* des phases terminées depuis des mois. Le repli sur le mois suivant compte :
|
||||
* un planning peut n'avoir rien du tout au mois courant, et atterrir alors sur
|
||||
* son passé serait le pire des deux mondes.
|
||||
*/
|
||||
export function revelerMoisCourant(conteneur) {
|
||||
const courant = moisDe(aujourdhui());
|
||||
const groupes = [...conteneur.querySelectorAll('.mois-groupe')];
|
||||
const cible = groupes.find((groupe) => groupe.dataset.mois >= courant);
|
||||
|
||||
// Aucun mois à venir : tout le planning est derrière nous, on montre sa fin.
|
||||
if (!cible) {
|
||||
conteneur.scrollTop = conteneur.scrollHeight;
|
||||
return;
|
||||
}
|
||||
|
||||
// `offsetTop` est ici relatif au conteneur, qui est son `offsetParent` : la
|
||||
// règle `position: relative` de `.mois` dans style.css en dépend.
|
||||
//
|
||||
// Quand le mois visé tient déjà à l'écran sans défiler — un planning court,
|
||||
// ou qui commence bientôt —, on ne défile pas. Le navigateur plafonnerait
|
||||
// sinon le défilement demandé à son maximum, ce qui glisse les premières
|
||||
// lignes sous le titre collant du mois d'avant sans rien gagner.
|
||||
const tientDejaAEcran = cible.offsetTop + cible.offsetHeight <= conteneur.clientHeight;
|
||||
conteneur.scrollTop = tientDejaAEcran ? 0 : cible.offsetTop;
|
||||
}
|
||||
71
js/tags.js
Normal file
71
js/tags.js
Normal file
@@ -0,0 +1,71 @@
|
||||
/**
|
||||
* Pastilles de tags, partagées par la colonne des libellés (timeline.js) et la
|
||||
* vue par mois (mois.js).
|
||||
*
|
||||
* Elles vivent dans leur propre module parce que deux vues les affichent et
|
||||
* qu'aucune des deux n'a à importer l'autre pour cela. La barre de filtres
|
||||
* d'app.js, elle, garde sa propre construction : ses pastilles listent les tags
|
||||
* du planning entier, pas ceux d'un projet, et ne se résument jamais à un
|
||||
* compteur.
|
||||
*/
|
||||
|
||||
import { cleTag, teinteTag } from './model.js';
|
||||
|
||||
/**
|
||||
* Au-delà de ce nombre, les tags se résument à un compteur. La colonne des
|
||||
* libellés est étroite et disputée : montrer quatre pastilles y revenait à les
|
||||
* rogner toutes jusqu'à l'initiale, ce qui coûtait la place d'un tag sans en
|
||||
* livrer le nom. Les tags masqués restent lisibles dans l'infobulle, et tous
|
||||
* sont cliquables depuis la barre de filtres.
|
||||
*/
|
||||
const PASTILLES_VISIBLES = 2;
|
||||
|
||||
/**
|
||||
* Chaque pastille est un bouton : cliquer un tag l'ajoute au filtre, le
|
||||
* recliquer l'en retire. C'est le geste le plus court pour passer d'un projet
|
||||
* repéré à « montre-moi tous ceux qui lui ressemblent », sans remonter à la
|
||||
* barre de filtres.
|
||||
*/
|
||||
export function pastillesTags(tags, tagsActifs = []) {
|
||||
const conteneur = document.createElement('span');
|
||||
conteneur.className = 'tags';
|
||||
|
||||
// Deux projets peuvent écrire le même tag différemment (« Client », « client ») :
|
||||
// c'est la clé, pas la graphie, qui décide s'il est actif.
|
||||
const clesActives = new Set(tagsActifs.map(cleTag));
|
||||
|
||||
// Un tag présent dans le filtre courant passe devant : c'est celui qui
|
||||
// explique pourquoi le projet est à l'écran, il ne doit pas tomber dans le
|
||||
// compteur.
|
||||
const ordonnes = [...tags].sort(
|
||||
(a, b) => Number(clesActives.has(cleTag(b))) - Number(clesActives.has(cleTag(a)))
|
||||
);
|
||||
const montres = ordonnes.slice(0, PASTILLES_VISIBLES);
|
||||
const restants = ordonnes.slice(PASTILLES_VISIBLES);
|
||||
|
||||
for (const tag of montres) {
|
||||
const pastille = document.createElement('button');
|
||||
pastille.type = 'button';
|
||||
pastille.className = 'tag';
|
||||
pastille.style.setProperty('--teinte-tag', String(teinteTag(tag)));
|
||||
pastille.textContent = tag;
|
||||
pastille.dataset.action = 'tag';
|
||||
pastille.dataset.tag = tag;
|
||||
|
||||
const actif = clesActives.has(cleTag(tag));
|
||||
pastille.setAttribute('aria-pressed', String(actif));
|
||||
pastille.title = actif ? `Retirer « ${tag} » du filtre` : `Filtrer sur « ${tag} »`;
|
||||
|
||||
conteneur.append(pastille);
|
||||
}
|
||||
|
||||
if (restants.length) {
|
||||
const compteur = document.createElement('span');
|
||||
compteur.className = 'tag--reste';
|
||||
compteur.textContent = `+${restants.length}`;
|
||||
compteur.title = restants.join(', ');
|
||||
conteneur.append(compteur);
|
||||
}
|
||||
|
||||
return conteneur;
|
||||
}
|
||||
@@ -13,21 +13,23 @@
|
||||
|
||||
import {
|
||||
LIBELLES_STATUT,
|
||||
MOIS_COURTS,
|
||||
MOIS_LONGS,
|
||||
ajouterJours,
|
||||
aujourdhui,
|
||||
bornesProjet,
|
||||
bornesReference,
|
||||
cleTag,
|
||||
deriveProjet,
|
||||
dimancheDeLaSemaine,
|
||||
ecartJours,
|
||||
formaterDateLongue,
|
||||
formulerDerive,
|
||||
lundiDeLaSemaine,
|
||||
projetFiltre,
|
||||
semaineISO,
|
||||
teinteTag,
|
||||
versUTC,
|
||||
} from './model.js';
|
||||
import { pastillesTags } from './tags.js';
|
||||
|
||||
/**
|
||||
* Échelle unique : 6 pixels par jour, soit 42 pixels par semaine.
|
||||
@@ -45,16 +47,6 @@ export const PIXELS_PAR_JOUR = 6;
|
||||
*/
|
||||
const LIBELLE_MINI = { annee: 40, mois: 34, semaine: 30 };
|
||||
|
||||
const MOIS_COURTS = [
|
||||
'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin',
|
||||
'juil.', 'août', 'sept.', 'oct.', 'nov.', 'déc.',
|
||||
];
|
||||
|
||||
const MOIS_LONGS = [
|
||||
'janvier', 'février', 'mars', 'avril', 'mai', 'juin',
|
||||
'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre',
|
||||
];
|
||||
|
||||
/**
|
||||
* Calcule l'échelle : origine, largeur totale et conversions date <-> pixel.
|
||||
* Toute la géométrie de la frise passe par cet objet.
|
||||
@@ -272,11 +264,6 @@ function moisSuivant(annee, mois) {
|
||||
return mois === 12 ? { annee: annee + 1, mois: 1 } : { annee, mois: mois + 1 };
|
||||
}
|
||||
|
||||
export function formaterDateLongue(date) {
|
||||
const [a, m, j] = date.split('-');
|
||||
return `${j} ${MOIS_COURTS[Number(m) - 1]} ${a}`;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Colonne des libellés
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -392,66 +379,6 @@ function libelleProjet(projet, tagsActifs = []) {
|
||||
return ligne;
|
||||
}
|
||||
|
||||
/**
|
||||
* Pastilles de tags d'un projet, dans sa ligne de libellé.
|
||||
*
|
||||
* Chaque pastille est un bouton : cliquer un tag l'ajoute au filtre, le
|
||||
* recliquer l'en retire. C'est le geste le plus court pour passer d'un projet
|
||||
* repéré à « montre-moi tous ceux qui lui ressemblent », sans remonter à la
|
||||
* barre de filtres.
|
||||
*
|
||||
* Au-delà de `PASTILLES_VISIBLES`, les tags se résument à un compteur. La
|
||||
* colonne est étroite et disputée : montrer quatre pastilles y revenait à les
|
||||
* rogner toutes jusqu'à l'initiale, ce qui coûtait la place d'un tag sans en
|
||||
* livrer le nom. Les tags masqués restent lisibles dans l'infobulle, et tous
|
||||
* sont cliquables depuis la barre de filtres.
|
||||
*/
|
||||
const PASTILLES_VISIBLES = 2;
|
||||
|
||||
function pastillesTags(tags, tagsActifs) {
|
||||
const conteneur = document.createElement('span');
|
||||
conteneur.className = 'tags';
|
||||
|
||||
// Deux projets peuvent écrire le même tag différemment (« Client », « client ») :
|
||||
// c'est la clé, pas la graphie, qui décide s'il est actif.
|
||||
const clesActives = new Set(tagsActifs.map(cleTag));
|
||||
|
||||
// Un tag présent dans le filtre courant passe devant : c'est celui qui
|
||||
// explique pourquoi le projet est à l'écran, il ne doit pas tomber dans le
|
||||
// compteur.
|
||||
const ordonnes = [...tags].sort(
|
||||
(a, b) => Number(clesActives.has(cleTag(b))) - Number(clesActives.has(cleTag(a)))
|
||||
);
|
||||
const montres = ordonnes.slice(0, PASTILLES_VISIBLES);
|
||||
const restants = ordonnes.slice(PASTILLES_VISIBLES);
|
||||
|
||||
for (const tag of montres) {
|
||||
const pastille = document.createElement('button');
|
||||
pastille.type = 'button';
|
||||
pastille.className = 'tag';
|
||||
pastille.style.setProperty('--teinte-tag', String(teinteTag(tag)));
|
||||
pastille.textContent = tag;
|
||||
pastille.dataset.action = 'tag';
|
||||
pastille.dataset.tag = tag;
|
||||
|
||||
const actif = clesActives.has(cleTag(tag));
|
||||
pastille.setAttribute('aria-pressed', String(actif));
|
||||
pastille.title = actif ? `Retirer « ${tag} » du filtre` : `Filtrer sur « ${tag} »`;
|
||||
|
||||
conteneur.append(pastille);
|
||||
}
|
||||
|
||||
if (restants.length) {
|
||||
const compteur = document.createElement('span');
|
||||
compteur.className = 'tag--reste';
|
||||
compteur.textContent = `+${restants.length}`;
|
||||
compteur.title = restants.join(', ');
|
||||
conteneur.append(compteur);
|
||||
}
|
||||
|
||||
return conteneur;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Couloirs
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user