pigui/task-stream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: an ordered backlog

Browse Source 
A Backlog tab lists the tickets still to start in the order the team will
take them; drag them, or use the arrows, to reorder. Moving a ticket only
rewrites that ticket's rank, read from the event store, and board columns
follow the same order.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Josep Piguillem
2026-10-08 14:01:44 +02:00
parent d4da33d4e8
commit 0606f53026
53 changed files with 1599 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
libs/web/tracker/application/src/index.ts
View File

@@ -7,3 +7,4 @@ export * from './lib/facades/home.facade';
export * from './lib/facades/explore.facade';
export * from './lib/facades/inbox.facade';
export * from './lib/facades/epics.facade';
export * from './lib/facades/backlog.facade';

22
libs/web/tracker/application/src/lib/events/backlog.events.ts Normal file
View File

@@ -0,0 +1,22 @@
import { type } from '@ngrx/signals';
import { eventGroup } from '@ngrx/signals/events';
import { IssuePage } from '@task-stream/web/tracker/domain';
export const backlogPageEvents = eventGroup({
source: 'Backlog Page',
events: {
opened: type<{ projectId: string }>(),
/** Put the ticket at `index` of the backlog as shown now. */
moveRequested: type<{ issueId: string; index: number }>(),
},
});
export const backlogApiEvents = eventGroup({
source: 'Backlog API',
events: {
loaded: type<IssuePage>(),
loadFailed: type<string>(),
moved: type<void>(),
moveFailed: type<string>(),
},
});

32
libs/web/tracker/application/src/lib/facades/backlog.facade.ts Normal file
View File

@@ -0,0 +1,32 @@
import { inject, Injectable, Provider } from '@angular/core';
import { injectDispatch } from '@ngrx/signals/events';
import { backlogPageEvents } from '../events/backlog.events';
import { BacklogStore } from '../stores/backlog.store';
/** "Backlog": tickets still to start, in the order the team will take them. */
@Injectable()
export class BacklogFacade {
private readonly store = inject(BacklogStore);
private readonly dispatch = injectDispatch(backlogPageEvents);
/** In backlog order (the first 200). */
readonly issues = this.store.issues;
readonly total = this.store.total;
/** False until the first load: show skeletons, not empty states. */
readonly loaded = this.store.loaded;
readonly error = this.store.error;
open(projectId: string): void {
this.dispatch.opened({ projectId });
}
/** Puts the ticket at `index` of the list as shown now. */
move(issueId: string, index: number): void {
this.dispatch.moveRequested({ issueId, index });
}
}
/** Store + facade of the backlog view, for its route component. */
export function provideBacklogFacade(): Provider[] {
return [BacklogStore, BacklogFacade];
}

25
libs/web/tracker/application/src/lib/stores/backlog.reducers.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { IssueSummary } from '@task-stream/web/tracker/domain';
import { reorder } from './backlog.reducers';
const list = ['a', 'b', 'c', 'd'].map((id) => ({ id }) as IssueSummary);
const ids = (issues: IssueSummary[] | undefined) => issues?.map((i) => i.id);
describe('backlog reorder', () => {
it('moves a ticket and tells who ends up around it', () => {
const down = reorder(list, 'a', 2);
expect(ids(down?.issues)).toEqual(['b', 'c', 'a', 'd']);
expect([down?.above?.id, down?.below?.id]).toEqual(['c', 'd']);
const top = reorder(list, 'd', 0);
expect(ids(top?.issues)).toEqual(['d', 'a', 'b', 'c']);
expect([top?.above, top?.below?.id]).toEqual([null, 'a']);
const bottom = reorder(list, 'b', 99);
expect([bottom?.above?.id, bottom?.below]).toEqual(['d', null]);
});
it('does nothing when it stays where it was', () => {
expect(reorder(list, 'b', 1)).toBeNull();
expect(reorder(list, 'zz', 0)).toBeNull();
});
});

23
libs/web/tracker/application/src/lib/stores/backlog.reducers.ts Normal file
View File

@@ -0,0 +1,23 @@
import { IssueSummary } from '@task-stream/web/tracker/domain';
/** Where a ticket lands when moved to `index`, and its new neighbours. */
export function reorder(
issues: IssueSummary[],
issueId: string,
index: number,
): {
issues: IssueSummary[];
above: IssueSummary | null;
below: IssueSummary | null;
} | null {
const from = issues.findIndex((i) => i.id === issueId);
if (from === -1) return null;
const rest = issues.filter((i) => i.id !== issueId);
const at = Math.max(0, Math.min(index, rest.length));
if (at === from) return null;
return {
issues: [...rest.slice(0, at), issues[from], ...rest.slice(at)],
above: rest[at - 1] ?? null,
below: rest[at] ?? null,
};
}

120
libs/web/tracker/application/src/lib/stores/backlog.store.ts Normal file
View File

@@ -0,0 +1,120 @@
import { inject } from '@angular/core';
import { mapResponse } from '@ngrx/operators';
import { patchState, signalStore, withState } from '@ngrx/signals';
import {
Events,
on,
withEventHandlers,
withReducer,
} from '@ngrx/signals/events';
import {
IssuesGateway,
IssueSummary,
TrackerRealtimeGateway,
} from '@task-stream/web/tracker/domain';
import {
concatMap,
debounceTime,
EMPTY,
merge,
startWith,
switchMap,
tap,
} from 'rxjs';
import { backlogApiEvents, backlogPageEvents } from '../events/backlog.events';
import { describeError, Notifications } from '../notifications';
import { reorder } from './backlog.reducers';
interface BacklogState {
projectId: string | null;
issues: IssueSummary[];
total: number;
loaded: boolean;
error: string | null;
}
/** Tickets still to start, in the order the team will take them. Live. */
export const BacklogStore = signalStore(
withState<BacklogState>({
projectId: null,
issues: [],
total: 0,
loaded: false,
error: null,
}),
withReducer(
on(backlogPageEvents.opened, ({ payload }) => ({
projectId: payload.projectId,
loaded: false,
error: null,
})),
on(backlogApiEvents.loaded, ({ payload }) => ({
issues: payload.items,
total: payload.total,
loaded: true,
})),
on(backlogApiEvents.loadFailed, ({ payload }) => ({
loaded: true,
error: payload,
})),
),
withEventHandlers(
(
store,
events = inject(Events),
issues = inject(IssuesGateway),
realtime = inject(TrackerRealtimeGateway),
notifications = inject(Notifications),
) => {
const fetch = (projectId: string) =>
issues.backlog(projectId).pipe(
mapResponse({
next: (page) => backlogApiEvents.loaded(page),
error: (error) => backlogApiEvents.loadFailed(describeError(error)),
}),
);
return {
// Anyone's change may add, remove or move a ticket: reload, calmly.
load$: events.on(backlogPageEvents.opened).pipe(
switchMap(({ payload }) =>
merge(
realtime.issueChanges(payload.projectId).pipe(debounceTime(400)),
events.on(backlogApiEvents.moveFailed),
).pipe(
startWith(null),
switchMap(() => fetch(payload.projectId)),
),
),
),
// One move after another: each needs the ranks the previous left.
move$: events.on(backlogPageEvents.moveRequested).pipe(
concatMap(({ payload }) => {
const next = reorder(
store.issues(),
payload.issueId,
payload.index,
);
if (!next) return EMPTY;
patchState(store, { issues: next.issues });
return issues
.rank(
payload.issueId,
next.above?.id ?? null,
next.below?.id ?? null,
)
.pipe(
mapResponse({
next: () => backlogApiEvents.moved(),
error: (error) =>
backlogApiEvents.moveFailed(describeError(error)),
}),
);
}),
),
feedback$: events
.on(backlogApiEvents.moveFailed)
.pipe(tap(({ payload }) => notifications.error(payload))),
};
},
),
);

9
libs/web/tracker/application/src/lib/stores/board.reducers.spec.ts
View File

@@ -19,6 +19,7 @@ const issue = (
area: null,
labels: [],
commentCount: 0,
rank: `n-${id}`,
}) as unknown as IssueSummary;
const board = (): BoardColumn[] => [
@@ -57,8 +58,12 @@ describe('board reducers', () => {
expect(next[0].issues).toEqual([]);
});
it('adds new issues from other users', () => {
it('adds new issues from other users at their place in the backlog', () => {
const next = applyIssueChange(board(), issue('b', 'TODO', 1), null);
expect(next[0].issues.map((i) => i.id)).toEqual(['b', 'a']);
expect(next[0].issues.map((i) => i.id)).toEqual(['a', 'b']);
const ranked = { ...issue('c', 'TODO', 1), rank: 'a' };
const top = applyIssueChange(next, ranked, null);
expect(top[0].issues.map((i) => i.id)).toEqual(['c', 'a', 'b']);
});
});

15
libs/web/tracker/application/src/lib/stores/board.reducers.ts
View File

@@ -29,7 +29,18 @@ export function matchesFilter(
return true;
}
/** Removes the issue wherever it is and puts `next` (if any) on top of its status column. */
/** `issues` (in backlog order) with `issue` at its place by rank. */
export function insertByRank(
issues: IssueSummary[],
issue: IssueSummary,
): IssueSummary[] {
const at = issues.findIndex((i) => i.rank > issue.rank);
return at === -1
? [...issues, issue]
: [...issues.slice(0, at), issue, ...issues.slice(at)];
}
/** Removes the issue wherever it is and puts `next` (if any) at its place by rank in its status column. */
export function placeIssue(
columns: BoardColumn[],
issueId: string,
@@ -42,7 +53,7 @@ export function placeIssue(
: column.issues;
let total = column.total - (had ? 1 : 0);
if (next && next.status === column.status) {
issues = [next, ...issues];
issues = insertByRank(issues, next);
total += 1;
}
return had || issues !== column.issues

2
libs/web/tracker/domain/src/lib/models/models.ts
View File

@@ -87,6 +87,8 @@ export interface IssueSummary {
labels: string[];
/** The epic or ticket this one breaks down. */
parent: IssueParent | null;
/** Place in the backlog and in its board column (ascending, as text). */
rank: string;
commentCount: number;
updatedAt: string;
version: number;

8
libs/web/tracker/domain/src/lib/ports/gateways.ts
View File

@@ -101,6 +101,14 @@ export abstract class IssuesGateway {
parentId: string | null,
): Observable<CommandResult>;
abstract epics(projectId: string): Observable<Epic[]>;
/** Tickets still to start (TODO category), in backlog order. */
abstract backlog(projectId: string): Observable<IssuePage>;
/** Moves a ticket between two others of the backlog (null: an end). */
abstract rank(
issueId: string,
aboveIssueId: string | null,
belowIssueId: string | null,
): Observable<CommandResult>;
abstract addChecklistItem(
issueId: string,
text: string,

27
libs/web/tracker/infrastructure/src/lib/adapters/graphql-issues.gateway.ts
View File

@@ -18,6 +18,7 @@ import { map, Observable } from 'rxjs';
import {
AddChecklistItemDocument,
AssignIssueDocument,
BacklogDocument,
BoardDocument,
ChangeIssueStatusDocument,
CreateIssueDocument,
@@ -26,6 +27,7 @@ import {
IssueDocument,
LinkIssuesDocument,
MyIssuesDocument,
RankIssueDocument,
RemoveChecklistItemDocument,
SearchIssuesDocument,
SetIssueParentDocument,
@@ -166,6 +168,31 @@ export class GraphqlIssuesGateway extends IssuesGateway {
);
}
backlog(projectId: string): Observable<IssuePage> {
return this.gql
.query(BacklogDocument, {
filter: { projectId, categories: ['TODO'], sort: 'RANK' },
})
.pipe(
map((d) => ({
items: d.issues.items.map(toIssueSummary),
total: d.issues.total,
})),
);
}
rank(
issueId: string,
aboveIssueId: string | null,
belowIssueId: string | null,
): Observable<CommandResult> {
return this.gql
.mutate(RankIssueDocument, {
input: { issueId, aboveIssueId, belowIssueId },
})
.pipe(map((d) => toCommandResult(d.rankIssue)));
}
addChecklistItem(issueId: string, text: string): Observable<CommandResult> {
return this.gql
.mutate(AddChecklistItemDocument, { input: { issueId, text } })

1
libs/web/tracker/infrastructure/src/lib/graphql/fragments.graphql
View File

@@ -74,6 +74,7 @@ fragment IssueSummaryFields on Issue {
key
title
}
rank
}
fragment IssueFields on Issue {

284
libs/web/tracker/infrastructure/src/lib/graphql/generated.ts
View File

@@ -75,6 +75,7 @@ export type IssueFilterInput = {
releaseId?: string | null | undefined;
/** Matches key, title or description */
search?: string | null | undefined;
sort?: IssueSort | null | undefined;
statuses?: Array<string> | null | undefined;
types?: Array<string> | null | undefined;
unassigned?: boolean | null | undefined;
@@ -89,6 +90,9 @@ export type IssueLinkType =
export type IssuePriority = 'CRITICAL' | 'HIGH' | 'LOW' | 'LOWEST' | 'MEDIUM';
/** RECENT: last updated first. RANK: backlog order. */
export type IssueSort = 'RANK' | 'RECENT';
export type IssueTypeOptionInput = {
archived?: boolean;
color: string;
@@ -133,6 +137,14 @@ export type ProjectSettingsInput = {
transitions: Array<StatusTransitionsInput>;
};
export type RankIssueInput = {
/** The ticket that ends up right above (null: the top) */
aboveIssueId?: string | null | undefined;
/** The ticket that ends up right below (null: the bottom) */
belowIssueId?: string | null | undefined;
issueId: string;
};
export type ReleaseStatus = 'ARCHIVED' | 'PLANNED' | 'RELEASED';
/** What a status means, whatever each project calls it. DONE and CANCELLED are finished. */
@@ -233,6 +245,7 @@ export type IssueSummaryFieldsFragment = {
commentCount: number;
updatedAt: string;
version: number;
rank: string;
assignee: { id: string; name: string } | null;
release: { id: string; name: string } | null;
parent: { id: string; key: string; title: string } | null;
@@ -258,6 +271,7 @@ export type IssueFieldsFragment = {
commentCount: number;
updatedAt: string;
version: number;
rank: string;
reporter: { id: string; name: string };
links: Array<{
type: IssueLinkType;
@@ -343,6 +357,7 @@ export type BoardQuery = {
commentCount: number;
updatedAt: string;
version: number;
rank: string;
assignee: { id: string; name: string } | null;
release: { id: string; name: string } | null;
parent: { id: string; key: string; title: string } | null;
@@ -376,6 +391,7 @@ export type IssueQuery = {
commentCount: number;
updatedAt: string;
version: number;
rank: string;
reporter: { id: string; name: string };
links: Array<{
type: IssueLinkType;
@@ -420,6 +436,7 @@ export type SearchIssuesQuery = {
commentCount: number;
updatedAt: string;
version: number;
rank: string;
assignee: { id: string; name: string } | null;
release: { id: string; name: string } | null;
parent: { id: string; key: string; title: string } | null;
@@ -570,6 +587,7 @@ export type MyIssuesQuery = {
commentCount: number;
updatedAt: string;
version: number;
rank: string;
assignee: { id: string; name: string } | null;
release: { id: string; name: string } | null;
parent: { id: string; key: string; title: string } | null;
@@ -597,6 +615,7 @@ export type IssueChildrenQuery = {
commentCount: number;
updatedAt: string;
version: number;
rank: string;
assignee: { id: string; name: string } | null;
release: { id: string; name: string } | null;
parent: { id: string; key: string; title: string } | null;
@@ -624,6 +643,7 @@ export type EpicsQuery = {
commentCount: number;
updatedAt: string;
version: number;
rank: string;
assignee: { id: string; name: string } | null;
release: { id: string; name: string } | null;
parent: { id: string; key: string; title: string } | null;
@@ -672,6 +692,43 @@ export type RemoveChecklistItemMutation = {
removeChecklistItem: { id: string; key: string | null; version: number };
};
export type BacklogQueryVariables = Exact<{
filter: IssueFilterInput;
}>;
export type BacklogQuery = {
issues: {
total: number;
items: Array<{
id: string;
projectId: string;
key: string;
type: string;
area: string | null;
title: string;
status: string;
statusCategory: StatusCategory;
priority: IssuePriority;
labels: Array<string>;
commentCount: number;
updatedAt: string;
version: number;
rank: string;
assignee: { id: string; name: string } | null;
release: { id: string; name: string } | null;
parent: { id: string; key: string; title: string } | null;
}>;
};
};
export type RankIssueMutationVariables = Exact<{
input: RankIssueInput;
}>;
export type RankIssueMutation = {
rankIssue: { id: string; key: string | null; version: number };
};
export type NotificationFieldsFragment = {
id: string;
kind: NotificationKind;
@@ -1104,6 +1161,7 @@ export type IssueChangedSubscription = {
commentCount: number;
updatedAt: string;
version: number;
rank: string;
assignee: { id: string; name: string } | null;
release: { id: string; name: string } | null;
parent: { id: string; key: string; title: string } | null;
@@ -1478,6 +1536,7 @@ export const IssueSummaryFieldsFragmentDoc = {
],
},
},
{ kind: 'Field', name: { kind: 'Name', value: 'rank' } },
],
},
},
@@ -1680,6 +1739,7 @@ export const IssueFieldsFragmentDoc = {
],
},
},
{ kind: 'Field', name: { kind: 'Name', value: 'rank' } },
],
},
},
@@ -2094,6 +2154,7 @@ export const BoardDocument = {
],
},
},
{ kind: 'Field', name: { kind: 'Name', value: 'rank' } },
],
},
},
@@ -2225,6 +2286,7 @@ export const IssueDocument = {
],
},
},
{ kind: 'Field', name: { kind: 'Name', value: 'rank' } },
],
},
},
@@ -2475,6 +2537,7 @@ export const SearchIssuesDocument = {
],
},
},
{ kind: 'Field', name: { kind: 'Name', value: 'rank' } },
],
},
},
@@ -3690,6 +3753,7 @@ export const MyIssuesDocument = {
],
},
},
{ kind: 'Field', name: { kind: 'Name', value: 'rank' } },
],
},
},
@@ -3835,6 +3899,7 @@ export const IssueChildrenDocument = {
],
},
},
{ kind: 'Field', name: { kind: 'Name', value: 'rank' } },
],
},
},
@@ -3998,6 +4063,7 @@ export const EpicsDocument = {
],
},
},
{ kind: 'Field', name: { kind: 'Name', value: 'rank' } },
],
},
},
@@ -4324,6 +4390,223 @@ export const RemoveChecklistItemDocument = {
RemoveChecklistItemMutation,
RemoveChecklistItemMutationVariables
>;
export const BacklogDocument = {
kind: 'Document',
definitions: [
{
kind: 'OperationDefinition',
operation: 'query',
name: { kind: 'Name', value: 'Backlog' },
variableDefinitions: [
{
kind: 'VariableDefinition',
variable: {
kind: 'Variable',
name: { kind: 'Name', value: 'filter' },
},
type: {
kind: 'NonNullType',
type: {
kind: 'NamedType',
name: { kind: 'Name', value: 'IssueFilterInput' },
},
},
},
],
selectionSet: {
kind: 'SelectionSet',
selections: [
{
kind: 'Field',
name: { kind: 'Name', value: 'issues' },
arguments: [
{
kind: 'Argument',
name: { kind: 'Name', value: 'filter' },
value: {
kind: 'Variable',
name: { kind: 'Name', value: 'filter' },
},
},
{
kind: 'Argument',
name: { kind: 'Name', value: 'limit' },
value: { kind: 'IntValue', value: '200' },
},
],
selectionSet: {
kind: 'SelectionSet',
selections: [
{
kind: 'Field',
name: { kind: 'Name', value: 'items' },
selectionSet: {
kind: 'SelectionSet',
selections: [
{
kind: 'FragmentSpread',
name: { kind: 'Name', value: 'IssueSummaryFields' },
},
],
},
},
{ kind: 'Field', name: { kind: 'Name', value: 'total' } },
],
},
},
],
},
},
{
kind: 'FragmentDefinition',
name: { kind: 'Name', value: 'UserRefFields' },
typeCondition: {
kind: 'NamedType',
name: { kind: 'Name', value: 'UserRef' },
},
selectionSet: {
kind: 'SelectionSet',
selections: [
{ kind: 'Field', name: { kind: 'Name', value: 'id' } },
{ kind: 'Field', name: { kind: 'Name', value: 'name' } },
],
},
},
{
kind: 'FragmentDefinition',
name: { kind: 'Name', value: 'IssueSummaryFields' },
typeCondition: {
kind: 'NamedType',
name: { kind: 'Name', value: 'Issue' },
},
selectionSet: {
kind: 'SelectionSet',
selections: [
{ kind: 'Field', name: { kind: 'Name', value: 'id' } },
{ kind: 'Field', name: { kind: 'Name', value: 'projectId' } },
{ kind: 'Field', name: { kind: 'Name', value: 'key' } },
{ kind: 'Field', name: { kind: 'Name', value: 'type' } },
{ kind: 'Field', name: { kind: 'Name', value: 'area' } },
{ kind: 'Field', name: { kind: 'Name', value: 'title' } },
{ kind: 'Field', name: { kind: 'Name', value: 'status' } },
{ kind: 'Field', name: { kind: 'Name', value: 'statusCategory' } },
{ kind: 'Field', name: { kind: 'Name', value: 'priority' } },
{ kind: 'Field', name: { kind: 'Name', value: 'labels' } },
{ kind: 'Field', name: { kind: 'Name', value: 'commentCount' } },
{ kind: 'Field', name: { kind: 'Name', value: 'updatedAt' } },
{ kind: 'Field', name: { kind: 'Name', value: 'version' } },
{
kind: 'Field',
name: { kind: 'Name', value: 'assignee' },
selectionSet: {
kind: 'SelectionSet',
selections: [
{
kind: 'FragmentSpread',
name: { kind: 'Name', value: 'UserRefFields' },
},
],
},
},
{
kind: 'Field',
name: { kind: 'Name', value: 'release' },
selectionSet: {
kind: 'SelectionSet',
selections: [
{ kind: 'Field', name: { kind: 'Name', value: 'id' } },
{ kind: 'Field', name: { kind: 'Name', value: 'name' } },
],
},
},
{
kind: 'Field',
name: { kind: 'Name', value: 'parent' },
selectionSet: {
kind: 'SelectionSet',
selections: [
{ kind: 'Field', name: { kind: 'Name', value: 'id' } },
{ kind: 'Field', name: { kind: 'Name', value: 'key' } },
{ kind: 'Field', name: { kind: 'Name', value: 'title' } },
],
},
},
{ kind: 'Field', name: { kind: 'Name', value: 'rank' } },
],
},
},
],
} as unknown as DocumentNode<BacklogQuery, BacklogQueryVariables>;
export const RankIssueDocument = {
kind: 'Document',
definitions: [
{
kind: 'OperationDefinition',
operation: 'mutation',
name: { kind: 'Name', value: 'RankIssue' },
variableDefinitions: [
{
kind: 'VariableDefinition',
variable: {
kind: 'Variable',
name: { kind: 'Name', value: 'input' },
},
type: {
kind: 'NonNullType',
type: {
kind: 'NamedType',
name: { kind: 'Name', value: 'RankIssueInput' },
},
},
},
],
selectionSet: {
kind: 'SelectionSet',
selections: [
{
kind: 'Field',
name: { kind: 'Name', value: 'rankIssue' },
arguments: [
{
kind: 'Argument',
name: { kind: 'Name', value: 'input' },
value: {
kind: 'Variable',
name: { kind: 'Name', value: 'input' },
},
},
],
selectionSet: {
kind: 'SelectionSet',
selections: [
{
kind: 'FragmentSpread',
name: { kind: 'Name', value: 'CommandResultFields' },
},
],
},
},
],
},
},
{
kind: 'FragmentDefinition',
name: { kind: 'Name', value: 'CommandResultFields' },
typeCondition: {
kind: 'NamedType',
name: { kind: 'Name', value: 'CommandResult' },
},
selectionSet: {
kind: 'SelectionSet',
selections: [
{ kind: 'Field', name: { kind: 'Name', value: 'id' } },
{ kind: 'Field', name: { kind: 'Name', value: 'key' } },
{ kind: 'Field', name: { kind: 'Name', value: 'version' } },
],
},
},
],
} as unknown as DocumentNode<RankIssueMutation, RankIssueMutationVariables>;
export const MyNotificationsDocument = {
kind: 'Document',
definitions: [
@@ -7020,6 +7303,7 @@ export const IssueChangedDocument = {
],
},
},
{ kind: 'Field', name: { kind: 'Name', value: 'rank' } },
],
},
},

15
libs/web/tracker/infrastructure/src/lib/graphql/issues.graphql
View File

@@ -176,3 +176,18 @@ mutation RemoveChecklistItem($issueId: ID!, $itemId: ID!) {
...CommandResultFields
}
}
query Backlog($filter: IssueFilterInput!) {
issues(filter: $filter, limit: 200) {
items {
...IssueSummaryFields
}
total
}
}
mutation RankIssue($input: RankIssueInput!) {
rankIssue(input: $input) {
...CommandResultFields
}
}

232
libs/web/tracker/presenters/src/lib/pages/backlog.page.ts Normal file
View File

@@ -0,0 +1,232 @@
import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
import {
ChangeDetectionStrategy,
Component,
effect,
inject,
untracked,
} from '@angular/core';
import { RouterLink } from '@angular/router';
import {
PiEmptyStateComponent,
PiIconButtonComponent,
PiIconComponent,
PiNoteComponent,
PiSkeletonComponent,
} from '@pi/ui';
import {
BacklogFacade,
ProjectFacade,
provideBacklogFacade,
} from '@task-stream/web/tracker/application';
import { IssueSummary } from '@task-stream/web/tracker/domain';
import { initials, PRIORITY, statusLook, typeLook } from '../ui/copy';
/** /p/:key/backlog — what is still to start, in the order the team takes it. */
@Component({
selector: 'ts-backlog-page',
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
RouterLink,
CdkDrag,
CdkDropList,
PiEmptyStateComponent,
PiIconButtonComponent,
PiIconComponent,
PiNoteComponent,
PiSkeletonComponent,
],
providers: [provideBacklogFacade()],
template: `
<div class="ts-section-header">
<p class="ts-muted">
Lo que aún no ha empezado, en el orden en que se va a coger. Arrastra
para reordenar; las columnas del tablero siguen este mismo orden.
</p>
@if (facade.loaded() && facade.total() > facade.issues().length) {
<span class="ts-muted ts-mono"
>{{ facade.issues().length }} de {{ facade.total() }}</span
>
}
</div>
@if (facade.error(); as error) {
<pi-note
gap="xs"
status="error"
appearance="fill"
type="status"
title="No se pudo cargar el backlog"
[text]="error"
/>
} @else if (!facade.loaded()) {
<pi-skeleton shape="text" [lines]="8" />
} @else if (facade.issues().length) {
<ol
class="ts-backlog ts-panel"
cdkDropList
[cdkDropListDisabled]="!project.canContribute()"
(cdkDropListDropped)="drop($event)"
>
@for (issue of facade.issues(); track issue.id; let i = $index) {
<li class="ts-backlog__row" cdkDrag [cdkDragData]="issue">
<span class="ts-backlog__pos ts-mono">{{ i + 1 }}</span>
<span
class="ts-backlog__type"
[style.--tone]="typeTone(issue)"
[title]="typeLabel(issue)"
>
<pi-icon [icon]="typeIcon(issue)" size="x-small" />
</span>
<a class="ts-key" [routerLink]="['..', 'issues', issue.key]">{{
issue.key
}}</a>
<a
class="ts-backlog__title"
[routerLink]="['..', 'issues', issue.key]"
>{{ issue.title }}</a
>
<span class="ts-pill" [style.--tone]="statusTone(issue)">{{
statusLabel(issue)
}}</span>
<span class="ts-backlog__priority ts-muted">{{
priorityLabel(issue)
}}</span>
<span
class="ts-backlog__who"
[title]="issue.assignee?.name ?? 'Sin asignar'"
>{{
issue.assignee ? initialsOf(issue.assignee.name) : '—'
}}</span
>
@if (project.canContribute()) {
<span class="ts-backlog__moves">
<pi-icon-button
icon="arrow-up"
color="grey"
appearance="ghost"
[attr.aria-label]="'Subir ' + issue.key"
[disabled]="i === 0"
(execute)="facade.move(issue.id, i - 1)"
/>
<pi-icon-button
icon="arrow-down"
color="grey"
appearance="ghost"
[attr.aria-label]="'Bajar ' + issue.key"
[disabled]="i === facade.issues().length - 1"
(execute)="facade.move(issue.id, i + 1)"
/>
</span>
}
</li>
}
</ol>
} @else {
<pi-empty-state
icon="task"
title="Nada pendiente de empezar"
description="Los tickets nuevos aparecen aquí, al final, hasta que alguien los coge."
/>
}
`,
styles: `
.ts-backlog {
margin: 0;
padding: 0.25rem 0;
list-style: none;
}
.ts-backlog__row {
display: grid;
grid-template-columns: 2rem auto auto minmax(0, 1fr) auto auto auto auto;
gap: 0.625rem;
align-items: center;
padding: 0.375rem 0.875rem;
border-top: 1px solid var(--ts-line);
background: var(--ts-surface);
cursor: grab;
&:first-child {
border-top: 0;
}
@media (max-width: 720px) {
grid-template-columns: 2rem auto minmax(0, 1fr) auto;
.ts-backlog__type,
.ts-pill,
.ts-backlog__priority,
.ts-backlog__who {
display: none;
}
}
}
.ts-backlog__pos {
color: var(--ts-muted);
font-size: 0.75rem;
text-align: right;
}
.ts-backlog__type {
display: inline-flex;
color: var(--tone);
}
.ts-backlog__title {
overflow: hidden;
color: inherit;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
color: var(--ts-brand);
}
}
.ts-backlog__priority {
font-size: 0.8125rem;
}
.ts-backlog__who {
display: inline-grid;
place-items: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: var(--ts-line);
font-size: 0.625rem;
font-weight: 600;
}
.ts-backlog__moves {
display: inline-flex;
}
.cdk-drag-preview {
box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}
.cdk-drag-placeholder {
opacity: 0.35;
}
`,
})
export class BacklogPage {
protected readonly facade = inject(BacklogFacade);
protected readonly project = inject(ProjectFacade);
protected readonly initialsOf = initials;
constructor() {
effect(() => {
const projectId = this.project.project()?.id;
if (projectId) untracked(() => this.facade.open(projectId));
});
}
protected drop(event: CdkDragDrop<unknown, unknown, IssueSummary>): void {
this.facade.move(event.item.data.id, event.currentIndex);
}
protected typeIcon = (issue: IssueSummary) =>
typeLook(this.project.workflow(), issue.type).icon;
protected typeTone = (issue: IssueSummary) =>
typeLook(this.project.workflow(), issue.type).tone;
protected typeLabel = (issue: IssueSummary) =>
typeLook(this.project.workflow(), issue.type).label;
protected statusTone = (issue: IssueSummary) =>
statusLook(this.project.workflow(), issue.status).tone;
protected statusLabel = (issue: IssueSummary) =>
statusLook(this.project.workflow(), issue.status).label;
protected priorityLabel = (issue: IssueSummary) =>
PRIORITY[issue.priority].label;
}

1
libs/web/tracker/presenters/src/lib/pages/project-shell.page.ts
View File

@@ -85,6 +85,7 @@ import { projectTone, PUBLIC_TONE, ROLE } from '../ui/copy';
}
<nav class="ts-tabs" aria-label="Secciones del proyecto">
<a routerLink="board" routerLinkActive="is-active">Tablero</a>
<a routerLink="backlog" routerLinkActive="is-active">Backlog</a>
<a routerLink="epics" routerLinkActive="is-active">Épicas</a>
<a routerLink="releases" routerLinkActive="is-active">Releases</a>
<a routerLink="dashboard" routerLinkActive="is-active">Seguimiento</a>

6
libs/web/tracker/presenters/src/lib/tracker.routes.ts
View File

@@ -38,6 +38,12 @@ export const trackerRoutes: Routes = [
loadComponent: () =>
import('./pages/issue.page').then((m) => m.IssuePage),
},
{
path: 'backlog',
title: 'Backlog · TaskStream',
loadComponent: () =>
import('./pages/backlog.page').then((m) => m.BacklogPage),
},
{
path: 'epics',
title: 'Épicas · TaskStream',