Started working on chapter detail page.

API/Controllers/SeriesController.cs

@@ -237,16 +237,17 @@ public async Task<ActionResult> UpdateSeries(UpdateSeriesDto updateSeries)
 
         _unitOfWork.SeriesRepository.Update(series);
 
-        if (await _unitOfWork.CommitAsync())
+        if (!await _unitOfWork.CommitAsync())
         {
-            if (needsRefreshMetadata)
-            {
-                _taskScheduler.RefreshSeriesMetadata(series.LibraryId, series.Id);
-            }
-            return Ok();
+            return BadRequest(await _localizationService.Translate(User.GetUserId(), "generic-series-update"));
         }
 
-        return BadRequest(await _localizationService.Translate(User.GetUserId(), "generic-series-update"));
+        if (needsRefreshMetadata)
+        {
+            _taskScheduler.RefreshSeriesMetadata(series.LibraryId, series.Id);
+        }
+
+        return Ok();
     }
 
     /// <summary>

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

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import {environment} from "../../environments/environment";
+import {HttpClient} from "@angular/common/http";
+import {AccountService} from "./account.service";
+import {UserCollection} from "../_models/collection-tag";
+import {Chapter} from "../_models/chapter";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ChapterService {
+
+  baseUrl = environment.apiUrl;
+
+  constructor(private httpClient: HttpClient) { }
+
+  getChapterMetadata(chapterId: number) {
+    return this.httpClient.get<Chapter>(this.baseUrl + 'chapter/?chapterId=' + chapterId);
+  }
+}

UI/Web/src/app/app-routing.module.ts

@@ -61,6 +61,11 @@ const routes: Routes = [
             pathMatch: 'full',
             loadComponent: () => import('../app/series-detail/_components/series-detail/series-detail.component').then(c => c.SeriesDetailComponent)
           },
+          {
+            path: ':libraryId/series/:seriesId/chapter/:chapterId',
+            pathMatch: 'full',
+            loadComponent: () => import('./chapter-detail/chapter-detail.component').then(c => c.ChapterDetailComponent)
+          },
           {
             path: ':libraryId/series/:seriesId/manga',
             loadChildren: () => import('./_routes/manga-reader.router.module').then(m => m.routes)

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

@@ -0,0 +1,29 @@
+
+<!--<app-bulk-operations [actionCallback]="bulkActionCallback" [topOffset]="56"></app-bulk-operations>-->
+
+<div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid pt-2" #scrollingBlock>
+
+  @if (chapter) {
+    <div class="row mb-0 mb-xl-3 info-container">
+      <div class="image-container col-4 col-sm-6 col-md-4 col-lg-4 col-xl-2 col-xxl-2 d-none d-sm-block mt-2">
+
+        <app-image [styles]="{'object-fit': 'contain', 'background': 'none', 'max-height': '400px', 'height': '100%'}" height="400px"  [imageUrl]="coverImage"></app-image>
+        <!--      @if (series.pagesRead < series.pages && hasReadingProgress && currentlyReadingChapter && !currentlyReadingChapter.isSpecial) {-->
+        <!--        <div class="progress-banner" ngbTooltip="{{(series.pagesRead / series.pages) * 100 | number:'1.0-1'}}% Read">-->
+        <!--          <ngb-progressbar type="primary" height="5px" [value]="series.pagesRead" [max]="series.pages" [showValue]="true"></ngb-progressbar>-->
+        <!--        </div>-->
+        <!--        <div class="under-image">-->
+        <!--          {{t('continue-from', {title: ContinuePointTitle})}}-->
+        <!--        </div>-->
+        <!--      }-->
+      </div>
+      <div class="col-xlg-10 col-lg-8 col-md-8 col-xs-8 col-sm-6 mt-2">
+        Title | chapter {{chapterId}}
+      </div>
+    </div>
+  }
+
+
+
+  <app-loading [loading]="isLoading"></app-loading>
+</div>

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

@@ -0,0 +1,132 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  inject,
+  OnInit,
+  ViewChild
+} from '@angular/core';
+import {BulkOperationsComponent} from "../cards/bulk-operations/bulk-operations.component";
+import {TagBadgeComponent, TagBadgeCursor} from "../shared/tag-badge/tag-badge.component";
+import {PageLayoutMode} from "../_models/page-layout-mode";
+import {AsyncPipe, DecimalPipe, DOCUMENT, NgStyle} from "@angular/common";
+import {CardActionablesComponent} from "../_single-module/card-actionables/card-actionables.component";
+import {CarouselReelComponent} from "../carousel/_components/carousel-reel/carousel-reel.component";
+import {ExternalListItemComponent} from "../cards/external-list-item/external-list-item.component";
+import {ExternalSeriesCardComponent} from "../cards/external-series-card/external-series-card.component";
+import {ImageComponent} from "../shared/image/image.component";
+import {LoadingComponent} from "../shared/loading/loading.component";
+import {
+  NgbDropdown,
+  NgbDropdownItem,
+  NgbDropdownMenu,
+  NgbDropdownToggle,
+  NgbNav,
+  NgbNavContent,
+  NgbNavLink,
+  NgbProgressbar,
+  NgbTooltip
+} from "@ng-bootstrap/ng-bootstrap";
+import {PersonBadgeComponent} from "../shared/person-badge/person-badge.component";
+import {ReviewCardComponent} from "../_single-module/review-card/review-card.component";
+import {SeriesCardComponent} from "../cards/series-card/series-card.component";
+import {
+  SeriesMetadataDetailComponent
+} from "../series-detail/_components/series-metadata-detail/series-metadata-detail.component";
+import {VirtualScrollerModule} from "@iharbeck/ngx-virtual-scroller";
+import {ActivatedRoute, Router} from "@angular/router";
+import {ImageService} from "../_services/image.service";
+import {ChapterService} from "../_services/chapter.service";
+import {Chapter} from "../_models/chapter";
+
+@Component({
+  selector: 'app-chapter-detail',
+  standalone: true,
+  imports: [
+    BulkOperationsComponent,
+    AsyncPipe,
+    CardActionablesComponent,
+    CarouselReelComponent,
+    DecimalPipe,
+    ExternalListItemComponent,
+    ExternalSeriesCardComponent,
+    ImageComponent,
+    LoadingComponent,
+    NgbDropdown,
+    NgbDropdownItem,
+    NgbDropdownMenu,
+    NgbDropdownToggle,
+    NgbNav,
+    NgbNavContent,
+    NgbNavLink,
+    NgbProgressbar,
+    NgbTooltip,
+    PersonBadgeComponent,
+    ReviewCardComponent,
+    SeriesCardComponent,
+    SeriesMetadataDetailComponent,
+    TagBadgeComponent,
+    VirtualScrollerModule,
+    NgStyle
+  ],
+  templateUrl: './chapter-detail.component.html',
+  styleUrl: './chapter-detail.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ChapterDetailComponent implements OnInit {
+
+  private readonly document = inject(DOCUMENT);
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly cdRef = inject(ChangeDetectorRef);
+  private readonly imageService = inject(ImageService);
+  private readonly chapterService = inject(ChapterService);
+
+
+  protected readonly TagBadgeCursor = TagBadgeCursor;
+  protected readonly PageLayoutMode = PageLayoutMode;
+
+  @ViewChild('scrollingBlock') scrollingBlock: ElementRef<HTMLDivElement> | undefined;
+  @ViewChild('companionBar') companionBar: ElementRef<HTMLDivElement> | undefined;
+
+  isLoading: boolean = true;
+  coverImage: string = '';
+  chapterId: number = 0;
+  chapter: Chapter | null = null;
+
+
+  get ScrollingBlockHeight() {
+    if (this.scrollingBlock === undefined) return 'calc(var(--vh)*100)';
+    const navbar = this.document.querySelector('.navbar') as HTMLElement;
+    if (navbar === null) return 'calc(var(--vh)*100)';
+
+    const companionHeight = this.companionBar?.nativeElement.offsetHeight || 0;
+    const navbarHeight = navbar.offsetHeight;
+    const totalHeight = companionHeight + navbarHeight + 21; //21px to account for padding
+    return 'calc(var(--vh)*100 - ' + totalHeight + 'px)';
+  }
+
+  ngOnInit() {
+    const seriesId = this.route.snapshot.paramMap.get('seriesId');
+    const libraryId = this.route.snapshot.paramMap.get('libraryId');
+    const chapterId = this.route.snapshot.paramMap.get('chapterId');
+    if (seriesId === null || libraryId === null || chapterId === null) {
+      this.router.navigateByUrl('/home');
+      return;
+    }
+
+    this.chapterId = parseInt(chapterId, 10);
+
+    this.chapterService.getChapterMetadata(this.chapterId).subscribe(metadata => {
+      this.chapter = metadata;
+      this.isLoading = false;
+      console.log('chapter metadata: ', this.chapter);
+      this.cdRef.markForCheck();
+    });
+
+    this.coverImage = this.imageService.getChapterCoverImage(this.chapterId);
+    this.cdRef.markForCheck();
+  }
+
+}

openapi.json

@@ -1245,6 +1245,45 @@
         }
       }
     },
+    "/api/Chapter": {
+      "get": {
+        "tags": [
+          "Chapter"
+        ],
+        "parameters": [
+          {
+            "name": "chapterId",
+            "in": "query",
+            "schema": {
+              "type": "integer",
+              "format": "int32"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "text/plain": {
+                "schema": {
+                  "$ref": "#/components/schemas/ChapterDto"
+                }
+              },
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ChapterDto"
+                }
+              },
+              "text/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ChapterDto"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
     "/api/Collection": {
       "get": {
         "tags": [