Type:
@@ -716,6 +761,82 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
margin-top: 1rem;
}
+ .search-section {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+ margin-bottom: 1rem;
+ flex-wrap: wrap;
+ }
+
+ .search-input {
+ flex: 1;
+ min-width: 250px;
+ padding: 0.5rem 1rem;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 1rem;
+ }
+
+ .search-input:focus {
+ outline: none;
+ border-color: #8b5cf6;
+ }
+
+ .advanced-filters {
+ background: #f8f9fa;
+ padding: 1rem;
+ border-radius: 8px;
+ margin-bottom: 1rem;
+ }
+
+ .filter-group h4 {
+ margin: 0 0 0.75rem 0;
+ color: #374151;
+ font-size: 0.95rem;
+ font-weight: 600;
+ }
+
+ .tags-filter {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+ }
+
+ .tag-checkbox {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ cursor: pointer;
+ padding: 0.25rem 0.75rem;
+ border: 1px solid #e5e7eb;
+ border-radius: 20px;
+ background: white;
+ transition: all 0.2s;
+ }
+
+ .tag-checkbox:hover {
+ border-color: #8b5cf6;
+ background: #f3e8ff;
+ }
+
+ .tag-checkbox input[type="checkbox"] {
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+ }
+
+ .tag-checkbox span {
+ font-size: 0.875rem;
+ color: #374151;
+ }
+
+ .no-tags {
+ color: #6b7280;
+ font-style: italic;
+ font-size: 0.875rem;
+ }
+
.filters {
display: flex;
flex-direction: column;
@@ -1265,6 +1386,11 @@ export class MusicListComponent implements OnInit {
currentPage = signal(1);
pageSize = signal(25);
+ // Search and filter state
+ searchQuery = signal('');
+ selectedTags = signal
([]);
+ showFilters = signal(false);
+
// Comments state
comments = signal>({});
commentsLoading = signal>({});
@@ -1304,6 +1430,14 @@ export class MusicListComponent implements OnInit {
completedCount = computed(() => this.music().filter(m => m.status === MusicStatus.completed).length);
wantToListenCount = computed(() => this.music().filter(m => m.status === MusicStatus.wantToListen).length);
+ allTags = computed(() => {
+ const tagsSet = new Set();
+ this.music().forEach(music => {
+ music.tags?.forEach(tag => tagsSet.add(tag));
+ });
+ return Array.from(tagsSet).sort();
+ });
+
filteredMusic = computed(() => {
let filtered = this.music();
@@ -1317,6 +1451,25 @@ export class MusicListComponent implements OnInit {
filtered = filtered.filter(music => music.status === statusFilter);
}
+ // Apply search filter
+ const searchQuery = this.searchQuery().toLowerCase().trim();
+ if (searchQuery) {
+ filtered = filtered.filter(music =>
+ music.title.toLowerCase().includes(searchQuery) ||
+ music.artist.toLowerCase().includes(searchQuery) ||
+ music.notes?.toLowerCase().includes(searchQuery) ||
+ this.getTypeLabel(music.type).toLowerCase().includes(searchQuery)
+ );
+ }
+
+ // Apply tag filter
+ const selectedTags = this.selectedTags();
+ if (selectedTags.length > 0) {
+ filtered = filtered.filter(music =>
+ selectedTags.every(tag => music.tags?.includes(tag))
+ );
+ }
+
return filtered;
});
@@ -1377,6 +1530,28 @@ export class MusicListComponent implements OnInit {
this.currentPage.set(1); // Reset to first page when filter changes
}
+ toggleTag(tag: string) {
+ const current = this.selectedTags();
+ if (current.includes(tag)) {
+ this.selectedTags.set(current.filter(t => t !== tag));
+ } else {
+ this.selectedTags.set([...current, tag]);
+ }
+ this.currentPage.set(1); // Reset to first page when tags change
+ }
+
+ clearFilters() {
+ this.searchQuery.set('');
+ this.selectedTags.set([]);
+ this.typeFilter.set('all');
+ this.statusFilter.set('all');
+ this.currentPage.set(1);
+ }
+
+ toggleFilters() {
+ this.showFilters.update(v => !v);
+ }
+
onPageChange(page: number) {
this.currentPage.set(page);
}
diff --git a/apps/frontend/src/app/components/shows/shows-list.component.ts b/apps/frontend/src/app/components/shows/shows-list.component.ts
index c01f1a4..094351c 100644
--- a/apps/frontend/src/app/components/shows/shows-list.component.ts
+++ b/apps/frontend/src/app/components/shows/shows-list.component.ts
@@ -358,6 +358,51 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
}
+
+
+
+ @if (searchQuery() || selectedTags().length > 0) {
+
+ }
+
+
+ @if (showFilters()) {
+
+ }
+