Display chapter reviews in volume page

API/Controllers/VolumeController.cs

@@ -1,9 +1,11 @@
-using System.Linq;
+using System.Collections.Generic;
+using System.Linq;
 using System.Threading.Tasks;
 using API.Constants;
 using API.Data;
 using API.Data.Repositories;
 using API.DTOs;
+using API.DTOs.SeriesDetail;
 using API.Extensions;
 using API.Services;
 using API.SignalR;
@@ -81,4 +83,15 @@ public class VolumeController : BaseApiController
 
         return Ok(true);
     }
+
+    /// <summary>
+    /// Returns all reviews related to this volume, that is, the union of reviews of this volumes chapters
+    /// </summary>
+    /// <param name="volumeId"></param>
+    /// <returns></returns>
+    [HttpGet("review")]
+    public async Task<IList<UserReviewDto>> VolumeReviews([FromQuery] int volumeId)
+    {
+        return await _unitOfWork.UserRepository.GetUserRatingDtosForVolumeAsync(volumeId, User.GetUserId());
+    }
 }

API/DTOs/SeriesDetail/UserReviewDto.cs

@@ -26,6 +26,8 @@ public class UserReviewDto
     /// The series this is for
     /// </summary>
     public int SeriesId { get; set; }
+    public int? VolumeId { get; set; }
+    public int? ChapterId { get; set; }
     /// <summary>
     /// The library this series belongs in
     /// </summary>

API/Data/Repositories/UserRepository.cs

@@ -67,6 +67,7 @@ public interface IUserRepository
     Task<IList<string>> GetRoles(int userId);
     Task<AppUserRating?> GetUserRatingAsync(int seriesId, int userId);
     Task<IList<UserReviewDto>> GetUserRatingDtosForSeriesAsync(int seriesId, int userId);
+    Task<IList<UserReviewDto>> GetUserRatingDtosForVolumeAsync(int volumeId, int userId);
     Task<IList<UserReviewDto>> GetUserRatingDtosForChapterAsync(int chapterId, int userId);
     Task<AppUserPreferences?> GetPreferencesAsync(string username);
     Task<IEnumerable<BookmarkDto>> GetBookmarkDtosForSeries(int userId, int seriesId);
@@ -604,6 +605,18 @@ public class UserRepository : IUserRepository
             .ProjectTo<UserReviewDto>(_mapper.ConfigurationProvider)
             .ToListAsync();
     }
+    public async Task<IList<UserReviewDto>> GetUserRatingDtosForVolumeAsync(int volumeId, int userId)
+    {
+        return await _context.AppUserChapterRating
+            .Include(r => r.AppUser)
+            .Where(r => r.VolumeId == volumeId)
+            .Where(r => r.AppUser.UserPreferences.ShareReviews || r.AppUserId == userId)
+            .OrderBy(r => r.AppUserId == userId)
+            .ThenBy(r => r.Rating)
+            .AsSplitQuery()
+            .ProjectTo<UserReviewDto>(_mapper.ConfigurationProvider)
+            .ToListAsync();
+    }
 
     public async Task<IList<UserReviewDto>> GetUserRatingDtosForChapterAsync(int chapterId, int userId)
     {

API/Helpers/AutoMapperProfiles.cs

@@ -101,6 +101,12 @@ public class AutoMapperProfiles : Profile
             .ForMember(dest => dest.LibraryId,
                 opt =>
                     opt.MapFrom(src => src.Series.LibraryId))
+            .ForMember(dest => dest.VolumeId,
+                opt =>
+                    opt.MapFrom(src => src.VolumeId))
+            .ForMember(dest => dest.ChapterId,
+                opt =>
+                    opt.MapFrom(src => src.ChapterId))
             .ForMember(dest => dest.Body,
                 opt =>
                     opt.MapFrom(src => src.Review))

UI/Web/src/app/_services/volume.service.ts

@@ -3,6 +3,7 @@ import {environment} from "../../environments/environment";
 import { HttpClient } from "@angular/common/http";
 import {Volume} from "../_models/volume";
 import {TextResonse} from "../_types/text-response";
+import {UserReview} from "../_single-module/review-card/user-review";
 
 @Injectable({
   providedIn: 'root'
@@ -28,4 +29,9 @@ export class VolumeService {
   updateVolume(volume: any) {
     return this.httpClient.post(this.baseUrl + 'volume/update', volume, TextResonse);
   }
+
+  volumeReviews(volumeId: number) {
+    return this.httpClient.get<UserReview[]>(this.baseUrl + 'volume/review?volumeId='+volumeId);
+  }
+
 }

UI/Web/src/app/_single-module/review-card/review-card.component.ts

@@ -35,6 +35,7 @@ export class ReviewCardComponent implements OnInit {
   protected readonly ScrobbleProvider = ScrobbleProvider;
 
   @Input({required: true}) review!: UserReview;
+  @Input() reviewLocation: 'series' | 'chapter' = 'series';
   @Output() refresh = new EventEmitter<ReviewSeriesModalCloseEvent>();
 
   isMyReview: boolean = false;
@@ -44,7 +45,7 @@ export class ReviewCardComponent implements OnInit {
   ngOnInit() {
     this.accountService.currentUser$.subscribe(u => {
       if (u) {
-        this.isMyReview = this.review.username === u.username;
+        this.isMyReview = this.review.username === u.username && !this.review.isExternal;
         this.cdRef.markForCheck();
       }
     });
@@ -58,6 +59,11 @@ export class ReviewCardComponent implements OnInit {
       component = ReviewCardModalComponent;
     }
     const ref = this.modalService.open(component, {size: 'lg', fullscreen: 'md'});
+
+    if (this.isMyReview) {
+      ref.componentInstance.reviewLocation = this.reviewLocation;
+    }
+
     ref.componentInstance.review = this.review;
     ref.closed.subscribe((res: ReviewSeriesModalCloseEvent | undefined) => {
       if (res) {

UI/Web/src/app/_single-module/reviews/reviews.component.html

@@ -1,9 +1,9 @@
 <div class="mb-3" *transloco="let t;prefix:'reviews'">
   <app-carousel-reel [items]="userReviews" [alwaysShow]="true" [title]="t('user-reviews-local')"
-                     iconClasses="fa-solid fa-{{getUserReviews().length > 0 ? 'pen' : 'plus'}}"
+                     [iconClasses]=iconClasses()
-                     [clickableTitle]="true" (sectionClick)="openReviewModal()">
+                     [clickableTitle]="canEditOrAdd()" (sectionClick)="openReviewModal()">
     <ng-template #carouselItem let-item let-position="idx">
-      <app-review-card [review]="item" (refresh)="updateOrDeleteReview($event)"></app-review-card>
+      <app-review-card [reviewLocation]="reviewLocation" [review]="item" (refresh)="updateOrDeleteReview($event)"></app-review-card>
     </ng-template>
   </app-carousel-reel>
 </div>

UI/Web/src/app/_single-module/reviews/reviews.component.ts

@@ -50,6 +50,26 @@ export class ReviewsComponent {
     });
   }
 
+  iconClasses(): string {
+    let classes = 'fa-solid';
+    if (this.canEditOrAdd()) {
+      classes += 'fa-' + (this.getUserReviews().length > 0 ? 'pen' : 'plus');
+    }
+    return classes;
+  }
+
+  canEditOrAdd(): boolean {
+    if (this.reviewLocation === 'series') {
+      return true;
+    }
+
+    if (this.reviewLocation === 'chapter') {
+      return this.chapter !== undefined;
+    }
+
+    return false;
+  }
+
   openReviewModal() {
     const userReview = this.getUserReviews();
 

UI/Web/src/app/volume-detail/volume-detail.component.html

@@ -191,6 +191,20 @@
             </li>
           }
 
+          <li [ngbNavItem]="TabID.Reviews">
+            <a ngbNavLink>
+              {{t('reviews-tab')}}
+              <span class="badge rounded-pill text-bg-secondary">{{userReviews.length + plusReviews.length}}</span>
+            </a>
+            <ng-template ngbNavContent>
+              @defer (when activeTabId === TabID.Reviews; prefetch on idle) {
+                <app-reviews [userReviews]="userReviews" [plusReviews]="plusReviews"
+                             [series]="series" [volumeId]="volumeId"
+                             reviewLocation="chapter" />
+              }
+            </ng-template>
+          </li>
+
           <li [ngbNavItem]="TabID.Details" id="details-tab">
             <a ngbNavLink>{{t('details-tab')}}</a>
             <ng-template ngbNavContent>

UI/Web/src/app/volume-detail/volume-detail.component.ts

@@ -78,6 +78,8 @@ import {EditChapterModalComponent} from "../_single-module/edit-chapter-modal/ed
 import {BulkOperationsComponent} from "../cards/bulk-operations/bulk-operations.component";
 import {CoverImageComponent} from "../_single-module/cover-image/cover-image.component";
 import {DefaultModalOptions} from "../_models/default-modal-options";
+import {UserReview} from "../_single-module/review-card/user-review";
+import {ReviewsComponent} from "../_single-module/reviews/reviews.component";
 
 enum TabID {
 
@@ -119,36 +121,37 @@ interface VolumeCast extends IHasCast {
 
 @Component({
     selector: 'app-volume-detail',
-    imports: [
+  imports: [
-        LoadingComponent,
+    LoadingComponent,
-        NgbNavOutlet,
+    NgbNavOutlet,
-        DetailsTabComponent,
+    DetailsTabComponent,
-        NgbNavItem,
+    NgbNavItem,
-        NgbNavLink,
+    NgbNavLink,
-        NgbNavContent,
+    NgbNavContent,
-        NgbNav,
+    NgbNav,
-        ReadMoreComponent,
+    ReadMoreComponent,
-        AsyncPipe,
+    AsyncPipe,
-        NgbDropdownItem,
+    NgbDropdownItem,
-        NgbDropdownMenu,
+    NgbDropdownMenu,
-        NgbDropdown,
+    NgbDropdown,
-        NgbDropdownToggle,
+    NgbDropdownToggle,
-        EntityTitleComponent,
+    EntityTitleComponent,
-        RouterLink,
+    RouterLink,
-        NgbTooltip,
+    NgbTooltip,
-        NgStyle,
+    NgStyle,
-        NgClass,
+    NgClass,
-        TranslocoDirective,
+    TranslocoDirective,
-        VirtualScrollerModule,
+    VirtualScrollerModule,
-        ChapterCardComponent,
+    ChapterCardComponent,
-        RelatedTabComponent,
+    RelatedTabComponent,
-        BadgeExpanderComponent,
+    BadgeExpanderComponent,
-        MetadataDetailRowComponent,
+    MetadataDetailRowComponent,
-        DownloadButtonComponent,
+    DownloadButtonComponent,
-        CardActionablesComponent,
+    CardActionablesComponent,
-        BulkOperationsComponent,
+    BulkOperationsComponent,
-        CoverImageComponent
+    CoverImageComponent,
-    ],
+    ReviewsComponent
+  ],
     templateUrl: './volume-detail.component.html',
     styleUrl: './volume-detail.component.scss',
     changeDetection: ChangeDetectionStrategy.OnPush
@@ -196,6 +199,8 @@ export class VolumeDetailComponent implements OnInit {
   libraryType: LibraryType | null = null;
   activeTabId = TabID.Chapters;
   readingLists: ReadingList[] = [];
+  userReviews: Array<UserReview> = [];
+  plusReviews: Array<UserReview> = [];
   mobileSeriesImgBackground: string | undefined;
   downloadInProgress: boolean = false;
 
@@ -374,7 +379,8 @@ export class VolumeDetailComponent implements OnInit {
     forkJoin({
       series: this.seriesService.getSeries(this.seriesId),
       volume: this.volumeService.getVolumeMetadata(this.volumeId),
-      libraryType: this.libraryService.getLibraryType(this.libraryId)
+      libraryType: this.libraryService.getLibraryType(this.libraryId),
+      reviews: this.volumeService.volumeReviews(this.volumeId),
     }).subscribe(results => {
 
       if (results.volume === null) {
@@ -385,6 +391,8 @@ export class VolumeDetailComponent implements OnInit {
       this.series = results.series;
       this.volume = results.volume;
       this.libraryType = results.libraryType;
+      this.userReviews = results.reviews.filter(r => !r.isExternal);
+      this.plusReviews = results.reviews.filter(r => r.isExternal);
 
       this.themeService.setColorScape(this.volume!.primaryColor, this.volume!.secondaryColor);