feat: formatted text, a list view, ticket details, public proposals and votes
Formatted text
- Descriptions, comments, replies and release notes render Markdown,
sanitised with DOMPurify (tested against scripts, handlers and
javascript: links). A pasted image is uploaded and written as
; the web fetches it with the reader's session,
so it works on private projects. Every text box has a preview. The
attachment upload now answers its attachmentId.
List view
- /p/:key/list: every ticket as rows, sortable by any column, filtered by
text, open/closed, type, priority and assignee; status, priority and
assignee change in place; bulk edit (the backlog's bar, now shared).
Ticket details
- Reactions on comments (GitHub's eight), for members and viewers.
- Duplicate a ticket: what it says, not where it stands.
- blockedBy: open tickets it waits for (BLOCKS / DEPENDS_ON), worked out
when reading with one query per board or page; shown on cards, list
rows and the ticket.
Public proposals
- A public project can take bug reports and ideas from anyone
(acceptsProposals): POST /api/explore/projects/{project}/proposals and
the form at /p/:key/proponer. They become tickets labelled «propuesta»,
opened by TaskStream; a honeypot field and 5 per address every 15
minutes keep spam out. No e-mail is asked: it would be public.
Votes
- Anyone signed in votes on a public project's tickets, members on a
private one (voteIssue, PUT/DELETE /api/issues/{issue}/vote): votes and
voted on each ticket, buttons on the ticket and the roadmap, a column
in the list. The showcase carries votes and the open proposals.
MCP: vote_issue, duplicate_issue, react_to_comment; listings show
blockers and votes. Docs, Word and PDF updated; chat notifications
(Discord, Slack, Telegram) noted for later.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -6,6 +6,7 @@ export const epicsPageEvents = eventGroup({
|
||||
source: 'Epics Page',
|
||||
events: {
|
||||
opened: type<{ projectId: string }>(),
|
||||
voteRequested: type<{ issueId: string; on: boolean }>(),
|
||||
},
|
||||
});
|
||||
|
||||
@@ -14,5 +15,7 @@ export const epicsApiEvents = eventGroup({
|
||||
events: {
|
||||
loaded: type<Epic[]>(),
|
||||
loadFailed: type<string>(),
|
||||
voted: type<void>(),
|
||||
voteFailed: type<string>(),
|
||||
},
|
||||
});
|
||||
|
||||
@@ -69,6 +69,10 @@ export const issuePageEvents = eventGroup({
|
||||
attachmentId: string;
|
||||
}>(),
|
||||
commentEditRequested: type<{ commentId: string; body: string }>(),
|
||||
reactRequested: type<{ commentId: string; emoji: string; on: boolean }>(),
|
||||
voteRequested: type<{ issueId: string; on: boolean }>(),
|
||||
/** An image pasted into a text was uploaded (it joins the ticket's files). */
|
||||
imagePasted: type<{ issueId: string }>(),
|
||||
commentDeleteRequested: type<{ commentId: string }>(),
|
||||
},
|
||||
});
|
||||
|
||||
38
libs/web/tracker/application/src/lib/events/list.events.ts
Normal file
38
libs/web/tracker/application/src/lib/events/list.events.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
import { type } from '@ngrx/signals';
|
||||
import { eventGroup } from '@ngrx/signals/events';
|
||||
import {
|
||||
BulkChange,
|
||||
BulkResult,
|
||||
IssueListFilter,
|
||||
IssuePage,
|
||||
IssuePriority,
|
||||
} from '@task-stream/web/tracker/domain';
|
||||
|
||||
/** What the list shows, beyond the project. */
|
||||
export type ListCriteria = Omit<IssueListFilter, 'projectId' | 'limit'>;
|
||||
|
||||
export const listPageEvents = eventGroup({
|
||||
source: 'List Page',
|
||||
events: {
|
||||
opened: type<{ projectId: string }>(),
|
||||
filtered: type<ListCriteria>(),
|
||||
statusChangeRequested: type<{ issueId: string; status: string }>(),
|
||||
priorityChangeRequested: type<{
|
||||
issueId: string;
|
||||
priority: IssuePriority;
|
||||
}>(),
|
||||
assignRequested: type<{ issueId: string; assigneeId: string | null }>(),
|
||||
bulkRequested: type<{ issueIds: string[]; change: BulkChange }>(),
|
||||
},
|
||||
});
|
||||
|
||||
export const listApiEvents = eventGroup({
|
||||
source: 'List API',
|
||||
events: {
|
||||
loaded: type<IssuePage>(),
|
||||
loadFailed: type<string>(),
|
||||
changed: type<void>(),
|
||||
changeFailed: type<string>(),
|
||||
bulkDone: type<BulkResult>(),
|
||||
},
|
||||
});
|
||||
@@ -48,6 +48,10 @@ export const projectPageEvents = eventGroup({
|
||||
analyticsRequested: type<{ projectId: string; days: number }>(),
|
||||
burnupRequested: type<{ releaseId: string }>(),
|
||||
visibilityChangeRequested: type<{ projectId: string; isPublic: boolean }>(),
|
||||
proposalsChangeRequested: type<{
|
||||
projectId: string;
|
||||
acceptsProposals: boolean;
|
||||
}>(),
|
||||
deleteRequested: type<{ projectId: string; confirmKey: string }>(),
|
||||
},
|
||||
});
|
||||
|
||||
@@ -19,6 +19,11 @@ export class EpicsFacade {
|
||||
open(projectId: string): void {
|
||||
this.dispatch.opened({ projectId });
|
||||
}
|
||||
|
||||
/** Votes for an epic (`on`) or takes the vote back. */
|
||||
vote(issueId: string, on: boolean): void {
|
||||
this.dispatch.voteRequested({ issueId, on });
|
||||
}
|
||||
}
|
||||
|
||||
/** Store + facade of the epics view, for its route component. */
|
||||
|
||||
@@ -4,10 +4,11 @@ import {
|
||||
Attachment,
|
||||
AttachmentsGateway,
|
||||
IssueLink,
|
||||
IssuesGateway,
|
||||
IssueLinkType,
|
||||
UpdateIssueInput,
|
||||
} from '@task-stream/web/tracker/domain';
|
||||
import { Observable } from 'rxjs';
|
||||
import { map, Observable } from 'rxjs';
|
||||
import { issuePageEvents } from '../events/issue.events';
|
||||
import { IssueStore } from '../stores/issue.store';
|
||||
|
||||
@@ -20,6 +21,7 @@ export class IssueFacade {
|
||||
private readonly store = inject(IssueStore);
|
||||
private readonly dispatch = injectDispatch(issuePageEvents);
|
||||
private readonly files = inject(AttachmentsGateway);
|
||||
private readonly issues = inject(IssuesGateway);
|
||||
|
||||
readonly issue = this.store.issue;
|
||||
readonly comments = this.store.comments;
|
||||
@@ -178,6 +180,43 @@ export class IssueFacade {
|
||||
return this.files.download(issueId, attachment);
|
||||
}
|
||||
|
||||
/** A file's bytes by id alone (an image inside a description or comment). */
|
||||
fileById(attachmentId: string): Observable<Blob> {
|
||||
return this.fileOf({ id: attachmentId } as Attachment);
|
||||
}
|
||||
|
||||
/**
|
||||
* Uploads an image pasted into a text and answers its id, to write
|
||||
* ``. It also shows among the ticket's files.
|
||||
*/
|
||||
uploadImage(file: File): Observable<string> {
|
||||
const issueId = this.store.issue()?.id ?? '';
|
||||
return this.files.upload(issueId, file).pipe(
|
||||
map((uploaded) => {
|
||||
this.dispatch.imagePasted({ issueId });
|
||||
return uploaded.attachmentId;
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/** Votes for the open ticket (`on`) or takes the vote back. */
|
||||
vote(on: boolean): void {
|
||||
this.withIssue((issueId) => this.dispatch.voteRequested({ issueId, on }));
|
||||
}
|
||||
|
||||
/** Adds (`on`) or takes back the signed-in person's reaction. */
|
||||
react(commentId: string, emoji: string, on: boolean): void {
|
||||
this.dispatch.reactRequested({ commentId, emoji, on });
|
||||
}
|
||||
|
||||
/** A copy of what the open ticket says; answers its key. */
|
||||
duplicate(): Observable<string | null> {
|
||||
const issueId = this.store.issue()?.id ?? '';
|
||||
return this.issues
|
||||
.duplicate(issueId)
|
||||
.pipe(map((result) => result.key ?? null));
|
||||
}
|
||||
|
||||
editComment(commentId: string, body: string): void {
|
||||
this.dispatch.commentEditRequested({ commentId, body });
|
||||
}
|
||||
|
||||
51
libs/web/tracker/application/src/lib/facades/list.facade.ts
Normal file
51
libs/web/tracker/application/src/lib/facades/list.facade.ts
Normal file
@@ -0,0 +1,51 @@
|
||||
import { inject, Injectable, Provider } from '@angular/core';
|
||||
import { injectDispatch } from '@ngrx/signals/events';
|
||||
import { BulkChange, IssuePriority } from '@task-stream/web/tracker/domain';
|
||||
import { ListCriteria, listPageEvents } from '../events/list.events';
|
||||
import { LIST_LIMIT, ListStore } from '../stores/list.store';
|
||||
|
||||
/** The list view of a project, for presenters. */
|
||||
@Injectable()
|
||||
export class ListFacade {
|
||||
private readonly store = inject(ListStore);
|
||||
private readonly dispatch = injectDispatch(listPageEvents);
|
||||
|
||||
/** Most recently updated first (the first LIST_LIMIT). */
|
||||
readonly issues = this.store.issues;
|
||||
readonly total = this.store.total;
|
||||
readonly criteria = this.store.criteria;
|
||||
readonly limit = LIST_LIMIT;
|
||||
/** 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 });
|
||||
}
|
||||
|
||||
filter(criteria: ListCriteria): void {
|
||||
this.dispatch.filtered(criteria);
|
||||
}
|
||||
|
||||
changeStatus(issueId: string, status: string): void {
|
||||
this.dispatch.statusChangeRequested({ issueId, status });
|
||||
}
|
||||
|
||||
changePriority(issueId: string, priority: IssuePriority): void {
|
||||
this.dispatch.priorityChangeRequested({ issueId, priority });
|
||||
}
|
||||
|
||||
assign(issueId: string, assigneeId: string | null): void {
|
||||
this.dispatch.assignRequested({ issueId, assigneeId });
|
||||
}
|
||||
|
||||
/** The same change on several tickets (each may refuse on its own). */
|
||||
bulkUpdate(issueIds: string[], change: BulkChange): void {
|
||||
if (issueIds.length) this.dispatch.bulkRequested({ issueIds, change });
|
||||
}
|
||||
}
|
||||
|
||||
/** Store + facade of the list view, for its route component. */
|
||||
export function provideListFacade(): Provider[] {
|
||||
return [ListStore, ListFacade];
|
||||
}
|
||||
@@ -161,6 +161,13 @@ export class ProjectFacade {
|
||||
this.dispatch.visibilityChangeRequested({ projectId, isPublic });
|
||||
}
|
||||
|
||||
/** Take bug reports and ideas from anyone (while public). Owners and admins. */
|
||||
setAcceptsProposals(acceptsProposals: boolean): void {
|
||||
const projectId = this.projectId();
|
||||
if (projectId)
|
||||
this.dispatch.proposalsChangeRequested({ projectId, acceptsProposals });
|
||||
}
|
||||
|
||||
/**
|
||||
* Owner only, typing the key to confirm. Tickets, comments and releases go
|
||||
* too; on success it navigates home.
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
import { inject, Injectable } from '@angular/core';
|
||||
import {
|
||||
ProposalInput,
|
||||
ProposalResult,
|
||||
ProposalsGateway,
|
||||
} from '@task-stream/web/tracker/domain';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
/** The public form of a project: anyone reports a bug or proposes an idea. */
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class ProposeFacade {
|
||||
private readonly proposals = inject(ProposalsGateway);
|
||||
|
||||
submit(
|
||||
projectKey: string,
|
||||
proposal: ProposalInput,
|
||||
): Observable<ProposalResult> {
|
||||
return this.proposals.submit(projectKey, proposal);
|
||||
}
|
||||
}
|
||||
@@ -12,9 +12,9 @@ import {
|
||||
IssuesGateway,
|
||||
TrackerRealtimeGateway,
|
||||
} from '@task-stream/web/tracker/domain';
|
||||
import { debounceTime, startWith, switchMap } from 'rxjs';
|
||||
import { debounceTime, merge, mergeMap, startWith, switchMap, tap } from 'rxjs';
|
||||
import { epicsApiEvents, epicsPageEvents } from '../events/epics.events';
|
||||
import { describeError } from '../notifications';
|
||||
import { describeError, Notifications } from '../notifications';
|
||||
|
||||
interface EpicsState {
|
||||
epics: Epic[];
|
||||
@@ -42,11 +42,16 @@ export const EpicsStore = signalStore(
|
||||
events = inject(Events),
|
||||
issues = inject(IssuesGateway),
|
||||
realtime = inject(TrackerRealtimeGateway),
|
||||
notifications = inject(Notifications),
|
||||
) => ({
|
||||
// Any ticket of the project may move an epic's progress: reload, calmly.
|
||||
load$: events.on(epicsPageEvents.opened).pipe(
|
||||
switchMap(({ payload }) =>
|
||||
realtime.issueChanges(payload.projectId).pipe(
|
||||
merge(
|
||||
realtime.issueChanges(payload.projectId),
|
||||
// One's own vote, without waiting for the live update.
|
||||
events.on(epicsApiEvents.voted),
|
||||
).pipe(
|
||||
debounceTime(500),
|
||||
startWith(null),
|
||||
switchMap(() =>
|
||||
@@ -61,6 +66,19 @@ export const EpicsStore = signalStore(
|
||||
),
|
||||
),
|
||||
),
|
||||
vote$: events.on(epicsPageEvents.voteRequested).pipe(
|
||||
mergeMap(({ payload }) =>
|
||||
issues.vote(payload.issueId, payload.on).pipe(
|
||||
mapResponse({
|
||||
next: () => epicsApiEvents.voted(),
|
||||
error: (error) => epicsApiEvents.voteFailed(describeError(error)),
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
voteFeedback$: events
|
||||
.on(epicsApiEvents.voteFailed)
|
||||
.pipe(tap(({ payload }) => notifications.error(payload))),
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
@@ -244,7 +244,11 @@ export const IssueStore = signalStore(
|
||||
* ticket, its comments and its subtasks are asked for twice.
|
||||
*/
|
||||
catchUp$: events
|
||||
.on(issueApiEvents.commandSucceeded, issueApiEvents.checklistSaved)
|
||||
.on(
|
||||
issueApiEvents.commandSucceeded,
|
||||
issueApiEvents.checklistSaved,
|
||||
issuePageEvents.imagePasted,
|
||||
)
|
||||
.pipe(
|
||||
map(() => store.issue()),
|
||||
filter((issue): issue is Issue => !!issue),
|
||||
@@ -391,6 +395,30 @@ export const IssueStore = signalStore(
|
||||
),
|
||||
),
|
||||
),
|
||||
events.on(issuePageEvents.voteRequested).pipe(
|
||||
mergeMap(({ payload }) =>
|
||||
issues.vote(payload.issueId, payload.on).pipe(
|
||||
// The count is the feedback.
|
||||
mapResponse({
|
||||
next: () => issueApiEvents.checklistSaved(),
|
||||
error: (error) =>
|
||||
issueApiEvents.commandFailed(describeError(error)),
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
events.on(issuePageEvents.reactRequested).pipe(
|
||||
mergeMap(({ payload }) =>
|
||||
comments.react(payload.commentId, payload.emoji, payload.on).pipe(
|
||||
// A reaction is not worth a toast either.
|
||||
mapResponse({
|
||||
next: () => issueApiEvents.checklistSaved(),
|
||||
error: (error) =>
|
||||
issueApiEvents.commandFailed(describeError(error)),
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
events.on(issuePageEvents.checklistUpdateRequested).pipe(
|
||||
mergeMap(({ payload }) =>
|
||||
issues
|
||||
|
||||
183
libs/web/tracker/application/src/lib/stores/list.store.ts
Normal file
183
libs/web/tracker/application/src/lib/stores/list.store.ts
Normal file
@@ -0,0 +1,183 @@
|
||||
import { inject } from '@angular/core';
|
||||
import { mapResponse } from '@ngrx/operators';
|
||||
import { 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 {
|
||||
combineLatest,
|
||||
concatMap,
|
||||
debounceTime,
|
||||
map,
|
||||
merge,
|
||||
mergeMap,
|
||||
startWith,
|
||||
switchMap,
|
||||
tap,
|
||||
} from 'rxjs';
|
||||
import {
|
||||
ListCriteria,
|
||||
listApiEvents,
|
||||
listPageEvents,
|
||||
} from '../events/list.events';
|
||||
import { describeError, Notifications } from '../notifications';
|
||||
|
||||
/** The list asks for this many at most; past that, the filters narrow it. */
|
||||
export const LIST_LIMIT = 200;
|
||||
|
||||
interface ListState {
|
||||
projectId: string | null;
|
||||
criteria: ListCriteria;
|
||||
issues: IssueSummary[];
|
||||
total: number;
|
||||
loaded: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
/** Every ticket of a project that fits the filters, as rows. Live. */
|
||||
export const ListStore = signalStore(
|
||||
withState<ListState>({
|
||||
projectId: null,
|
||||
criteria: {},
|
||||
issues: [],
|
||||
total: 0,
|
||||
loaded: false,
|
||||
error: null,
|
||||
}),
|
||||
withReducer(
|
||||
on(listPageEvents.opened, ({ payload }) => ({
|
||||
projectId: payload.projectId,
|
||||
loaded: false,
|
||||
error: null,
|
||||
})),
|
||||
on(listPageEvents.filtered, ({ payload }) => ({ criteria: payload })),
|
||||
on(listApiEvents.loaded, ({ payload }) => ({
|
||||
issues: payload.items,
|
||||
total: payload.total,
|
||||
loaded: true,
|
||||
error: null,
|
||||
})),
|
||||
on(listApiEvents.loadFailed, ({ payload }) => ({
|
||||
loaded: true,
|
||||
error: payload,
|
||||
})),
|
||||
),
|
||||
withEventHandlers(
|
||||
(
|
||||
store,
|
||||
events = inject(Events),
|
||||
issues = inject(IssuesGateway),
|
||||
realtime = inject(TrackerRealtimeGateway),
|
||||
notifications = inject(Notifications),
|
||||
) => {
|
||||
const command = (request: ReturnType<IssuesGateway['assign']>) =>
|
||||
request.pipe(
|
||||
mapResponse({
|
||||
next: () => listApiEvents.changed(),
|
||||
error: (error) => listApiEvents.changeFailed(describeError(error)),
|
||||
}),
|
||||
);
|
||||
return {
|
||||
/**
|
||||
* Reloads on opening, on each filter and on anyone's change (calmly);
|
||||
* also after this page's own changes, not to wait for the live one.
|
||||
*/
|
||||
load$: events.on(listPageEvents.opened).pipe(
|
||||
switchMap(({ payload }) =>
|
||||
combineLatest([
|
||||
events.on(listPageEvents.filtered).pipe(
|
||||
map(({ payload: criteria }) => criteria),
|
||||
startWith(store.criteria()),
|
||||
debounceTime(250),
|
||||
),
|
||||
merge(
|
||||
realtime.issueChanges(payload.projectId),
|
||||
events.on(
|
||||
listApiEvents.changed,
|
||||
listApiEvents.changeFailed,
|
||||
listApiEvents.bulkDone,
|
||||
),
|
||||
).pipe(debounceTime(400), startWith(null)),
|
||||
]).pipe(
|
||||
switchMap(([criteria]) =>
|
||||
issues
|
||||
.list({
|
||||
...criteria,
|
||||
projectId: payload.projectId,
|
||||
limit: LIST_LIMIT,
|
||||
})
|
||||
.pipe(
|
||||
mapResponse({
|
||||
next: (page) => listApiEvents.loaded(page),
|
||||
error: (error) =>
|
||||
listApiEvents.loadFailed(describeError(error)),
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
status$: events.on(listPageEvents.statusChangeRequested).pipe(
|
||||
mergeMap(({ payload }) =>
|
||||
command(
|
||||
issues.changeStatus({
|
||||
issueId: payload.issueId,
|
||||
status: payload.status,
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
priority$: events.on(listPageEvents.priorityChangeRequested).pipe(
|
||||
mergeMap(({ payload }) =>
|
||||
command(
|
||||
issues.update({
|
||||
issueId: payload.issueId,
|
||||
priority: payload.priority,
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
assign$: events
|
||||
.on(listPageEvents.assignRequested)
|
||||
.pipe(
|
||||
mergeMap(({ payload }) =>
|
||||
command(issues.assign(payload.issueId, payload.assigneeId)),
|
||||
),
|
||||
),
|
||||
bulk$: events.on(listPageEvents.bulkRequested).pipe(
|
||||
concatMap(({ payload }) =>
|
||||
issues.bulkUpdate(payload.issueIds, payload.change).pipe(
|
||||
mapResponse({
|
||||
next: (result) => listApiEvents.bulkDone(result),
|
||||
error: (error) =>
|
||||
listApiEvents.changeFailed(describeError(error)),
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
bulkFeedback$: events.on(listApiEvents.bulkDone).pipe(
|
||||
tap(({ payload }) => {
|
||||
const refused = payload.results.filter((r) => !r.ok);
|
||||
if (!refused.length)
|
||||
notifications.success(`${payload.updated} tickets actualizados`);
|
||||
else
|
||||
notifications.error(
|
||||
`${payload.updated} actualizados; ${refused.length} no: ${refused[0].error}`,
|
||||
);
|
||||
}),
|
||||
),
|
||||
feedback$: events
|
||||
.on(listApiEvents.changeFailed)
|
||||
.pipe(tap(({ payload }) => notifications.error(payload))),
|
||||
};
|
||||
},
|
||||
),
|
||||
);
|
||||
@@ -419,6 +419,20 @@ export const ProjectStore = signalStore(
|
||||
),
|
||||
),
|
||||
),
|
||||
events
|
||||
.on(projectPageEvents.proposalsChangeRequested)
|
||||
.pipe(
|
||||
mergeMap(({ payload }) =>
|
||||
runCommand(
|
||||
projects.update(payload),
|
||||
payload.acceptsProposals
|
||||
? 'Formulario público abierto: cualquiera puede proponer'
|
||||
: 'Formulario público cerrado',
|
||||
projectApiEvents.commandSucceeded,
|
||||
projectApiEvents.commandFailed,
|
||||
),
|
||||
),
|
||||
),
|
||||
events
|
||||
.on(projectPageEvents.releaseCreateRequested)
|
||||
.pipe(
|
||||
|
||||
Reference in New Issue
Block a user