feat: sprints with burndown and carry-over
Plan sprints with dates and a goal, run one at a time per project, and put tickets in them from the ticket page. The Sprints tab follows the one under way with its progress and a burndown in tickets or points against the ideal line. Closing a sprint sends what was left to the next one or back to the backlog; the board can be filtered by sprint. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
571
libs/web/tracker/presenters/src/lib/pages/sprints.page.ts
Normal file
571
libs/web/tracker/presenters/src/lib/pages/sprints.page.ts
Normal file
@@ -0,0 +1,571 @@
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
computed,
|
||||
effect,
|
||||
inject,
|
||||
signal,
|
||||
TemplateRef,
|
||||
untracked,
|
||||
viewChild,
|
||||
} from '@angular/core';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import {
|
||||
PiActionButtonComponent,
|
||||
PiDateRangeFieldComponent,
|
||||
PiEmptyStateComponent,
|
||||
PiLabelDirective,
|
||||
PiProgressBarComponent,
|
||||
PiSegmentedControlComponent,
|
||||
PiSelectFieldComponent,
|
||||
PiTextareaComponent,
|
||||
PiTextFieldComponent,
|
||||
type PiSelectFieldOption,
|
||||
} from '@pi/ui';
|
||||
import { DrawerService } from '@task-stream/web/shared/ui';
|
||||
import { ProjectFacade } from '@task-stream/web/tracker/application';
|
||||
import { Sprint, SprintStatus } from '@task-stream/web/tracker/domain';
|
||||
import { ChartSeries, last, SeriesChartComponent } from '../ui/series-chart';
|
||||
|
||||
const DAY = 86_400_000;
|
||||
const BACKLOG = '';
|
||||
|
||||
/** `YYYY-MM-DD` of a local date (what the date picker gives). */
|
||||
const isoDay = (date: Date) =>
|
||||
`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||||
const localDate = (day: string) => new Date(`${day}T00:00:00`);
|
||||
const label = (day: string, month: 'short' | 'long' = 'short') =>
|
||||
localDate(day).toLocaleDateString('es', { day: 'numeric', month });
|
||||
|
||||
const STATUS: Record<SprintStatus, string> = {
|
||||
[SprintStatus.ACTIVE]: 'En curso',
|
||||
[SprintStatus.PLANNED]: 'Planificado',
|
||||
[SprintStatus.CLOSED]: 'Cerrado',
|
||||
};
|
||||
|
||||
/** /p/:key/sprints — plan the iterations, follow the one under way, close it. */
|
||||
@Component({
|
||||
selector: 'ts-sprints-page',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [
|
||||
RouterLink,
|
||||
SeriesChartComponent,
|
||||
PiActionButtonComponent,
|
||||
PiDateRangeFieldComponent,
|
||||
PiEmptyStateComponent,
|
||||
PiLabelDirective,
|
||||
PiProgressBarComponent,
|
||||
PiSegmentedControlComponent,
|
||||
PiSelectFieldComponent,
|
||||
PiTextareaComponent,
|
||||
PiTextFieldComponent,
|
||||
],
|
||||
template: `
|
||||
<div class="ts-section-header">
|
||||
<p class="ts-muted">
|
||||
Iteraciones de unas semanas. Mete tickets desde su ficha; al cerrar un
|
||||
sprint, lo que quede pasa al siguiente o vuelve al backlog.
|
||||
</p>
|
||||
@if (project.canManage()) {
|
||||
<pi-action-button
|
||||
color="primary"
|
||||
text="Planificar sprint"
|
||||
(execute)="openCreate()"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (focus(); as sprint) {
|
||||
<section
|
||||
class="ts-sprint ts-sprint--focus ts-panel"
|
||||
[attr.data-status]="sprint.status"
|
||||
aria-labelledby="ts-sprint-focus"
|
||||
>
|
||||
<header class="ts-sprint__head">
|
||||
<h2 id="ts-sprint-focus">{{ sprint.name }}</h2>
|
||||
<span class="ts-pill" [attr.data-status]="sprint.status">{{
|
||||
statusLabel(sprint)
|
||||
}}</span>
|
||||
<span class="ts-muted">{{ when(sprint) }}</span>
|
||||
</header>
|
||||
@if (sprint.goal) {
|
||||
<p class="ts-sprint__goal">🎯 {{ sprint.goal }}</p>
|
||||
}
|
||||
<pi-progress-bar
|
||||
[label]="progressLabel(sprint)"
|
||||
[value]="sprint.progress.percent"
|
||||
/>
|
||||
@if (project.burndown()?.sprintId === sprint.id) {
|
||||
<div class="ts-sprint__chart">
|
||||
<pi-segmented-control
|
||||
ariaLabel="Medir en"
|
||||
[options]="units"
|
||||
[(value)]="unit"
|
||||
/>
|
||||
<ts-series-chart
|
||||
axisLabel="Día"
|
||||
[labels]="burndownLabels()"
|
||||
[longLabels]="burndownLongLabels()"
|
||||
[series]="burndownSeries()"
|
||||
[marker]="todayMarker()"
|
||||
[summary]="burndownSummary()"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
<div class="ts-sprint__actions">
|
||||
<a
|
||||
class="ts-plain-link"
|
||||
routerLink="../board"
|
||||
[queryParams]="{ sprint: sprint.id }"
|
||||
>Ver en el tablero →</a
|
||||
>
|
||||
<span class="ts-spacer"></span>
|
||||
@if (project.canManage()) {
|
||||
@switch (sprint.status) {
|
||||
@case ('ACTIVE') {
|
||||
<pi-action-button
|
||||
size="small"
|
||||
color="grey"
|
||||
appearance="outline"
|
||||
text="Editar"
|
||||
(execute)="openEdit(sprint)"
|
||||
/>
|
||||
<pi-action-button
|
||||
size="small"
|
||||
color="primary"
|
||||
text="Cerrar sprint"
|
||||
(execute)="openClose(sprint)"
|
||||
/>
|
||||
}
|
||||
@case ('PLANNED') {
|
||||
<pi-action-button
|
||||
size="small"
|
||||
color="grey"
|
||||
appearance="outline"
|
||||
text="Editar"
|
||||
(execute)="openEdit(sprint)"
|
||||
/>
|
||||
<pi-action-button
|
||||
size="small"
|
||||
color="primary"
|
||||
text="Empezar"
|
||||
[disabled]="!!project.activeSprint()"
|
||||
(execute)="project.startSprint(sprint.id)"
|
||||
/>
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
|
||||
@if (planned().length) {
|
||||
<h2 class="ts-sprints__title">Planificados</h2>
|
||||
<ul class="ts-sprints">
|
||||
@for (sprint of planned(); track sprint.id) {
|
||||
<li class="ts-sprint ts-panel" [class.is-focus]="isFocus(sprint)">
|
||||
<button
|
||||
type="button"
|
||||
class="ts-sprint__pick"
|
||||
(click)="show(sprint)"
|
||||
>
|
||||
<strong>{{ sprint.name }}</strong>
|
||||
<span class="ts-muted">{{ when(sprint) }}</span>
|
||||
<span class="ts-mono"
|
||||
>{{ sprint.progress.total }} tickets ·
|
||||
{{ sprint.progress.storyPoints }} pts</span
|
||||
>
|
||||
</button>
|
||||
@if (project.canManage()) {
|
||||
<span class="ts-sprint__row-actions">
|
||||
<pi-action-button
|
||||
size="small"
|
||||
color="grey"
|
||||
appearance="ghost"
|
||||
text="Borrar"
|
||||
(execute)="project.deleteSprint(sprint.id)"
|
||||
/>
|
||||
<pi-action-button
|
||||
size="small"
|
||||
color="primary"
|
||||
appearance="outline"
|
||||
text="Empezar"
|
||||
[disabled]="!!project.activeSprint()"
|
||||
(execute)="project.startSprint(sprint.id)"
|
||||
/>
|
||||
</span>
|
||||
}
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
|
||||
@if (closed().length) {
|
||||
<h2 class="ts-sprints__title">Cerrados</h2>
|
||||
<ul class="ts-sprints">
|
||||
@for (sprint of closed(); track sprint.id) {
|
||||
<li class="ts-sprint ts-panel" [class.is-focus]="isFocus(sprint)">
|
||||
<button
|
||||
type="button"
|
||||
class="ts-sprint__pick"
|
||||
(click)="show(sprint)"
|
||||
>
|
||||
<strong>{{ sprint.name }}</strong>
|
||||
<span class="ts-muted">{{ when(sprint) }}</span>
|
||||
<span class="ts-mono"
|
||||
>{{ sprint.progress.finished }}/{{
|
||||
sprint.progress.total
|
||||
}}
|
||||
terminados</span
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
|
||||
@if (!project.sprints().length) {
|
||||
<pi-empty-state
|
||||
icon="flag"
|
||||
title="Sin sprints"
|
||||
description="Planifica el primero: un nombre, unas fechas y un objetivo. Luego mete en él los tickets."
|
||||
/>
|
||||
}
|
||||
|
||||
<ng-template #sprintForm>
|
||||
<form
|
||||
class="ts-form"
|
||||
(submit)="$event.preventDefault(); save()"
|
||||
novalidate
|
||||
>
|
||||
<pi-text-field placeholder="Sprint 14" [(value)]="name">
|
||||
<pi-label [isRequired]="true">Nombre</pi-label>
|
||||
</pi-text-field>
|
||||
<pi-date-range-field
|
||||
startPlaceholder="Empieza"
|
||||
endPlaceholder="Acaba"
|
||||
[(value)]="range"
|
||||
>
|
||||
<pi-label [isRequired]="true">Fechas</pi-label>
|
||||
</pi-date-range-field>
|
||||
<pi-textarea
|
||||
placeholder="Qué tiene que quedar hecho al final"
|
||||
[(value)]="goal"
|
||||
>
|
||||
<pi-label>Objetivo</pi-label>
|
||||
</pi-textarea>
|
||||
<pi-action-button
|
||||
size="w100"
|
||||
color="primary"
|
||||
[text]="editing() ? 'Guardar' : 'Planificar'"
|
||||
[disabled]="!canSave()"
|
||||
(execute)="save()"
|
||||
/>
|
||||
</form>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #closeForm>
|
||||
<form
|
||||
class="ts-form"
|
||||
(submit)="$event.preventDefault(); close()"
|
||||
novalidate
|
||||
>
|
||||
<p class="ts-muted">
|
||||
{{ unfinished() }} ticket(s) sin terminar. Los terminados se quedan en
|
||||
este sprint como registro de lo hecho.
|
||||
</p>
|
||||
<pi-select-field [options]="carryOverOptions()" [(value)]="carryOverTo">
|
||||
<pi-label>Lo pendiente va a</pi-label>
|
||||
</pi-select-field>
|
||||
<pi-action-button
|
||||
size="w100"
|
||||
color="primary"
|
||||
text="Cerrar sprint"
|
||||
(execute)="close()"
|
||||
/>
|
||||
</form>
|
||||
</ng-template>
|
||||
`,
|
||||
styles: `
|
||||
.ts-sprint {
|
||||
display: grid;
|
||||
gap: 0.875rem;
|
||||
padding: 1rem 1.125rem;
|
||||
border-left: 3px solid var(--ts-line-strong);
|
||||
&[data-status='ACTIVE'] {
|
||||
border-left-color: var(--ts-brand);
|
||||
}
|
||||
&.is-focus {
|
||||
border-left-color: var(--ts-brand);
|
||||
}
|
||||
}
|
||||
.ts-sprint--focus {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.ts-sprint__head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 0.75rem;
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
.ts-sprint__goal {
|
||||
margin: 0;
|
||||
}
|
||||
.ts-sprint__chart {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
pi-segmented-control {
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
.ts-sprint__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.ts-sprints__title {
|
||||
margin: 1.25rem 0 0.625rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--ts-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.ts-sprints {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
.ts-sprint {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
padding: 0.625rem 0.875rem;
|
||||
}
|
||||
}
|
||||
.ts-sprint__pick {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 0.25rem 0.875rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
&:hover strong {
|
||||
color: var(--ts-brand);
|
||||
}
|
||||
}
|
||||
.ts-sprint__row-actions {
|
||||
display: inline-flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.ts-pill[data-status='ACTIVE'] {
|
||||
--tone: var(--ts-brand);
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class SprintsPage {
|
||||
protected readonly project = inject(ProjectFacade);
|
||||
private readonly drawer = inject(DrawerService);
|
||||
private readonly sprintForm =
|
||||
viewChild.required<TemplateRef<unknown>>('sprintForm');
|
||||
private readonly closeForm =
|
||||
viewChild.required<TemplateRef<unknown>>('closeForm');
|
||||
|
||||
/** The sprint picked from the lists; by default the one under way. */
|
||||
private readonly picked = signal<string | null>(null);
|
||||
protected readonly focus = computed(() => {
|
||||
const sprints = this.project.sprints();
|
||||
return (
|
||||
sprints.find((s) => s.id === this.picked()) ??
|
||||
this.project.activeSprint() ??
|
||||
sprints.find((s) => s.status === SprintStatus.PLANNED) ??
|
||||
null
|
||||
);
|
||||
});
|
||||
protected readonly planned = computed(() =>
|
||||
this.project.sprints().filter((s) => s.status === SprintStatus.PLANNED),
|
||||
);
|
||||
protected readonly closed = computed(() =>
|
||||
this.project.sprints().filter((s) => s.status === SprintStatus.CLOSED),
|
||||
);
|
||||
|
||||
/* Burndown */
|
||||
protected readonly units = [
|
||||
{ value: 'tickets', label: 'Tickets' },
|
||||
{ value: 'points', label: 'Puntos' },
|
||||
];
|
||||
protected readonly unit = signal<string>('tickets');
|
||||
protected readonly burndownLabels = computed(
|
||||
() => this.project.burndown()?.dates.map((d) => label(d)) ?? [],
|
||||
);
|
||||
protected readonly burndownLongLabels = computed(
|
||||
() => this.project.burndown()?.dates.map((d) => label(d, 'long')) ?? [],
|
||||
);
|
||||
protected readonly burndownSeries = computed<ChartSeries[]>(() => {
|
||||
const burndown = this.project.burndown();
|
||||
if (!burndown) return [];
|
||||
const points = this.unit() === 'points';
|
||||
const remaining = points ? burndown.remainingPoints : burndown.remaining;
|
||||
// The ideal line starts from what was open on the first day, in the unit shown.
|
||||
const first = remaining[0] ?? 0;
|
||||
const span = Math.max(burndown.dates.length - 1, 1);
|
||||
return [
|
||||
{
|
||||
label: 'Ideal',
|
||||
values: burndown.dates.map(
|
||||
(_, i) => Math.round((first * (span - i) * 10) / span) / 10,
|
||||
),
|
||||
color: 'var(--ts-muted)',
|
||||
dashed: true,
|
||||
},
|
||||
{
|
||||
label: points ? 'Puntos pendientes' : 'Tickets pendientes',
|
||||
values: remaining,
|
||||
color: 'var(--ts-viz-1)',
|
||||
},
|
||||
];
|
||||
});
|
||||
protected readonly todayMarker = computed(() => {
|
||||
const index = this.project.burndown()?.dates.indexOf(isoDay(new Date()));
|
||||
return index === undefined || index === -1 ? null : { index, label: 'Hoy' };
|
||||
});
|
||||
protected readonly burndownSummary = computed(() => {
|
||||
const burndown = this.project.burndown();
|
||||
const open = last(burndown?.remaining.filter((v) => v !== null) ?? []);
|
||||
return open === undefined
|
||||
? 'Burndown del sprint'
|
||||
: `Burndown del sprint: quedan ${open} tickets por terminar`;
|
||||
});
|
||||
|
||||
/* Plan / edit */
|
||||
protected readonly editing = signal<Sprint | null>(null);
|
||||
protected readonly name = signal('');
|
||||
protected readonly goal = signal('');
|
||||
protected readonly range = signal<{ start: Date | null; end: Date | null }>({
|
||||
start: null,
|
||||
end: null,
|
||||
});
|
||||
protected readonly canSave = computed(
|
||||
() => !!this.name().trim() && !!this.range().start && !!this.range().end,
|
||||
);
|
||||
|
||||
/* Close */
|
||||
private closing: Sprint | null = null;
|
||||
protected readonly unfinished = signal(0);
|
||||
protected readonly carryOverTo = signal<string | null>(BACKLOG);
|
||||
protected readonly carryOverOptions = computed<PiSelectFieldOption<string>[]>(
|
||||
() => [
|
||||
{ value: BACKLOG, label: 'El backlog' },
|
||||
...this.planned().map((s) => ({
|
||||
value: s.id,
|
||||
label: `${s.name} (${label(s.startDate)})`,
|
||||
})),
|
||||
],
|
||||
);
|
||||
|
||||
constructor() {
|
||||
// Load the burndown of whatever sprint is in focus.
|
||||
effect(() => {
|
||||
const sprint = this.focus();
|
||||
if (sprint && sprint.status !== SprintStatus.PLANNED)
|
||||
untracked(() => this.project.loadBurndown(sprint.id));
|
||||
});
|
||||
}
|
||||
|
||||
protected statusLabel = (sprint: Sprint) => STATUS[sprint.status];
|
||||
protected isFocus = (sprint: Sprint) => this.focus()?.id === sprint.id;
|
||||
|
||||
/** "12 oct – 23 oct · quedan 5 días". */
|
||||
protected when(sprint: Sprint): string {
|
||||
const dates = `${label(sprint.startDate)} – ${label(sprint.endDate)}`;
|
||||
if (sprint.status !== SprintStatus.ACTIVE) return dates;
|
||||
const left = Math.ceil(
|
||||
(localDate(sprint.endDate).getTime() + DAY - Date.now()) / DAY,
|
||||
);
|
||||
if (left < 0) return `${dates} · pasado de fecha`;
|
||||
return `${dates} · ${left === 1 ? 'queda 1 día' : `quedan ${left} días`}`;
|
||||
}
|
||||
|
||||
protected progressLabel(sprint: Sprint): string {
|
||||
const { finished, total, finishedStoryPoints, storyPoints } =
|
||||
sprint.progress;
|
||||
const points = storyPoints
|
||||
? ` · ${finishedStoryPoints} de ${storyPoints} puntos`
|
||||
: '';
|
||||
return `${finished} de ${total} tickets terminados${points}`;
|
||||
}
|
||||
|
||||
protected show(sprint: Sprint): void {
|
||||
this.picked.set(sprint.id);
|
||||
}
|
||||
|
||||
protected openCreate(): void {
|
||||
this.editing.set(null);
|
||||
const lastEnd = last(
|
||||
this.project
|
||||
.sprints()
|
||||
.map((s) => s.endDate)
|
||||
.sort(),
|
||||
);
|
||||
// Right after the last one, two weeks long.
|
||||
const start = lastEnd
|
||||
? new Date(localDate(lastEnd).getTime() + DAY)
|
||||
: new Date();
|
||||
this.name.set(`Sprint ${this.project.sprints().length + 1}`);
|
||||
this.goal.set('');
|
||||
this.range.set({
|
||||
start,
|
||||
end: new Date(start.getTime() + 13 * DAY),
|
||||
});
|
||||
this.drawer.open('Planificar sprint', this.sprintForm());
|
||||
}
|
||||
|
||||
protected openEdit(sprint: Sprint): void {
|
||||
this.editing.set(sprint);
|
||||
this.name.set(sprint.name);
|
||||
this.goal.set(sprint.goal ?? '');
|
||||
this.range.set({
|
||||
start: localDate(sprint.startDate),
|
||||
end: localDate(sprint.endDate),
|
||||
});
|
||||
this.drawer.open(`Editar ${sprint.name}`, this.sprintForm());
|
||||
}
|
||||
|
||||
protected save(): void {
|
||||
const { start, end } = this.range();
|
||||
if (!this.canSave() || !start || !end) return;
|
||||
const details = {
|
||||
name: this.name().trim(),
|
||||
goal: this.goal().trim() || null,
|
||||
startDate: isoDay(start),
|
||||
endDate: isoDay(end),
|
||||
};
|
||||
const sprint = this.editing();
|
||||
if (sprint) this.project.updateSprint({ sprintId: sprint.id, ...details });
|
||||
else this.project.createSprint(details);
|
||||
this.drawer.closeAll();
|
||||
}
|
||||
|
||||
protected openClose(sprint: Sprint): void {
|
||||
this.closing = sprint;
|
||||
this.unfinished.set(sprint.progress.total - sprint.progress.finished);
|
||||
this.carryOverTo.set(this.planned()[0]?.id ?? BACKLOG);
|
||||
this.drawer.open(`Cerrar ${sprint.name}`, this.closeForm());
|
||||
}
|
||||
|
||||
protected close(): void {
|
||||
if (!this.closing) return;
|
||||
this.project.closeSprint(this.closing.id, this.carryOverTo() || null);
|
||||
this.closing = null;
|
||||
this.drawer.closeAll();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user