Implement click-to-filter for series and publisher from book metadata

booklore-ui/src/app/book/metadata/book-metadata-center/metadata-viewer/metadata-viewer.component.html

@@ -29,8 +29,13 @@
           <div class="pl-6 flex flex-col">
             <div class="flex flex-row items-center justify-between">
               <div>
-                @if (book?.metadata!.seriesName) {
+                @if (book?.metadata?.seriesName) {
-                  <p class="italic">{{ book?.metadata!.seriesName }} #{{ book?.metadata!.seriesNumber }}</p>
+                  <p class="underline hover:opacity-80 cursor-pointer" (click)="goToSeries(book?.metadata?.seriesName!)">
+                    {{ book?.metadata?.seriesName }}
+                    @if (book?.metadata?.seriesNumber) {
+                      #{{ book?.metadata?.seriesNumber }}
+                    }
+                  </p>
                 }
                 <div class="flex items-center gap-2">
                   <p class="text-2xl font-bold m-0">{{ book?.metadata!.title }}</p>
@@ -163,7 +168,16 @@
                   <p-menu #menu [popup]="true" [model]="readStatusMenuItems"></p-menu>
                 </p>
               </div>
-              <p class="whitespace-nowrap max-w-[250px] overflow-hidden text-ellipsis"><span class="font-bold">Publisher:</span> {{ book?.metadata!.publisher || '-' }}</p>
+              <p class="whitespace-nowrap max-w-[250px] overflow-hidden text-ellipsis">
+                <span class="font-bold">Publisher: </span>
+                @if (book?.metadata?.publisher) {
+                  <span class="underline hover:opacity-80 cursor-pointer" (click)="goToPublisher(book?.metadata?.publisher!)">
+                    {{ book?.metadata?.publisher }}
+                  </span>
+                } @else {
+                  <span>-</span>
+                }
+              </p>
               <p class="whitespace-nowrap"><span class="font-bold">Published:</span> {{ book?.metadata!.publishedDate || '-' }}</p>
               <p class="whitespace-nowrap"><span class="font-bold">Language:</span> {{ book?.metadata!.language || '-' }}</p>
               <p class="whitespace-nowrap"><span class="font-bold">ISBN 10:</span> {{ book?.metadata!.isbn10 || '-' }}</p>
@@ -311,12 +325,12 @@
       @if (book.metadata!.description && book.metadata!.description.length > 100) {
         <div class="text-left">
           <button pButton
-            type="button"
+                  type="button"
-            [label]="isExpanded ? 'Show less' : 'Show more'"
+                  [label]="isExpanded ? 'Show less' : 'Show more'"
-            [icon]="isExpanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"
+                  [icon]="isExpanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"
-            iconPos="right"
+                  iconPos="right"
-            class="p-button-text p-button-sm"
+                  class="p-button-text p-button-sm"
-            (click)="toggleExpand()">
+                  (click)="toggleExpand()">
           </button>
         </div>
       }

booklore-ui/src/app/book/metadata/book-metadata-center/metadata-viewer/metadata-viewer.component.ts

@@ -374,47 +374,42 @@ export class MetadataViewerComponent implements OnInit, OnChanges {
   }
 
   goToAuthorBooks(author: string): void {
-    if (this.metadataCenterViewMode === 'dialog') {
+    this.handleMetadataClick('author', author);
-      this.dialogRef?.close();
-      setTimeout(() => this.navigateToAuthorBooks(author), 200);
-    } else {
-      this.navigateToAuthorBooks(author);
-    }
-  }
-
-  private navigateToAuthorBooks(author: string): void {
-    this.router.navigate(['/all-books'], {
-      queryParams: {
-        view: 'grid',
-        sort: 'title',
-        direction: 'asc',
-        sidebar: true,
-        filter: `author:${author}`
-      }
-    });
   }
 
   goToCategory(category: string): void {
-    if (this.metadataCenterViewMode === 'dialog') {
+    this.handleMetadataClick('category', category);
-      this.dialogRef?.close();
-      setTimeout(() => this.navigateToCategory(category), 200);
-    } else {
-      this.navigateToCategory(category);
-    }
   }
 
-  private navigateToCategory(category: string): void {
+  goToSeries(seriesName: string): void {
+    this.handleMetadataClick('series', seriesName);
+  }
+
+  goToPublisher(publisher: string): void {
+    this.handleMetadataClick('publisher', publisher);
+  }
+
+  private navigateToFilteredBooks(filterKey: string, filterValue: string): void {
     this.router.navigate(['/all-books'], {
       queryParams: {
         view: 'grid',
         sort: 'title',
         direction: 'asc',
         sidebar: true,
-        filter: `category:${category}`
+        filter: `${filterKey}:${filterValue}`
       }
     });
   }
 
+  private handleMetadataClick(filterKey: string, filterValue: string): void {
+    if (this.metadataCenterViewMode === 'dialog') {
+      this.dialogRef?.close();
+      setTimeout(() => this.navigateToFilteredBooks(filterKey, filterValue), 200);
+    } else {
+      this.navigateToFilteredBooks(filterKey, filterValue);
+    }
+  }
+
   getStatusSeverity(status: string): 'success' | 'secondary' | 'info' | 'warn' | 'danger' | undefined {
     const normalized = status?.toUpperCase();
     if (['UNREAD', 'PAUSED'].includes(normalized)) return 'secondary';