nhcarrigan/library
9
0
Fork 0
generated from nhcarrigan/template
Code Issues Pull Requests 54 Actions Releases 3 Activity

feat: add tags and links

Browse Source
This commit is contained in:
Naomi Carrigan
2026-02-04 19:49:27 -08:00
parent 9902c5ad45
commit b9f33bc055
21 changed files with 1873 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/app/components/art/art-gallery.component.ts
+295 -5
View File
@@ -12,7 +12,7 @@ import { AuthService } from '../../services/auth.service';
import { CommentsService } from '../../services/comments.service';
import { SanitizeService } from '../../services/sanitize.service';
import { SuggestionService } from '../../services/suggestion.service';
import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity } from '@library/shared-types';
import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
@Component({
selector: 'app-art-gallery',
@@ -102,6 +102,52 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity } from '@lib
</div>
}
<div class="form-group">
<label>Tags</label>
<div class="tags-input-container">
@for (tag of newArt.tags; track tag; let i = $index) {
<span class="tag">
{{ tag }}
<button type="button" (click)="removeTag(i, 'new')" class="tag-remove">×</button>
</span>
}
<input
type="text"
[(ngModel)]="newTagInput"
name="newTagInput"
placeholder="Add a tag and press Enter"
(keydown.enter)="addTag('new'); $event.preventDefault()"
>
</div>
</div>
<div class="form-group">
<label>External Links</label>
<div class="links-list">
@for (link of newArt.links; track link.url; let i = $index) {
<div class="link-item">
<span>{{ link.title }}: {{ link.url }}</span>
<button type="button" (click)="removeLink(i, 'new')" class="btn btn-danger btn-sm">×</button>
</div>
}
</div>
<div class="link-add-form">
<input
type="text"
[(ngModel)]="newLinkTitle"
name="newLinkTitle"
placeholder="Link title (e.g., DeviantArt)"
>
<input
type="url"
[(ngModel)]="newLinkUrl"
name="newLinkUrl"
placeholder="https://..."
>
<button type="button" (click)="addLink('new')" class="btn btn-secondary btn-sm">Add Link</button>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Add Artwork</button>
<button type="button" (click)="toggleAddForm()" class="btn btn-secondary">Cancel</button>
@@ -231,6 +277,52 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity } from '@lib
</div>
}
<div class="form-group">
<label>Tags</label>
<div class="tags-input-container">
@for (tag of editArt.tags; track tag; let i = $index) {
<span class="tag">
{{ tag }}
<button type="button" (click)="removeTag(i, 'edit')" class="tag-remove">×</button>
</span>
}
<input
type="text"
[(ngModel)]="editTagInput"
name="editTagInput"
placeholder="Add a tag and press Enter"
(keydown.enter)="addTag('edit'); $event.preventDefault()"
>
</div>
</div>
<div class="form-group">
<label>External Links</label>
<div class="links-list">
@for (link of editArt.links; track link.url; let i = $index) {
<div class="link-item">
<span>{{ link.title }}: {{ link.url }}</span>
<button type="button" (click)="removeLink(i, 'edit')" class="btn btn-danger btn-sm">×</button>
</div>
}
</div>
<div class="link-add-form">
<input
type="text"
[(ngModel)]="editLinkTitle"
name="editLinkTitle"
placeholder="Link title (e.g., DeviantArt)"
>
<input
type="url"
[(ngModel)]="editLinkUrl"
name="editLinkUrl"
placeholder="https://..."
>
<button type="button" (click)="addLink('edit')" class="btn btn-secondary btn-sm">Add Link</button>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save Changes</button>
<button type="button" (click)="cancelEdit()" class="btn btn-secondary">Cancel</button>
@@ -262,6 +354,24 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity } from '@lib
<p class="artist">by {{ art.artist }}</p>
<p class="date-added">Added: {{ formatDate(art.dateAdded) }}</p>
@if (art.tags && art.tags.length > 0) {
<div class="tags-display">
@for (tag of art.tags; track tag) {
<span class="tag-chip">{{ tag }}</span>
}
</div>
}
@if (art.links && art.links.length > 0) {
<div class="links-display">
@for (link of art.links; track link.url) {
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
{{ link.title }} ↗
</a>
}
</div>
}
@if (authService.isAdmin()) {
<div class="actions">
<button (click)="startEdit(art)" class="btn btn-secondary btn-sm">
@@ -812,6 +922,116 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity } from '@lib
gap: 0.5rem;
margin-top: 0.5rem;
}
.tags-input-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.5rem;
border: 2px solid var(--witch-lavender);
border-radius: 4px;
background: var(--witch-moon);
}
.tags-input-container input {
flex: 1;
min-width: 150px;
border: none;
padding: 0.25rem;
font-size: 0.9rem;
background: transparent;
}
.tags-input-container input:focus {
outline: none;
}
.tag {
display: inline-flex;
align-items: center;
gap: 0.25rem;
background: #fdcb6e;
color: #333;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.85rem;
}
.tag-remove {
background: none;
border: none;
color: #333;
cursor: pointer;
padding: 0;
font-size: 1rem;
line-height: 1;
}
.tag-remove:hover {
opacity: 0.8;
}
.tags-display {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0;
}
.tag-chip {
background: rgba(253, 203, 110, 0.2);
color: #b38f00;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
}
.links-list {
margin-bottom: 0.5rem;
}
.link-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
background: var(--witch-moon);
border-radius: 4px;
margin-bottom: 0.25rem;
}
.link-add-form {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.link-add-form input {
flex: 1;
min-width: 120px;
}
.links-display {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0;
}
.external-link {
color: #b38f00;
text-decoration: none;
font-size: 0.85rem;
padding: 0.2rem 0.5rem;
background: rgba(253, 203, 110, 0.1);
border-radius: 4px;
transition: background 0.2s;
}
.external-link:hover {
background: rgba(253, 203, 110, 0.2);
text-decoration: underline;
}
`]
})
export class ArtGalleryComponent implements OnInit {
@@ -848,11 +1068,21 @@ export class ArtGalleryComponent implements OnInit {
title: '',
artist: '',
imageUrl: '',
description: ''
description: '',
tags: [],
links: []
};
editArt: Partial<UpdateArtDto> = {};
// Tags and links input state
newTagInput = '';
editTagInput = '';
newLinkTitle = '';
newLinkUrl = '';
editLinkTitle = '';
editLinkUrl = '';
ngOnInit() {
this.loadArt();
}
@@ -882,8 +1112,58 @@ export class ArtGalleryComponent implements OnInit {
title: '',
artist: '',
imageUrl: '',
description: ''
description: '',
tags: [],
links: []
};
this.newTagInput = '';
this.newLinkTitle = '';
this.newLinkUrl = '';
}
addTag(target: 'new' | 'edit') {
const input = target === 'new' ? this.newTagInput.trim() : this.editTagInput.trim();
if (!input) return;
if (target === 'new') {
this.newArt.tags = [...(this.newArt.tags || []), input];
this.newTagInput = '';
} else {
this.editArt.tags = [...(this.editArt.tags || []), input];
this.editTagInput = '';
}
}
removeTag(index: number, target: 'new' | 'edit') {
if (target === 'new') {
this.newArt.tags = (this.newArt.tags || []).filter((_, i) => i !== index);
} else {
this.editArt.tags = (this.editArt.tags || []).filter((_, i) => i !== index);
}
}
addLink(target: 'new' | 'edit') {
const title = target === 'new' ? this.newLinkTitle.trim() : this.editLinkTitle.trim();
const url = target === 'new' ? this.newLinkUrl.trim() : this.editLinkUrl.trim();
if (!title || !url) return;
if (target === 'new') {
this.newArt.links = [...(this.newArt.links || []), { title, url }];
this.newLinkTitle = '';
this.newLinkUrl = '';
} else {
this.editArt.links = [...(this.editArt.links || []), { title, url }];
this.editLinkTitle = '';
this.editLinkUrl = '';
}
}
removeLink(index: number, target: 'new' | 'edit') {
if (target === 'new') {
this.newArt.links = (this.newArt.links || []).filter((_, i) => i !== index);
} else {
this.editArt.links = (this.editArt.links || []).filter((_, i) => i !== index);
}
}
addArt() {
@@ -893,7 +1173,9 @@ export class ArtGalleryComponent implements OnInit {
title: this.newArt.title,
artist: this.newArt.artist,
imageUrl: this.newArt.imageUrl,
description: this.newArt.description
description: this.newArt.description,
tags: this.newArt.tags || [],
links: this.newArt.links || []
};
this.artService.createArt(artToAdd).subscribe(() => {
@@ -916,14 +1198,22 @@ export class ArtGalleryComponent implements OnInit {
title: art.title,
artist: art.artist,
imageUrl: art.imageUrl,
description: art.description
description: art.description,
tags: [...(art.tags || [])],
links: [...(art.links || [])]
};
this.showAddForm.set(false);
this.editTagInput = '';
this.editLinkTitle = '';
this.editLinkUrl = '';
}
cancelEdit() {
this.editingArt.set(null);
this.editArt = {};
this.editTagInput = '';
this.editLinkTitle = '';
this.editLinkUrl = '';
}
saveEdit() {
apps/frontend/src/app/components/books/books-list.component.ts
+295 -5
View File
@@ -12,7 +12,7 @@ import { AuthService } from '../../services/auth.service';
import { CommentsService } from '../../services/comments.service';
import { SanitizeService } from '../../services/sanitize.service';
import { SuggestionService } from '../../services/suggestion.service';
import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEntity } from '@library/shared-types';
import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
@Component({
selector: 'app-books-list',
@@ -123,6 +123,52 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
}
</div>
<div class="form-group">
<label>Tags</label>
<div class="tags-input-container">
@for (tag of newBook.tags; track tag; let i = $index) {
<span class="tag">
{{ tag }}
<button type="button" (click)="removeTag(i, 'new')" class="tag-remove">×</button>
</span>
}
<input
type="text"
[(ngModel)]="newTagInput"
name="newTagInput"
placeholder="Add a tag and press Enter"
(keydown.enter)="addTag('new'); $event.preventDefault()"
>
</div>
</div>
<div class="form-group">
<label>External Links</label>
<div class="links-list">
@for (link of newBook.links; track link.url; let i = $index) {
<div class="link-item">
<span>{{ link.title }}: {{ link.url }}</span>
<button type="button" (click)="removeLink(i, 'new')" class="btn btn-danger btn-sm">×</button>
</div>
}
</div>
<div class="link-add-form">
<input
type="text"
[(ngModel)]="newLinkTitle"
name="newLinkTitle"
placeholder="Link title (e.g., Goodreads)"
>
<input
type="url"
[(ngModel)]="newLinkUrl"
name="newLinkUrl"
placeholder="https://..."
>
<button type="button" (click)="addLink('new')" class="btn btn-secondary btn-sm">Add Link</button>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Add Book</button>
<button type="button" (click)="toggleAddForm()" class="btn btn-secondary">Cancel</button>
@@ -220,6 +266,52 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
}
</div>
<div class="form-group">
<label>Tags</label>
<div class="tags-input-container">
@for (tag of editBook.tags; track tag; let i = $index) {
<span class="tag">
{{ tag }}
<button type="button" (click)="removeTag(i, 'edit')" class="tag-remove">×</button>
</span>
}
<input
type="text"
[(ngModel)]="editTagInput"
name="editTagInput"
placeholder="Add a tag and press Enter"
(keydown.enter)="addTag('edit'); $event.preventDefault()"
>
</div>
</div>
<div class="form-group">
<label>External Links</label>
<div class="links-list">
@for (link of editBook.links; track link.url; let i = $index) {
<div class="link-item">
<span>{{ link.title }}: {{ link.url }}</span>
<button type="button" (click)="removeLink(i, 'edit')" class="btn btn-danger btn-sm">×</button>
</div>
}
</div>
<div class="link-add-form">
<input
type="text"
[(ngModel)]="editLinkTitle"
name="editLinkTitle"
placeholder="Link title (e.g., Goodreads)"
>
<input
type="url"
[(ngModel)]="editLinkUrl"
name="editLinkUrl"
placeholder="https://..."
>
<button type="button" (click)="addLink('edit')" class="btn btn-secondary btn-sm">Add Link</button>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save Changes</button>
<button type="button" (click)="cancelEdit()" class="btn btn-secondary">Cancel</button>
@@ -375,6 +467,24 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
<p class="notes">{{ book.notes }}</p>
}
@if (book.tags && book.tags.length > 0) {
<div class="tags-display">
@for (tag of book.tags; track tag) {
<span class="tag-chip">{{ tag }}</span>
}
</div>
}
@if (book.links && book.links.length > 0) {
<div class="links-display">
@for (link of book.links; track link.url) {
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
{{ link.title }} ↗
</a>
}
</div>
}
@if (book.dateFinished) {
<p class="date-finished">
Finished: {{ formatDate(book.dateFinished) }}
@@ -938,6 +1048,116 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
input[type="file"]:hover {
border-color: var(--witch-rose);
}
.tags-input-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.5rem;
border: 2px solid var(--witch-lavender);
border-radius: 4px;
background: var(--witch-moon);
}
.tags-input-container input {
flex: 1;
min-width: 150px;
border: none;
padding: 0.25rem;
font-size: 0.9rem;
background: transparent;
}
.tags-input-container input:focus {
outline: none;
}
.tag {
display: inline-flex;
align-items: center;
gap: 0.25rem;
background: #8b6f47;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.85rem;
}
.tag-remove {
background: none;
border: none;
color: white;
cursor: pointer;
padding: 0;
font-size: 1rem;
line-height: 1;
}
.tag-remove:hover {
opacity: 0.8;
}
.tags-display {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0;
}
.tag-chip {
background: rgba(139, 111, 71, 0.2);
color: #8b6f47;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
}
.links-list {
margin-bottom: 0.5rem;
}
.link-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
background: var(--witch-moon);
border-radius: 4px;
margin-bottom: 0.25rem;
}
.link-add-form {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.link-add-form input {
flex: 1;
min-width: 120px;
}
.links-display {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0;
}
.external-link {
color: #8b6f47;
text-decoration: none;
font-size: 0.85rem;
padding: 0.2rem 0.5rem;
background: rgba(139, 111, 71, 0.1);
border-radius: 4px;
transition: background 0.2s;
}
.external-link:hover {
background: rgba(139, 111, 71, 0.2);
text-decoration: underline;
}
`]
})
export class BooksListComponent implements OnInit {
@@ -1000,11 +1220,21 @@ export class BooksListComponent implements OnInit {
isbn: '',
status: BookStatus.toRead,
rating: undefined,
notes: ''
notes: '',
tags: [],
links: []
};
editBook: Partial<UpdateBookDto> = {};
// Tags and links input state
newTagInput = '';
editTagInput = '';
newLinkTitle = '';
newLinkUrl = '';
editLinkTitle = '';
editLinkUrl = '';
ngOnInit() {
this.loadBooks();
}
@@ -1049,10 +1279,60 @@ export class BooksListComponent implements OnInit {
status: BookStatus.toRead,
rating: undefined,
notes: '',
coverImage: undefined
coverImage: undefined,
tags: [],
links: []
};
this.newBookImagePreview.set(null);
this.imageError.set(null);
this.newTagInput = '';
this.newLinkTitle = '';
this.newLinkUrl = '';
}
addTag(target: 'new' | 'edit') {
const input = target === 'new' ? this.newTagInput.trim() : this.editTagInput.trim();
if (!input) return;
if (target === 'new') {
this.newBook.tags = [...(this.newBook.tags || []), input];
this.newTagInput = '';
} else {
this.editBook.tags = [...(this.editBook.tags || []), input];
this.editTagInput = '';
}
}
removeTag(index: number, target: 'new' | 'edit') {
if (target === 'new') {
this.newBook.tags = (this.newBook.tags || []).filter((_, i) => i !== index);
} else {
this.editBook.tags = (this.editBook.tags || []).filter((_, i) => i !== index);
}
}
addLink(target: 'new' | 'edit') {
const title = target === 'new' ? this.newLinkTitle.trim() : this.editLinkTitle.trim();
const url = target === 'new' ? this.newLinkUrl.trim() : this.editLinkUrl.trim();
if (!title || !url) return;
if (target === 'new') {
this.newBook.links = [...(this.newBook.links || []), { title, url }];
this.newLinkTitle = '';
this.newLinkUrl = '';
} else {
this.editBook.links = [...(this.editBook.links || []), { title, url }];
this.editLinkTitle = '';
this.editLinkUrl = '';
}
}
removeLink(index: number, target: 'new' | 'edit') {
if (target === 'new') {
this.newBook.links = (this.newBook.links || []).filter((_, i) => i !== index);
} else {
this.editBook.links = (this.editBook.links || []).filter((_, i) => i !== index);
}
}
addBook() {
@@ -1065,7 +1345,9 @@ export class BooksListComponent implements OnInit {
status: this.newBook.status,
rating: this.newBook.rating,
notes: this.newBook.notes,
coverImage: this.newBook.coverImage
coverImage: this.newBook.coverImage,
tags: this.newBook.tags || [],
links: this.newBook.links || []
};
this.booksService.createBook(bookToAdd).subscribe(() => {
@@ -1091,11 +1373,16 @@ export class BooksListComponent implements OnInit {
status: book.status,
rating: book.rating,
notes: book.notes,
coverImage: book.coverImage
coverImage: book.coverImage,
tags: [...(book.tags || [])],
links: [...(book.links || [])]
};
this.editBookImagePreview.set(book.coverImage || null);
this.showAddForm.set(false);
this.imageError.set(null);
this.editTagInput = '';
this.editLinkTitle = '';
this.editLinkUrl = '';
}
cancelEdit() {
@@ -1103,6 +1390,9 @@ export class BooksListComponent implements OnInit {
this.editBook = {};
this.editBookImagePreview.set(null);
this.imageError.set(null);
this.editTagInput = '';
this.editLinkTitle = '';
this.editLinkUrl = '';
}
saveEdit() {
apps/frontend/src/app/components/games/games-list.component.ts
+291 -5
View File
@@ -12,7 +12,7 @@ import { AuthService } from '../../services/auth.service';
import { CommentsService } from '../../services/comments.service';
import { SanitizeService } from '../../services/sanitize.service';
import { SuggestionService } from '../../services/suggestion.service';
import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEntity } from '@library/shared-types';
import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
@Component({
selector: 'app-games-list',
@@ -111,6 +111,52 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
}
</div>
<div class="form-group">
<label>Tags</label>
<div class="tags-input-container">
@for (tag of newGame.tags; track tag; let i = $index) {
<span class="tag">
{{ tag }}
<button type="button" (click)="removeTag(i, 'new')" class="tag-remove">×</button>
</span>
}
<input
type="text"
[(ngModel)]="newTagInput"
name="newTagInput"
placeholder="Add a tag and press Enter"
(keydown.enter)="addTag('new'); $event.preventDefault()"
>
</div>
</div>
<div class="form-group">
<label>External Links</label>
<div class="links-list">
@for (link of newGame.links; track link.url; let i = $index) {
<div class="link-item">
<span>{{ link.title }}: {{ link.url }}</span>
<button type="button" (click)="removeLink(i, 'new')" class="btn btn-danger btn-sm">×</button>
</div>
}
</div>
<div class="link-add-form">
<input
type="text"
[(ngModel)]="newLinkTitle"
name="newLinkTitle"
placeholder="Link title (e.g., Steam)"
>
<input
type="url"
[(ngModel)]="newLinkUrl"
name="newLinkUrl"
placeholder="https://..."
>
<button type="button" (click)="addLink('new')" class="btn btn-secondary btn-sm">Add Link</button>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Add Game</button>
<button type="button" (click)="toggleAddForm()" class="btn btn-secondary">Cancel</button>
@@ -196,6 +242,52 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
}
</div>
<div class="form-group">
<label>Tags</label>
<div class="tags-input-container">
@for (tag of editGame.tags; track tag; let i = $index) {
<span class="tag">
{{ tag }}
<button type="button" (click)="removeTag(i, 'edit')" class="tag-remove">×</button>
</span>
}
<input
type="text"
[(ngModel)]="editTagInput"
name="editTagInput"
placeholder="Add a tag and press Enter"
(keydown.enter)="addTag('edit'); $event.preventDefault()"
>
</div>
</div>
<div class="form-group">
<label>External Links</label>
<div class="links-list">
@for (link of editGame.links; track link.url; let i = $index) {
<div class="link-item">
<span>{{ link.title }}: {{ link.url }}</span>
<button type="button" (click)="removeLink(i, 'edit')" class="btn btn-danger btn-sm">×</button>
</div>
}
</div>
<div class="link-add-form">
<input
type="text"
[(ngModel)]="editLinkTitle"
name="editLinkTitle"
placeholder="Link title (e.g., Steam)"
>
<input
type="url"
[(ngModel)]="editLinkUrl"
name="editLinkUrl"
placeholder="https://..."
>
<button type="button" (click)="addLink('edit')" class="btn btn-secondary btn-sm">Add Link</button>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save Changes</button>
<button type="button" (click)="cancelEdit()" class="btn btn-secondary">Cancel</button>
@@ -334,6 +426,24 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
<p class="notes">{{ game.notes }}</p>
}
@if (game.tags && game.tags.length > 0) {
<div class="tags-display">
@for (tag of game.tags; track tag) {
<span class="tag-chip">{{ tag }}</span>
}
</div>
}
@if (game.links && game.links.length > 0) {
<div class="links-display">
@for (link of game.links; track link.url) {
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
{{ link.title }} ↗
</a>
}
</div>
}
@if (authService.isAdmin()) {
<div class="actions">
<button (click)="startEdit(game)" class="btn btn-secondary btn-sm">
@@ -747,6 +857,112 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
font-size: 0.9rem;
}
/* Tags and Links Styling */
.tags-input-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
background: white;
}
.tags-input-container input {
border: none;
outline: none;
flex: 1;
min-width: 150px;
padding: 0.25rem;
}
.tag {
display: inline-flex;
align-items: center;
gap: 0.25rem;
background: #ff6b6b;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 12px;
font-size: 0.85rem;
}
.tag-remove {
background: none;
border: none;
color: white;
cursor: pointer;
font-size: 1rem;
line-height: 1;
padding: 0;
margin-left: 0.25rem;
}
.tag-remove:hover {
color: #fecaca;
}
.tags-display {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0;
}
.tag-chip {
background: #ff6b6b;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.8rem;
}
.links-list {
margin-bottom: 0.5rem;
}
.link-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.25rem 0;
border-bottom: 1px solid #eee;
}
.link-add-form {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.link-add-form input {
flex: 1;
min-width: 120px;
}
.links-display {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0;
}
.external-link {
color: #ff6b6b;
text-decoration: none;
font-size: 0.85rem;
padding: 0.25rem 0.5rem;
border: 1px solid #ff6b6b;
border-radius: 4px;
transition: all 0.2s;
}
.external-link:hover {
background: #ff6b6b;
color: white;
}
.comment-edit-form {
margin-top: 0.5rem;
}
@@ -858,11 +1074,21 @@ export class GamesListComponent implements OnInit {
platform: '',
status: GameStatus.backlog,
rating: undefined,
notes: ''
notes: '',
tags: [],
links: []
};
editGame: Partial<UpdateGameDto> = {};
// Tags and links input state
newTagInput = '';
editTagInput = '';
newLinkTitle = '';
newLinkUrl = '';
editLinkTitle = '';
editLinkUrl = '';
ngOnInit() {
this.loadGames();
}
@@ -906,10 +1132,60 @@ export class GamesListComponent implements OnInit {
status: GameStatus.backlog,
rating: undefined,
notes: '',
coverImage: undefined
coverImage: undefined,
tags: [],
links: []
};
this.newGameImagePreview.set(null);
this.imageError.set(null);
this.newTagInput = '';
this.newLinkTitle = '';
this.newLinkUrl = '';
}
addTag(target: 'new' | 'edit') {
const input = target === 'new' ? this.newTagInput.trim() : this.editTagInput.trim();
if (!input) return;
if (target === 'new') {
this.newGame.tags = [...(this.newGame.tags || []), input];
this.newTagInput = '';
} else {
this.editGame.tags = [...(this.editGame.tags || []), input];
this.editTagInput = '';
}
}
removeTag(index: number, target: 'new' | 'edit') {
if (target === 'new') {
this.newGame.tags = (this.newGame.tags || []).filter((_, i) => i !== index);
} else {
this.editGame.tags = (this.editGame.tags || []).filter((_, i) => i !== index);
}
}
addLink(target: 'new' | 'edit') {
const title = target === 'new' ? this.newLinkTitle.trim() : this.editLinkTitle.trim();
const url = target === 'new' ? this.newLinkUrl.trim() : this.editLinkUrl.trim();
if (!title || !url) return;
if (target === 'new') {
this.newGame.links = [...(this.newGame.links || []), { title, url }];
this.newLinkTitle = '';
this.newLinkUrl = '';
} else {
this.editGame.links = [...(this.editGame.links || []), { title, url }];
this.editLinkTitle = '';
this.editLinkUrl = '';
}
}
removeLink(index: number, target: 'new' | 'edit') {
if (target === 'new') {
this.newGame.links = (this.newGame.links || []).filter((_, i) => i !== index);
} else {
this.editGame.links = (this.editGame.links || []).filter((_, i) => i !== index);
}
}
addGame() {
@@ -921,7 +1197,9 @@ export class GamesListComponent implements OnInit {
status: this.newGame.status,
rating: this.newGame.rating,
notes: this.newGame.notes,
coverImage: this.newGame.coverImage
coverImage: this.newGame.coverImage,
tags: this.newGame.tags || [],
links: this.newGame.links || []
};
this.gamesService.createGame(gameToAdd).subscribe(() => {
@@ -946,11 +1224,16 @@ export class GamesListComponent implements OnInit {
status: game.status,
rating: game.rating,
notes: game.notes,
coverImage: game.coverImage
coverImage: game.coverImage,
tags: [...(game.tags || [])],
links: [...(game.links || [])]
};
this.editGameImagePreview.set(game.coverImage || null);
this.showAddForm.set(false);
this.imageError.set(null);
this.editTagInput = '';
this.editLinkTitle = '';
this.editLinkUrl = '';
}
cancelEdit() {
@@ -958,6 +1241,9 @@ export class GamesListComponent implements OnInit {
this.editGame = {};
this.editGameImagePreview.set(null);
this.imageError.set(null);
this.editTagInput = '';
this.editLinkTitle = '';
this.editLinkUrl = '';
}
saveEdit() {
apps/frontend/src/app/components/manga/manga-list.component.ts
+295 -5
View File
@@ -12,7 +12,7 @@ import { AuthService } from '../../services/auth.service';
import { CommentsService } from '../../services/comments.service';
import { SanitizeService } from '../../services/sanitize.service';
import { SuggestionService } from '../../services/suggestion.service';
import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, SuggestionEntity } from '@library/shared-types';
import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
@Component({
selector: 'app-manga-list',
@@ -112,6 +112,52 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
}
</div>
<div class="form-group">
<label>Tags</label>
<div class="tags-input-container">
@for (tag of newManga.tags; track tag; let i = $index) {
<span class="tag">
{{ tag }}
<button type="button" (click)="removeTag(i, 'new')" class="tag-remove">×</button>
</span>
}
<input
type="text"
[(ngModel)]="newTagInput"
name="newTagInput"
placeholder="Add a tag and press Enter"
(keydown.enter)="addTag('new'); $event.preventDefault()"
>
</div>
</div>
<div class="form-group">
<label>External Links</label>
<div class="links-list">
@for (link of newManga.links; track link.url; let i = $index) {
<div class="link-item">
<span>{{ link.title }}: {{ link.url }}</span>
<button type="button" (click)="removeLink(i, 'new')" class="btn btn-danger btn-sm">×</button>
</div>
}
</div>
<div class="link-add-form">
<input
type="text"
[(ngModel)]="newLinkTitle"
name="newLinkTitle"
placeholder="Link title (e.g., MyAnimeList)"
>
<input
type="url"
[(ngModel)]="newLinkUrl"
name="newLinkUrl"
placeholder="https://..."
>
<button type="button" (click)="addLink('new')" class="btn btn-secondary btn-sm">Add Link</button>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Add Manga</button>
<button type="button" (click)="toggleAddForm()" class="btn btn-secondary">Cancel</button>
@@ -198,6 +244,52 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
}
</div>
<div class="form-group">
<label>Tags</label>
<div class="tags-input-container">
@for (tag of editManga.tags; track tag; let i = $index) {
<span class="tag">
{{ tag }}
<button type="button" (click)="removeTag(i, 'edit')" class="tag-remove">×</button>
</span>
}
<input
type="text"
[(ngModel)]="editTagInput"
name="editTagInput"
placeholder="Add a tag and press Enter"
(keydown.enter)="addTag('edit'); $event.preventDefault()"
>
</div>
</div>
<div class="form-group">
<label>External Links</label>
<div class="links-list">
@for (link of editManga.links; track link.url; let i = $index) {
<div class="link-item">
<span>{{ link.title }}: {{ link.url }}</span>
<button type="button" (click)="removeLink(i, 'edit')" class="btn btn-danger btn-sm">×</button>
</div>
}
</div>
<div class="link-add-form">
<input
type="text"
[(ngModel)]="editLinkTitle"
name="editLinkTitle"
placeholder="Link title (e.g., MyAnimeList)"
>
<input
type="url"
[(ngModel)]="editLinkUrl"
name="editLinkUrl"
placeholder="https://..."
>
<button type="button" (click)="addLink('edit')" class="btn btn-secondary btn-sm">Add Link</button>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save Changes</button>
<button type="button" (click)="cancelEdit()" class="btn btn-secondary">Cancel</button>
@@ -335,6 +427,24 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
<p class="notes">{{ manga.notes }}</p>
}
@if (manga.tags && manga.tags.length > 0) {
<div class="tags-display">
@for (tag of manga.tags; track tag) {
<span class="tag-chip">{{ tag }}</span>
}
</div>
}
@if (manga.links && manga.links.length > 0) {
<div class="links-display">
@for (link of manga.links; track link.url) {
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
{{ link.title }} ↗
</a>
}
</div>
}
@if (authService.isAdmin()) {
<div class="actions">
<button (click)="startEdit(manga)" class="btn btn-secondary btn-sm">
@@ -801,6 +911,116 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
input[type="file"]:hover {
border-color: #ec4899;
}
.tags-input-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
background: #f9fafb;
}
.tags-input-container input {
flex: 1;
min-width: 150px;
border: none;
padding: 0.25rem;
font-size: 0.9rem;
background: transparent;
}
.tags-input-container input:focus {
outline: none;
}
.tag {
display: inline-flex;
align-items: center;
gap: 0.25rem;
background: #00b894;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.85rem;
}
.tag-remove {
background: none;
border: none;
color: white;
cursor: pointer;
padding: 0;
font-size: 1rem;
line-height: 1;
}
.tag-remove:hover {
opacity: 0.8;
}
.tags-display {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0;
}
.tag-chip {
background: rgba(0, 184, 148, 0.2);
color: #00b894;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
}
.links-list {
margin-bottom: 0.5rem;
}
.link-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
background: #f9fafb;
border-radius: 4px;
margin-bottom: 0.25rem;
}
.link-add-form {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.link-add-form input {
flex: 1;
min-width: 120px;
}
.links-display {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0;
}
.external-link {
color: #00b894;
text-decoration: none;
font-size: 0.85rem;
padding: 0.2rem 0.5rem;
background: rgba(0, 184, 148, 0.1);
border-radius: 4px;
transition: background 0.2s;
}
.external-link:hover {
background: rgba(0, 184, 148, 0.2);
text-decoration: underline;
}
`]
})
export class MangaListComponent implements OnInit {
@@ -857,11 +1077,21 @@ export class MangaListComponent implements OnInit {
author: '',
status: MangaStatus.wantToRead,
rating: undefined,
notes: ''
notes: '',
tags: [],
links: []
};
editManga: Partial<UpdateMangaDto> = {};
// Tags and links input state
newTagInput = '';
editTagInput = '';
newLinkTitle = '';
newLinkUrl = '';
editLinkTitle = '';
editLinkUrl = '';
ngOnInit() {
this.loadManga();
}
@@ -905,10 +1135,60 @@ export class MangaListComponent implements OnInit {
status: MangaStatus.wantToRead,
rating: undefined,
notes: '',
coverImage: undefined
coverImage: undefined,
tags: [],
links: []
};
this.newMangaImagePreview.set(null);
this.imageError.set(null);
this.newTagInput = '';
this.newLinkTitle = '';
this.newLinkUrl = '';
}
addTag(target: 'new' | 'edit') {
const input = target === 'new' ? this.newTagInput.trim() : this.editTagInput.trim();
if (!input) return;
if (target === 'new') {
this.newManga.tags = [...(this.newManga.tags || []), input];
this.newTagInput = '';
} else {
this.editManga.tags = [...(this.editManga.tags || []), input];
this.editTagInput = '';
}
}
removeTag(index: number, target: 'new' | 'edit') {
if (target === 'new') {
this.newManga.tags = (this.newManga.tags || []).filter((_, i) => i !== index);
} else {
this.editManga.tags = (this.editManga.tags || []).filter((_, i) => i !== index);
}
}
addLink(target: 'new' | 'edit') {
const title = target === 'new' ? this.newLinkTitle.trim() : this.editLinkTitle.trim();
const url = target === 'new' ? this.newLinkUrl.trim() : this.editLinkUrl.trim();
if (!title || !url) return;
if (target === 'new') {
this.newManga.links = [...(this.newManga.links || []), { title, url }];
this.newLinkTitle = '';
this.newLinkUrl = '';
} else {
this.editManga.links = [...(this.editManga.links || []), { title, url }];
this.editLinkTitle = '';
this.editLinkUrl = '';
}
}
removeLink(index: number, target: 'new' | 'edit') {
if (target === 'new') {
this.newManga.links = (this.newManga.links || []).filter((_, i) => i !== index);
} else {
this.editManga.links = (this.editManga.links || []).filter((_, i) => i !== index);
}
}
addManga() {
@@ -920,7 +1200,9 @@ export class MangaListComponent implements OnInit {
status: this.newManga.status,
rating: this.newManga.rating,
notes: this.newManga.notes,
coverImage: this.newManga.coverImage
coverImage: this.newManga.coverImage,
tags: this.newManga.tags || [],
links: this.newManga.links || []
};
this.mangaService.createManga(mangaToAdd).subscribe(() => {
@@ -945,11 +1227,16 @@ export class MangaListComponent implements OnInit {
status: manga.status,
rating: manga.rating,
notes: manga.notes,
coverImage: manga.coverImage
coverImage: manga.coverImage,
tags: [...(manga.tags || [])],
links: [...(manga.links || [])]
};
this.editMangaImagePreview.set(manga.coverImage || null);
this.showAddForm.set(false);
this.imageError.set(null);
this.editTagInput = '';
this.editLinkTitle = '';
this.editLinkUrl = '';
}
cancelEdit() {
@@ -957,6 +1244,9 @@ export class MangaListComponent implements OnInit {
this.editManga = {};
this.editMangaImagePreview.set(null);
this.imageError.set(null);
this.editTagInput = '';
this.editLinkTitle = '';
this.editLinkUrl = '';
}
saveEdit() {
apps/frontend/src/app/components/music/music-list.component.ts
+295 -5
View File
@@ -12,7 +12,7 @@ import { AuthService } from '../../services/auth.service';
import { CommentsService } from '../../services/comments.service';
import { SanitizeService } from '../../services/sanitize.service';
import { SuggestionService } from '../../services/suggestion.service';
import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment, SuggestionEntity } from '@library/shared-types';
import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
@Component({
selector: 'app-music-list',
@@ -121,6 +121,52 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
}
</div>
<div class="form-group">
<label>Tags</label>
<div class="tags-input-container">
@for (tag of newMusic.tags; track tag; let i = $index) {
<span class="tag">
{{ tag }}
<button type="button" (click)="removeTag(i, 'new')" class="tag-remove">×</button>
</span>
}
<input
type="text"
[(ngModel)]="newTagInput"
name="newTagInput"
placeholder="Add a tag and press Enter"
(keydown.enter)="addTag('new'); $event.preventDefault()"
>
</div>
</div>
<div class="form-group">
<label>External Links</label>
<div class="links-list">
@for (link of newMusic.links; track link.url; let i = $index) {
<div class="link-item">
<span>{{ link.title }}: {{ link.url }}</span>
<button type="button" (click)="removeLink(i, 'new')" class="btn btn-danger btn-sm">×</button>
</div>
}
</div>
<div class="link-add-form">
<input
type="text"
[(ngModel)]="newLinkTitle"
name="newLinkTitle"
placeholder="Link title (e.g., Spotify)"
>
<input
type="url"
[(ngModel)]="newLinkUrl"
name="newLinkUrl"
placeholder="https://..."
>
<button type="button" (click)="addLink('new')" class="btn btn-secondary btn-sm">Add Link</button>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Add Music</button>
<button type="button" (click)="toggleAddForm()" class="btn btn-secondary">Cancel</button>
@@ -216,6 +262,52 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
}
</div>
<div class="form-group">
<label>Tags</label>
<div class="tags-input-container">
@for (tag of editMusicData.tags; track tag; let i = $index) {
<span class="tag">
{{ tag }}
<button type="button" (click)="removeTag(i, 'edit')" class="tag-remove">×</button>
</span>
}
<input
type="text"
[(ngModel)]="editTagInput"
name="editTagInput"
placeholder="Add a tag and press Enter"
(keydown.enter)="addTag('edit'); $event.preventDefault()"
>
</div>
</div>
<div class="form-group">
<label>External Links</label>
<div class="links-list">
@for (link of editMusicData.links; track link.url; let i = $index) {
<div class="link-item">
<span>{{ link.title }}: {{ link.url }}</span>
<button type="button" (click)="removeLink(i, 'edit')" class="btn btn-danger btn-sm">×</button>
</div>
}
</div>
<div class="link-add-form">
<input
type="text"
[(ngModel)]="editLinkTitle"
name="editLinkTitle"
placeholder="Link title (e.g., Spotify)"
>
<input
type="url"
[(ngModel)]="editLinkUrl"
name="editLinkUrl"
placeholder="https://..."
>
<button type="button" (click)="addLink('edit')" class="btn btn-secondary btn-sm">Add Link</button>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save Changes</button>
<button type="button" (click)="cancelEdit()" class="btn btn-secondary">Cancel</button>
@@ -411,6 +503,24 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
<p class="notes">{{ music.notes }}</p>
}
@if (music.tags && music.tags.length > 0) {
<div class="tags-display">
@for (tag of music.tags; track tag) {
<span class="tag-chip">{{ tag }}</span>
}
</div>
}
@if (music.links && music.links.length > 0) {
<div class="links-display">
@for (link of music.links; track link.url) {
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
{{ link.title }} ↗
</a>
}
</div>
}
@if (music.dateCompleted) {
<p class="date-completed">
Completed: {{ formatDate(music.dateCompleted) }}
@@ -1008,6 +1118,116 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
input[type="file"]:hover {
border-color: var(--witch-rose);
}
.tags-input-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.5rem;
border: 2px solid var(--witch-lavender);
border-radius: 4px;
background: var(--witch-moon);
}
.tags-input-container input {
flex: 1;
min-width: 150px;
border: none;
padding: 0.25rem;
font-size: 0.9rem;
background: transparent;
}
.tags-input-container input:focus {
outline: none;
}
.tag {
display: inline-flex;
align-items: center;
gap: 0.25rem;
background: #74b9ff;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.85rem;
}
.tag-remove {
background: none;
border: none;
color: white;
cursor: pointer;
padding: 0;
font-size: 1rem;
line-height: 1;
}
.tag-remove:hover {
opacity: 0.8;
}
.tags-display {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0;
}
.tag-chip {
background: rgba(116, 185, 255, 0.2);
color: #74b9ff;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
}
.links-list {
margin-bottom: 0.5rem;
}
.link-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
background: var(--witch-moon);
border-radius: 4px;
margin-bottom: 0.25rem;
}
.link-add-form {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.link-add-form input {
flex: 1;
min-width: 120px;
}
.links-display {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0;
}
.external-link {
color: #74b9ff;
text-decoration: none;
font-size: 0.85rem;
padding: 0.2rem 0.5rem;
background: rgba(116, 185, 255, 0.1);
border-radius: 4px;
transition: background 0.2s;
}
.external-link:hover {
background: rgba(116, 185, 255, 0.2);
text-decoration: underline;
}
`]
})
export class MusicListComponent implements OnInit {
@@ -1085,11 +1305,21 @@ export class MusicListComponent implements OnInit {
type: MusicType.album,
status: MusicStatus.wantToListen,
rating: undefined,
notes: ''
notes: '',
tags: [],
links: []
};
editMusicData: Partial<UpdateMusicDto> = {};
// Tags and links input state
newTagInput = '';
editTagInput = '';
newLinkTitle = '';
newLinkUrl = '';
editLinkTitle = '';
editLinkUrl = '';
ngOnInit() {
this.loadMusic();
}
@@ -1146,10 +1376,60 @@ export class MusicListComponent implements OnInit {
status: MusicStatus.wantToListen,
rating: undefined,
notes: '',
coverArt: undefined
coverArt: undefined,
tags: [],
links: []
};
this.newMusicImagePreview.set(null);
this.imageError.set(null);
this.newTagInput = '';
this.newLinkTitle = '';
this.newLinkUrl = '';
}
addTag(target: 'new' | 'edit') {
const input = target === 'new' ? this.newTagInput.trim() : this.editTagInput.trim();
if (!input) return;
if (target === 'new') {
this.newMusic.tags = [...(this.newMusic.tags || []), input];
this.newTagInput = '';
} else {
this.editMusicData.tags = [...(this.editMusicData.tags || []), input];
this.editTagInput = '';
}
}
removeTag(index: number, target: 'new' | 'edit') {
if (target === 'new') {
this.newMusic.tags = (this.newMusic.tags || []).filter((_, i) => i !== index);
} else {
this.editMusicData.tags = (this.editMusicData.tags || []).filter((_, i) => i !== index);
}
}
addLink(target: 'new' | 'edit') {
const title = target === 'new' ? this.newLinkTitle.trim() : this.editLinkTitle.trim();
const url = target === 'new' ? this.newLinkUrl.trim() : this.editLinkUrl.trim();
if (!title || !url) return;
if (target === 'new') {
this.newMusic.links = [...(this.newMusic.links || []), { title, url }];
this.newLinkTitle = '';
this.newLinkUrl = '';
} else {
this.editMusicData.links = [...(this.editMusicData.links || []), { title, url }];
this.editLinkTitle = '';
this.editLinkUrl = '';
}
}
removeLink(index: number, target: 'new' | 'edit') {
if (target === 'new') {
this.newMusic.links = (this.newMusic.links || []).filter((_, i) => i !== index);
} else {
this.editMusicData.links = (this.editMusicData.links || []).filter((_, i) => i !== index);
}
}
addMusic() {
@@ -1162,7 +1442,9 @@ export class MusicListComponent implements OnInit {
status: this.newMusic.status,
rating: this.newMusic.rating,
notes: this.newMusic.notes,
coverArt: this.newMusic.coverArt
coverArt: this.newMusic.coverArt,
tags: this.newMusic.tags || [],
links: this.newMusic.links || []
};
this.musicService.createMusic(musicToAdd).subscribe(() => {
@@ -1188,11 +1470,16 @@ export class MusicListComponent implements OnInit {
status: music.status,
rating: music.rating,
notes: music.notes,
coverArt: music.coverArt
coverArt: music.coverArt,
tags: [...(music.tags || [])],
links: [...(music.links || [])]
};
this.editMusicImagePreview.set(music.coverArt || null);
this.showAddForm.set(false);
this.imageError.set(null);
this.editTagInput = '';
this.editLinkTitle = '';
this.editLinkUrl = '';
}
cancelEdit() {
@@ -1200,6 +1487,9 @@ export class MusicListComponent implements OnInit {
this.editMusicData = {};
this.editMusicImagePreview.set(null);
this.imageError.set(null);
this.editTagInput = '';
this.editLinkTitle = '';
this.editLinkUrl = '';
}
saveEdit() {
apps/frontend/src/app/components/shows/shows-list.component.ts
+295 -5
View File
@@ -12,7 +12,7 @@ import { AuthService } from '../../services/auth.service';
import { CommentsService } from '../../services/comments.service';
import { SanitizeService } from '../../services/sanitize.service';
import { SuggestionService } from '../../services/suggestion.service';
import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, SuggestionEntity } from '@library/shared-types';
import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
@Component({
selector: 'app-shows-list',
@@ -110,6 +110,52 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
}
</div>
<div class="form-group">
<label>Tags</label>
<div class="tags-input-container">
@for (tag of newShow.tags; track tag; let i = $index) {
<span class="tag">
{{ tag }}
<button type="button" (click)="removeTag(i, 'new')" class="tag-remove">×</button>
</span>
}
<input
type="text"
[(ngModel)]="newTagInput"
name="newTagInput"
placeholder="Add a tag and press Enter"
(keydown.enter)="addTag('new'); $event.preventDefault()"
>
</div>
</div>
<div class="form-group">
<label>External Links</label>
<div class="links-list">
@for (link of newShow.links; track link.url; let i = $index) {
<div class="link-item">
<span>{{ link.title }}: {{ link.url }}</span>
<button type="button" (click)="removeLink(i, 'new')" class="btn btn-danger btn-sm">×</button>
</div>
}
</div>
<div class="link-add-form">
<input
type="text"
[(ngModel)]="newLinkTitle"
name="newLinkTitle"
placeholder="Link title (e.g., IMDB)"
>
<input
type="url"
[(ngModel)]="newLinkUrl"
name="newLinkUrl"
placeholder="https://..."
>
<button type="button" (click)="addLink('new')" class="btn btn-secondary btn-sm">Add Link</button>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Add Show</button>
<button type="button" (click)="toggleAddForm()" class="btn btn-secondary">Cancel</button>
@@ -194,6 +240,52 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
}
</div>
<div class="form-group">
<label>Tags</label>
<div class="tags-input-container">
@for (tag of editShow.tags; track tag; let i = $index) {
<span class="tag">
{{ tag }}
<button type="button" (click)="removeTag(i, 'edit')" class="tag-remove">×</button>
</span>
}
<input
type="text"
[(ngModel)]="editTagInput"
name="editTagInput"
placeholder="Add a tag and press Enter"
(keydown.enter)="addTag('edit'); $event.preventDefault()"
>
</div>
</div>
<div class="form-group">
<label>External Links</label>
<div class="links-list">
@for (link of editShow.links; track link.url; let i = $index) {
<div class="link-item">
<span>{{ link.title }}: {{ link.url }}</span>
<button type="button" (click)="removeLink(i, 'edit')" class="btn btn-danger btn-sm">×</button>
</div>
}
</div>
<div class="link-add-form">
<input
type="text"
[(ngModel)]="editLinkTitle"
name="editLinkTitle"
placeholder="Link title (e.g., IMDB)"
>
<input
type="url"
[(ngModel)]="editLinkUrl"
name="editLinkUrl"
placeholder="https://..."
>
<button type="button" (click)="addLink('edit')" class="btn btn-secondary btn-sm">Add Link</button>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save Changes</button>
<button type="button" (click)="cancelEdit()" class="btn btn-secondary">Cancel</button>
@@ -329,6 +421,24 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
<p class="notes">{{ show.notes }}</p>
}
@if (show.tags && show.tags.length > 0) {
<div class="tags-display">
@for (tag of show.tags; track tag) {
<span class="tag-chip">{{ tag }}</span>
}
</div>
}
@if (show.links && show.links.length > 0) {
<div class="links-display">
@for (link of show.links; track link.url) {
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
{{ link.title }} ↗
</a>
}
</div>
}
@if (authService.isAdmin()) {
<div class="actions">
<button (click)="startEdit(show)" class="btn btn-secondary btn-sm">
@@ -794,6 +904,116 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
input[type="file"]:hover {
border-color: #8b5cf6;
}
.tags-input-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
background: #f9fafb;
}
.tags-input-container input {
flex: 1;
min-width: 150px;
border: none;
padding: 0.25rem;
font-size: 0.9rem;
background: transparent;
}
.tags-input-container input:focus {
outline: none;
}
.tag {
display: inline-flex;
align-items: center;
gap: 0.25rem;
background: #e84393;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.85rem;
}
.tag-remove {
background: none;
border: none;
color: white;
cursor: pointer;
padding: 0;
font-size: 1rem;
line-height: 1;
}
.tag-remove:hover {
opacity: 0.8;
}
.tags-display {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0;
}
.tag-chip {
background: rgba(232, 67, 147, 0.2);
color: #e84393;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
}
.links-list {
margin-bottom: 0.5rem;
}
.link-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
background: #f9fafb;
border-radius: 4px;
margin-bottom: 0.25rem;
}
.link-add-form {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.link-add-form input {
flex: 1;
min-width: 120px;
}
.links-display {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0;
}
.external-link {
color: #e84393;
text-decoration: none;
font-size: 0.85rem;
padding: 0.2rem 0.5rem;
background: rgba(232, 67, 147, 0.1);
border-radius: 4px;
transition: background 0.2s;
}
.external-link:hover {
background: rgba(232, 67, 147, 0.2);
text-decoration: underline;
}
`]
})
export class ShowsListComponent implements OnInit {
@@ -851,11 +1071,21 @@ export class ShowsListComponent implements OnInit {
type: ShowType.tvSeries,
status: ShowStatus.wantToWatch,
rating: undefined,
notes: ''
notes: '',
tags: [],
links: []
};
editShow: Partial<UpdateShowDto> = {};
// Tags and links input state
newTagInput = '';
editTagInput = '';
newLinkTitle = '';
newLinkUrl = '';
editLinkTitle = '';
editLinkUrl = '';
ngOnInit() {
this.loadShows();
}
@@ -908,10 +1138,60 @@ export class ShowsListComponent implements OnInit {
status: ShowStatus.wantToWatch,
rating: undefined,
notes: '',
coverImage: undefined
coverImage: undefined,
tags: [],
links: []
};
this.newShowImagePreview.set(null);
this.imageError.set(null);
this.newTagInput = '';
this.newLinkTitle = '';
this.newLinkUrl = '';
}
addTag(target: 'new' | 'edit') {
const input = target === 'new' ? this.newTagInput.trim() : this.editTagInput.trim();
if (!input) return;
if (target === 'new') {
this.newShow.tags = [...(this.newShow.tags || []), input];
this.newTagInput = '';
} else {
this.editShow.tags = [...(this.editShow.tags || []), input];
this.editTagInput = '';
}
}
removeTag(index: number, target: 'new' | 'edit') {
if (target === 'new') {
this.newShow.tags = (this.newShow.tags || []).filter((_, i) => i !== index);
} else {
this.editShow.tags = (this.editShow.tags || []).filter((_, i) => i !== index);
}
}
addLink(target: 'new' | 'edit') {
const title = target === 'new' ? this.newLinkTitle.trim() : this.editLinkTitle.trim();
const url = target === 'new' ? this.newLinkUrl.trim() : this.editLinkUrl.trim();
if (!title || !url) return;
if (target === 'new') {
this.newShow.links = [...(this.newShow.links || []), { title, url }];
this.newLinkTitle = '';
this.newLinkUrl = '';
} else {
this.editShow.links = [...(this.editShow.links || []), { title, url }];
this.editLinkTitle = '';
this.editLinkUrl = '';
}
}
removeLink(index: number, target: 'new' | 'edit') {
if (target === 'new') {
this.newShow.links = (this.newShow.links || []).filter((_, i) => i !== index);
} else {
this.editShow.links = (this.editShow.links || []).filter((_, i) => i !== index);
}
}
addShow() {
@@ -923,7 +1203,9 @@ export class ShowsListComponent implements OnInit {
status: this.newShow.status,
rating: this.newShow.rating,
notes: this.newShow.notes,
coverImage: this.newShow.coverImage
coverImage: this.newShow.coverImage,
tags: this.newShow.tags || [],
links: this.newShow.links || []
};
this.showsService.createShow(showToAdd).subscribe(() => {
@@ -948,11 +1230,16 @@ export class ShowsListComponent implements OnInit {
status: show.status,
rating: show.rating,
notes: show.notes,
coverImage: show.coverImage
coverImage: show.coverImage,
tags: [...(show.tags || [])],
links: [...(show.links || [])]
};
this.editShowImagePreview.set(show.coverImage || null);
this.showAddForm.set(false);
this.imageError.set(null);
this.editTagInput = '';
this.editLinkTitle = '';
this.editLinkUrl = '';
}
cancelEdit() {
@@ -960,6 +1247,9 @@ export class ShowsListComponent implements OnInit {
this.editShow = {};
this.editShowImagePreview.set(null);
this.imageError.set(null);
this.editTagInput = '';
this.editLinkTitle = '';
this.editLinkUrl = '';
}
saveEdit() {