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:
166
libs/web/tracker/presenters/src/lib/ui/bulk-bar.ts
Normal file
166
libs/web/tracker/presenters/src/lib/ui/bulk-bar.ts
Normal file
@@ -0,0 +1,166 @@
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
computed,
|
||||
inject,
|
||||
input,
|
||||
output,
|
||||
signal,
|
||||
} from '@angular/core';
|
||||
import {
|
||||
PiActionButtonComponent,
|
||||
PiSelectFieldComponent,
|
||||
PiTextFieldComponent,
|
||||
type PiSelectFieldOption,
|
||||
} from '@pi/ui';
|
||||
import { ProjectFacade } from '@task-stream/web/tracker/application';
|
||||
import { BulkChange, IssuePriority } from '@task-stream/web/tracker/domain';
|
||||
import { options, PRIORITY } from './copy';
|
||||
|
||||
/** "Nobody" / "no sprint" in the selects. */
|
||||
const NOBODY = '__none__';
|
||||
|
||||
/**
|
||||
* Edit in bulk: select all, then one change (status, assignee, sprint,
|
||||
* priority or an extra label) for every selected ticket. Shared by the
|
||||
* backlog and the list.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ts-bulk-bar',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [
|
||||
PiActionButtonComponent,
|
||||
PiSelectFieldComponent,
|
||||
PiTextFieldComponent,
|
||||
],
|
||||
template: `
|
||||
<div class="ts-bulk" role="toolbar" aria-label="Edición en bloque">
|
||||
<label class="ts-bulk__all">
|
||||
<input
|
||||
type="checkbox"
|
||||
[checked]="allSelected()"
|
||||
[indeterminate]="count() > 0 && !allSelected()"
|
||||
(change)="selectAll.emit($any($event.target).checked)"
|
||||
/>
|
||||
{{ count() ? count() + ' seleccionados' : 'Seleccionar todos' }}
|
||||
</label>
|
||||
@if (count()) {
|
||||
<pi-select-field [options]="fields" [(value)]="field" />
|
||||
@switch (field()) {
|
||||
@case ('status') {
|
||||
<pi-select-field [options]="statusOptions()" [(value)]="value" />
|
||||
}
|
||||
@case ('assignee') {
|
||||
<pi-select-field [options]="assigneeOptions()" [(value)]="value" />
|
||||
}
|
||||
@case ('sprint') {
|
||||
<pi-select-field [options]="sprintOptions()" [(value)]="value" />
|
||||
}
|
||||
@case ('priority') {
|
||||
<pi-select-field [options]="priorityOptions" [(value)]="value" />
|
||||
}
|
||||
@case ('label') {
|
||||
<pi-text-field placeholder="etiqueta" [(value)]="label" />
|
||||
}
|
||||
}
|
||||
<pi-action-button
|
||||
size="small"
|
||||
color="primary"
|
||||
text="Aplicar"
|
||||
[disabled]="!canApply()"
|
||||
(execute)="emit()"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
styles: `
|
||||
.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;
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class BulkBarComponent {
|
||||
/** How many tickets are selected. */
|
||||
readonly count = input.required<number>();
|
||||
readonly allSelected = input.required<boolean>();
|
||||
readonly selectAll = output<boolean>();
|
||||
/** The change to make on every selected ticket. */
|
||||
readonly apply = output<BulkChange>();
|
||||
|
||||
private readonly project = inject(ProjectFacade);
|
||||
protected readonly fields: 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 field = signal<string | null>('status');
|
||||
protected readonly value = signal<string | null>(null);
|
||||
protected readonly label = 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.field() === 'label' ? !!this.label().trim() : !!this.value(),
|
||||
);
|
||||
|
||||
protected emit(): void {
|
||||
const value = this.value();
|
||||
const change: BulkChange = {};
|
||||
switch (this.field()) {
|
||||
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.label().trim().toLowerCase()];
|
||||
break;
|
||||
}
|
||||
this.apply.emit(change);
|
||||
this.label.set('');
|
||||
}
|
||||
}
|
||||
@@ -31,6 +31,17 @@ import { initials, PRIORITY, PRIORITY_LEVEL, typeLook } from './copy';
|
||||
<pi-icon [icon]="type().icon" size="small" />
|
||||
</span>
|
||||
<span class="ts-card__key">{{ issue().key }}</span>
|
||||
@if (issue().blockedBy.length) {
|
||||
<span
|
||||
class="ts-card__blocked"
|
||||
[attr.title]="
|
||||
'Bloqueado por ' + issue().blockedBy.map(blockerKey).join(', ')
|
||||
"
|
||||
>
|
||||
<pi-icon icon="lock" size="x-small" />
|
||||
Bloqueado
|
||||
</span>
|
||||
}
|
||||
@if (issue().area; as area) {
|
||||
<span class="ts-card__area">{{ areaLabel(area) }}</span>
|
||||
}
|
||||
@@ -180,6 +191,17 @@ import { initials, PRIORITY, PRIORITY_LEVEL, typeLook } from './copy';
|
||||
font-weight: 600;
|
||||
color: var(--ts-ink-soft);
|
||||
}
|
||||
.ts-card__blocked {
|
||||
display: inline-flex;
|
||||
gap: 0.25rem;
|
||||
align-items: center;
|
||||
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.6875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.ts-card__area {
|
||||
margin-left: auto;
|
||||
font-family: var(--ts-font-mono);
|
||||
@@ -259,6 +281,8 @@ import { initials, PRIORITY, PRIORITY_LEVEL, typeLook } from './copy';
|
||||
`,
|
||||
})
|
||||
export class IssueCardComponent {
|
||||
protected readonly blockerKey = (blocker: { key: string }) => blocker.key;
|
||||
|
||||
/** Late, due today or in the next two days. */
|
||||
protected readonly due = computed(() =>
|
||||
dueState(this.issue().dueDate, this.issue().statusCategory),
|
||||
|
||||
49
libs/web/tracker/presenters/src/lib/ui/markdown.spec.ts
Normal file
49
libs/web/tracker/presenters/src/lib/ui/markdown.spec.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
import { renderMarkdown } from './markdown';
|
||||
|
||||
describe('renderMarkdown', () => {
|
||||
it('formats Markdown, keeping single line breaks', () => {
|
||||
const html = renderMarkdown(
|
||||
'**Hecho** y _probado_\nen `main`\n\n- uno\n- dos',
|
||||
);
|
||||
expect(html).toContain('<strong>Hecho</strong>');
|
||||
expect(html).toContain('<em>probado</em><br>');
|
||||
expect(html).toContain('<code>main</code>');
|
||||
expect(html).toContain('<li>uno</li>');
|
||||
});
|
||||
|
||||
it('highlights mentions, the reader own apart', () => {
|
||||
const html = renderMarkdown('@[Ana López](101) y @[Bob](102)', '101');
|
||||
expect(html).toContain(
|
||||
'<span class="ts-mention is-me" data-user="101">@Ana López</span>',
|
||||
);
|
||||
expect(html).toContain(
|
||||
'<span class="ts-mention" data-user="102">@Bob</span>',
|
||||
);
|
||||
});
|
||||
|
||||
it('lets nothing run, whatever someone writes', () => {
|
||||
const html = renderMarkdown(
|
||||
'<script>alert(1)</script><img src=x onerror="alert(2)"> <div class="ts-btn" onclick="x()">hola</div>',
|
||||
);
|
||||
expect(html).not.toMatch(/<script|onerror|onclick|ts-btn|<div/);
|
||||
// A Markdown link to javascript: is no link at all.
|
||||
const link = renderMarkdown('[clic](javascript:alert(3))');
|
||||
expect(link).not.toContain('href');
|
||||
});
|
||||
|
||||
it('opens links apart and leaves pasted images to be fetched', () => {
|
||||
const html = renderMarkdown(
|
||||
'[docs](https://example.org) ',
|
||||
);
|
||||
expect(html).toContain('href="https://example.org"');
|
||||
expect(html).toContain('target="_blank"');
|
||||
expect(html).toContain('rel="noopener noreferrer"');
|
||||
expect(html).toMatch(/<img alt="captura" data-attachment="3f2c-1">/);
|
||||
});
|
||||
|
||||
it('shows task lists as ticked boxes nobody can click', () => {
|
||||
const html = renderMarkdown('- [x] Reproducido\n- [ ] Arreglado');
|
||||
expect(html).toContain('<input checked="" disabled="" type="checkbox">');
|
||||
expect(html).toContain('<input disabled="" type="checkbox">');
|
||||
});
|
||||
});
|
||||
410
libs/web/tracker/presenters/src/lib/ui/markdown.ts
Normal file
410
libs/web/tracker/presenters/src/lib/ui/markdown.ts
Normal file
@@ -0,0 +1,410 @@
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
computed,
|
||||
DestroyRef,
|
||||
Directive,
|
||||
effect,
|
||||
ElementRef,
|
||||
HostListener,
|
||||
inject,
|
||||
input,
|
||||
signal,
|
||||
untracked,
|
||||
ViewEncapsulation,
|
||||
} from '@angular/core';
|
||||
import { DomSanitizer } from '@angular/platform-browser';
|
||||
import { mentionSegments } from '@task-stream/web/tracker/domain';
|
||||
import DOMPurify from 'dompurify';
|
||||
import { marked } from 'marked';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
/** Images pasted into a text are stored as attachments: ``. */
|
||||
const ATTACHMENT = /^attachment:([\w-]{1,64})$/;
|
||||
|
||||
const ALLOWED_TAGS = [
|
||||
'p',
|
||||
'br',
|
||||
'strong',
|
||||
'em',
|
||||
'del',
|
||||
'code',
|
||||
'pre',
|
||||
'blockquote',
|
||||
'hr',
|
||||
'h1',
|
||||
'h2',
|
||||
'h3',
|
||||
'h4',
|
||||
'ul',
|
||||
'ol',
|
||||
'li',
|
||||
'a',
|
||||
'img',
|
||||
'span',
|
||||
'table',
|
||||
'thead',
|
||||
'tbody',
|
||||
'tr',
|
||||
'th',
|
||||
'td',
|
||||
'input',
|
||||
];
|
||||
|
||||
let hooked = false;
|
||||
|
||||
/** Links open apart; only mentions keep a class; attachment images wait to be fetched. */
|
||||
function installHooks(): void {
|
||||
if (hooked) return;
|
||||
hooked = true;
|
||||
DOMPurify.addHook('afterSanitizeAttributes', (node) => {
|
||||
if (node.tagName === 'A') {
|
||||
node.setAttribute('target', '_blank');
|
||||
node.setAttribute('rel', 'noopener noreferrer');
|
||||
}
|
||||
if (node.tagName === 'IMG') {
|
||||
const id = ATTACHMENT.exec(node.getAttribute('src') ?? '')?.[1];
|
||||
if (id) {
|
||||
node.removeAttribute('src');
|
||||
node.setAttribute('data-attachment', id);
|
||||
}
|
||||
}
|
||||
if (node.tagName === 'INPUT') {
|
||||
// Task lists: `- [x] done` renders as a ticked, read-only box.
|
||||
if (node.getAttribute('type') !== 'checkbox') node.remove();
|
||||
else node.setAttribute('disabled', '');
|
||||
}
|
||||
const cls = node.getAttribute('class');
|
||||
if (cls && !/^ts-mention( is-me)?$/.test(cls))
|
||||
node.removeAttribute('class');
|
||||
});
|
||||
}
|
||||
|
||||
const escapeHtml = (text: string) =>
|
||||
text.replace(
|
||||
/[&<>"']/g,
|
||||
(c) =>
|
||||
({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' })[
|
||||
c
|
||||
] ?? c,
|
||||
);
|
||||
|
||||
/**
|
||||
* A description, comment or release note as safe HTML: Markdown (GitHub's
|
||||
* flavour, single line breaks kept), `@[Name](id)` mentions highlighted
|
||||
* (`me` marks one's own), and nothing that could run: whatever someone wrote
|
||||
* goes through DOMPurify with a short list of tags.
|
||||
*/
|
||||
export function renderMarkdown(text: string, me: string | null = null): string {
|
||||
installHooks();
|
||||
const withMentions = mentionSegments(text)
|
||||
.map((part) =>
|
||||
'mention' in part
|
||||
? `<span class="ts-mention${part.userId === me ? ' is-me' : ''}" data-user="${escapeHtml(part.userId)}">@${escapeHtml(part.mention)}</span>`
|
||||
: part.text,
|
||||
)
|
||||
.join('');
|
||||
const html = marked.parse(withMentions, {
|
||||
gfm: true,
|
||||
breaks: true,
|
||||
async: false,
|
||||
});
|
||||
return DOMPurify.sanitize(html, {
|
||||
ALLOWED_TAGS,
|
||||
ALLOWED_ATTR: [
|
||||
'href',
|
||||
'title',
|
||||
'alt',
|
||||
'src',
|
||||
'class',
|
||||
'data-user',
|
||||
'type',
|
||||
'checked',
|
||||
'disabled',
|
||||
],
|
||||
// DOMPurify's own rule plus `attachment:`: links and images to http(s),
|
||||
// mail or a pasted file; plain values (`type="checkbox"`) still pass.
|
||||
ALLOWED_URI_REGEXP:
|
||||
/^(?:(?:https?|mailto|attachment):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i,
|
||||
});
|
||||
}
|
||||
|
||||
/** Fetches an attachment's bytes (with the session), by id. */
|
||||
export type AttachmentLoader = (attachmentId: string) => Observable<Blob>;
|
||||
|
||||
/**
|
||||
* Formatted text: Markdown rendered safely. Pasted images (`attachment:`)
|
||||
* are fetched with `loader`, since a private project's files need the
|
||||
* session and an `<img>` cannot send it.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ts-markdown',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
template: '<div class="ts-md" [innerHTML]="html()"></div>',
|
||||
styles: `
|
||||
.ts-md {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.55;
|
||||
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
pre,
|
||||
blockquote,
|
||||
table {
|
||||
margin: 0 0 0.625rem;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin: 1rem 0 0.5rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.1875rem;
|
||||
}
|
||||
h3,
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1.375rem;
|
||||
}
|
||||
li:has(> input[type='checkbox']) {
|
||||
list-style: none;
|
||||
margin-left: -1.375rem;
|
||||
}
|
||||
a {
|
||||
color: var(--ts-brand);
|
||||
}
|
||||
code {
|
||||
padding: 0.0625rem 0.3125rem;
|
||||
border-radius: 0.3125rem;
|
||||
background: color-mix(in srgb, var(--ts-ink) 8%, transparent);
|
||||
font-family: var(--ts-mono, ui-monospace, monospace);
|
||||
font-size: 0.875em;
|
||||
}
|
||||
pre {
|
||||
padding: 0.75rem 0.875rem;
|
||||
overflow-x: auto;
|
||||
border-radius: 0.5rem;
|
||||
background: color-mix(in srgb, var(--ts-ink) 7%, transparent);
|
||||
code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
blockquote {
|
||||
padding: 0 0 0 0.875rem;
|
||||
border-left: 3px solid var(--ts-line-strong, var(--ts-line));
|
||||
color: var(--ts-muted);
|
||||
font-size: inherit;
|
||||
quotes: none;
|
||||
&::before,
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 28rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--ts-line);
|
||||
}
|
||||
img[data-attachment]:not([src]) {
|
||||
width: 12rem;
|
||||
height: 6rem;
|
||||
background: color-mix(in srgb, var(--ts-ink) 6%, transparent);
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 0.375rem 0.625rem;
|
||||
border: 1px solid var(--ts-line);
|
||||
text-align: left;
|
||||
}
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--ts-line);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class MarkdownComponent {
|
||||
readonly text = input<string | null | undefined>('');
|
||||
/** Signed-in user's id, to mark mentions of oneself. */
|
||||
readonly me = input<string | null>(null);
|
||||
readonly loader = input<AttachmentLoader | null>(null);
|
||||
|
||||
private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
|
||||
private readonly sanitizer = inject(DomSanitizer);
|
||||
/** Object URLs of the images already fetched, by attachment id. */
|
||||
private readonly urls = new Map<string, string>();
|
||||
|
||||
// Sanitised above with DOMPurify; Angular's own pass would drop the mentions' data.
|
||||
protected readonly html = computed(() =>
|
||||
this.sanitizer.bypassSecurityTrustHtml(
|
||||
renderMarkdown(this.text() ?? '', this.me()),
|
||||
),
|
||||
);
|
||||
|
||||
constructor() {
|
||||
effect(() => {
|
||||
this.html();
|
||||
const loader = this.loader();
|
||||
// After the new HTML is in place.
|
||||
untracked(() => queueMicrotask(() => this.loadImages(loader)));
|
||||
});
|
||||
inject(DestroyRef).onDestroy(() => {
|
||||
for (const url of this.urls.values()) URL.revokeObjectURL(url);
|
||||
});
|
||||
}
|
||||
|
||||
private loadImages(loader: AttachmentLoader | null): void {
|
||||
if (!loader) return;
|
||||
const images = this.host.nativeElement.querySelectorAll<HTMLImageElement>(
|
||||
'img[data-attachment]',
|
||||
);
|
||||
for (const img of Array.from(images)) {
|
||||
const id = img.dataset['attachment'] ?? '';
|
||||
const known = this.urls.get(id);
|
||||
if (known) {
|
||||
img.src = known;
|
||||
continue;
|
||||
}
|
||||
loader(id).subscribe({
|
||||
next: (blob) => {
|
||||
const url = URL.createObjectURL(blob);
|
||||
this.urls.set(id, url);
|
||||
img.src = url;
|
||||
},
|
||||
error: () => img.setAttribute('alt', `${img.alt} (no disponible)`),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Under a text box: that it takes Markdown, and a preview of what will show.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ts-markdown-hint',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
imports: [MarkdownComponent],
|
||||
template: `
|
||||
<div class="ts-md-hint">
|
||||
<span class="ts-muted"
|
||||
>Admite Markdown: **negrita**, _cursiva_, <code>código</code>, listas y
|
||||
enlaces{{ images() ? '; pega capturas con Ctrl+V' : '' }}.</span
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="ts-plain-link"
|
||||
[disabled]="!text()?.trim()"
|
||||
(click)="open.set(!open())"
|
||||
>
|
||||
{{ open() ? 'Ocultar vista previa' : 'Vista previa' }}
|
||||
</button>
|
||||
</div>
|
||||
@if (open() && text()?.trim()) {
|
||||
<ts-markdown
|
||||
class="ts-md-preview"
|
||||
[text]="text()"
|
||||
[me]="me()"
|
||||
[loader]="loader()"
|
||||
/>
|
||||
}
|
||||
`,
|
||||
styles: `
|
||||
:host {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.ts-md-hint {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem 0.75rem;
|
||||
align-items: baseline;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.ts-md-preview {
|
||||
padding: 0.75rem 0.875rem;
|
||||
border: 1px dashed var(--ts-line-strong, var(--ts-line));
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class MarkdownHintComponent {
|
||||
readonly text = input<string | null | undefined>('');
|
||||
readonly me = input<string | null>(null);
|
||||
readonly loader = input<AttachmentLoader | null>(null);
|
||||
/** Whether pasting images is on for the box above. */
|
||||
readonly images = input(false);
|
||||
protected readonly open = signal(false);
|
||||
}
|
||||
|
||||
/** Uploads a pasted image and answers its attachment id. */
|
||||
export type ImageUploader = (file: File) => Observable<string>;
|
||||
|
||||
/**
|
||||
* On a textarea (or a component wrapping one): pasting an image uploads it
|
||||
* and writes `` where the caret was. The text is
|
||||
* changed through an `input` event, so whatever binds the field sees it.
|
||||
*/
|
||||
@Directive({ selector: '[tsPasteImages]' })
|
||||
export class PasteImagesDirective {
|
||||
readonly tsPasteImages = input<ImageUploader | null>(null);
|
||||
private readonly destroyRef = inject(DestroyRef);
|
||||
|
||||
@HostListener('paste', ['$event'])
|
||||
onPaste(event: ClipboardEvent): void {
|
||||
const upload = this.tsPasteImages();
|
||||
const files = Array.from(event.clipboardData?.files ?? []).filter((f) =>
|
||||
f.type.startsWith('image/'),
|
||||
);
|
||||
const area = event.target as HTMLTextAreaElement | null;
|
||||
if (!upload || !files.length || area?.tagName !== 'TEXTAREA') return;
|
||||
event.preventDefault();
|
||||
let caret = area.selectionStart ?? area.value.length;
|
||||
for (const file of files) {
|
||||
const name = (file.name || 'captura').replace(/[[\]()\n]/g, ' ');
|
||||
const sub = upload(file).subscribe((id) => {
|
||||
const snippet = `\n\n`;
|
||||
area.value =
|
||||
area.value.slice(0, caret) + snippet + area.value.slice(caret);
|
||||
caret += snippet.length;
|
||||
area.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
});
|
||||
this.destroyRef.onDestroy(() => sub.unsubscribe());
|
||||
}
|
||||
}
|
||||
}
|
||||
78
libs/web/tracker/presenters/src/lib/ui/vote.ts
Normal file
78
libs/web/tracker/presenters/src/lib/ui/vote.ts
Normal file
@@ -0,0 +1,78 @@
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
input,
|
||||
output,
|
||||
} from '@angular/core';
|
||||
|
||||
/**
|
||||
* ▲ 3: how many want a ticket. A button for whoever can vote (the
|
||||
* signed-in, on a public project), the count alone for the rest.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ts-vote',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: `
|
||||
@if (canVote()) {
|
||||
<button
|
||||
type="button"
|
||||
class="ts-vote"
|
||||
[class.is-mine]="voted()"
|
||||
[attr.aria-pressed]="voted()"
|
||||
[attr.aria-label]="
|
||||
(voted() ? 'Quitar mi voto · ' : 'Votar · ') + votes()
|
||||
"
|
||||
[title]="voted() ? 'Quitar mi voto' : 'Votar'"
|
||||
(click)="voteChange.emit(!voted())"
|
||||
>
|
||||
▲ <span>{{ votes() }}</span>
|
||||
</button>
|
||||
} @else {
|
||||
<span class="ts-vote is-static" title="Votos">▲ {{ votes() }}</span>
|
||||
}
|
||||
`,
|
||||
styles: `
|
||||
:host {
|
||||
display: inline-flex;
|
||||
}
|
||||
/* @pi/ui styles every <button> (min-width, padding, radius, border) too
|
||||
specifically to override without !important. */
|
||||
.ts-vote {
|
||||
display: inline-flex;
|
||||
gap: 0.25rem;
|
||||
align-items: center;
|
||||
min-width: 0 !important;
|
||||
height: auto !important;
|
||||
padding: 0.0625rem 0.5rem !important;
|
||||
border: 1px solid var(--ts-line) !important;
|
||||
border-radius: 999px !important;
|
||||
line-height: 1.5;
|
||||
background: var(--ts-surface);
|
||||
color: var(--ts-muted);
|
||||
font: inherit;
|
||||
font-family: var(--ts-font-mono, ui-monospace, monospace);
|
||||
font-size: 0.75rem;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
&:hover:not(.is-static) {
|
||||
border-color: var(--ts-brand);
|
||||
color: var(--ts-ink);
|
||||
}
|
||||
&.is-mine {
|
||||
border-color: var(--ts-brand) !important;
|
||||
background: color-mix(in srgb, var(--ts-brand) 12%, var(--ts-surface));
|
||||
color: var(--ts-brand);
|
||||
}
|
||||
&.is-static {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class VoteComponent {
|
||||
readonly votes = input.required<number>();
|
||||
readonly voted = input(false);
|
||||
readonly canVote = input(false);
|
||||
/** The new state: true to vote, false to take it back. */
|
||||
readonly voteChange = output<boolean>();
|
||||
}
|
||||
Reference in New Issue
Block a user