feat: add tags and links

2026-02-04 19:49:27 -08:00
parent 9902c5ad45
commit b9f33bc055
21 changed files with 1873 additions and 31 deletions
@@ -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() {