Bugfixes (#2349)

Co-authored-by: Alex Tan <8013458+senpai-notices@users.noreply.github.com>

UI/Web/src/app/app.component.ts

@@ -1,11 +1,11 @@
 import {Component, DestroyRef, HostListener, inject, Inject, OnInit} from '@angular/core';
-import { NavigationStart, Router, RouterOutlet } from '@angular/router';
+import {NavigationStart, Router, RouterOutlet} from '@angular/router';
 import {map, shareReplay, take} from 'rxjs/operators';
 import { AccountService } from './_services/account.service';
 import { LibraryService } from './_services/library.service';
 import { NavService } from './_services/nav.service';
 import { filter } from 'rxjs/operators';
-import { NgbModal, NgbRatingConfig } from '@ng-bootstrap/ng-bootstrap';
+import {NgbModal, NgbOffcanvas, NgbRatingConfig} from '@ng-bootstrap/ng-bootstrap';
 import { DOCUMENT, NgClass, NgIf, AsyncPipe } from '@angular/common';
 import { Observable } from 'rxjs';
 import {ThemeService} from "./_services/theme.service";
@@ -24,7 +24,8 @@ export class AppComponent implements OnInit {
 
   transitionState$!: Observable<boolean>;
 
-  destroyRef = inject(DestroyRef);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly offcanvas = inject(NgbOffcanvas);
 
   constructor(private accountService: AccountService, public navService: NavService,
     private libraryService: LibraryService,
@@ -37,13 +38,30 @@ export class AppComponent implements OnInit {
 
     // Close any open modals when a route change occurs
     router.events
-      .pipe(filter(event => event instanceof NavigationStart), takeUntilDestroyed(this.destroyRef))
-      .subscribe((event) => {
+      .pipe(
+          filter(event => event instanceof NavigationStart),
+          takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe(async (event) => {
+
+        if (!this.ngbModal.hasOpenModals() && !this.offcanvas.hasOpenOffcanvas()) return;
+
         if (this.ngbModal.hasOpenModals()) {
           this.ngbModal.dismissAll();
         }
+
+        if (this.offcanvas.hasOpenOffcanvas()) {
+          this.offcanvas.dismiss();
+        }
+
+        if ((event as any).navigationTrigger === 'popstate') {
+          const currentRoute = this.router.routerState;
+          await this.router.navigateByUrl(currentRoute.snapshot.url, { skipLocationChange: true });
+        }
+
       });
 
+
     this.transitionState$ = this.accountService.currentUser$.pipe(map((user) => {
       if (!user) return false;
       return user.preferences.noTransitions;

UI/Web/src/app/cards/card-item/card-item.component.ts

@@ -5,7 +5,7 @@ import {
   EventEmitter,
   HostListener,
   inject,
-  Input,
+  Input, NgZone,
   OnInit,
   Output
 } from '@angular/core';
@@ -39,10 +39,11 @@ import {MangaFormatIconPipe} from "../../pipe/manga-format-icon.pipe";
 import {SentenceCasePipe} from "../../pipe/sentence-case.pipe";
 import {CommonModule} from "@angular/common";
 import {RouterLink} from "@angular/router";
-import {translate, TranslocoModule} from "@ngneat/transloco";
+import {translate, TranslocoModule, TranslocoService} from "@ngneat/transloco";
 import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
 import {NextExpectedChapter} from "../../_models/series-detail/next-expected-chapter";
 import {UtcToLocalTimePipe} from "../../pipe/utc-to-local-time.pipe";
+import {TimeAgoPipe} from "../../pipe/time-ago.pipe";
 
 @Component({
   selector: 'app-card-item',
@@ -159,6 +160,8 @@ export class CardItemComponent implements OnInit {
 
   private user: User | undefined;
   private readonly destroyRef = inject(DestroyRef);
+  private readonly ngZone = inject(NgZone);
+  private readonly translocoService = inject(TranslocoService);
 
   get MangaFormat(): typeof MangaFormat {
     return MangaFormat;
@@ -221,17 +224,12 @@ export class CardItemComponent implements OnInit {
       this.imageUrl = '';
       const nextDate = (this.entity as NextExpectedChapter);
 
-      // if (nextDate.volumeNumber > 0 && nextDate.chapterNumber === 0) {
-      //   this.overlayInformation = 'Volume ' + nextDate.volumeNumber;
-      //
-      // } else {
-      //   this.overlayInformation = 'Chapter ' + nextDate.chapterNumber;
-      // }
       this.overlayInformation = nextDate.title;
       this.centerOverlay = true;
 
       if (nextDate.expectedDate) {
         const utcPipe = new UtcToLocalTimePipe();
+        //const timeUntilPipe = new TimeAgoPipe(this.cdRef, this.ngZone, this.translocoService);
         this.title = utcPipe.transform(nextDate.expectedDate);
       }
 

UI/Web/src/app/metadata-filter/metadata-filter.component.ts

@@ -200,18 +200,22 @@ export class MetadataFilterComponent implements OnInit {
       limitTo: new FormControl(this.filterV2?.limitTo || 0, []),
       name: new FormControl(this.filterV2?.name || '', [])
     });
+    if (this.filterSettings?.presetsV2?.sortOptions) {
+      this.isAscendingSort = this.filterSettings?.presetsV2?.sortOptions!.isAscending;
+    }
+
 
     this.sortGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-      if (this.filterV2?.sortOptions === null) {
-        this.filterV2.sortOptions = {
-          isAscending: this.isAscendingSort,
-          sortField: parseInt(this.sortGroup.get('sortField')?.value, 10)
-        };
-      }
-      this.filterV2!.sortOptions!.sortField = parseInt(this.sortGroup.get('sortField')?.value, 10);
-      this.filterV2!.limitTo = Math.max(parseInt(this.sortGroup.get('limitTo')?.value || '0', 10), 0);
-      this.filterV2!.name = this.sortGroup.get('name')?.value || '';
-      this.cdRef.markForCheck();
+    if (this.filterV2?.sortOptions === null) {
+      this.filterV2.sortOptions = {
+        isAscending: this.isAscendingSort,
+        sortField: parseInt(this.sortGroup.get('sortField')?.value, 10)
+      };
+    }
+    this.filterV2!.sortOptions!.sortField = parseInt(this.sortGroup.get('sortField')?.value, 10);
+    this.filterV2!.limitTo = Math.max(parseInt(this.sortGroup.get('limitTo')?.value || '0', 10), 0);
+    this.filterV2!.name = this.sortGroup.get('name')?.value || '';
+    this.cdRef.markForCheck();
     });
 
     this.fullyLoaded = true;
@@ -230,6 +234,7 @@ export class MetadataFilterComponent implements OnInit {
     }
 
     this.filterV2!.sortOptions!.isAscending = this.isAscendingSort;
+    this.cdRef.markForCheck();
   }
 
   clear() {

UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.ts

@@ -92,6 +92,7 @@ import {
   SeriesPreviewDrawerComponent
 } from "../../../_single-module/series-preview-drawer/series-preview-drawer.component";
 import {PublicationStatus} from "../../../_models/metadata/publication-status";
+import {NextExpectedChapter} from "../../../_models/series-detail/next-expected-chapter";
 
 interface RelatedSeriesPair {
   series: Series;
@@ -167,7 +168,7 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked {
   seriesImage: string = '';
   downloadInProgress: boolean = false;
 
-  nextExpectedChapter: any | undefined;
+  nextExpectedChapter: NextExpectedChapter | undefined;
 
   /**
    * Track by function for Volume to tell when to refresh card data