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:
@@ -10,15 +10,11 @@ import {
|
||||
} from '@angular/core';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import {
|
||||
PiActionButtonComponent,
|
||||
PiEmptyStateComponent,
|
||||
PiIconButtonComponent,
|
||||
PiIconComponent,
|
||||
PiNoteComponent,
|
||||
PiSelectFieldComponent,
|
||||
PiSkeletonComponent,
|
||||
PiTextFieldComponent,
|
||||
type PiSelectFieldOption,
|
||||
} from '@pi/ui';
|
||||
import {
|
||||
BacklogFacade,
|
||||
@@ -27,31 +23,26 @@ import {
|
||||
} from '@task-stream/web/tracker/application';
|
||||
import {
|
||||
BulkChange,
|
||||
IssuePriority,
|
||||
IssueSummary,
|
||||
sumPoints,
|
||||
} from '@task-stream/web/tracker/domain';
|
||||
import { initials, options, PRIORITY, statusLook, typeLook } from '../ui/copy';
|
||||
|
||||
/** "Nobody" / "no sprint" in the bulk selects. */
|
||||
const NOBODY = '__none__';
|
||||
import { BulkBarComponent } from '../ui/bulk-bar';
|
||||
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: [
|
||||
BulkBarComponent,
|
||||
RouterLink,
|
||||
CdkDrag,
|
||||
CdkDropList,
|
||||
PiActionButtonComponent,
|
||||
PiEmptyStateComponent,
|
||||
PiIconButtonComponent,
|
||||
PiIconComponent,
|
||||
PiNoteComponent,
|
||||
PiSelectFieldComponent,
|
||||
PiSkeletonComponent,
|
||||
PiTextFieldComponent,
|
||||
],
|
||||
providers: [provideBacklogFacade()],
|
||||
template: `
|
||||
@@ -85,60 +76,12 @@ const NOBODY = '__none__';
|
||||
<pi-skeleton shape="text" [lines]="8" />
|
||||
} @else if (facade.issues().length) {
|
||||
@if (project.canContribute()) {
|
||||
<div class="ts-bulk" role="toolbar" aria-label="Edición en bloque">
|
||||
<label class="ts-bulk__all">
|
||||
<input
|
||||
type="checkbox"
|
||||
[checked]="allSelected()"
|
||||
[indeterminate]="selected().size > 0 && !allSelected()"
|
||||
(change)="selectAll($any($event.target).checked)"
|
||||
/>
|
||||
{{
|
||||
selected().size
|
||||
? selected().size + ' seleccionados'
|
||||
: 'Seleccionar'
|
||||
}}
|
||||
</label>
|
||||
@if (selected().size) {
|
||||
<pi-select-field [options]="bulkFields" [(value)]="bulkField" />
|
||||
@switch (bulkField()) {
|
||||
@case ('status') {
|
||||
<pi-select-field
|
||||
[options]="statusOptions()"
|
||||
[(value)]="bulkValue"
|
||||
/>
|
||||
}
|
||||
@case ('assignee') {
|
||||
<pi-select-field
|
||||
[options]="assigneeOptions()"
|
||||
[(value)]="bulkValue"
|
||||
/>
|
||||
}
|
||||
@case ('sprint') {
|
||||
<pi-select-field
|
||||
[options]="sprintOptions()"
|
||||
[(value)]="bulkValue"
|
||||
/>
|
||||
}
|
||||
@case ('priority') {
|
||||
<pi-select-field
|
||||
[options]="priorityOptions"
|
||||
[(value)]="bulkValue"
|
||||
/>
|
||||
}
|
||||
@case ('label') {
|
||||
<pi-text-field placeholder="etiqueta" [(value)]="bulkLabel" />
|
||||
}
|
||||
}
|
||||
<pi-action-button
|
||||
size="small"
|
||||
color="primary"
|
||||
text="Aplicar"
|
||||
[disabled]="!canApply()"
|
||||
(execute)="applyBulk()"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
<ts-bulk-bar
|
||||
[count]="selected().size"
|
||||
[allSelected]="allSelected()"
|
||||
(selectAll)="selectAll($event)"
|
||||
(apply)="applyBulk($event)"
|
||||
/>
|
||||
}
|
||||
<ol
|
||||
class="ts-backlog ts-panel"
|
||||
@@ -261,23 +204,6 @@ const NOBODY = '__none__';
|
||||
.ts-backlog__row.is-selected {
|
||||
background: color-mix(in srgb, var(--ts-brand) 8%, var(--ts-surface));
|
||||
}
|
||||
.ts-bulk {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
pi-select-field,
|
||||
pi-text-field {
|
||||
width: 13rem;
|
||||
}
|
||||
}
|
||||
.ts-bulk__all {
|
||||
display: inline-flex;
|
||||
gap: 0.375rem;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.ts-backlog__trash {
|
||||
margin: 1rem 0 0;
|
||||
font-size: 0.875rem;
|
||||
@@ -342,46 +268,6 @@ export class BacklogPage {
|
||||
this.facade.issues().length > 0 &&
|
||||
this.facade.issues().every((i) => this.selected().has(i.id)),
|
||||
);
|
||||
protected readonly bulkFields: PiSelectFieldOption<string>[] = [
|
||||
{ value: 'status', label: 'Mover a…' },
|
||||
{ value: 'assignee', label: 'Asignar a…' },
|
||||
{ value: 'sprint', label: 'Sprint…' },
|
||||
{ value: 'priority', label: 'Prioridad…' },
|
||||
{ value: 'label', label: 'Añadir etiqueta…' },
|
||||
];
|
||||
protected readonly bulkField = signal<string | null>('status');
|
||||
protected readonly bulkValue = signal<string | null>(null);
|
||||
protected readonly bulkLabel = signal('');
|
||||
protected readonly statusOptions = computed<PiSelectFieldOption<string>[]>(
|
||||
() =>
|
||||
this.project
|
||||
.workflow()
|
||||
.settings.statuses.filter((s) => !s.archived)
|
||||
.map((s) => ({ value: s.id, label: s.name })),
|
||||
);
|
||||
protected readonly assigneeOptions = computed<PiSelectFieldOption<string>[]>(
|
||||
() => [
|
||||
{ value: NOBODY, label: 'Nadie (sin asignar)' },
|
||||
...this.project
|
||||
.members()
|
||||
.map((m) => ({ value: m.user.id, label: m.user.name })),
|
||||
],
|
||||
);
|
||||
protected readonly sprintOptions = computed<PiSelectFieldOption<string>[]>(
|
||||
() => [
|
||||
{ value: NOBODY, label: 'Backlog (sin sprint)' },
|
||||
...this.project
|
||||
.openSprints()
|
||||
.map((s) => ({ value: s.id, label: s.name })),
|
||||
],
|
||||
);
|
||||
protected readonly priorityOptions = options(PRIORITY);
|
||||
protected readonly canApply = computed(() =>
|
||||
this.bulkField() === 'label'
|
||||
? !!this.bulkLabel().trim()
|
||||
: !!this.bulkValue(),
|
||||
);
|
||||
|
||||
protected toggle(issueId: string, on: boolean): void {
|
||||
this.selected.update((set) => {
|
||||
const next = new Set(set);
|
||||
@@ -395,29 +281,9 @@ export class BacklogPage {
|
||||
this.selected.set(new Set(on ? this.facade.issues().map((i) => i.id) : []));
|
||||
}
|
||||
|
||||
protected applyBulk(): void {
|
||||
const value = this.bulkValue();
|
||||
const change: BulkChange = {};
|
||||
switch (this.bulkField()) {
|
||||
case 'status':
|
||||
if (value) change.status = value;
|
||||
break;
|
||||
case 'assignee':
|
||||
change.assigneeId = value === NOBODY ? null : value;
|
||||
break;
|
||||
case 'sprint':
|
||||
change.sprintId = value === NOBODY ? null : value;
|
||||
break;
|
||||
case 'priority':
|
||||
if (value) change.priority = value as IssuePriority;
|
||||
break;
|
||||
case 'label':
|
||||
change.addLabels = [this.bulkLabel().trim().toLowerCase()];
|
||||
break;
|
||||
}
|
||||
protected applyBulk(change: BulkChange): void {
|
||||
this.facade.bulkUpdate([...this.selected()], change);
|
||||
this.selected.set(new Set());
|
||||
this.bulkLabel.set('');
|
||||
}
|
||||
protected readonly points = computed(() => sumPoints(this.facade.issues()));
|
||||
protected readonly unestimated = computed(
|
||||
|
||||
@@ -445,18 +445,6 @@ a.ts-key {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.ts-mention {
|
||||
padding: 0 0.2em;
|
||||
border-radius: 0.25em;
|
||||
background: color-mix(in oklab, var(--ts-brand) 14%, transparent);
|
||||
color: inherit;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ts-mention.is-me {
|
||||
background: color-mix(in oklab, var(--ts-brand) 30%, transparent);
|
||||
}
|
||||
|
||||
.ts-mentions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -573,3 +561,107 @@ a.ts-key {
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Waiting for other tickets: shown next to the key, with links to them.
|
||||
.ts-blocked {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.375rem;
|
||||
align-items: center;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--ts-c-red, #d33) 12%, transparent);
|
||||
color: var(--ts-c-red, var(--ts-ink));
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
.ts-key {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// 👍 2 · 🎉 1 · (+)
|
||||
.ts-reactions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.375rem;
|
||||
align-items: center;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.ts-reaction {
|
||||
display: inline-flex;
|
||||
gap: 0.25rem;
|
||||
align-items: center;
|
||||
// @pi/ui styles every <button> too specifically to override otherwise.
|
||||
min-width: 0 !important;
|
||||
height: auto !important;
|
||||
padding: 0.125rem 0.5rem !important;
|
||||
border: 1px solid var(--ts-line) !important;
|
||||
border-radius: 999px !important;
|
||||
background: var(--ts-surface);
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
.ts-mono {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
&.is-mine {
|
||||
border-color: var(--ts-brand) !important;
|
||||
background: color-mix(in srgb, var(--ts-brand) 12%, var(--ts-surface));
|
||||
}
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
.ts-reaction-picker {
|
||||
position: relative;
|
||||
summary {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 1.75rem;
|
||||
height: 1.625rem;
|
||||
border: 1px dashed var(--ts-line-strong, var(--ts-line));
|
||||
border-radius: 999px;
|
||||
color: var(--ts-muted);
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ts-reaction-picker__menu {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
bottom: calc(100% + 0.375rem);
|
||||
left: 0;
|
||||
display: flex;
|
||||
gap: 0.125rem;
|
||||
padding: 0.25rem;
|
||||
border: 1px solid var(--ts-line);
|
||||
border-radius: 0.75rem;
|
||||
background: var(--ts-surface);
|
||||
box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
|
||||
button {
|
||||
width: 2rem;
|
||||
min-width: 0 !important;
|
||||
height: 2rem;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
border-radius: 0.5rem !important;
|
||||
background: none;
|
||||
font-size: 1.125rem;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: color-mix(in srgb, var(--ts-brand) 12%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ts-votes {
|
||||
padding: 0.25rem 0.625rem;
|
||||
border: 1px solid var(--ts-line);
|
||||
border-radius: 999px;
|
||||
color: var(--ts-muted);
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
viewChild,
|
||||
} from '@angular/core';
|
||||
import { form, FormField, required } from '@angular/forms/signals';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
|
||||
import {
|
||||
PiActionButtonComponent,
|
||||
PiCheckboxComponent,
|
||||
@@ -47,9 +47,9 @@ import {
|
||||
isTyping,
|
||||
matches,
|
||||
mentionQuery,
|
||||
mentionSegments,
|
||||
POINT_SCALE,
|
||||
ReleaseStatus,
|
||||
REACTIONS,
|
||||
} from '@task-stream/web/tracker/domain';
|
||||
import {
|
||||
clock,
|
||||
@@ -63,6 +63,13 @@ import {
|
||||
typeLook,
|
||||
} from '../ui/copy';
|
||||
import { AttachmentItem } from '../ui/attachments';
|
||||
import {
|
||||
AttachmentLoader,
|
||||
ImageUploader,
|
||||
MarkdownComponent,
|
||||
MarkdownHintComponent,
|
||||
PasteImagesDirective,
|
||||
} from '../ui/markdown';
|
||||
|
||||
const NONE = '';
|
||||
/** Same ceiling as the API's ATTACHMENTS_MAX_MB default. */
|
||||
@@ -72,6 +79,9 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
|
||||
selector: 'ts-issue-page',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [
|
||||
MarkdownComponent,
|
||||
MarkdownHintComponent,
|
||||
PasteImagesDirective,
|
||||
NgTemplateOutlet,
|
||||
RouterLink,
|
||||
FormField,
|
||||
@@ -133,10 +143,46 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
|
||||
<span class="ts-parent__title">{{ parent.title }}</span>
|
||||
</a>
|
||||
}
|
||||
@if (issue.blockedBy.length) {
|
||||
<span
|
||||
class="ts-blocked"
|
||||
role="status"
|
||||
[title]="blockedTitle(issue.blockedBy)"
|
||||
>
|
||||
<pi-icon icon="lock" size="x-small" aria-hidden="true" />
|
||||
Bloqueado por
|
||||
@for (blocker of issue.blockedBy; track blocker.id) {
|
||||
<a class="ts-key" [routerLink]="['..', blocker.key]">{{
|
||||
blocker.key
|
||||
}}</a>
|
||||
}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
<div class="ts-issue__title-row">
|
||||
<h1>{{ issue.title }}</h1>
|
||||
<div class="ts-issue__actions">
|
||||
@if (facade.me()) {
|
||||
<pi-icon-button
|
||||
icon="arrow-up"
|
||||
color="grey"
|
||||
appearance="outline"
|
||||
[text]="
|
||||
(issue.voted ? 'Votado · ' : 'Votar · ') + issue.votes
|
||||
"
|
||||
[attr.aria-pressed]="issue.voted"
|
||||
[attr.title]="
|
||||
issue.voted
|
||||
? 'Quitar mi voto'
|
||||
: 'Votar: dice al equipo que lo quieres'
|
||||
"
|
||||
(execute)="facade.vote(!issue.voted)"
|
||||
/>
|
||||
} @else if (issue.votes) {
|
||||
<span class="ts-votes ts-mono" title="Votos">
|
||||
▲ {{ issue.votes }}
|
||||
</span>
|
||||
}
|
||||
@if (project.myRole()) {
|
||||
<pi-icon-button
|
||||
[icon]="facade.watching() ? 'eye-off' : 'eye'"
|
||||
@@ -165,6 +211,14 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
|
||||
title="Editar (tecla E)"
|
||||
(execute)="openEdit()"
|
||||
/>
|
||||
<pi-icon-button
|
||||
icon="copy"
|
||||
color="grey"
|
||||
appearance="outline"
|
||||
text="Duplicar"
|
||||
title="Crear otro ticket con lo mismo (sin estado, persona ni comentarios)"
|
||||
(execute)="duplicate()"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -190,7 +244,11 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
|
||||
<article class="ts-block">
|
||||
<h2 class="ts-section">Descripción</h2>
|
||||
@if (issue.description) {
|
||||
<p class="ts-prewrap">{{ issue.description }}</p>
|
||||
<ts-markdown
|
||||
[text]="issue.description"
|
||||
[me]="facade.me()"
|
||||
[loader]="loadImage"
|
||||
/>
|
||||
} @else {
|
||||
<p class="ts-muted">Sin descripción.</p>
|
||||
}
|
||||
@@ -539,7 +597,9 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
|
||||
}}{{ comment.editedAt ? ' · editado' : '' }}</span
|
||||
>
|
||||
<span class="ts-spacer"></span>
|
||||
@if (!comment.deleted && comment.author.id === facade.me()) {
|
||||
@if (
|
||||
!comment.deleted && comment.author.id === facade.me()
|
||||
) {
|
||||
<pi-icon-button
|
||||
icon="edit"
|
||||
color="grey"
|
||||
@@ -564,19 +624,60 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
|
||||
@if (comment.deleted) {
|
||||
<p class="ts-muted ts-comment__gone">Comentario borrado</p>
|
||||
} @else {
|
||||
<p class="ts-prewrap">
|
||||
@for (part of segments(comment.body); track $index) {
|
||||
@if ('mention' in part) {
|
||||
<span
|
||||
class="ts-mention"
|
||||
[class.is-me]="part.userId === facade.me()"
|
||||
>@{{ part.mention }}</span
|
||||
<ts-markdown
|
||||
[text]="comment.body"
|
||||
[me]="facade.me()"
|
||||
[loader]="loadImage"
|
||||
/>
|
||||
}
|
||||
@if (
|
||||
!comment.deleted &&
|
||||
(comment.reactions.length || project.myRole())
|
||||
) {
|
||||
<div class="ts-reactions">
|
||||
@for (
|
||||
reaction of comment.reactions;
|
||||
track reaction.emoji
|
||||
) {
|
||||
<button
|
||||
type="button"
|
||||
class="ts-reaction"
|
||||
[class.is-mine]="reacted(reaction)"
|
||||
[attr.aria-pressed]="reacted(reaction)"
|
||||
[title]="reactionTitle(reaction)"
|
||||
[disabled]="!project.myRole()"
|
||||
(click)="
|
||||
facade.react(
|
||||
comment.id,
|
||||
reaction.emoji,
|
||||
!reacted(reaction)
|
||||
)
|
||||
"
|
||||
>
|
||||
} @else {
|
||||
{{ part.text }}
|
||||
{{ reaction.emoji }}
|
||||
<span class="ts-mono">{{
|
||||
reaction.users.length
|
||||
}}</span>
|
||||
</button>
|
||||
}
|
||||
}
|
||||
</p>
|
||||
@if (project.myRole()) {
|
||||
<details class="ts-reaction-picker">
|
||||
<summary title="Reaccionar" aria-label="Reaccionar">
|
||||
<pi-icon icon="add" size="x-small" />
|
||||
</summary>
|
||||
<div class="ts-reaction-picker__menu">
|
||||
@for (emoji of reactions; track emoji) {
|
||||
<button
|
||||
type="button"
|
||||
(click)="pickReaction(comment, emoji, $event)"
|
||||
>
|
||||
{{ emoji }}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</details>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@if (!comment.deleted && filesOf(comment).length) {
|
||||
<div class="ts-attachments">
|
||||
@@ -593,12 +694,18 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
|
||||
</ng-template>
|
||||
@for (thread of threads(); track thread.comment.id) {
|
||||
<ng-container
|
||||
*ngTemplateOutlet="commentView; context: { $implicit: thread.comment }"
|
||||
*ngTemplateOutlet="
|
||||
commentView;
|
||||
context: { $implicit: thread.comment }
|
||||
"
|
||||
/>
|
||||
<div class="ts-replies">
|
||||
@for (reply of thread.replies; track reply.id) {
|
||||
<ng-container
|
||||
*ngTemplateOutlet="commentView; context: { $implicit: reply }"
|
||||
*ngTemplateOutlet="
|
||||
commentView;
|
||||
context: { $implicit: reply }
|
||||
"
|
||||
/>
|
||||
}
|
||||
@if (replyingTo() === thread.comment.id) {
|
||||
@@ -614,6 +721,13 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
|
||||
'… Escribe @ para mencionar a alguien.'
|
||||
"
|
||||
[(value)]="replyBody"
|
||||
[tsPasteImages]="pasteImage"
|
||||
/>
|
||||
<ts-markdown-hint
|
||||
[text]="replyBody()"
|
||||
[me]="facade.me()"
|
||||
[loader]="loadImage"
|
||||
[images]="true"
|
||||
/>
|
||||
@if (replyMentionOptions().length) {
|
||||
<div
|
||||
@@ -621,15 +735,20 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
|
||||
role="group"
|
||||
aria-label="Mencionar a"
|
||||
>
|
||||
@for (member of replyMentionOptions(); track member.id) {
|
||||
@for (
|
||||
member of replyMentionOptions();
|
||||
track member.id
|
||||
) {
|
||||
<button
|
||||
type="button"
|
||||
class="ts-mentions__option"
|
||||
(click)="mentionInReply(member)"
|
||||
>
|
||||
<span class="ts-comment__avatar" aria-hidden="true">{{
|
||||
initialsOf(member.name)
|
||||
}}</span>
|
||||
<span
|
||||
class="ts-comment__avatar"
|
||||
aria-hidden="true"
|
||||
>{{ initialsOf(member.name) }}</span
|
||||
>
|
||||
{{ member.name }}
|
||||
</button>
|
||||
}
|
||||
@@ -651,7 +770,9 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
} @else if (project.canContribute() && !thread.comment.deleted) {
|
||||
} @else if (
|
||||
project.canContribute() && !thread.comment.deleted
|
||||
) {
|
||||
<button
|
||||
type="button"
|
||||
class="ts-plain-link ts-reply__open"
|
||||
@@ -675,6 +796,13 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
|
||||
<pi-textarea
|
||||
placeholder="Deja una decisión, una explicación, un paso para reproducir… Escribe @ para mencionar a alguien."
|
||||
[(value)]="commentBody"
|
||||
[tsPasteImages]="pasteImage"
|
||||
/>
|
||||
<ts-markdown-hint
|
||||
[text]="commentBody()"
|
||||
[me]="facade.me()"
|
||||
[loader]="loadImage"
|
||||
[images]="true"
|
||||
/>
|
||||
@if (mentionOptions().length) {
|
||||
<div
|
||||
@@ -881,9 +1009,18 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
|
||||
<pi-text-field [formField]="edit.title">
|
||||
<pi-label [isRequired]="true">Título</pi-label>
|
||||
</pi-text-field>
|
||||
<pi-textarea [formField]="edit.description">
|
||||
<pi-textarea
|
||||
[formField]="edit.description"
|
||||
[tsPasteImages]="pasteImage"
|
||||
>
|
||||
<pi-label>Descripción</pi-label>
|
||||
</pi-textarea>
|
||||
<ts-markdown-hint
|
||||
[text]="editModel().description"
|
||||
[me]="facade.me()"
|
||||
[loader]="loadImage"
|
||||
[images]="true"
|
||||
/>
|
||||
<pi-text-field [formField]="edit.labels" placeholder="safari, checkout">
|
||||
<pi-label>Etiquetas (separadas por comas)</pi-label>
|
||||
</pi-text-field>
|
||||
@@ -909,7 +1046,16 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
|
||||
(submit)="$event.preventDefault(); saveComment()"
|
||||
novalidate
|
||||
>
|
||||
<pi-textarea [formField]="commentEdit.body" />
|
||||
<pi-textarea
|
||||
[formField]="commentEdit.body"
|
||||
[tsPasteImages]="pasteImage"
|
||||
/>
|
||||
<ts-markdown-hint
|
||||
[text]="commentEditModel().body"
|
||||
[me]="facade.me()"
|
||||
[loader]="loadImage"
|
||||
[images]="true"
|
||||
/>
|
||||
<pi-action-button
|
||||
size="w100"
|
||||
color="primary"
|
||||
@@ -929,6 +1075,8 @@ export class IssuePage {
|
||||
protected readonly project = inject(ProjectFacade);
|
||||
private readonly drawer = inject(DrawerService);
|
||||
private readonly toast = inject(ToastService);
|
||||
private readonly router = inject(Router);
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly reasonForm =
|
||||
viewChild.required<TemplateRef<unknown>>('reasonForm');
|
||||
private readonly editForm =
|
||||
@@ -1046,7 +1194,48 @@ export class IssuePage {
|
||||
() => this.facade.comments().filter((c) => !c.deleted).length,
|
||||
);
|
||||
protected readonly commentFiles = signal<File[]>([]);
|
||||
protected readonly segments = mentionSegments;
|
||||
protected readonly reactions = REACTIONS;
|
||||
|
||||
protected reacted(reaction: { users: { id: string }[] }): boolean {
|
||||
return reaction.users.some((u) => u.id === this.facade.me());
|
||||
}
|
||||
|
||||
protected reactionTitle(reaction: {
|
||||
emoji: string;
|
||||
users: { name: string }[];
|
||||
}): string {
|
||||
return `${reaction.users.map((u) => u.name).join(', ')} · ${reaction.emoji}`;
|
||||
}
|
||||
|
||||
/** From the picker: adds it, or takes it back if it was already there. */
|
||||
protected pickReaction(comment: Comment, emoji: string, event: Event): void {
|
||||
const mine = comment.reactions.find((r) => r.emoji === emoji);
|
||||
this.facade.react(comment.id, emoji, !(mine && this.reacted(mine)));
|
||||
(event.target as HTMLElement).closest('details')?.removeAttribute('open');
|
||||
}
|
||||
|
||||
protected blockedTitle(blockers: { key: string; title: string }[]): string {
|
||||
return blockers.map((b) => `${b.key}: ${b.title}`).join('\n');
|
||||
}
|
||||
|
||||
protected duplicate(): void {
|
||||
this.facade.duplicate().subscribe({
|
||||
next: (key) => {
|
||||
this.toast.success(
|
||||
key ? `Creado ${key}, copia de este` : 'Copia creada',
|
||||
);
|
||||
if (key)
|
||||
void this.router.navigate(['..', key], { relativeTo: this.route });
|
||||
},
|
||||
error: () => this.toast.error('No se pudo duplicar'),
|
||||
});
|
||||
}
|
||||
|
||||
/** Images inside descriptions and comments: fetched, and uploaded on paste. */
|
||||
protected readonly loadImage: AttachmentLoader = (id) =>
|
||||
this.facade.fileById(id);
|
||||
protected readonly pasteImage: ImageUploader = (file) =>
|
||||
this.facade.uploadImage(file);
|
||||
/** Members matching what is typed after an `@` at the end of the comment. */
|
||||
protected readonly mentionOptions = computed(() =>
|
||||
this.membersMatching(this.commentBody()),
|
||||
@@ -1111,7 +1300,7 @@ export class IssuePage {
|
||||
private readonly reasonModel = signal({ text: '' });
|
||||
protected readonly reason = form(this.reasonModel, (p) => required(p.text));
|
||||
|
||||
private readonly editModel = signal({
|
||||
protected readonly editModel = signal({
|
||||
title: '',
|
||||
description: '',
|
||||
labels: '',
|
||||
@@ -1120,7 +1309,7 @@ export class IssuePage {
|
||||
protected readonly edit = form(this.editModel, (p) => required(p.title));
|
||||
|
||||
private editingComment: string | null = null;
|
||||
private readonly commentEditModel = signal({ body: '' });
|
||||
protected readonly commentEditModel = signal({ body: '' });
|
||||
protected readonly commentEdit = form(this.commentEditModel, (p) =>
|
||||
required(p.body),
|
||||
);
|
||||
|
||||
678
libs/web/tracker/presenters/src/lib/pages/list.page.ts
Normal file
678
libs/web/tracker/presenters/src/lib/pages/list.page.ts
Normal file
@@ -0,0 +1,678 @@
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
computed,
|
||||
effect,
|
||||
inject,
|
||||
signal,
|
||||
untracked,
|
||||
} from '@angular/core';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import {
|
||||
PiEmptyStateComponent,
|
||||
PiIconComponent,
|
||||
PiNoteComponent,
|
||||
PiSelectFieldComponent,
|
||||
PiSkeletonComponent,
|
||||
PiTextFieldComponent,
|
||||
type PiSelectFieldOption,
|
||||
} from '@pi/ui';
|
||||
import {
|
||||
ListCriteria,
|
||||
ListFacade,
|
||||
ProjectFacade,
|
||||
provideListFacade,
|
||||
} from '@task-stream/web/tracker/application';
|
||||
import {
|
||||
BulkChange,
|
||||
IssuePriority,
|
||||
IssueSummary,
|
||||
StatusCategory,
|
||||
} from '@task-stream/web/tracker/domain';
|
||||
import { BulkBarComponent } from '../ui/bulk-bar';
|
||||
import { VoteComponent } from '../ui/vote';
|
||||
import {
|
||||
options,
|
||||
PRIORITY,
|
||||
PRIORITY_LEVEL,
|
||||
statusLook,
|
||||
timeAgo,
|
||||
typeLook,
|
||||
} from '../ui/copy';
|
||||
|
||||
const ALL = '';
|
||||
const NOBODY = '__nobody__';
|
||||
|
||||
const OPEN: StatusCategory[] = [
|
||||
StatusCategory.TODO,
|
||||
StatusCategory.IN_PROGRESS,
|
||||
StatusCategory.QA,
|
||||
];
|
||||
const CLOSED: StatusCategory[] = [
|
||||
StatusCategory.DONE,
|
||||
StatusCategory.CANCELLED,
|
||||
];
|
||||
|
||||
type SortKey =
|
||||
| 'key'
|
||||
| 'title'
|
||||
| 'type'
|
||||
| 'status'
|
||||
| 'priority'
|
||||
| 'assignee'
|
||||
| 'sprint'
|
||||
| 'points'
|
||||
| 'votes'
|
||||
| 'due'
|
||||
| 'updated';
|
||||
|
||||
/** Ticket keys in their number's order (WEB-9 before WEB-10). */
|
||||
const numberOf = (key: string) => Number(key.split('-').pop());
|
||||
|
||||
/**
|
||||
* /p/:key/list — every ticket of the project as rows: sort by any column,
|
||||
* filter, change status, priority or assignee in place, edit in bulk.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ts-list-page',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [
|
||||
BulkBarComponent,
|
||||
VoteComponent,
|
||||
RouterLink,
|
||||
PiEmptyStateComponent,
|
||||
PiIconComponent,
|
||||
PiNoteComponent,
|
||||
PiSelectFieldComponent,
|
||||
PiSkeletonComponent,
|
||||
PiTextFieldComponent,
|
||||
],
|
||||
providers: [provideListFacade()],
|
||||
template: `
|
||||
<div class="ts-list__filters">
|
||||
<pi-text-field
|
||||
placeholder="Buscar por clave, título o descripción…"
|
||||
[(value)]="search"
|
||||
/>
|
||||
<pi-select-field [options]="scopeOptions" [(value)]="scope" />
|
||||
<pi-select-field [options]="typeOptions()" [(value)]="type" />
|
||||
<pi-select-field [options]="priorityFilterOptions" [(value)]="priority" />
|
||||
<pi-select-field
|
||||
[options]="assigneeFilterOptions()"
|
||||
[(value)]="assignee"
|
||||
/>
|
||||
@if (facade.loaded()) {
|
||||
<span class="ts-muted ts-mono ts-list__count">
|
||||
{{ facade.total() }} tickets{{
|
||||
facade.total() > facade.issues().length
|
||||
? ' · se muestran ' +
|
||||
facade.issues().length +
|
||||
', afina los filtros'
|
||||
: ''
|
||||
}}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (facade.error(); as error) {
|
||||
<pi-note
|
||||
gap="xs"
|
||||
status="error"
|
||||
appearance="fill"
|
||||
type="status"
|
||||
title="No se pudo cargar la lista"
|
||||
[text]="error"
|
||||
/>
|
||||
} @else if (!facade.loaded()) {
|
||||
<pi-skeleton shape="text" [lines]="10" />
|
||||
} @else if (rows().length) {
|
||||
@if (project.canContribute()) {
|
||||
<ts-bulk-bar
|
||||
[count]="selected().size"
|
||||
[allSelected]="allSelected()"
|
||||
(selectAll)="selectAll($event)"
|
||||
(apply)="applyBulk($event)"
|
||||
/>
|
||||
}
|
||||
<div class="ts-list ts-panel">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@if (project.canContribute()) {
|
||||
<th class="ts-list__pick" aria-label="Seleccionar"></th>
|
||||
}
|
||||
@for (column of columns; track column.key) {
|
||||
<th
|
||||
[class]="'ts-list__' + column.key"
|
||||
[attr.aria-sort]="ariaSort(column.key)"
|
||||
>
|
||||
<button type="button" (click)="sortBy(column.key)">
|
||||
{{ column.label }}
|
||||
@if (sort().key === column.key) {
|
||||
<span aria-hidden="true">{{
|
||||
sort().asc ? '↑' : '↓'
|
||||
}}</span>
|
||||
}
|
||||
</button>
|
||||
</th>
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (issue of rows(); track issue.id) {
|
||||
<tr [class.is-selected]="selected().has(issue.id)">
|
||||
@if (project.canContribute()) {
|
||||
<td class="ts-list__pick">
|
||||
<input
|
||||
type="checkbox"
|
||||
[attr.aria-label]="'Seleccionar ' + issue.key"
|
||||
[checked]="selected().has(issue.id)"
|
||||
(change)="toggle(issue.id, $any($event.target).checked)"
|
||||
/>
|
||||
</td>
|
||||
}
|
||||
<td class="ts-list__key">
|
||||
<a
|
||||
class="ts-key"
|
||||
[routerLink]="['..', 'issues', issue.key]"
|
||||
>{{ issue.key }}</a
|
||||
>
|
||||
</td>
|
||||
<td class="ts-list__title">
|
||||
<a [routerLink]="['..', 'issues', issue.key]">{{
|
||||
issue.title
|
||||
}}</a>
|
||||
@if (issue.blockedBy.length) {
|
||||
<span
|
||||
class="ts-list__blocked"
|
||||
[title]="'Bloqueado por ' + blockersOf(issue)"
|
||||
>
|
||||
<pi-icon icon="lock" size="x-small" /> Bloqueado
|
||||
</span>
|
||||
}
|
||||
@if (issue.parent; as parent) {
|
||||
<span class="ts-muted ts-mono" [title]="parent.title">
|
||||
↑ {{ parent.key }}</span
|
||||
>
|
||||
}
|
||||
</td>
|
||||
<td class="ts-list__type">
|
||||
<span
|
||||
class="ts-list__type-label"
|
||||
[style.--tone]="typeTone(issue)"
|
||||
>
|
||||
<pi-icon [icon]="typeIcon(issue)" size="x-small" />
|
||||
{{ typeLabel(issue) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="ts-list__status">
|
||||
@if (project.canContribute()) {
|
||||
<select
|
||||
class="ts-cell-select"
|
||||
[style.--tone]="statusTone(issue.status)"
|
||||
[attr.aria-label]="'Estado de ' + issue.key"
|
||||
(change)="changeStatus(issue, $any($event.target))"
|
||||
>
|
||||
@for (status of statusChoices(issue); track status.id) {
|
||||
<option
|
||||
[value]="status.id"
|
||||
[selected]="status.id === issue.status"
|
||||
>
|
||||
{{ status.name }}
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
} @else {
|
||||
<span
|
||||
class="ts-pill"
|
||||
[style.--tone]="statusTone(issue.status)"
|
||||
>{{ statusLabel(issue.status) }}</span
|
||||
>
|
||||
}
|
||||
</td>
|
||||
<td class="ts-list__priority">
|
||||
@if (project.canContribute()) {
|
||||
<select
|
||||
class="ts-cell-select"
|
||||
[attr.aria-label]="'Prioridad de ' + issue.key"
|
||||
(change)="
|
||||
changePriority(issue, $any($event.target).value)
|
||||
"
|
||||
>
|
||||
@for (option of priorityOptions; track option.value) {
|
||||
<option
|
||||
[value]="option.value"
|
||||
[selected]="option.value === issue.priority"
|
||||
>
|
||||
{{ option.label }}
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
} @else {
|
||||
{{ priorityLabel(issue) }}
|
||||
}
|
||||
</td>
|
||||
<td class="ts-list__assignee">
|
||||
@if (project.canContribute()) {
|
||||
<select
|
||||
class="ts-cell-select"
|
||||
[attr.aria-label]="'Persona asignada a ' + issue.key"
|
||||
(change)="assign(issue, $any($event.target).value)"
|
||||
>
|
||||
<option [value]="NOBODY" [selected]="!issue.assignee">
|
||||
Sin asignar
|
||||
</option>
|
||||
@for (member of project.members(); track member.user.id) {
|
||||
<option
|
||||
[value]="member.user.id"
|
||||
[selected]="member.user.id === issue.assignee?.id"
|
||||
>
|
||||
{{ member.user.name }}
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
} @else {
|
||||
{{ issue.assignee?.name ?? '—' }}
|
||||
}
|
||||
</td>
|
||||
<td class="ts-list__sprint ts-muted">
|
||||
{{ issue.sprint?.name ?? '—' }}
|
||||
</td>
|
||||
<td class="ts-list__points ts-mono">
|
||||
{{ issue.storyPoints ?? '—' }}
|
||||
</td>
|
||||
<td class="ts-list__votes">
|
||||
<ts-vote [votes]="issue.votes" [voted]="issue.voted" />
|
||||
</td>
|
||||
<td
|
||||
class="ts-list__due ts-mono"
|
||||
[class.is-late]="isLate(issue)"
|
||||
>
|
||||
{{ issue.dueDate ? shortDate(issue.dueDate) : '—' }}
|
||||
</td>
|
||||
<td class="ts-list__updated ts-muted">
|
||||
{{ ago(issue.updatedAt) }}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
} @else {
|
||||
<pi-empty-state
|
||||
icon="task"
|
||||
title="Ningún ticket con estos filtros"
|
||||
description="Prueba con «Todos» en vez de «Abiertos», o quita algún filtro."
|
||||
/>
|
||||
}
|
||||
`,
|
||||
styles: `
|
||||
.ts-list__filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 0.75rem;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
pi-text-field {
|
||||
flex: 2 1 16rem;
|
||||
}
|
||||
pi-select-field {
|
||||
flex: 1 1 13.5rem;
|
||||
max-width: 15rem;
|
||||
}
|
||||
}
|
||||
.ts-list__count {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
.ts-list {
|
||||
overflow-x: auto;
|
||||
padding: 0;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
min-width: 60rem;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
background: var(--ts-surface);
|
||||
text-align: left;
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.625rem;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: var(--ts-muted);
|
||||
font: inherit;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--ts-ink);
|
||||
}
|
||||
}
|
||||
}
|
||||
td {
|
||||
padding: 0.4375rem 0.625rem;
|
||||
border-top: 1px solid var(--ts-line);
|
||||
vertical-align: middle;
|
||||
}
|
||||
tr.is-selected td {
|
||||
background: color-mix(in srgb, var(--ts-brand) 8%, var(--ts-surface));
|
||||
}
|
||||
.ts-list__pick {
|
||||
width: 2rem;
|
||||
padding-left: 0.875rem;
|
||||
}
|
||||
.ts-list__key {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ts-list__title {
|
||||
min-width: 16rem;
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: var(--ts-brand);
|
||||
}
|
||||
}
|
||||
.ts-mono {
|
||||
margin-left: 0.375rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
.ts-list__blocked {
|
||||
display: inline-flex;
|
||||
gap: 0.25rem;
|
||||
align-items: center;
|
||||
margin-left: 0.5rem;
|
||||
padding: 0 0.375rem;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--ts-c-red, #d33) 12%, transparent);
|
||||
color: var(--ts-c-red, var(--ts-ink));
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.ts-list__type-label {
|
||||
display: inline-flex;
|
||||
gap: 0.375rem;
|
||||
align-items: center;
|
||||
color: var(--tone);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ts-list__points,
|
||||
.ts-list__due,
|
||||
.ts-list__updated {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ts-list__due.is-late {
|
||||
color: var(--ts-c-red, var(--ts-ink));
|
||||
font-weight: 600;
|
||||
}
|
||||
.ts-cell-select {
|
||||
max-width: 11rem;
|
||||
padding: 0.25rem 0.375rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.375rem;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
border-color: var(--ts-line-strong, var(--ts-line));
|
||||
}
|
||||
&[style] {
|
||||
border-left: 3px solid var(--tone);
|
||||
}
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class ListPage {
|
||||
protected readonly facade = inject(ListFacade);
|
||||
protected readonly project = inject(ProjectFacade);
|
||||
protected readonly NOBODY = NOBODY;
|
||||
protected readonly ago = (iso: string) => timeAgo(iso);
|
||||
|
||||
protected readonly columns: { key: SortKey; label: string }[] = [
|
||||
{ key: 'key', label: 'Clave' },
|
||||
{ key: 'title', label: 'Título' },
|
||||
{ key: 'type', label: 'Tipo' },
|
||||
{ key: 'status', label: 'Estado' },
|
||||
{ key: 'priority', label: 'Prioridad' },
|
||||
{ key: 'assignee', label: 'Asignado' },
|
||||
{ key: 'sprint', label: 'Sprint' },
|
||||
{ key: 'points', label: 'Pts' },
|
||||
{ key: 'votes', label: 'Votos' },
|
||||
{ key: 'due', label: 'Vence' },
|
||||
{ key: 'updated', label: 'Actualizado' },
|
||||
];
|
||||
|
||||
/* Filters (sent to the API) */
|
||||
protected readonly search = signal('');
|
||||
protected readonly scope = signal<string | null>('open');
|
||||
protected readonly type = signal<string | null>(ALL);
|
||||
protected readonly priority = signal<string | null>(ALL);
|
||||
protected readonly assignee = signal<string | null>(ALL);
|
||||
protected readonly scopeOptions: PiSelectFieldOption<string>[] = [
|
||||
{ value: 'open', label: 'Abiertos' },
|
||||
{ value: 'closed', label: 'Terminados o cancelados' },
|
||||
{ value: 'all', label: 'Todos' },
|
||||
];
|
||||
protected readonly typeOptions = computed<PiSelectFieldOption<string>[]>(
|
||||
() => [
|
||||
{ value: ALL, label: 'Todos los tipos' },
|
||||
...this.project
|
||||
.workflow()
|
||||
.settings.issueTypes.filter((t) => !t.archived)
|
||||
.map((t) => ({ value: t.id, label: t.name })),
|
||||
],
|
||||
);
|
||||
protected readonly priorityOptions = options(PRIORITY);
|
||||
protected readonly priorityFilterOptions: PiSelectFieldOption<string>[] = [
|
||||
{ value: ALL, label: 'Todas las prioridades' },
|
||||
...this.priorityOptions,
|
||||
];
|
||||
protected readonly assigneeFilterOptions = computed<
|
||||
PiSelectFieldOption<string>[]
|
||||
>(() => [
|
||||
{ value: ALL, label: 'Todas las personas' },
|
||||
{ value: NOBODY, label: 'Sin asignar' },
|
||||
...this.project
|
||||
.members()
|
||||
.map((m) => ({ value: m.user.id, label: m.user.name })),
|
||||
]);
|
||||
private readonly criteria = computed<ListCriteria>(() => {
|
||||
const scope = this.scope();
|
||||
const assignee = this.assignee();
|
||||
return {
|
||||
search: this.search() || undefined,
|
||||
categories:
|
||||
scope === 'open' ? OPEN : scope === 'closed' ? CLOSED : undefined,
|
||||
types: this.type() ? [this.type() as string] : undefined,
|
||||
priorities: this.priority()
|
||||
? [this.priority() as IssuePriority]
|
||||
: undefined,
|
||||
unassigned: assignee === NOBODY || undefined,
|
||||
assigneeId: assignee && assignee !== NOBODY ? assignee : undefined,
|
||||
};
|
||||
});
|
||||
|
||||
/* Sorting (here, on what was loaded) */
|
||||
protected readonly sort = signal<{ key: SortKey; asc: boolean }>({
|
||||
key: 'updated',
|
||||
asc: false,
|
||||
});
|
||||
protected readonly rows = computed(() => {
|
||||
const { key, asc } = this.sort();
|
||||
const order = this.statusOrder();
|
||||
const value = (i: IssueSummary): string | number => {
|
||||
switch (key) {
|
||||
case 'key':
|
||||
return numberOf(i.key);
|
||||
case 'title':
|
||||
return i.title.toLocaleLowerCase();
|
||||
case 'type':
|
||||
return this.typeLabel(i);
|
||||
case 'status':
|
||||
return order.get(i.status) ?? 99;
|
||||
case 'priority':
|
||||
return PRIORITY_LEVEL[i.priority];
|
||||
case 'assignee':
|
||||
return i.assignee?.name.toLocaleLowerCase() ?? '';
|
||||
case 'sprint':
|
||||
return i.sprint?.name.toLocaleLowerCase() ?? '';
|
||||
case 'points':
|
||||
return i.storyPoints ?? -1;
|
||||
case 'votes':
|
||||
return i.votes;
|
||||
case 'due':
|
||||
return i.dueDate ?? '';
|
||||
case 'updated':
|
||||
return i.updatedAt;
|
||||
}
|
||||
};
|
||||
return [...this.facade.issues()].sort((a, b) => {
|
||||
const x = value(a);
|
||||
const y = value(b);
|
||||
const diff =
|
||||
typeof x === 'number' && typeof y === 'number'
|
||||
? x - y
|
||||
: String(x).localeCompare(String(y));
|
||||
return asc ? diff : -diff;
|
||||
});
|
||||
});
|
||||
/** Statuses in board order. */
|
||||
private readonly statusOrder = computed(
|
||||
() =>
|
||||
new Map(
|
||||
this.project
|
||||
.workflow()
|
||||
.settings.statuses.map((s, index) => [s.id, index] as const),
|
||||
),
|
||||
);
|
||||
|
||||
/* Selection */
|
||||
protected readonly selected = signal(new Set<string>());
|
||||
protected readonly allSelected = computed(
|
||||
() =>
|
||||
this.rows().length > 0 &&
|
||||
this.rows().every((i) => this.selected().has(i.id)),
|
||||
);
|
||||
|
||||
constructor() {
|
||||
effect(() => {
|
||||
const projectId = this.project.project()?.id;
|
||||
if (projectId) untracked(() => this.facade.open(projectId));
|
||||
});
|
||||
effect(() => {
|
||||
const criteria = this.criteria();
|
||||
untracked(() => this.facade.filter(criteria));
|
||||
});
|
||||
}
|
||||
|
||||
protected sortBy(key: SortKey): void {
|
||||
this.sort.update((current) =>
|
||||
current.key === key
|
||||
? { key, asc: !current.asc }
|
||||
: // Dates and numbers read best from the top; words from A.
|
||||
{
|
||||
key,
|
||||
asc: !['updated', 'priority', 'points', 'votes'].includes(key),
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
protected ariaSort(key: SortKey): string | null {
|
||||
const sort = this.sort();
|
||||
if (sort.key !== key) return null;
|
||||
return sort.asc ? 'ascending' : 'descending';
|
||||
}
|
||||
|
||||
protected toggle(issueId: string, on: boolean): void {
|
||||
this.selected.update((set) => {
|
||||
const next = new Set(set);
|
||||
if (on) next.add(issueId);
|
||||
else next.delete(issueId);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
protected selectAll(on: boolean): void {
|
||||
this.selected.set(new Set(on ? this.rows().map((i) => i.id) : []));
|
||||
}
|
||||
|
||||
protected applyBulk(change: BulkChange): void {
|
||||
this.facade.bulkUpdate([...this.selected()], change);
|
||||
this.selected.set(new Set());
|
||||
}
|
||||
|
||||
/**
|
||||
* Its status and where the workflow lets it go. Statuses that need a
|
||||
* reason are left to the ticket page, where there is room to write it.
|
||||
*/
|
||||
protected statusChoices(issue: IssueSummary) {
|
||||
const workflow = this.project.workflow();
|
||||
const ids = [
|
||||
issue.status,
|
||||
...workflow
|
||||
.allowedFrom(issue.status)
|
||||
.filter((id) => !workflow.requiresReason(id)),
|
||||
];
|
||||
return ids.map((id) => ({ id, name: this.statusLabel(id) }));
|
||||
}
|
||||
|
||||
protected changeStatus(issue: IssueSummary, select: HTMLSelectElement): void {
|
||||
if (select.value !== issue.status)
|
||||
this.facade.changeStatus(issue.id, select.value);
|
||||
}
|
||||
|
||||
protected changePriority(issue: IssueSummary, priority: string): void {
|
||||
if (priority !== issue.priority)
|
||||
this.facade.changePriority(issue.id, priority as IssuePriority);
|
||||
}
|
||||
|
||||
protected assign(issue: IssueSummary, value: string): void {
|
||||
const assigneeId = value === NOBODY ? null : value;
|
||||
if (assigneeId !== (issue.assignee?.id ?? null))
|
||||
this.facade.assign(issue.id, assigneeId);
|
||||
}
|
||||
|
||||
protected blockersOf(issue: IssueSummary): string {
|
||||
return issue.blockedBy.map((b) => b.key).join(', ');
|
||||
}
|
||||
|
||||
protected isLate(issue: IssueSummary): boolean {
|
||||
return (
|
||||
!!issue.dueDate &&
|
||||
OPEN.includes(issue.statusCategory) &&
|
||||
issue.dueDate.slice(0, 10) < new Date().toISOString().slice(0, 10)
|
||||
);
|
||||
}
|
||||
|
||||
protected shortDate(date: string): string {
|
||||
return new Date(`${date.slice(0, 10)}T00:00:00`).toLocaleDateString(
|
||||
'es-ES',
|
||||
{ day: 'numeric', month: 'short' },
|
||||
);
|
||||
}
|
||||
|
||||
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 = (status: string) =>
|
||||
statusLook(this.project.workflow(), status).tone;
|
||||
protected statusLabel = (status: string) =>
|
||||
statusLook(this.project.workflow(), status).label;
|
||||
protected priorityLabel = (issue: IssueSummary) =>
|
||||
PRIORITY[issue.priority].label;
|
||||
}
|
||||
@@ -61,6 +61,11 @@ import { projectTone, PUBLIC_TONE, ROLE } from '../ui/copy';
|
||||
{{ project.description }}
|
||||
</p>
|
||||
}
|
||||
@if (project.isPublic && project.acceptsProposals) {
|
||||
<a class="ts-project-header__propose" routerLink="proponer">
|
||||
¿Has visto un error o tienes una idea? Cuéntanoslo →
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
<div class="ts-project-header__team">
|
||||
<ts-avatars [names]="memberNames()" [max]="6" />
|
||||
@@ -85,6 +90,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="list" routerLinkActive="is-active">Lista</a>
|
||||
<a routerLink="backlog" routerLinkActive="is-active">Backlog</a>
|
||||
<a routerLink="sprints" routerLinkActive="is-active">Sprints</a>
|
||||
<a routerLink="calendar" routerLinkActive="is-active">Calendario</a>
|
||||
@@ -195,6 +201,16 @@ import { projectTone, PUBLIC_TONE, ROLE } from '../ui/copy';
|
||||
margin: 0.5rem 0 0;
|
||||
color: var(--ts-muted);
|
||||
}
|
||||
.ts-project-header__propose {
|
||||
display: inline-block;
|
||||
margin-top: 0.625rem;
|
||||
color: var(--ts-brand);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.ts-project-header__team {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
259
libs/web/tracker/presenters/src/lib/pages/propose.page.ts
Normal file
259
libs/web/tracker/presenters/src/lib/pages/propose.page.ts
Normal file
@@ -0,0 +1,259 @@
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
computed,
|
||||
inject,
|
||||
signal,
|
||||
} from '@angular/core';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import {
|
||||
PiActionButtonComponent,
|
||||
PiLabelDirective,
|
||||
PiNoteComponent,
|
||||
PiTextareaComponent,
|
||||
PiTextFieldComponent,
|
||||
} from '@pi/ui';
|
||||
import {
|
||||
ProjectFacade,
|
||||
ProposeFacade,
|
||||
} from '@task-stream/web/tracker/application';
|
||||
import { ProposalResult } from '@task-stream/web/tracker/domain';
|
||||
import { MarkdownHintComponent } from '../ui/markdown';
|
||||
|
||||
/**
|
||||
* /p/:key/proponer — anyone, without an account, reports a bug or proposes
|
||||
* an idea for a public project that takes them. It becomes a ticket
|
||||
* labelled «propuesta» that the team looks at and others can vote for.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ts-propose-page',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [
|
||||
RouterLink,
|
||||
MarkdownHintComponent,
|
||||
PiActionButtonComponent,
|
||||
PiLabelDirective,
|
||||
PiNoteComponent,
|
||||
PiTextareaComponent,
|
||||
PiTextFieldComponent,
|
||||
],
|
||||
template: `
|
||||
@if (project.project(); as p) {
|
||||
<section class="ts-propose ts-panel">
|
||||
@if (!p.isPublic || !p.acceptsProposals) {
|
||||
<pi-note
|
||||
gap="xs"
|
||||
status="info"
|
||||
appearance="fill"
|
||||
type="status"
|
||||
title="Este proyecto no recoge propuestas ahora mismo"
|
||||
text="Quien lo lleva puede abrir el formulario en su configuración."
|
||||
/>
|
||||
} @else if (sent(); as result) {
|
||||
<div class="ts-propose__done" role="status">
|
||||
<h2>¡Gracias!</h2>
|
||||
<p>
|
||||
Ha llegado al equipo de {{ p.name }}.
|
||||
@if (result.key) {
|
||||
Puedes seguirla, y otras personas votarla, en
|
||||
<a
|
||||
class="ts-plain-link"
|
||||
[routerLink]="['..', 'issues', result.key]"
|
||||
>{{ result.key }}</a
|
||||
>.
|
||||
}
|
||||
</p>
|
||||
<button type="button" class="ts-plain-link" (click)="reset()">
|
||||
Enviar otra
|
||||
</button>
|
||||
</div>
|
||||
} @else {
|
||||
<header>
|
||||
<h2>Cuéntanoslo</h2>
|
||||
<p class="ts-muted">
|
||||
No hace falta cuenta. Llegará al equipo como un ticket con la
|
||||
etiqueta «propuesta», visible para todo el mundo (no escribas
|
||||
datos personales).
|
||||
</p>
|
||||
</header>
|
||||
<form
|
||||
class="ts-propose__form"
|
||||
(submit)="$event.preventDefault(); submit(p.key)"
|
||||
novalidate
|
||||
>
|
||||
<fieldset class="ts-propose__kind">
|
||||
<legend>¿Qué es?</legend>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="kind"
|
||||
value="BUG"
|
||||
[checked]="kind() === 'BUG'"
|
||||
(change)="kind.set('BUG')"
|
||||
/>
|
||||
Algo no funciona
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="kind"
|
||||
value="IDEA"
|
||||
[checked]="kind() === 'IDEA'"
|
||||
(change)="kind.set('IDEA')"
|
||||
/>
|
||||
Tengo una idea
|
||||
</label>
|
||||
</fieldset>
|
||||
<pi-text-field
|
||||
[placeholder]="
|
||||
kind() === 'BUG'
|
||||
? 'Ej.: El pago falla con tarjetas de prepago'
|
||||
: 'Ej.: Poder exportar a PDF'
|
||||
"
|
||||
[(value)]="title"
|
||||
>
|
||||
<pi-label [isRequired]="true">Título</pi-label>
|
||||
</pi-text-field>
|
||||
<pi-textarea
|
||||
[placeholder]="
|
||||
kind() === 'BUG'
|
||||
? 'Qué hiciste, qué esperabas y qué pasó. El navegador o el móvil ayudan.'
|
||||
: 'Qué te gustaría y para qué te serviría.'
|
||||
"
|
||||
[(value)]="description"
|
||||
>
|
||||
<pi-label>Detalles</pi-label>
|
||||
</pi-textarea>
|
||||
<ts-markdown-hint [text]="description()" />
|
||||
<pi-text-field placeholder="Opcional" [(value)]="author">
|
||||
<pi-label>Tu nombre o alias</pi-label>
|
||||
</pi-text-field>
|
||||
<!-- A field people never see: only bots fill it in. -->
|
||||
<input
|
||||
class="ts-propose__trap"
|
||||
type="text"
|
||||
name="website"
|
||||
tabindex="-1"
|
||||
autocomplete="off"
|
||||
aria-hidden="true"
|
||||
[value]="website()"
|
||||
(input)="website.set($any($event.target).value)"
|
||||
/>
|
||||
@if (error(); as message) {
|
||||
<p class="ts-propose__error" role="alert">{{ message }}</p>
|
||||
}
|
||||
<div>
|
||||
<pi-action-button
|
||||
color="primary"
|
||||
text="Enviar"
|
||||
[disabled]="!canSend() || sending()"
|
||||
(execute)="submit(p.key)"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
</section>
|
||||
}
|
||||
`,
|
||||
styles: `
|
||||
.ts-propose {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
max-width: 44rem;
|
||||
padding: 1.5rem;
|
||||
h2 {
|
||||
margin: 0 0 0.25rem;
|
||||
}
|
||||
header p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.ts-propose__form {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.ts-propose__kind {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 1.25rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
legend {
|
||||
margin-bottom: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
label {
|
||||
display: inline-flex;
|
||||
gap: 0.375rem;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.ts-propose__trap {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
}
|
||||
.ts-propose__error {
|
||||
margin: 0;
|
||||
color: var(--ts-c-red, var(--ts-ink));
|
||||
}
|
||||
.ts-propose__done p {
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class ProposePage {
|
||||
protected readonly project = inject(ProjectFacade);
|
||||
private readonly propose = inject(ProposeFacade);
|
||||
|
||||
protected readonly kind = signal<'BUG' | 'IDEA'>('BUG');
|
||||
protected readonly title = signal('');
|
||||
protected readonly description = signal('');
|
||||
protected readonly author = signal('');
|
||||
protected readonly website = signal('');
|
||||
protected readonly sending = signal(false);
|
||||
protected readonly error = signal<string | null>(null);
|
||||
protected readonly sent = signal<ProposalResult | null>(null);
|
||||
protected readonly canSend = computed(() => {
|
||||
const title = this.title().trim().length;
|
||||
return title >= 3 && title <= 150;
|
||||
});
|
||||
|
||||
protected submit(projectKey: string): void {
|
||||
if (!this.canSend() || this.sending()) return;
|
||||
this.sending.set(true);
|
||||
this.error.set(null);
|
||||
this.propose
|
||||
.submit(projectKey, {
|
||||
kind: this.kind(),
|
||||
title: this.title().trim(),
|
||||
description: this.description(),
|
||||
author: this.author(),
|
||||
website: this.website(),
|
||||
})
|
||||
.subscribe({
|
||||
next: (result) => {
|
||||
this.sending.set(false);
|
||||
this.sent.set(result);
|
||||
},
|
||||
error: (error: { status?: number }) => {
|
||||
this.sending.set(false);
|
||||
this.error.set(
|
||||
error.status === 429
|
||||
? 'Has enviado varias seguidas: espera unos minutos y vuelve a intentarlo.'
|
||||
: 'No se ha podido enviar. Inténtalo de nuevo en un momento.',
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
protected reset(): void {
|
||||
this.sent.set(null);
|
||||
this.title.set('');
|
||||
this.description.set('');
|
||||
}
|
||||
}
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
} from '@angular/core';
|
||||
import { form, FormField, maxLength, required } from '@angular/forms/signals';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { MarkdownComponent } from '../ui/markdown';
|
||||
import {
|
||||
PiActionButtonComponent,
|
||||
PiEmptyStateComponent,
|
||||
@@ -26,6 +27,7 @@ import { RELEASE_STATUS, releaseWhen } from '../ui/copy';
|
||||
selector: 'ts-releases-page',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [
|
||||
MarkdownComponent,
|
||||
RouterLink,
|
||||
FormField,
|
||||
PiActionButtonComponent,
|
||||
@@ -88,7 +90,10 @@ import { RELEASE_STATUS, releaseWhen } from '../ui/copy';
|
||||
@if (release.notes) {
|
||||
<details class="ts-release__notes">
|
||||
<summary>Notas de la versión</summary>
|
||||
<pre class="ts-release__notes-text">{{ release.notes }}</pre>
|
||||
<ts-markdown
|
||||
class="ts-release__notes-text"
|
||||
[text]="release.notes"
|
||||
/>
|
||||
</details>
|
||||
}
|
||||
<div class="ts-release__actions">
|
||||
@@ -209,8 +214,8 @@ import { RELEASE_STATUS, releaseWhen } from '../ui/copy';
|
||||
}
|
||||
}
|
||||
.ts-release__notes-text {
|
||||
display: block;
|
||||
margin: 0.5rem 0 0;
|
||||
white-space: pre-wrap;
|
||||
font: inherit;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { AuthFacade } from '@task-stream/web/identity/application';
|
||||
import { VoteComponent } from '../ui/vote';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
@@ -42,7 +44,7 @@ const shortDay = (day: string) =>
|
||||
@Component({
|
||||
selector: 'ts-roadmap-page',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [RouterLink, PiNoteComponent, PiSkeletonComponent],
|
||||
imports: [RouterLink, PiNoteComponent, PiSkeletonComponent, VoteComponent],
|
||||
providers: [provideEpicsFacade()],
|
||||
template: `
|
||||
<div class="ts-section-header">
|
||||
@@ -121,14 +123,21 @@ const shortDay = (day: string) =>
|
||||
|
||||
@for (row of epicRows(); track row.epic.issue.id) {
|
||||
<div class="ts-roadmap__row" role="row">
|
||||
<a
|
||||
class="ts-roadmap__label"
|
||||
<div
|
||||
class="ts-roadmap__label ts-roadmap__label--epic"
|
||||
role="rowheader"
|
||||
[routerLink]="['..', 'issues', row.epic.issue.key]"
|
||||
>
|
||||
<span class="ts-key">{{ row.epic.issue.key }}</span>
|
||||
{{ row.epic.issue.title }}
|
||||
</a>
|
||||
<a [routerLink]="['..', 'issues', row.epic.issue.key]">
|
||||
<span class="ts-key">{{ row.epic.issue.key }}</span>
|
||||
{{ row.epic.issue.title }}
|
||||
</a>
|
||||
<ts-vote
|
||||
[votes]="row.epic.issue.votes"
|
||||
[voted]="row.epic.issue.voted"
|
||||
[canVote]="canVote()"
|
||||
(voteChange)="epics.vote(row.epic.issue.id, $event)"
|
||||
/>
|
||||
</div>
|
||||
<div class="ts-roadmap__track" role="cell">
|
||||
<a
|
||||
class="ts-roadmap__bar"
|
||||
@@ -163,6 +172,12 @@ const shortDay = (day: string) =>
|
||||
>
|
||||
{{ epic.issue.title }}
|
||||
<span class="ts-muted ts-mono">{{ epic.progress.percent }}%</span>
|
||||
<ts-vote
|
||||
[votes]="epic.issue.votes"
|
||||
[voted]="epic.issue.voted"
|
||||
[canVote]="canVote()"
|
||||
(voteChange)="epics.vote(epic.issue.id, $event)"
|
||||
/>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
@@ -176,7 +191,7 @@ const shortDay = (day: string) =>
|
||||
`,
|
||||
styles: `
|
||||
.ts-roadmap {
|
||||
--label: 14rem;
|
||||
--label: 18rem;
|
||||
position: relative;
|
||||
display: grid;
|
||||
padding: 0.5rem 0.75rem 0.75rem;
|
||||
@@ -201,6 +216,23 @@ const shortDay = (day: string) =>
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ts-roadmap__label--epic {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
a {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
&:hover {
|
||||
color: var(--ts-brand);
|
||||
}
|
||||
}
|
||||
}
|
||||
a.ts-roadmap__label:hover {
|
||||
color: var(--ts-brand);
|
||||
}
|
||||
@@ -299,6 +331,13 @@ const shortDay = (day: string) =>
|
||||
export class RoadmapPage {
|
||||
protected readonly epics = inject(EpicsFacade);
|
||||
private readonly project = inject(ProjectFacade);
|
||||
private readonly auth = inject(AuthFacade);
|
||||
/** Signed in, on a public project or as a member. */
|
||||
protected readonly canVote = computed(
|
||||
() =>
|
||||
this.auth.isAuthenticated() &&
|
||||
(!!this.project.project()?.isPublic || !!this.project.myRole()),
|
||||
);
|
||||
|
||||
private readonly dated = computed(() =>
|
||||
this.epics.epics().filter((e) => e.issue.startDate || e.issue.dueDate),
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { RouterLink } from '@angular/router';
|
||||
import {
|
||||
CdkDrag,
|
||||
CdkDragDrop,
|
||||
@@ -56,6 +57,7 @@ function idFrom(name: string): string {
|
||||
selector: 'ts-settings-page',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [
|
||||
RouterLink,
|
||||
GitIntegrationComponent,
|
||||
WebhooksComponent,
|
||||
TransferComponent,
|
||||
@@ -119,6 +121,44 @@ function idFrom(name: string): string {
|
||||
<span>{{ project.isPublic ? 'Público' : 'Privado' }}</span>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="ts-panel ts-block ts-visibility"
|
||||
aria-labelledby="proposals-title"
|
||||
>
|
||||
<div>
|
||||
<h3 id="proposals-title">Propuestas del público</h3>
|
||||
<p class="ts-muted">
|
||||
@if (!project.isPublic) {
|
||||
Solo para proyectos públicos: hazlo público para abrir un
|
||||
formulario donde cualquiera, sin cuenta, reporte un error o
|
||||
proponga una idea.
|
||||
} @else if (project.acceptsProposals) {
|
||||
Abierto: cualquiera puede enviar un error o una idea desde
|
||||
<a class="ts-plain-link" routerLink="../proponer">el formulario</a
|
||||
>. Llegan como tickets con la etiqueta «propuesta», y se pueden
|
||||
votar.
|
||||
} @else {
|
||||
Cerrado. Ábrelo para que cualquiera, sin cuenta, pueda reportar un
|
||||
error o proponer una idea; llegarán como tickets con la etiqueta
|
||||
«propuesta».
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<label class="ts-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
role="switch"
|
||||
[checked]="project.isPublic && project.acceptsProposals"
|
||||
[disabled]="!facade.canManage() || !project.isPublic"
|
||||
(change)="facade.setAcceptsProposals($any($event.target).checked)"
|
||||
/>
|
||||
<span class="ts-switch__track" aria-hidden="true"></span>
|
||||
<span>{{
|
||||
project.isPublic && project.acceptsProposals ? 'Abierto' : 'Cerrado'
|
||||
}}</span>
|
||||
</label>
|
||||
</section>
|
||||
}
|
||||
|
||||
@if (draft(); as d) {
|
||||
|
||||
Reference in New Issue
Block a user