Render each board activity kind with its own row
Angular · Angular · intermediate · modification
Refactors the board activity row from a single one-size-fits-all line into a per-kind `@switch`, so each event reads naturally. Switches on the event kind and renders the matching wording, with a `@default` for safety. Verified against the activity fixtures.
ActivityRow renders every entry in a project board's activity feed; assignment is the single most frequent event on an active board.
Requirements
- The `ActivityEvent` union has exactly four kinds: `commented`, `assigned`, `status_changed`, and `attached`. Render each one with its own dedicated wording.
- An `assigned` event must name who the item was handed to (e.g. 'assigned this to Priya'); the generic 'updated this item' wording is only acceptable when there is genuinely nothing kind-specific to say, which is never the case for the four documented kinds.
- If a new kind is added to the union later, this component must fail to compile until it is handled — not silently fall back to the generic row.
Files touched
- src/app/board/activity-row.ts
--- src/app/board/activity-row.ts
selector: 'app-activity-row',
template: `
- <li class="activity-row">
- <span class="actor">{{ event().actor }}</span>
- <span class="summary">updated this item</span>
+ @let e = event();
+ <li class="activity-row" [class]="e.kind">
+ <span class="actor">{{ e.actor }}</span>
+ @switch (e.kind) {
+ @case ('commented') {
+ <span class="summary">commented: {{ e.excerpt }}</span>
+ }
+ @case ('status_changed') {
+ <span class="summary">moved this to {{ e.status }}</span>
+ }
+ @case ('attached') {
+ <span class="summary">attached {{ e.filename }}</span>
+ }
+ @default {
+ <span class="summary">updated this item</span>
+ }
+ }
</li>
`,