feat: «Recordármelo», a reminder of a ticket only for me
On a ticket, «Recordármelo» offers in an hour, this evening, tomorrow or
next Monday at 9, in a week, or any date and time, with an optional note.
The ticket shows the waiting one («Te lo recordaré el mié 21 a las 9:00»)
to change or drop. Every minute a scheduler tells the ones whose time
came as a REMINDER notification (bell, push, e-mail), once, and forgets
those whose ticket went to the trash or out of reach. One per person and
ticket, private, no history (Mongo `issue_reminders`).
API: setReminder / clearReminder, Issue.myReminder, myReminders;
PUT/DELETE /api/issues/{issue}/reminder, GET /api/me/reminders. MCP:
remind_me.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -768,3 +768,72 @@ a.ts-key {
|
||||
border-radius: 50%;
|
||||
background: var(--ts-c-green, #2e9e6a);
|
||||
}
|
||||
|
||||
/* My own reminder on the ticket. */
|
||||
.ts-reminder {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.25rem 0.625rem;
|
||||
margin: 0;
|
||||
padding: 0.5rem 0.875rem;
|
||||
border-radius: 0.625rem;
|
||||
background: color-mix(in srgb, var(--ts-c-amber) 14%, transparent);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Small text buttons, not @pi/ui's sized ones. */
|
||||
.ts-reminder__action {
|
||||
height: auto !important;
|
||||
min-width: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: 0;
|
||||
background: none !important;
|
||||
color: var(--ts-brand);
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.ts-reminder__choices {
|
||||
display: grid;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.ts-reminder__choice {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
height: auto !important;
|
||||
min-width: 0 !important;
|
||||
padding: 0.625rem 0.875rem !important;
|
||||
border: 1px solid var(--ts-line);
|
||||
border-radius: 0.5rem;
|
||||
background: var(--ts-surface);
|
||||
color: var(--ts-ink);
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
border-color: var(--ts-brand);
|
||||
}
|
||||
}
|
||||
|
||||
.ts-reminder__field {
|
||||
display: grid;
|
||||
gap: 0.375rem;
|
||||
color: var(--ts-muted);
|
||||
font-size: 0.8125rem;
|
||||
|
||||
.ts-input {
|
||||
font: inherit;
|
||||
color: var(--ts-ink);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -53,7 +53,10 @@ import {
|
||||
isTyping,
|
||||
POINT_SCALE,
|
||||
ReleaseStatus,
|
||||
ReminderChoice,
|
||||
reminderChoices,
|
||||
StatusCategory,
|
||||
whenLabel,
|
||||
} from '@task-stream/web/tracker/domain';
|
||||
import {
|
||||
clock,
|
||||
@@ -206,6 +209,17 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
|
||||
(execute)="facade.setWatching(!facade.watching())"
|
||||
/>
|
||||
}
|
||||
@if (project.myRole()) {
|
||||
<pi-icon-button
|
||||
icon="bell"
|
||||
color="grey"
|
||||
appearance="outline"
|
||||
[text]="issue.myReminder ? 'Recordatorio' : 'Recordármelo'"
|
||||
[attr.aria-pressed]="!!issue.myReminder"
|
||||
title="Avisarme de este ticket cuando yo diga"
|
||||
(execute)="openReminder()"
|
||||
/>
|
||||
}
|
||||
@if (
|
||||
project.myRole() &&
|
||||
(facade.children().length || issue.followingTree)
|
||||
@@ -265,6 +279,30 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@if (issue.myReminder; as reminder) {
|
||||
<p class="ts-reminder" role="status">
|
||||
<span aria-hidden="true">⏰</span>
|
||||
Te lo recordaré {{ when(reminder.at) }}
|
||||
@if (reminder.note) {
|
||||
· «{{ reminder.note }}»
|
||||
}
|
||||
<button
|
||||
type="button"
|
||||
class="ts-reminder__action"
|
||||
(click)="openReminder()"
|
||||
>
|
||||
Cambiar
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="ts-reminder__action"
|
||||
(click)="facade.setReminder(null)"
|
||||
>
|
||||
Quitar
|
||||
</button>
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (project.canContribute() && issue.allowedTransitions.length) {
|
||||
<div class="ts-transitions" role="group" aria-label="Mover a">
|
||||
<span class="ts-eyebrow">Mover a</span>
|
||||
@@ -1163,6 +1201,58 @@ const MAX_FILE_BYTES = 25 * 1024 * 1024;
|
||||
<pi-skeleton shape="text" [lines]="8" />
|
||||
}
|
||||
|
||||
<ng-template #reminderForm>
|
||||
<form
|
||||
class="ts-form"
|
||||
(submit)="$event.preventDefault(); saveReminder(reminderAt())"
|
||||
novalidate
|
||||
>
|
||||
<p class="ts-muted">
|
||||
Te llegará un aviso (en la campana y, si los tienes activados, en este
|
||||
dispositivo o por correo). Solo lo ves tú.
|
||||
</p>
|
||||
<div class="ts-reminder__choices" role="group" aria-label="Cuándo">
|
||||
@for (choice of reminderChoices(); track choice.label) {
|
||||
<button
|
||||
type="button"
|
||||
class="ts-reminder__choice"
|
||||
(click)="saveReminder(choice.at)"
|
||||
>
|
||||
<span>{{ choice.label }}</span>
|
||||
<span class="ts-muted">{{ when(choice.at) }}</span>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
<label class="ts-reminder__field">
|
||||
Otro momento
|
||||
<input
|
||||
class="ts-input"
|
||||
type="datetime-local"
|
||||
[min]="nowLocal()"
|
||||
[value]="reminderAt()"
|
||||
(input)="reminderAt.set($any($event.target).value)"
|
||||
/>
|
||||
</label>
|
||||
<label class="ts-reminder__field">
|
||||
Nota (opcional)
|
||||
<input
|
||||
class="ts-input"
|
||||
maxlength="280"
|
||||
placeholder="Llamar a QA antes de la release"
|
||||
[value]="reminderNote()"
|
||||
(input)="reminderNote.set($any($event.target).value)"
|
||||
/>
|
||||
</label>
|
||||
<pi-action-button
|
||||
size="w100"
|
||||
color="primary"
|
||||
text="Recordármelo"
|
||||
[disabled]="!reminderAt()"
|
||||
(execute)="saveReminder(reminderAt())"
|
||||
/>
|
||||
</form>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #reasonForm>
|
||||
<form
|
||||
class="ts-form"
|
||||
@@ -1264,6 +1354,13 @@ export class IssuePage {
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly reasonForm =
|
||||
viewChild.required<TemplateRef<unknown>>('reasonForm');
|
||||
private readonly reminderForm =
|
||||
viewChild.required<TemplateRef<unknown>>('reminderForm');
|
||||
/** The reminder being written: `datetime-local` value and note. */
|
||||
protected readonly reminderAt = signal('');
|
||||
protected readonly reminderNote = signal('');
|
||||
protected readonly reminderChoices = signal<ReminderChoice[]>([]);
|
||||
protected readonly when = whenLabel;
|
||||
private readonly editForm =
|
||||
viewChild.required<TemplateRef<unknown>>('editForm');
|
||||
private readonly commentEditForm =
|
||||
@@ -1638,6 +1735,28 @@ export class IssuePage {
|
||||
this.parentKey.set(null);
|
||||
}
|
||||
|
||||
protected openReminder(): void {
|
||||
const current = this.facade.issue()?.myReminder;
|
||||
this.reminderChoices.set(reminderChoices());
|
||||
this.reminderAt.set(current ? toLocalInput(new Date(current.at)) : '');
|
||||
this.reminderNote.set(current?.note ?? '');
|
||||
this.drawer.open('Recordármelo', this.reminderForm());
|
||||
}
|
||||
|
||||
/** `at`: ISO, or the `datetime-local` value (local time). */
|
||||
protected saveReminder(at: string): void {
|
||||
if (!at) return;
|
||||
const when = new Date(at);
|
||||
if (Number.isNaN(when.getTime())) return;
|
||||
this.facade.setReminder(when.toISOString(), this.reminderNote());
|
||||
this.drawer.closeAll();
|
||||
}
|
||||
|
||||
/** Now, as the `min` of a `datetime-local` input. */
|
||||
protected nowLocal(): string {
|
||||
return toLocalInput(new Date());
|
||||
}
|
||||
|
||||
protected move(to: string): void {
|
||||
const open = this.openThreads();
|
||||
if (
|
||||
@@ -1934,3 +2053,9 @@ export class IssuePage {
|
||||
this.drawer.closeAll();
|
||||
}
|
||||
}
|
||||
|
||||
/** A date as a `datetime-local` value (local time, to the minute). */
|
||||
function toLocalInput(date: Date): string {
|
||||
const pad = (n: number) => String(n).padStart(2, '0');
|
||||
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user