Misc Polishing (#413)

* Ensure that after we assign a role to a user, we show it immediately

* Cached libraryType api as that is not going to change in a viewing session. Moved some components around to tighten bundles.

* Cleaned up more TODOs
* Refactored Configuration to use getter and setters so that the interface is a lot cleaner. Updated HashUtil to use JWT Secret instead of Machine name (as docker machine name is random each boot).

UI/Web/src/app/series-card/series-card.component.html

@@ -0,0 +1,3 @@
+<ng-container *ngIf="data !== undefined">
+    <app-card-item [title]="data.name" [actions]="actions" [supressLibraryLink]="suppressLibraryLink" [imageUrl]="imageService.getSeriesCoverImage(data.id)" [entity]="data" [total]="data.pages" [read]="data.pagesRead"  (clicked)="handleClick()"></app-card-item>
+</ng-container>

UI/Web/src/app/series-card/series-card.component.ts

@@ -0,0 +1,144 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import { Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastrService } from 'ngx-toastr';
+import { take } from 'rxjs/operators';
+import { EditSeriesModalComponent } from 'src/app/_modals/edit-series-modal/edit-series-modal.component';
+import { Series } from 'src/app/_models/series';
+import { AccountService } from 'src/app/_services/account.service';
+import { ImageService } from 'src/app/_services/image.service';
+import { ActionFactoryService, Action, ActionItem } from 'src/app/_services/action-factory.service';
+import { SeriesService } from 'src/app/_services/series.service';
+import { ConfirmService } from '../shared/confirm.service';
+
+@Component({
+  selector: 'app-series-card',
+  templateUrl: './series-card.component.html',
+  styleUrls: ['./series-card.component.scss']
+})
+export class SeriesCardComponent implements OnInit, OnChanges {
+  @Input() data: Series | undefined;
+  @Input() libraryId = 0;
+  @Input() suppressLibraryLink = false;
+  @Output() clicked = new EventEmitter<Series>();
+  @Output() reload = new EventEmitter<boolean>();
+  @Output() dataChanged = new EventEmitter<Series>();
+
+  isAdmin = false;
+  actions: ActionItem<Series>[] = [];
+
+  constructor(private accountService: AccountService, private router: Router,
+              private seriesService: SeriesService, private toastr: ToastrService,
+              private modalService: NgbModal, private confirmService: ConfirmService, 
+              public imageService: ImageService, private actionFactoryService: ActionFactoryService) {
+    this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
+      if (user) {
+        this.isAdmin = this.accountService.hasAdminRole(user);
+      }
+    });
+  }
+
+
+  ngOnInit(): void {
+  }
+
+  ngOnChanges(changes: any) {
+    if (this.data) {
+      this.actions = this.actionFactoryService.getSeriesActions((action: Action, series: Series) => this.handleSeriesActionCallback(action, series));
+    }
+  }
+
+  handleSeriesActionCallback(action: Action, series: Series) {
+    switch (action) {
+      case(Action.MarkAsRead):
+        this.markAsRead(series);
+        break;
+      case(Action.MarkAsUnread):
+        this.markAsUnread(series);
+        break;
+      case(Action.ScanLibrary):
+        this.scanLibrary(series);
+        break;
+      case(Action.RefreshMetadata):
+        this.refreshMetdata(series);
+        break;
+      case(Action.Delete):
+        this.deleteSeries(series);
+        break;
+      case(Action.Edit):
+        this.openEditModal(series);
+        break;
+      default:
+        break;
+    }
+  }
+
+  openEditModal(data: Series) {
+    const modalRef = this.modalService.open(EditSeriesModalComponent, {  size: 'lg', scrollable: true });
+    modalRef.componentInstance.series = data;
+    modalRef.closed.subscribe((closeResult: {success: boolean, series: Series}) => {
+      window.scrollTo(0, 0);
+      if (closeResult.success) {
+        this.seriesService.getSeries(data.id).subscribe(series => {
+          this.data = series;
+          this.reload.emit(true);
+          this.dataChanged.emit(series);
+        });
+      }
+    });
+  }
+
+  refreshMetdata(series: Series) {
+    this.seriesService.refreshMetadata(series).subscribe((res: any) => {
+      this.toastr.success('Refresh started for ' + series.name);
+    });
+  }
+
+  scanLibrary(series: Series) {
+    this.seriesService.scan(series.libraryId, series.id).subscribe((res: any) => {
+      this.toastr.success('Scan started for ' + series.name);
+    });
+  }
+
+  async deleteSeries(series: Series) {
+    if (!await this.confirmService.confirm('Are you sure you want to delete this series? It will not modify files on disk.')) {
+      return;
+    }
+
+    this.seriesService.delete(series.id).subscribe((res: boolean) => {
+      if (res) {
+        this.toastr.success('Series deleted');
+        this.reload.emit(true);
+      }
+    });
+  }
+
+  markAsUnread(series: Series) {
+    this.seriesService.markUnread(series.id).subscribe(res => {
+      this.toastr.success(series.name + ' is now unread');
+      series.pagesRead = 0;
+      if (this.data) {
+        this.data.pagesRead = 0;
+      }
+      
+      this.dataChanged.emit(series);
+    });
+  }
+
+  markAsRead(series: Series) {
+    this.seriesService.markRead(series.id).subscribe(res => {
+      this.toastr.success(series.name + ' is now read');
+      series.pagesRead = series.pages;
+      if (this.data) {
+        this.data.pagesRead = series.pages;
+      }
+      this.dataChanged.emit(series);
+    });
+  }
+
+  handleClick() {
+    this.clicked.emit(this.data);
+    this.router.navigate(['library', this.libraryId, 'series', this.data?.id]);
+  }
+
+}