Angular Upgrade (#1059)

* Upgraded to Angular 12

* Bump ng-bootstrap for upgrade

* Angular 13 upgrade, ng-bootstrap bump

* Angular 13 upgrade (broken)

* Angular 13 upgrade. CSS is broken completely

* Angular 13 upgrade is complete.

UI/Web/src/app/_guards/admin.guard.ts

@@ -3,7 +3,6 @@ import { CanActivate } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
 import { Observable } from 'rxjs';
 import { map, take } from 'rxjs/operators';
-import { User } from '../_models/user';
 import { AccountService } from '../_services/account.service';
 
 @Injectable({
@@ -15,8 +14,8 @@ export class AdminGuard implements CanActivate {
   canActivate(): Observable<boolean> {
     // this automaticallys subs due to being router guard
     return this.accountService.currentUser$.pipe(take(1),
-      map((user: User) => {
-        if (this.accountService.hasAdminRole(user)) {
+      map((user) => {
+        if (user && this.accountService.hasAdminRole(user)) {
           return true;
         }
         

UI/Web/src/app/_guards/auth.guard.ts

@@ -3,7 +3,6 @@ import { CanActivate, Router } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
 import { Observable } from 'rxjs';
 import { map, take } from 'rxjs/operators';
-import { User } from '../_models/user';
 import { AccountService } from '../_services/account.service';
 
 @Injectable({
@@ -15,7 +14,7 @@ export class AuthGuard implements CanActivate {
 
   canActivate(): Observable<boolean> {
     return this.accountService.currentUser$.pipe(take(1),
-      map((user: User) => {
+      map((user) => {
         if (user) {
           return true;
         }

UI/Web/src/app/_interceptors/jwt.interceptor.ts

@@ -7,7 +7,6 @@ import {
 } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { AccountService } from '../_services/account.service';
-import { User } from '../_models/user';
 import { take } from 'rxjs/operators';
 
 @Injectable()
@@ -16,16 +15,13 @@ export class JwtInterceptor implements HttpInterceptor {
   constructor(private accountService: AccountService) {}
 
   intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
-    let currentUser: User;
 
     // Take 1 means we don't have to unsubscribe because we take 1 then complete
     this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
-      currentUser = user;
-
-      if (currentUser) {
+      if (user) {
         request = request.clone({
           setHeaders: {
-            Authorization: `Bearer ${currentUser.token}`
+            Authorization: `Bearer ${user.token}`
           }
         });
       }

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

@@ -19,7 +19,10 @@ export class AccountService implements OnDestroy {
   currentUser: User | undefined;
 
   // Stores values, when someone subscribes gives (1) of last values seen.
-  private currentUserSource = new ReplaySubject<User>(1);
+  private currentUserSource = new ReplaySubject<User | undefined>(1);
+  /**
+   * 
+   */
   currentUser$ = this.currentUserSource.asObservable();
 
   /**

UI/Web/src/app/admin/manage-users/manage-users.component.ts

@@ -35,8 +35,10 @@ export class ManageUsersComponent implements OnInit, OnDestroy {
               private confirmService: ConfirmService,
               public messageHub: MessageHubService,
               private serverService: ServerService) {
-    this.accountService.currentUser$.pipe(take(1)).subscribe((user: User) => {
-      this.loggedInUsername = user.username;
+    this.accountService.currentUser$.pipe(take(1)).subscribe((user) => {
+      if (user) {
+        this.loggedInUsername = user.username;
+      }
     });
 
   }

UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.html

@@ -2,14 +2,14 @@
     <div>
         <h2 style="display: inline-block;"><a href="javascript:void(0)" (click)="sectionClicked($event)" class="section-title">{{title}}</a></h2>
         <div class="float-right">
-            <button class="btn btn-icon" [disabled]="swiper?.isBeginning" (click)="prevPage()"><i class="fa fa-angle-left" aria-hidden="true"></i><span class="sr-only">Previous Items</span></button>
-            <button class="btn btn-icon" [disabled]="swiper?.isEnd" (click)="nextPage()"><i class="fa fa-angle-right" aria-hidden="true"></i><span class="sr-only">Next Items</span></button>
+            <button class="btn btn-icon" [disabled]="isBeginning" (click)="prevPage()"><i class="fa fa-angle-left" aria-hidden="true"></i><span class="sr-only">Previous Items</span></button>
+            <button class="btn btn-icon" [disabled]="isEnd" (click)="nextPage()"><i class="fa fa-angle-right" aria-hidden="true"></i><span class="sr-only">Next Items</span></button>
         </div>
     </div>
     <div>
         <swiper
+            #swiper
             [slidesPerView]="'auto'"
-            (swiper)="onSwiper($event)"
             [freeMode]="true">
             <ng-template *ngFor="let item of items; index as i;" swiperSlide>
                 <ng-container [ngTemplateOutlet]="carouselItemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>

UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.ts

@@ -1,5 +1,7 @@
-import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
-import Swiper from 'swiper';
+import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
+import { SwiperComponent } from 'swiper/angular';
+//import Swiper from 'swiper';
+//import { SwiperEvents, Swiper } from 'swiper/types';
 
 @Component({
   selector: 'app-carousel-reel',
@@ -13,10 +15,20 @@ export class CarouselReelComponent implements OnInit {
   @Input() title = '';
   @Output() sectionClick = new EventEmitter<string>();
 
+  @ViewChild('swiper', { static: false }) swiper?: SwiperComponent;
 
-  swiper!: Swiper;
+
+  //swiper!: Swiper;
   trackByIdentity: (index: number, item: any) => string;
 
+  get isEnd() {
+    return this.swiper?.swiperRef.isEnd;
+  }
+
+  get isBeginning() {
+    return this.swiper?.swiperRef.isBeginning;
+  }
+
   constructor() { 
     this.trackByIdentity = (index: number, item: any) => `${this.title}_${item.id}_${item?.name}_${item?.pagesRead}_${index}`;
   }
@@ -25,13 +37,13 @@ export class CarouselReelComponent implements OnInit {
 
   nextPage() {
     if (this.swiper) {
-      this.swiper.setProgress(this.swiper.progress + 0.25, 600);
+      this.swiper.swiperRef.setProgress(this.swiper.swiperRef.progress + 0.25, 600);
     }
   }
 
   prevPage() {
     if (this.swiper) {
-      this.swiper.setProgress(this.swiper.progress - 0.25, 600);
+      this.swiper.swiperRef.setProgress(this.swiper.swiperRef.progress - 0.25, 600);
     }
   }
 
@@ -39,7 +51,14 @@ export class CarouselReelComponent implements OnInit {
     this.sectionClick.emit(this.title);
   }
 
-  onSwiper(swiper: any) {
-    this.swiper = swiper;
-  }
+  // onSwiper(eventParams: Parameters<SwiperEvents['init']>) {
+  //   console.log('swiper: ', eventParams);
+  //   [this.swiper] = eventParams;
+  // }
+
+  // onSwiper(params: Swiper) {
+  //   // const [swiper] = params;
+  //   // console.log(swiper);
+  //   // return params;
+  // }
 }

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

@@ -73,11 +73,13 @@ export class LibraryComponent implements OnInit, OnDestroy {
     this.isLoading = true;
     this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
       this.user = user;
-      this.isAdmin = this.accountService.hasAdminRole(this.user);
-      this.libraryService.getLibrariesForMember().pipe(take(1)).subscribe(libraries => {
-        this.libraries = libraries;
-        this.isLoading = false;
-      });
+      if (this.user) {
+        this.isAdmin = this.accountService.hasAdminRole(this.user);
+        this.libraryService.getLibrariesForMember().pipe(take(1)).subscribe(libraries => {
+          this.libraries = libraries;
+          this.isLoading = false;
+        });
+      }
     });
 
     this.reloadSeries();

UI/Web/src/app/reading-list/_modals/add-to-list-modal/add-to-list-modal.component.scss

@@ -1,7 +1,9 @@
+
+@use '../../../../theme/colors';
 .clickable {
     cursor: pointer;
 }
 
 .clickable:hover, .clickable:focus {
-    background-color: lightgreen;
+    background-color: colors.$primary-color;
 }

UI/Web/src/app/user-settings/user-preferences/user-preferences.component.ts

@@ -83,7 +83,7 @@ export class UserPreferencesComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.titleService.setTitle('Kavita - User Preferences');
-    this.accountService.currentUser$.pipe(take(1)).subscribe((user: User) => {
+    this.accountService.currentUser$.pipe(take(1)).subscribe((user) => {
       if (user) {
         this.user = user;
         this.isAdmin = this.accountService.hasAdminRole(user);