generated from nhcarrigan/template
feat: multiple improvements to library functionality (#50)
## Summary This PR implements several improvements to the library application: - Added start and finish date tracking for media items - Added "Retired" category for abandoned media - Implemented avatar-based user menu with dropdown navigation - Added automatic background token refresh to prevent session expiry - Created centralised logging system with frontend-to-API log forwarding - Added toast notifications for error handling ## Changes ### Media Tracking (#41) - Added `dateStarted` and `dateFinished` fields to Books, Games, Manga, Music, and Shows - Updated TypeScript types, Prisma schema, and API services - Added manual date input fields to frontend forms - Properly converts HTML date strings to Date objects before API submission ### Retired Category (#43) - Added `RETIRED` status to all media type enums - Updated Prisma schema, frontend dropdowns, and filter buttons - Added status label handling for retired items ### User Menu (#46) - Replaced username text with avatar image in header - Created dropdown menu with navigation items (Users, Audit, Suggestions) - Added logout button to menu - Implemented keyboard accessibility (tabindex, role, keyup handlers) ### Token Refresh (#44) - Implemented automatic token refresh every 13 minutes in background - Added proactive refresh to prevent token expiry during form filling - Prevents users from losing form data due to expired sessions ### Centralised Logging (#1) - Created `/log` endpoint on API to receive frontend logs - Replaced API console.log calls with @nhcarrigan/logger - Created ConsoleLoggerService to intercept all console methods on frontend - Added global error handlers (window.error, unhandledrejection) on frontend - Added process error handlers (uncaughtException, unhandledRejection, SIGTERM, SIGINT) on API - All frontend console activity now forwarded to centralised logging ### Error Handling - Created ToastService and ToastComponent for displaying errors - Integrated with GlobalErrorHandler and HTTP interceptor - Added accessibility features (keyboard navigation, ARIA attributes) - Set toast opacity to 40% for optimal readability ### Testing & Build - Fixed pre-existing test failure for GET / route (now returns version info) - Added ESM module mocking (jsdom, marked, dompurify, @nhcarrigan/logger) - Configured Jest with isolatedModules to handle TypeScript errors - Excluded test-setup.ts from production build - All tests passing (123 total) - Build passing with no errors ## Test Plan - [x] All tests pass (123 tests) - [x] Build passes without errors - [x] Lint passes (only pre-existing warnings) - [x] Date fields work correctly on all media types - [x] Retired status displays and filters properly - [x] Avatar menu opens/closes correctly with keyboard and mouse - [x] Token refresh prevents session expiry - [x] Toast notifications appear for errors - [x] Frontend logs forward to API successfully - [x] Root route returns version information Closes #41 Closes #43 Closes #44 Closes #46 Closes #1 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Hikari <hikari@nhcarrigan.com> Reviewed-on: #50 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
This commit was merged in pull request #50.
This commit is contained in:
@@ -39,22 +39,22 @@ import { Suggestion, SuggestionStatus, SuggestionEntity } from '@library/shared-
|
||||
All ({{ suggestions().length }})
|
||||
</button>
|
||||
<button
|
||||
(click)="setFilter(SuggestionStatus.UNREVIEWED)"
|
||||
[class.active]="statusFilter() === SuggestionStatus.UNREVIEWED"
|
||||
(click)="setFilter(SuggestionStatus.unreviewed)"
|
||||
[class.active]="statusFilter() === SuggestionStatus.unreviewed"
|
||||
class="filter-btn pending"
|
||||
>
|
||||
Pending ({{ unreviewedCount() }})
|
||||
</button>
|
||||
<button
|
||||
(click)="setFilter(SuggestionStatus.ACCEPTED)"
|
||||
[class.active]="statusFilter() === SuggestionStatus.ACCEPTED"
|
||||
(click)="setFilter(SuggestionStatus.accepted)"
|
||||
[class.active]="statusFilter() === SuggestionStatus.accepted"
|
||||
class="filter-btn accepted"
|
||||
>
|
||||
Accepted ({{ acceptedCount() }})
|
||||
</button>
|
||||
<button
|
||||
(click)="setFilter(SuggestionStatus.DECLINED)"
|
||||
[class.active]="statusFilter() === SuggestionStatus.DECLINED"
|
||||
(click)="setFilter(SuggestionStatus.declined)"
|
||||
[class.active]="statusFilter() === SuggestionStatus.declined"
|
||||
class="filter-btn declined"
|
||||
>
|
||||
Declined ({{ declinedCount() }})
|
||||
@@ -171,7 +171,7 @@ import { Suggestion, SuggestionStatus, SuggestionEntity } from '@library/shared-
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (suggestion.status === SuggestionStatus.DECLINED && suggestion.declineReason) {
|
||||
@if (suggestion.status === SuggestionStatus.declined && suggestion.declineReason) {
|
||||
<div class="decline-reason">
|
||||
<strong>Decline reason:</strong> {{ suggestion.declineReason }}
|
||||
</div>
|
||||
@@ -180,7 +180,7 @@ import { Suggestion, SuggestionStatus, SuggestionEntity } from '@library/shared-
|
||||
<div class="suggestion-footer">
|
||||
<span class="date">Suggested on {{ formatDate(suggestion.createdAt) }}</span>
|
||||
|
||||
@if (suggestion.status === SuggestionStatus.UNREVIEWED) {
|
||||
@if (suggestion.status === SuggestionStatus.unreviewed) {
|
||||
<div class="actions">
|
||||
<button (click)="acceptSuggestion(suggestion)" class="btn btn-accept">
|
||||
Accept
|
||||
@@ -206,8 +206,8 @@ import { Suggestion, SuggestionStatus, SuggestionEntity } from '@library/shared-
|
||||
}
|
||||
|
||||
@if (showDeclineModal()) {
|
||||
<div class="modal-overlay" (click)="closeDeclineModal()">
|
||||
<div class="modal" (click)="$event.stopPropagation()">
|
||||
<div class="modal-overlay" (click)="closeDeclineModal()" (keyup.escape)="closeDeclineModal()" tabindex="0" role="button">
|
||||
<div class="modal" (click)="$event.stopPropagation()" (keyup)="$event.stopPropagation()" tabindex="-1">
|
||||
<h3>Decline Suggestion</h3>
|
||||
<p>Are you sure you want to decline "{{ decliningsuggestion()?.title }}"?</p>
|
||||
<div class="form-group">
|
||||
@@ -229,8 +229,8 @@ import { Suggestion, SuggestionStatus, SuggestionEntity } from '@library/shared-
|
||||
}
|
||||
|
||||
@if (showEditModal()) {
|
||||
<div class="modal-overlay" (click)="closeEditModal()">
|
||||
<div class="modal edit-modal" (click)="$event.stopPropagation()">
|
||||
<div class="modal-overlay" (click)="closeEditModal()" (keyup.escape)="closeEditModal()" tabindex="0" role="button">
|
||||
<div class="modal edit-modal" (click)="$event.stopPropagation()" (keyup)="$event.stopPropagation()" tabindex="-1">
|
||||
<h3>Review & Edit Before Accepting</h3>
|
||||
<p>Review and edit the details before adding to your collection.</p>
|
||||
|
||||
@@ -248,7 +248,7 @@ import { Suggestion, SuggestionStatus, SuggestionEntity } from '@library/shared-
|
||||
</div>
|
||||
|
||||
@switch (editingSuggestion()!.entityType) {
|
||||
@case ('BOOK') {
|
||||
@case (SuggestionEntity.book) {
|
||||
<div class="form-group">
|
||||
<label for="edit-author">Author</label>
|
||||
<input
|
||||
@@ -269,7 +269,7 @@ import { Suggestion, SuggestionStatus, SuggestionEntity } from '@library/shared-
|
||||
>
|
||||
</div>
|
||||
}
|
||||
@case ('GAME') {
|
||||
@case (SuggestionEntity.game) {
|
||||
<div class="form-group">
|
||||
<label for="edit-platform">Platform</label>
|
||||
<input
|
||||
@@ -280,7 +280,7 @@ import { Suggestion, SuggestionStatus, SuggestionEntity } from '@library/shared-
|
||||
>
|
||||
</div>
|
||||
}
|
||||
@case ('MUSIC') {
|
||||
@case (SuggestionEntity.music) {
|
||||
<div class="form-group">
|
||||
<label for="edit-artist">Artist</label>
|
||||
<input
|
||||
@@ -300,7 +300,7 @@ import { Suggestion, SuggestionStatus, SuggestionEntity } from '@library/shared-
|
||||
</select>
|
||||
</div>
|
||||
}
|
||||
@case ('ART') {
|
||||
@case (SuggestionEntity.art) {
|
||||
<div class="form-group">
|
||||
<label for="edit-artist">Artist</label>
|
||||
<input
|
||||
@@ -331,7 +331,7 @@ import { Suggestion, SuggestionStatus, SuggestionEntity } from '@library/shared-
|
||||
>
|
||||
</div>
|
||||
}
|
||||
@case ('SHOW') {
|
||||
@case (SuggestionEntity.show) {
|
||||
<div class="form-group">
|
||||
<label for="edit-type">Type</label>
|
||||
<select id="edit-type" [(ngModel)]="editedData.type" name="type" required>
|
||||
@@ -342,7 +342,7 @@ import { Suggestion, SuggestionStatus, SuggestionEntity } from '@library/shared-
|
||||
</select>
|
||||
</div>
|
||||
}
|
||||
@case ('MANGA') {
|
||||
@case (SuggestionEntity.manga) {
|
||||
<div class="form-group">
|
||||
<label for="edit-author">Author</label>
|
||||
<input
|
||||
@@ -366,7 +366,7 @@ import { Suggestion, SuggestionStatus, SuggestionEntity } from '@library/shared-
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
@if (editingSuggestion()!.entityType !== 'ART') {
|
||||
@if (editingSuggestion()!.entityType !== SuggestionEntity.art) {
|
||||
<div class="form-group">
|
||||
<label for="edit-coverImage">Cover Image URL</label>
|
||||
<input
|
||||
@@ -727,10 +727,11 @@ export class AdminSuggestionsComponent implements OnInit {
|
||||
pageSize = signal(25);
|
||||
|
||||
SuggestionStatus = SuggestionStatus;
|
||||
SuggestionEntity = SuggestionEntity;
|
||||
|
||||
unreviewedCount = () => this.suggestions().filter(s => s.status === SuggestionStatus.UNREVIEWED).length;
|
||||
acceptedCount = () => this.suggestions().filter(s => s.status === SuggestionStatus.ACCEPTED).length;
|
||||
declinedCount = () => this.suggestions().filter(s => s.status === SuggestionStatus.DECLINED).length;
|
||||
unreviewedCount = () => this.suggestions().filter(s => s.status === SuggestionStatus.unreviewed).length;
|
||||
acceptedCount = () => this.suggestions().filter(s => s.status === SuggestionStatus.accepted).length;
|
||||
declinedCount = () => this.suggestions().filter(s => s.status === SuggestionStatus.declined).length;
|
||||
|
||||
filteredSuggestions = computed(() => {
|
||||
const filter = this.statusFilter();
|
||||
@@ -788,20 +789,20 @@ export class AdminSuggestionsComponent implements OnInit {
|
||||
|
||||
getStatusLabel(status: SuggestionStatus): string {
|
||||
switch (status) {
|
||||
case SuggestionStatus.UNREVIEWED: return 'Pending';
|
||||
case SuggestionStatus.ACCEPTED: return 'Accepted';
|
||||
case SuggestionStatus.DECLINED: return 'Declined';
|
||||
case SuggestionStatus.unreviewed: return 'Pending';
|
||||
case SuggestionStatus.accepted: return 'Accepted';
|
||||
case SuggestionStatus.declined: return 'Declined';
|
||||
}
|
||||
}
|
||||
|
||||
getEntityIcon(entityType: SuggestionEntity): string {
|
||||
switch (entityType) {
|
||||
case SuggestionEntity.GAME: return '🎮';
|
||||
case SuggestionEntity.BOOK: return '📚';
|
||||
case SuggestionEntity.MUSIC: return '🎵';
|
||||
case SuggestionEntity.MANGA: return '📖';
|
||||
case SuggestionEntity.SHOW: return '📺';
|
||||
case SuggestionEntity.ART: return '🎨';
|
||||
case SuggestionEntity.game: return '🎮';
|
||||
case SuggestionEntity.book: return '📚';
|
||||
case SuggestionEntity.music: return '🎵';
|
||||
case SuggestionEntity.manga: return '📖';
|
||||
case SuggestionEntity.show: return '📺';
|
||||
case SuggestionEntity.art: return '🎨';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -822,39 +823,39 @@ export class AdminSuggestionsComponent implements OnInit {
|
||||
|
||||
// Add entity-specific data
|
||||
switch (suggestion.entityType) {
|
||||
case 'BOOK':
|
||||
case SuggestionEntity.book:
|
||||
const bookData = suggestion.bookData as any;
|
||||
this.editedData.author = bookData?.author || '';
|
||||
this.editedData.isbn = bookData?.isbn || '';
|
||||
this.editedData.notes = bookData?.notes || '';
|
||||
this.editedData.coverImage = bookData?.coverImage || '';
|
||||
break;
|
||||
case 'GAME':
|
||||
case SuggestionEntity.game:
|
||||
const gameData = suggestion.gameData as any;
|
||||
this.editedData.platform = gameData?.platform || '';
|
||||
this.editedData.notes = gameData?.notes || '';
|
||||
this.editedData.coverImage = gameData?.coverImage || '';
|
||||
break;
|
||||
case 'MUSIC':
|
||||
case SuggestionEntity.music:
|
||||
const musicData = suggestion.musicData as any;
|
||||
this.editedData.artist = musicData?.artist || '';
|
||||
this.editedData.type = musicData?.type || 'ALBUM';
|
||||
this.editedData.notes = musicData?.notes || '';
|
||||
this.editedData.coverArt = musicData?.coverArt || '';
|
||||
break;
|
||||
case 'ART':
|
||||
case SuggestionEntity.art:
|
||||
const artData = suggestion.artData as any;
|
||||
this.editedData.artist = artData?.artist || '';
|
||||
this.editedData.description = artData?.description || '';
|
||||
this.editedData.imageUrl = artData?.imageUrl || '';
|
||||
break;
|
||||
case 'SHOW':
|
||||
case SuggestionEntity.show:
|
||||
const showData = suggestion.showData as any;
|
||||
this.editedData.type = showData?.type || 'TV_SERIES';
|
||||
this.editedData.notes = showData?.notes || '';
|
||||
this.editedData.coverImage = showData?.coverImage || '';
|
||||
break;
|
||||
case 'MANGA':
|
||||
case SuggestionEntity.manga:
|
||||
const mangaData = suggestion.mangaData as any;
|
||||
this.editedData.author = mangaData?.author || '';
|
||||
this.editedData.notes = mangaData?.notes || '';
|
||||
|
||||
Reference in New Issue
Block a user