Round 3 of Bugfixing (#3318)

UI/Web/src/app/_single-module/details-tab/details-tab.component.html

@@ -1,5 +1,43 @@
 <ng-container *transloco="let t; read: 'details-tab'">
 <div class="details pb-3">
+
+  @if (readingTime) {
+    <div class="mb-3 ms-1">
+      <h4 class="header">{{t('read-time-title')}}</h4>
+      <div class="ms-3">
+        {{readingTime | readTime}}
+      </div>
+    </div>
+  }
+
+  @if (releaseYear) {
+    <div class="mb-3 ms-1">
+      <h4 class="header">{{t('release-title')}}</h4>
+      <div class="ms-3">
+        {{releaseYear}}
+      </div>
+    </div>
+  }
+
+  @if (language) {
+    <div class="mb-3 ms-1">
+      <h4 class="header">{{t('language-title')}}</h4>
+      <div class="ms-3">
+        {{language | languageName | async}}
+      </div>
+    </div>
+  }
+
+  <div class="mb-3 ms-1">
+    <h4 class="header">{{t('format-title')}}</h4>
+    <div class="ms-3">
+      <app-series-format [format]="format"></app-series-format> {{format | mangaFormat }}
+    </div>
+  </div>
+
+  <div class="setting-section-break" aria-hidden="true"></div>
+
+
   <div class="mb-3 ms-1">
     <h4 class="header">{{t('genres-title')}}</h4>
     <div class="ms-3">

UI/Web/src/app/_single-module/details-tab/details-tab.component.ts

@@ -3,18 +3,25 @@ import {CarouselReelComponent} from "../../carousel/_components/carousel-reel/ca
 import {PersonBadgeComponent} from "../../shared/person-badge/person-badge.component";
 import {TranslocoDirective} from "@jsverse/transloco";
 import {IHasCast} from "../../_models/common/i-has-cast";
-import {Person, PersonRole} from "../../_models/metadata/person";
-import {Router} from "@angular/router";
+import {PersonRole} from "../../_models/metadata/person";
 import {FilterField} from "../../_models/metadata/v2/filter-field";
 import {FilterComparison} from "../../_models/metadata/v2/filter-comparison";
 import {FilterUtilitiesService} from "../../shared/_services/filter-utilities.service";
 import {Genre} from "../../_models/metadata/genre";
 import {Tag} from "../../_models/tag";
-import {TagBadgeComponent, TagBadgeCursor} from "../../shared/tag-badge/tag-badge.component";
+import {TagBadgeComponent} from "../../shared/tag-badge/tag-badge.component";
 import {ImageComponent} from "../../shared/image/image.component";
 import {SafeHtmlPipe} from "../../_pipes/safe-html.pipe";
 import {ImageService} from "../../_services/image.service";
 import {BadgeExpanderComponent} from "../../shared/badge-expander/badge-expander.component";
+import {IHasReadingTime} from "../../_models/common/i-has-reading-time";
+import {ReadTimePipe} from "../../_pipes/read-time.pipe";
+import {SentenceCasePipe} from "../../_pipes/sentence-case.pipe";
+import {MangaFormat} from "../../_models/manga-format";
+import {SeriesFormatComponent} from "../../shared/series-format/series-format.component";
+import {MangaFormatPipe} from "../../_pipes/manga-format.pipe";
+import {LanguageNamePipe} from "../../_pipes/language-name.pipe";
+import {AsyncPipe} from "@angular/common";
 
 @Component({
   selector: 'app-details-tab',
@@ -26,7 +33,13 @@ import {BadgeExpanderComponent} from "../../shared/badge-expander/badge-expander
     TagBadgeComponent,
     ImageComponent,
     SafeHtmlPipe,
-    BadgeExpanderComponent
+    BadgeExpanderComponent,
+    ReadTimePipe,
+    SentenceCasePipe,
+    SeriesFormatComponent,
+    MangaFormatPipe,
+    LanguageNamePipe,
+    AsyncPipe
   ],
   templateUrl: './details-tab.component.html',
   styleUrl: './details-tab.component.scss',
@@ -41,6 +54,10 @@ export class DetailsTabComponent {
   protected readonly FilterField = FilterField;
 
   @Input({required: true}) metadata!: IHasCast;
+  @Input() readingTime: IHasReadingTime | undefined;
+  @Input() language: string | undefined;
+  @Input() format: MangaFormat = MangaFormat.UNKNOWN;
+  @Input() releaseYear: number | undefined;
   @Input() genres: Array<Genre> = [];
   @Input() tags: Array<Tag> = [];
   @Input() webLinks: Array<string> = [];
@@ -50,4 +67,6 @@ export class DetailsTabComponent {
     if (queryParamName === FilterField.None) return;
     this.filterUtilityService.applyFilter(['all-series'], queryParamName, FilterComparison.Equal, `${filter}`).subscribe();
   }
+
+  protected readonly MangaFormat = MangaFormat;
 }

UI/Web/src/app/_single-module/edit-chapter-modal/edit-chapter-modal.component.ts

@@ -493,7 +493,7 @@ export class EditChapterModalComponent implements OnInit {
     };
 
     personSettings.addTransformFn = ((title: string) => {
-      return {id: 0, name: title, role: role, description: '', coverImage: '', coverImageLocked: false };
+      return {id: 0, name: title, role: role, description: '', coverImage: '', coverImageLocked: false, primaryColor: '', secondaryColor: '' };
     });
 
     return personSettings;