Josep Piguillem
0e301ad545
Per-project settings (owners/admins, «Configuración» tab):
- Statuses with category (TODO, IN_PROGRESS, QA, DONE, CANCELLED), colour and
"requires reason"; configurable transitions; ticket types (icon, colour) and
areas. Defaults are the previous fixed values; projects created before keep
them without migration.
- Values are archived, never deleted: tickets, history and statistics keep
referring to them. Validated in the domain (ProjectSettingsChangedEvent).
- Releases, board, tracking and "my work" use categories, so custom statuses
keep working. Status changes carry name/category metadata for history.
- GraphQL: status/type/area are strings (breaking for clients sending enum
literals); Project.settings, updateProjectSettings, statusCategory,
myIssues(categories). REST: PUT /projects/{project}/settings, category filters.
- Read model: statusCategory on issues (backfilled at startup).
Statistics («Estadísticas» tab):
- New issue_timeline projection; pure functions compute created vs resolved,
cumulative flow, cycle/lead time (avg + p85), throughput per person, QA
pass/fail and release burnup. GraphQL Project.analytics(days),
Release.burnup; REST /projects/{project}/analytics, /releases/{id}/burnup.
- Web: SVG charts with validated light/dark palette, crosshair tooltip,
keyboard navigation, legend and data table.
Home "Mi trabajo": my open tickets across projects grouped by category (QA
failures first), tickets waiting for QA, upcoming releases and "Ir a…".
Tests: domain/application specs, e2e scenario for settings and analytics,
facade tests. Docs, READMEs, schema.gql/openapi.json and Word/PDF updated.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
501 lines
15 KiB
TypeScript
501 lines
15 KiB
TypeScript
import {
|
|
ChangeDetectionStrategy,
|
|
Component,
|
|
computed,
|
|
inject,
|
|
} from '@angular/core';
|
|
import { RouterLink } from '@angular/router';
|
|
import { PiSkeletonComponent, PiStatCardComponent } from '@pi/ui';
|
|
import { ProjectFacade } from '@task-stream/web/tracker/application';
|
|
import {
|
|
ProjectRole,
|
|
QA_FAILED,
|
|
StatusCategory,
|
|
} from '@task-stream/web/tracker/domain';
|
|
import { initials, ROLE, ROLE_TONE, statusLook, typeLook } from '../ui/copy';
|
|
|
|
/** "Seguimiento": the state of the whole project at a glance (live). */
|
|
@Component({
|
|
selector: 'ts-dashboard-page',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
imports: [RouterLink, PiSkeletonComponent, PiStatCardComponent],
|
|
template: `
|
|
@if (facade.stats(); as stats) {
|
|
<section class="ts-kpis" aria-label="Resumen">
|
|
@for (kpi of kpis(); track kpi.label) {
|
|
<pi-stat-card
|
|
[icon]="kpi.icon"
|
|
[label]="kpi.label"
|
|
[value]="'' + kpi.value"
|
|
[color]="kpi.color"
|
|
/>
|
|
}
|
|
</section>
|
|
|
|
<section class="ts-panel ts-flow" aria-labelledby="flow-title">
|
|
<header class="ts-panel__head">
|
|
<h2 id="flow-title">Flujo</h2>
|
|
<span class="ts-muted">Dónde está cada ticket del proyecto</span>
|
|
</header>
|
|
@if (stats.total) {
|
|
<div class="ts-flow__bar" role="img" [attr.aria-label]="flowLabel()">
|
|
@for (segment of flow(); track segment.status) {
|
|
@if (segment.count) {
|
|
<span
|
|
class="ts-flow__segment"
|
|
[style.--tone]="segment.tone"
|
|
[style.flex-grow]="segment.count"
|
|
[attr.title]="segment.label + ': ' + segment.count"
|
|
></span>
|
|
}
|
|
}
|
|
</div>
|
|
<ul class="ts-flow__legend">
|
|
@for (segment of flow(); track segment.status) {
|
|
<li
|
|
[style.--tone]="segment.tone"
|
|
[class.is-empty]="!segment.count"
|
|
>
|
|
<span class="ts-flow__count">{{ segment.count }}</span>
|
|
<span>{{ segment.label }}</span>
|
|
</li>
|
|
}
|
|
</ul>
|
|
} @else {
|
|
<p class="ts-muted">Todavía no hay tickets.</p>
|
|
}
|
|
</section>
|
|
|
|
<div class="ts-dashboard">
|
|
<section class="ts-panel" aria-labelledby="team-title">
|
|
<header class="ts-panel__head">
|
|
<h2 id="team-title">Equipo</h2>
|
|
<span class="ts-muted"
|
|
>{{ team().length }}
|
|
{{ team().length === 1 ? 'persona' : 'personas' }} · tickets
|
|
abiertos</span
|
|
>
|
|
</header>
|
|
<ul class="ts-team">
|
|
@for (person of team(); track person.id) {
|
|
<li>
|
|
<a
|
|
class="ts-team__row"
|
|
[routerLink]="['../board']"
|
|
[queryParams]="{ assignee: person.id }"
|
|
[attr.aria-label]="
|
|
person.name +
|
|
': ' +
|
|
person.open +
|
|
' tickets abiertos. Ver su tablero'
|
|
"
|
|
>
|
|
<span class="ts-who" aria-hidden="true">{{
|
|
initialsOf(person.name)
|
|
}}</span>
|
|
<span class="ts-team__who">
|
|
<span class="ts-rows__name">{{ person.name }}</span>
|
|
@if (person.role; as role) {
|
|
<span class="ts-pill" [style.--tone]="roleTone(role)">{{
|
|
roleLabel(role)
|
|
}}</span>
|
|
} @else {
|
|
<span class="ts-pill">Ya no es miembro</span>
|
|
}
|
|
</span>
|
|
<span class="ts-bar" aria-hidden="true"
|
|
><span
|
|
[style.width.%]="(person.open / maxLoad()) * 100"
|
|
></span
|
|
></span>
|
|
<span class="ts-rows__count" [class.is-zero]="!person.open">{{
|
|
person.open
|
|
}}</span>
|
|
<span class="ts-team__go" aria-hidden="true">→</span>
|
|
</a>
|
|
</li>
|
|
}
|
|
@if (unassigned()) {
|
|
<li>
|
|
<div class="ts-team__row ts-team__row--static">
|
|
<span class="ts-who ts-who--none" aria-hidden="true">—</span>
|
|
<span class="ts-team__who">
|
|
<span class="ts-rows__name ts-muted">Sin asignar</span>
|
|
</span>
|
|
<span class="ts-bar" aria-hidden="true"
|
|
><span
|
|
[style.width.%]="(unassigned() / maxLoad()) * 100"
|
|
></span
|
|
></span>
|
|
<span class="ts-rows__count">{{ unassigned() }}</span>
|
|
<span class="ts-team__go"></span>
|
|
</div>
|
|
</li>
|
|
}
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="ts-panel" aria-labelledby="type-title">
|
|
<header class="ts-panel__head">
|
|
<h2 id="type-title">Por tipo</h2>
|
|
<span class="ts-muted">Todos los tickets</span>
|
|
</header>
|
|
<ul class="ts-rows ts-rows--types">
|
|
@for (row of stats.byType; track row.key) {
|
|
<li [style.--tone]="typeOf(row.key).tone">
|
|
<span class="ts-rows__name">{{ typeOf(row.key).label }}</span>
|
|
<span class="ts-bar ts-bar--tone"
|
|
><span
|
|
[style.width.%]="(row.count / stats.total) * 100"
|
|
></span
|
|
></span>
|
|
<span class="ts-rows__count">{{ row.count }}</span>
|
|
</li>
|
|
}
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
} @else {
|
|
<pi-skeleton shape="block" height="12rem" />
|
|
}
|
|
`,
|
|
styles: `
|
|
/* Same stat row as pireon.dev's hero. */
|
|
.ts-kpis {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
|
|
gap: 1.25rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.ts-panel {
|
|
padding: 1.5rem;
|
|
}
|
|
.ts-panel__head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 1.125rem;
|
|
h2 {
|
|
margin: 0;
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
}
|
|
.ts-muted {
|
|
font-size: 0.8125rem;
|
|
}
|
|
}
|
|
.ts-flow {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.ts-flow__bar {
|
|
display: flex;
|
|
gap: 3px;
|
|
height: 2.25rem;
|
|
}
|
|
.ts-flow__segment {
|
|
flex-basis: 0;
|
|
min-width: 0.5rem;
|
|
border-radius: 0.375rem;
|
|
background: var(--tone);
|
|
}
|
|
.ts-flow__legend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem 1.5rem;
|
|
margin: 1rem 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
li {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.4375rem;
|
|
margin: 0;
|
|
font-size: 0.8125rem;
|
|
color: var(--ts-ink-soft);
|
|
&::before {
|
|
content: '';
|
|
align-self: center;
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
border-radius: 2px;
|
|
background: var(--tone);
|
|
}
|
|
}
|
|
li.is-empty {
|
|
opacity: 0.45;
|
|
}
|
|
}
|
|
.ts-flow__count {
|
|
font-family: var(--ts-font-mono);
|
|
font-weight: 600;
|
|
color: var(--ts-ink);
|
|
}
|
|
.ts-dashboard {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
|
|
gap: 1.25rem;
|
|
}
|
|
.ts-rows {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
li {
|
|
display: grid;
|
|
grid-template-columns: 1.75rem minmax(6rem, 9rem) 1fr 2rem;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
margin: 0;
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
.ts-rows--types li {
|
|
grid-template-columns: minmax(6rem, 9rem) 1fr 2rem;
|
|
}
|
|
.ts-rows__name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.ts-rows__count {
|
|
font-family: var(--ts-font-mono);
|
|
font-weight: 600;
|
|
text-align: right;
|
|
}
|
|
.ts-who {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
border-radius: 50%;
|
|
background: color-mix(in srgb, var(--ts-brand) 16%, var(--ts-surface));
|
|
color: color-mix(in srgb, var(--ts-brand) 70%, var(--ts-ink));
|
|
font-family: var(--ts-font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
}
|
|
.ts-who--none {
|
|
background: transparent;
|
|
border: 1px dashed var(--ts-line-strong);
|
|
color: var(--ts-muted);
|
|
}
|
|
/* Team: everyone in the project, busiest first; each row opens their board. */
|
|
.ts-team {
|
|
display: grid;
|
|
margin: 0 -0.5rem;
|
|
padding: 0;
|
|
list-style: none;
|
|
li {
|
|
margin: 0;
|
|
}
|
|
}
|
|
.ts-team__row {
|
|
display: grid;
|
|
grid-template-columns: 1.75rem minmax(0, 1fr) minmax(4rem, 8rem) 2rem 1rem;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
min-height: 2.75rem;
|
|
padding: 0.375rem 0.5rem;
|
|
border-radius: 0.75rem;
|
|
color: inherit;
|
|
font-size: 0.875rem;
|
|
text-decoration: none;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
a.ts-team__row:hover {
|
|
background: var(--pi-color-primary-25);
|
|
.ts-team__go {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
a.ts-team__row:focus-visible {
|
|
outline: 2px solid var(--ts-brand);
|
|
outline-offset: 1px;
|
|
}
|
|
.ts-team__who {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 0.25rem 0.5rem;
|
|
min-width: 0;
|
|
}
|
|
.ts-team__go {
|
|
color: var(--ts-brand);
|
|
opacity: 0;
|
|
transform: translateX(-3px);
|
|
transition:
|
|
opacity 0.15s ease,
|
|
transform 0.15s ease;
|
|
}
|
|
@media (max-width: 520px) {
|
|
/* On a phone the number says enough: give the room to name and role. */
|
|
.ts-team__row {
|
|
grid-template-columns: 1.75rem minmax(0, 1fr) 2rem 1rem;
|
|
}
|
|
.ts-team__row .ts-bar {
|
|
display: none;
|
|
}
|
|
}
|
|
.ts-rows__count.is-zero {
|
|
color: var(--ts-muted);
|
|
font-weight: 400;
|
|
}
|
|
.ts-bar {
|
|
height: 0.625rem;
|
|
border-radius: 0.25rem;
|
|
background: var(--ts-sunken);
|
|
overflow: hidden;
|
|
span {
|
|
display: block;
|
|
height: 100%;
|
|
border-radius: 0.25rem;
|
|
background: var(--ts-brand);
|
|
}
|
|
}
|
|
.ts-bar--tone span {
|
|
background: var(--tone);
|
|
}
|
|
`,
|
|
})
|
|
export class DashboardPage {
|
|
protected readonly facade = inject(ProjectFacade);
|
|
protected readonly initialsOf = initials;
|
|
|
|
private count(status: string): number {
|
|
return (
|
|
this.facade.stats()?.byStatus.find((s) => s.key === status)?.count ?? 0
|
|
);
|
|
}
|
|
|
|
/** Tickets in statuses of a category (whatever the project calls them). */
|
|
private countCategory(category: StatusCategory): number {
|
|
const workflow = this.facade.workflow();
|
|
return (this.facade.stats()?.byStatus ?? [])
|
|
.filter((row) => workflow.status(row.key).category === category)
|
|
.reduce((sum, row) => sum + row.count, 0);
|
|
}
|
|
|
|
protected readonly kpis = computed<
|
|
{
|
|
label: string;
|
|
value: number;
|
|
icon: string;
|
|
color: 'primary' | 'accent' | 'warn' | 'highlighted' | 'success';
|
|
}[]
|
|
>(() => {
|
|
const stats = this.facade.stats();
|
|
if (!stats) return [];
|
|
// Bugs: every type drawn with the bug icon.
|
|
const workflow = this.facade.workflow();
|
|
const bugs = stats.byType
|
|
.filter((t) => workflow.type(t.key).icon === 'bug')
|
|
.reduce((sum, t) => sum + t.count, 0);
|
|
return [
|
|
{ label: 'Tickets', value: stats.total, icon: 'list', color: 'primary' },
|
|
{
|
|
label: 'Abiertos',
|
|
value: stats.open,
|
|
icon: 'time-detail',
|
|
color: 'accent',
|
|
},
|
|
{ label: 'Bugs (total)', value: bugs, icon: 'bug', color: 'warn' },
|
|
{
|
|
label: 'En QA',
|
|
value: this.countCategory(StatusCategory.QA),
|
|
icon: 'qa',
|
|
color: 'highlighted',
|
|
},
|
|
{
|
|
label: 'QA fallidos',
|
|
value: this.count(QA_FAILED),
|
|
icon: 'exclamation',
|
|
color: 'warn',
|
|
},
|
|
{
|
|
label: 'Hechos',
|
|
value: this.countCategory(StatusCategory.DONE),
|
|
icon: 'check-rounded',
|
|
color: 'success',
|
|
},
|
|
];
|
|
});
|
|
|
|
/**
|
|
* The project's statuses in board order, cancelled ones last. Archived (or
|
|
* no longer configured) statuses only while tickets still sit in them.
|
|
*/
|
|
protected readonly flow = computed(() => {
|
|
const workflow = this.facade.workflow();
|
|
const configured = workflow.settings.statuses.map((s) => s.id);
|
|
const ids = [
|
|
...configured,
|
|
...(this.facade.stats()?.byStatus ?? [])
|
|
.map((row) => row.key)
|
|
.filter((key) => !configured.includes(key)),
|
|
];
|
|
const cancelled = (id: string) =>
|
|
workflow.status(id).category === StatusCategory.CANCELLED;
|
|
return [...ids.filter((id) => !cancelled(id)), ...ids.filter(cancelled)]
|
|
.map((status) => ({
|
|
status,
|
|
...statusLook(workflow, status),
|
|
archived: workflow.status(status).archived,
|
|
count: this.count(status),
|
|
}))
|
|
.filter((row) => !row.archived || row.count > 0);
|
|
});
|
|
protected readonly flowLabel = computed(() =>
|
|
this.flow()
|
|
.filter((s) => s.count)
|
|
.map((s) => `${s.label}: ${s.count}`)
|
|
.join(', '),
|
|
);
|
|
|
|
protected readonly maxLoad = computed(() =>
|
|
Math.max(
|
|
1,
|
|
...(this.facade.stats()?.byAssignee.map((r) => r.count) ?? [1]),
|
|
),
|
|
);
|
|
|
|
/**
|
|
* Every member with their open tickets (0 included), busiest first. People
|
|
* who still have tickets but left the project are listed too.
|
|
*/
|
|
protected readonly team = computed(() => {
|
|
const load = new Map<string, { name: string; count: number }>();
|
|
for (const row of this.facade.stats()?.byAssignee ?? []) {
|
|
if (row.user)
|
|
load.set(row.user.id, { name: row.user.name, count: row.count });
|
|
}
|
|
const members = this.facade.members().map((member) => ({
|
|
id: member.user.id,
|
|
name: member.user.name,
|
|
role: member.role as ProjectRole | null,
|
|
open: load.get(member.user.id)?.count ?? 0,
|
|
}));
|
|
const former = [...load.entries()]
|
|
.filter(([id]) => !members.some((m) => m.id === id))
|
|
.map(([id, { name, count }]) => ({
|
|
id,
|
|
name,
|
|
role: null,
|
|
open: count,
|
|
}));
|
|
return [...members, ...former].sort(
|
|
(a, b) => b.open - a.open || a.name.localeCompare(b.name, 'es'),
|
|
);
|
|
});
|
|
protected readonly unassigned = computed(
|
|
() => this.facade.stats()?.byAssignee.find((row) => !row.user)?.count ?? 0,
|
|
);
|
|
protected readonly roleLabel = (role: ProjectRole) => ROLE[role];
|
|
protected readonly roleTone = (role: ProjectRole) => ROLE_TONE[role];
|
|
protected readonly typeOf = (key: string) =>
|
|
typeLook(this.facade.workflow(), key);
|
|
}
|