From bcca7f4f2ef8ba3c069e27c048f50e83e6a98d6d Mon Sep 17 00:00:00 2001 From: Andras Schmelczer Date: Sun, 31 May 2026 10:49:26 +0100 Subject: [PATCH] frontend(block-edit): rework the block edit carousel and add tests --- .../components/modal/block-edit.component.ts | 393 ++++++++++++++++-- .../modal/block-edit.component.vitest.ts | 14 + 2 files changed, 371 insertions(+), 36 deletions(-) create mode 100644 frontend/src/app/components/modal/block-edit.component.vitest.ts diff --git a/frontend/src/app/components/modal/block-edit.component.ts b/frontend/src/app/components/modal/block-edit.component.ts index a7d5d3b..58cad90 100644 --- a/frontend/src/app/components/modal/block-edit.component.ts +++ b/frontend/src/app/components/modal/block-edit.component.ts @@ -3,9 +3,7 @@ import { ChangeDetectionStrategy, input, output, - inject, signal, - computed, effect, viewChild, ElementRef, @@ -15,7 +13,6 @@ import { } from '@angular/core'; import { Block, HslColor } from '../../models'; import { SelectAddComponent } from '../shared/select-add/select-add.component'; -import { ToggleComponent } from '../shared/toggle/toggle.component'; import { getColorOfTag } from '../../utils/color'; export interface BlockEditSave { @@ -24,25 +21,41 @@ export interface BlockEditSave { tag: string; description: string; is_done: boolean; + difficulty: number; } interface EditedValue { tag: string; description: string; is_done: boolean; + difficulty: number; +} + +function clampDifficulty(value: number): number { + return Math.max(1, Math.min(100, value)); +} + +export function createDoneValue(defaultDone: boolean, currentDone: boolean, edited: boolean): boolean { + return edited ? currentDone : defaultDone; } @Component({ selector: 'lt-block-edit', standalone: true, - imports: [SelectAddComponent, ToggleComponent], + imports: [SelectAddComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: ` + @if (viewTitle()) { +

{{ viewTitle() }}

+ } +
@@ -51,17 +64,27 @@ interface EditedValue { class="card" [class.active]="activeIdx() === i + 1" [class.near-active]="activeIdx() === i || activeIdx() === i + 2" + role="button" + tabindex="0" + [attr.aria-label]="'Focus ' + (editedFor(b.id).tag || 'block')" (click)="onCardClick(i + 1)" + (keydown.enter)="onCardClick(i + 1)" + (keydown.space)="$event.preventDefault(); onCardClick(i + 1)" >
-
+
-

{{ formatDate(b.created_at) }}

+

{{ formatDate(b.created_at, true) }}

@@ -70,7 +93,7 @@ interface EditedValue { [selected]="editedFor(b.id).tag" [alwaysDropShadow]="true" [onlyShadowBorder]="true" - placeholder="Tag this item…" + [placeholder]="tagPlaceholder('Tag this item…')" (select)="updateTag(b.id, $event)" (add)="updateTag(b.id, $event)" /> @@ -78,18 +101,40 @@ interface EditedValue { -
- + + Already done + + +
+ Difficulty +
+ + {{ editedFor(b.id).difficulty }} + +
@@ -102,12 +147,22 @@ interface EditedValue { class="card create-card" [class.active]="activeIdx() === blocks().length + 1" [class.near-active]="activeIdx() === blocks().length" + role="button" + tabindex="0" + aria-label="Focus create card" (click)="onCardClick(blocks().length + 1)" + (keydown.enter)="onCardClick(blocks().length + 1)" + (keydown.space)="$event.preventDefault(); onCardClick(blocks().length + 1)" >
-
+
Create now
-
+
@@ -129,17 +184,39 @@ interface EditedValue { -
- + + Already done + + +
+ Difficulty +
+ + {{ newValue().difficulty }} + +
@@ -166,17 +243,51 @@ interface EditedValue { right: 0; bottom: 0; z-index: 10001; // above modal backdrop (10000) + + @media (max-height: $min-height) { + align-items: flex-start; + overflow-y: auto; + } + } + + .view-title { + position: fixed; + top: var(--large-padding); + left: var(--large-padding); + right: var(--large-padding); + z-index: 10002; + margin: 0; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + pointer-events: none; } .carousel { + --title-clearance: calc((var(--large-padding) * 2) + var(--larger-font-size)); width: 100%; height: 100%; display: flex; align-items: center; box-sizing: border-box; + padding: var(--title-clearance) 0 var(--large-padding); overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; + scroll-snap-type: x mandatory; + + @media (max-width: $mobile-width) { + padding: var(--title-clearance) var(--medium-padding) var(--medium-padding); + } + + @media (max-height: $min-height) { + min-height: max-content; + align-items: flex-start; + padding-top: var(--title-clearance); + padding-bottom: var(--medium-padding); + overflow-y: visible; + } &::-webkit-scrollbar { width: 0; @@ -192,8 +303,12 @@ interface EditedValue { flex: 0 0 auto; width: 66vw; max-width: 400px; + scroll-snap-align: center; @media (max-width: $mobile-width) { - width: 300px; + width: min(88vw, 360px); + max-width: calc(100vw - (2 * var(--medium-padding))); + padding: var(--medium-padding); + margin: 0 calc(var(--small-padding) / 2); opacity: 1 !important; } box-sizing: border-box; @@ -246,6 +361,11 @@ interface EditedValue { opacity: 0 !important; width: 60vw; max-width: 60vw; + @media (max-width: $mobile-width) { + width: var(--medium-padding); + max-width: var(--medium-padding); + min-width: var(--medium-padding); + } box-shadow: none; background: transparent; } @@ -253,10 +373,16 @@ interface EditedValue { .header { @include center-child(); position: relative; + gap: var(--small-padding); + + h1 { + min-width: 0; + overflow-wrap: anywhere; + } .exit { position: absolute; - left: 0; + right: 0; @include exit(); } @@ -276,6 +402,132 @@ interface EditedValue { } } + .done-checkbox { + @include medium-text(); + display: flex; + align-items: center; + justify-content: center; + gap: var(--small-padding); + width: max-content; + max-width: 100%; + margin: 0 auto var(--medium-padding); + cursor: pointer; + + input[type='checkbox'] { + -webkit-appearance: none; + appearance: none; + @include square(22px); + flex: 0 0 auto; + position: relative; + box-sizing: border-box; + margin: 0; + border: 0; + border-radius: 4px; + background: $light-color; + box-shadow: $shadow-border; + cursor: pointer; + transition: background-color $short-animation-time, box-shadow $long-animation-time, transform $short-animation-time; + + &::after { + content: ''; + position: absolute; + left: 7px; + top: 3px; + width: 6px; + height: 12px; + border: solid $light-color; + border-width: 0 2px 2px 0; + opacity: 0; + transform: rotate(45deg) scale(0.8); + transition: opacity $short-animation-time, transform $short-animation-time; + } + + &:checked { + background: $text-color; + + &::after { + opacity: 1; + transform: rotate(45deg) scale(1); + } + } + + &:hover, + &:focus-visible { + box-shadow: $shadow; + } + + &:active { + transform: scale(0.95); + } + } + + span { + line-height: 1.3; + } + } + + .difficulty { + @include medium-text(); + display: flex; + align-items: center; + justify-content: center; + gap: var(--small-padding); + width: max-content; + max-width: 100%; + margin: 0 auto var(--medium-padding); + + .stepper { + display: flex; + align-items: center; + gap: var(--small-padding); + + .value { + min-width: 1.5em; + text-align: center; + font-variant-numeric: tabular-nums; + } + + button.step { + all: unset; // strip native + global button styles + @include square(22px); + @include center-child(); + flex: 0 0 auto; + box-sizing: border-box; + border-radius: 4px; + background: $light-color; + box-shadow: $shadow-border; + cursor: pointer; + // all:unset drops the font to serif and the global button's hover + // underline (button::after) survives the reset — re-assert both. + font: bold 18px/1 $normal-font; + color: $text-color; + user-select: none; + transition: box-shadow $long-animation-time, transform $short-animation-time, opacity $short-animation-time; + + &::after { content: none; } + + @media (max-width: $mobile-width) { + @include square(26px); + } + + &:hover, + &:focus-visible { + box-shadow: $shadow; + } + + &:active { + transform: scale(0.95); + } + + &:disabled { + opacity: 0.4; + cursor: not-allowed; + box-shadow: $shadow-border; + } + } + } + } + .bottom { height: 32px; @media (max-width: $mobile-width) { @@ -291,10 +543,29 @@ interface EditedValue { transform: translateY(-50%) translateX(-50%); } } + + @media (max-width: $mobile-width) { + lt-select-add, + .done-checkbox { + max-width: 100%; + width: 100%; + } + + .bottom { + min-height: 42px; + + button { + width: max-content; + max-width: 100%; + min-height: 42px; + } + } + } } `, }) export class BlockEditComponent implements AfterViewInit { + readonly viewTitle = input(''); readonly blocks = input.required(); readonly activeBlockId = input(null); readonly tags = input([]); @@ -317,7 +588,9 @@ export class BlockEditComponent implements AfterViewInit { tag: '', description: '', is_done: true, + difficulty: 1, }); + private newDoneEdited = false; // 1-based index of the centered card. 0/N+2 are placeholders. readonly activeIdx = signal(1); @@ -334,6 +607,7 @@ export class BlockEditComponent implements AfterViewInit { tag: b.tag, description: b.description, is_done: b.is_done, + difficulty: b.difficulty ?? 1, }); } untracked(() => this.editedValues.set(m)); @@ -344,13 +618,24 @@ export class BlockEditComponent implements AfterViewInit { const t = this.tags(); untracked(() => { const cur = this.newValue(); - if (!cur.tag && t.length > 0) { - this.newValue.set({ ...cur, tag: t[0], is_done: this.defaultDone() }); - } else if (!cur.tag) { - this.newValue.set({ ...cur, is_done: this.defaultDone() }); + if (!cur.tag) { + this.newValue.set({ + ...cur, + tag: t.length > 0 ? t[0] : '', + }); } }); }); + + effect(() => { + const isDone = this.defaultDone(); + untracked(() => { + this.newValue.update((v) => ({ + ...v, + is_done: createDoneValue(isDone, v.is_done, this.newDoneEdited), + })); + }); + }); } ngAfterViewInit(): void { @@ -373,26 +658,44 @@ export class BlockEditComponent implements AfterViewInit { tag: '', description: '', is_done: false, + difficulty: 1, } ); } - colorOfTagForBlock(id: string): string { - const v = this.editedFor(id); - return v.tag ? getColorOfTag(v.tag, this.baseColor()) : 'transparent'; + private colorOfTag(tag: string): string { + return tag ? getColorOfTag(tag, this.baseColor()) : 'transparent'; } - colorOfNewTag = computed(() => { - const t = this.newValue().tag; - return t ? getColorOfTag(t, this.baseColor()) : 'transparent'; - }); + colorOfTagForBlock(id: string): string { + return this.colorOfTag(this.editedFor(id).tag); + } - formatDate(ts: number): string { + tagPlaceholder(fallback: string): string { + return this.tags().length === 0 ? 'No tags yet. Open to create one.' : fallback; + } + + colorOfNewTag(): string { + return this.colorOfTag(this.newValue().tag); + } + + formatDate(ts: number, compact = false): string { const d = new Date(ts * 1000); - return d.toLocaleDateString(undefined, { + if (compact) { + return d.toLocaleString(undefined, { + month: 'short', + day: 'numeric', + hour: '2-digit', + minute: '2-digit', + }); + } + // e.g. "May 28, 2026, 14:32" + return d.toLocaleString(undefined, { year: 'numeric', month: 'short', day: 'numeric', + hour: '2-digit', + minute: '2-digit', }); } @@ -413,6 +716,12 @@ export class BlockEditComponent implements AfterViewInit { this.flushExisting(id); } + updateDifficulty(id: string, delta: number): void { + const next = clampDifficulty(this.editedFor(id).difficulty + delta); + this.patchEdited(id, { difficulty: next }); + this.flushExisting(id); + } + private patchEdited(id: string, patch: Partial): void { this.editedValues.update((m) => { const v = m.get(id); @@ -426,7 +735,13 @@ export class BlockEditComponent implements AfterViewInit { flushExisting(id: string): void { const v = this.editedFor(id); if (!v.tag) return; // Skip empty saves - this.save.emit({ id, tag: v.tag, description: v.description, is_done: v.is_done }); + this.save.emit({ + id, + tag: v.tag, + description: v.description, + is_done: v.is_done, + difficulty: v.difficulty, + }); } onDelete(id: string): void { @@ -444,9 +759,14 @@ export class BlockEditComponent implements AfterViewInit { } updateNewDone(is_done: boolean): void { + this.newDoneEdited = true; this.newValue.update((v) => ({ ...v, is_done })); } + updateNewDifficulty(delta: number): void { + this.newValue.update((v) => ({ ...v, difficulty: clampDifficulty(v.difficulty + delta) })); + } + submitNew(): void { const v = this.newValue(); if (!v.tag) return; @@ -455,6 +775,7 @@ export class BlockEditComponent implements AfterViewInit { tag: v.tag, description: v.description, is_done: v.is_done, + difficulty: v.difficulty, }); this.close.emit(); } diff --git a/frontend/src/app/components/modal/block-edit.component.vitest.ts b/frontend/src/app/components/modal/block-edit.component.vitest.ts new file mode 100644 index 0000000..b69ca31 --- /dev/null +++ b/frontend/src/app/components/modal/block-edit.component.vitest.ts @@ -0,0 +1,14 @@ +import { describe, expect, it } from 'vitest'; +import { createDoneValue } from './block-edit.component'; + +describe('createDoneValue', () => { + it('uses the create-card default before the user edits the checkbox', () => { + expect(createDoneValue(false, true, false)).toBe(false); + expect(createDoneValue(true, false, false)).toBe(true); + }); + + it('keeps the user-edited checkbox value', () => { + expect(createDoneValue(false, true, true)).toBe(true); + expect(createDoneValue(true, false, true)).toBe(false); + }); +});