More Polish (#2320)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.html

@@ -1,19 +1,22 @@
 <ng-container *transloco="let t">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title">
-      <ng-container *ngIf="CoverUrl as coverUrl">
-        <app-image *ngIf="coverUrl" height="230px" width="160px" maxHeight="230px" objectFit="contain" [imageUrl]="coverUrl"></app-image>
-        <div class="">
-          {{name}}
-        </div>
-      </ng-container>
+      {{name}}
     </h5>
     <button type="button" class="btn-close text-reset" [attr.aria-label]="t('common.close')" (click)="close()"></button>
   </div>
 
   <div class="offcanvas-body">
+    <ng-container *ngIf="CoverUrl as coverUrl">
+      <div style="width: 160px" class="mx-auto mb-3">
+        <app-image *ngIf="coverUrl" height="230px" width="160px" maxHeight="230px" objectFit="contain" [imageUrl]="coverUrl"></app-image>
+      </div>
+    </ng-container>
+
     <ng-container *ngIf="externalSeries; else localSeriesBody">
-      <span *ngIf="(externalSeries.volumeCount || 0) > 0 || (externalSeries.chapterCount || 0) > 0" class="text-muted" style="font-size: 14px; color: lightgrey">{{t('series-preview-drawer.vols-and-chapters', {volCount: externalSeries.volumeCount, chpCount: externalSeries.chapterCount})}}</span>
+      <div *ngIf="(externalSeries.volumeCount || 0) > 0 || (externalSeries.chapterCount || 0) > 0" class="text-muted muted mb-2">
+        {{t('series-preview-drawer.vols-and-chapters', {volCount: externalSeries.volumeCount, chpCount: externalSeries.chapterCount})}}
+      </div>
       <app-read-more *ngIf="externalSeries.summary" [maxLength]="300" [text]="externalSeries.summary"></app-read-more>
 
       <div class="mt-3">
@@ -64,7 +67,14 @@
 
     <ng-template #localSeriesBody>
       <ng-container *ngIf="localSeries">
-        <span class="text-muted" style="font-size: 14px; color: lightgrey">{{localSeries.publicationStatus | publicationStatus}}</span>
+        <div class="d-inline-block mb-2" style="width: 100%">
+          <span class="text-muted muted">{{localSeries.publicationStatus | publicationStatus}}</span>
+          <button class="btn btn-secondary btn-sm float-end me-3"
+                  (click)="toggleWantToRead()"
+                  ngbTooltip="{{wantToRead ? t('series-preview-drawer.remove-from-want-to-read') : t('series-preview-drawer.add-to-want-to-read')}}">
+            <i class="{{wantToRead ? 'fa-solid' : 'fa-regular'}} fa-star" aria-hidden="true"></i>
+          </button>
+        </div>
         <app-read-more [maxLength]="300" [text]="localSeries.summary"></app-read-more>
 
         <div class="mt-3">

UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.scss

@@ -8,3 +8,7 @@
 ::ng-deep .person-img {
   margin-top: 24px; margin-left: 24px;
 }
+
+.muted {
+  font-size: 14px;
+}

UI/Web/src/app/_single-module/series-preview-drawer/series-preview-drawer.component.ts

@@ -1,7 +1,7 @@
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {TranslocoDirective} from "@ngneat/transloco";
-import {NgbActiveOffcanvas} from "@ng-bootstrap/ng-bootstrap";
+import {NgbActiveOffcanvas, NgbTooltip} from "@ng-bootstrap/ng-bootstrap";
 import {ExternalSeriesDetail, SeriesStaff} from "../../_models/series-detail/external-series-detail";
 import {SeriesService} from "../../_services/series.service";
 import {ImageComponent} from "../../shared/image/image.component";
@@ -15,11 +15,12 @@ import {ImageService} from "../../_services/image.service";
 import {PublicationStatusPipe} from "../../pipe/publication-status.pipe";
 import {SeriesMetadata} from "../../_models/metadata/series-metadata";
 import {ReadMoreComponent} from "../../shared/read-more/read-more.component";
+import {ActionService} from "../../_services/action.service";
 
 @Component({
   selector: 'app-series-preview-drawer',
   standalone: true,
-  imports: [CommonModule, TranslocoDirective, ImageComponent, LoadingComponent, SafeHtmlPipe, A11yClickDirective, MetadataDetailComponent, PersonBadgeComponent, TagBadgeComponent, PublicationStatusPipe, ReadMoreComponent],
+  imports: [CommonModule, TranslocoDirective, ImageComponent, LoadingComponent, SafeHtmlPipe, A11yClickDirective, MetadataDetailComponent, PersonBadgeComponent, TagBadgeComponent, PublicationStatusPipe, ReadMoreComponent, NgbTooltip],
   templateUrl: './series-preview-drawer.component.html',
   styleUrls: ['./series-preview-drawer.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -37,10 +38,12 @@ export class SeriesPreviewDrawerComponent implements OnInit {
   externalSeries: ExternalSeriesDetail | undefined;
   localSeries: SeriesMetadata | undefined;
   url: string = '';
+  wantToRead: boolean = false;
 
   private readonly activeOffcanvas = inject(NgbActiveOffcanvas);
   private readonly seriesService = inject(SeriesService);
   private readonly imageService = inject(ImageService);
+  private readonly actionService = inject(ActionService);
   private readonly cdRef = inject(ChangeDetectorRef);
 
   get CoverUrl() {
@@ -56,29 +59,52 @@ export class SeriesPreviewDrawerComponent implements OnInit {
     if (this.isExternalSeries) {
       this.seriesService.getExternalSeriesDetails(this.aniListId, this.malId).subscribe(externalSeries => {
         this.externalSeries = externalSeries;
+
         this.isLoading = false;
         if (this.externalSeries.siteUrl) {
           this.url = this.externalSeries.siteUrl;
         }
 
-        console.log('External Series Detail: ', this.externalSeries);
         this.cdRef.markForCheck();
       });
     } else {
       this.seriesService.getMetadata(this.seriesId!).subscribe(data => {
         this.localSeries = data;
+
+        // Consider the localSeries has no metadata, try to merge the external Series metadata
+        if (this.localSeries.summary === '' && this.localSeries.genres.length === 0) {
+          this.seriesService.getExternalSeriesDetails(0, 0, this.seriesId).subscribe(externalSeriesData => {
+            this.isExternalSeries = true;
+            this.externalSeries = externalSeriesData;
+            this.cdRef.markForCheck();
+          })
+        }
+
+        this.seriesService.isWantToRead(this.seriesId!).subscribe(wantToRead => {
+          this.wantToRead = wantToRead;
+          this.cdRef.markForCheck();
+        });
+
         this.isLoading = false;
         this.url = 'library/' + this.libraryId + '/series/' + this.seriesId;
         this.localStaff = data.writers.map(p => {
           return {name: p.name, role: 'Story & Art'} as SeriesStaff;
         });
         this.cdRef.markForCheck();
-      })
-
+      });
     }
 
+  }
 
+  toggleWantToRead() {
+    if (this.wantToRead) {
+      this.actionService.removeMultipleSeriesFromWantToReadList([this.seriesId!]);
+    } else {
+      this.actionService.addMultipleSeriesToWantToReadList([this.seriesId!]);
+    }
 
+    this.wantToRead = !this.wantToRead;
+    this.cdRef.markForCheck();
   }
 
   close() {