UI Updates + New Events (#806)

* Implemented ability to see downloads users are performing on the events widget.

* Fixed a bug where version update task was calling wrong code

* Fixed a bug where when checking for updates, the event wouldn't be pushed to server with correct name.

Added update check to the event widget rather than opening a modal on the user.

* Relaxed password requirements to only be 6-32 characters and inform user on register form about the requirements

* Removed a ton of duplicate logic for series cards where the logic was already defined in action service

* Fixed OPDS total items giving a rounded number rather than total items.

* Fixed off by one issue on OPDS pagination

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

@@ -23,6 +23,7 @@ export type VolumeActionCallback = (volume: Volume) => void;
 export type ChapterActionCallback = (chapter: Chapter) => void;
 export type ReadingListActionCallback = (readingList: ReadingList) => void;
 export type VoidActionCallback = () => void;
+export type BooleanActionCallback = (result: boolean) => void;
 
 /**
  * Responsible for executing actions
@@ -138,6 +139,9 @@ export class ActionService implements OnDestroy {
    */
   async refreshMetdata(series: Series, callback?: SeriesActionCallback) {
     if (!await this.confirmService.confirm('Refresh metadata will force all cover images and metadata to be recalculated. This is a heavy operation. Are you sure you don\'t want to perform a Scan instead?')) {
+      if (callback) {
+        callback(series);
+      }
       return;
     }
 
@@ -484,4 +488,20 @@ export class ActionService implements OnDestroy {
     });
   }
 
+  async deleteSeries(series: Series, callback?: BooleanActionCallback) {
+    if (!await this.confirmService.confirm('Are you sure you want to delete this series? It will not modify files on disk.')) {
+      if (callback) {
+        callback(false);
+      }
+      return;
+    }
+
+    this.seriesService.delete(series.id).subscribe((res: boolean) => {
+      if (callback) {
+        this.toastr.success('Series deleted');
+        callback(res);
+      }
+    });
+  }
+
 }

UI/Web/src/app/_services/message-hub.service.ts

@@ -24,7 +24,8 @@ export enum EVENTS {
   SeriesAddedToCollection = 'SeriesAddedToCollection',
   ScanLibraryError = 'ScanLibraryError',
   BackupDatabaseProgress = 'BackupDatabaseProgress',
-  CleanupProgress = 'CleanupProgress'
+  CleanupProgress = 'CleanupProgress',
+  DownloadProgress = 'DownloadProgress'
 }
 
 export interface Message<T> {
@@ -38,7 +39,6 @@ export interface Message<T> {
 export class MessageHubService {
   hubUrl = environment.hubUrl;
   private hubConnection!: HubConnection;
-  private updateNotificationModalRef: NgbModalRef | null = null;
 
   private messagesSource = new ReplaySubject<Message<any>>(1);
   public messages$ = this.messagesSource.asObservable();
@@ -53,7 +53,7 @@ export class MessageHubService {
 
   isAdmin: boolean = false;
 
-  constructor(private modalService: NgbModal, private toastr: ToastrService, private router: Router) {
+  constructor(private toastr: ToastrService, private router: Router) {
     
   }
 
@@ -106,6 +106,13 @@ export class MessageHubService {
       });
     });
 
+    this.hubConnection.on(EVENTS.DownloadProgress, resp => {
+      this.messagesSource.next({
+        event: EVENTS.DownloadProgress,
+        payload: resp.body
+      });
+    });
+
     this.hubConnection.on(EVENTS.RefreshMetadataProgress, resp => {
       this.messagesSource.next({
         event: EVENTS.RefreshMetadataProgress,
@@ -162,16 +169,6 @@ export class MessageHubService {
         event: EVENTS.UpdateAvailable,
         payload: resp.body
       });
-      // Ensure only 1 instance of UpdateNotificationModal can be open at once
-      if (this.updateNotificationModalRef != null) { return; }
-      this.updateNotificationModalRef = this.modalService.open(UpdateNotificationModalComponent, { scrollable: true, size: 'lg' });
-      this.updateNotificationModalRef.componentInstance.updateData = resp.body;
-      this.updateNotificationModalRef.closed.subscribe(() => {
-        this.updateNotificationModalRef = null;
-      });
-      this.updateNotificationModalRef.dismissed.subscribe(() => {
-        this.updateNotificationModalRef = null;
-      });
     });
   }
 

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

@@ -132,35 +132,26 @@ export class SeriesCardComponent implements OnInit, OnChanges, OnDestroy {
     });
   }
 
-  refreshMetdata(series: Series) {
-    this.seriesService.refreshMetadata(series).subscribe((res: any) => {
-      this.toastr.success('Refresh started for ' + series.name);
-    });
+  async refreshMetdata(series: Series) {
+    this.actionService.refreshMetdata(series);
   }
 
-  scanLibrary(series: Series) {
+  async 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.actionService.deleteSeries(series, (result: boolean) => {
+      if (result) {
         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;
+    this.actionService.markSeriesAsUnread(series, () => {
       if (this.data) {
         this.data.pagesRead = 0;
       }
@@ -170,9 +161,7 @@ export class SeriesCardComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   markAsRead(series: Series) {
-    this.seriesService.markRead(series.id).subscribe(res => {
-      this.toastr.success(series.name + ' is now read');
-      series.pagesRead = series.pages;
+    this.actionService.markSeriesAsRead(series, () => {
       if (this.data) {
         this.data.pagesRead = series.pages;
       }

UI/Web/src/app/nav-events-toggle/nav-events-toggle.component.html

@@ -1,6 +1,6 @@
 <ng-container>
     
-    <button type="button" class="btn btn-icon {{progressEventsSource.getValue().length > 0 ? 'colored' : ''}}" 
+    <button type="button" class="btn btn-icon {{(progressEventsSource.getValue().length > 0 || updateAvailable) ? 'colored' : ''}}" 
         [ngbPopover]="popContent" title="Activity" placement="bottom" [popoverClass]="'nav-events'">
         <i aria-hidden="true" class="fa fa-wave-square"></i>
     </button>
@@ -14,9 +14,12 @@
                     <span class="sr-only">Scan for {{event.libraryName}} in progress</span>
                 </div>
                 {{prettyPrintProgress(event.progress)}}%
-                {{prettyPrintEvent(event.eventType)}} {{event.libraryName}}
+                {{prettyPrintEvent(event.eventType, event)}} {{event.libraryName}}
+            </li>
+            <li class="list-group-item dark-menu-item" *ngIf="progressEventsSource.getValue().length === 0 && !updateAvailable">Not much going on here</li>
+            <li class="list-group-item dark-menu-item update-available" *ngIf="updateAvailable" (click)="handleUpdateAvailableClick()">
+                <i class="fa fa-chevron-circle-up" aria-hidden="true"></i>&nbsp;Update available
             </li>
-            <li class="list-group-item dark-menu-item" *ngIf="progressEventsSource.getValue().length === 0">Not much going on here</li>
         </ul>
     </ng-template>
 </ng-container>

UI/Web/src/app/nav-events-toggle/nav-events-toggle.component.scss

@@ -20,4 +20,13 @@
 .colored {
     background-color: colors.$primary-color;
     border-radius: 60px;
+}
+
+.update-available {
+    cursor: pointer;
+    
+    i.fa {
+        color: colors.$primary-color !important;
+    }
+    color: colors.$primary-color;
 }

UI/Web/src/app/nav-events-toggle/nav-events-toggle.component.ts

@@ -1,6 +1,8 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { UpdateNotificationModalComponent } from '../shared/update-notification/update-notification-modal.component';
 import { ProgressEvent } from '../_models/events/scan-library-progress-event';
 import { User } from '../_models/user';
 import { LibraryService } from '../_services/library.service';
@@ -16,6 +18,8 @@ interface ProcessedEvent {
 
 type ProgressType = EVENTS.ScanLibraryProgress | EVENTS.RefreshMetadataProgress | EVENTS.BackupDatabaseProgress | EVENTS.CleanupProgress;
 
+const acceptedEvents = [EVENTS.ScanLibraryProgress, EVENTS.RefreshMetadataProgress, EVENTS.BackupDatabaseProgress, EVENTS.CleanupProgress, EVENTS.DownloadProgress];
+
 @Component({
   selector: 'app-nav-events-toggle',
   templateUrl: './nav-events-toggle.component.html',
@@ -33,7 +37,11 @@ export class NavEventsToggleComponent implements OnInit, OnDestroy {
   progressEventsSource = new BehaviorSubject<ProcessedEvent[]>([]);
   progressEvents$ = this.progressEventsSource.asObservable();
 
-  constructor(private messageHub: MessageHubService, private libraryService: LibraryService) { }
+  updateAvailable: boolean = false;
+  updateBody: any;
+  private updateNotificationModalRef: NgbModalRef | null = null;
+
+  constructor(private messageHub: MessageHubService, private libraryService: LibraryService, private modalService: NgbModal) { }
   
   ngOnDestroy(): void {
     this.onDestroy.next();
@@ -43,8 +51,11 @@ export class NavEventsToggleComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.messageHub.messages$.pipe(takeUntil(this.onDestroy)).subscribe(event => {
-      if (event.event === EVENTS.ScanLibraryProgress || event.event === EVENTS.RefreshMetadataProgress || event.event === EVENTS.BackupDatabaseProgress  || event.event === EVENTS.CleanupProgress) {
+      if (acceptedEvents.includes(event.event)) {
         this.processProgressEvent(event, event.event);
+      } else if (event.event === EVENTS.UpdateAvailable) {
+        this.updateAvailable = true;
+        this.updateBody = event.payload;
       }
     });
   }
@@ -64,7 +75,7 @@ export class NavEventsToggleComponent implements OnInit, OnDestroy {
 
       if (scanEvent.progress !== 1) {
         const libraryName = names[scanEvent.libraryId] || '';
-        const newEvent = {eventType: eventType, timestamp: scanEvent.eventTime, progress: scanEvent.progress, libraryId: scanEvent.libraryId, libraryName};
+        const newEvent = {eventType: eventType, timestamp: scanEvent.eventTime, progress: scanEvent.progress, libraryId: scanEvent.libraryId, libraryName, rawBody: event.payload};
         data.push(newEvent);
       }
 
@@ -73,16 +84,29 @@ export class NavEventsToggleComponent implements OnInit, OnDestroy {
     });
   }
 
+  handleUpdateAvailableClick() {
+    if (this.updateNotificationModalRef != null) { return; }
+    this.updateNotificationModalRef = this.modalService.open(UpdateNotificationModalComponent, { scrollable: true, size: 'lg' });
+    this.updateNotificationModalRef.componentInstance.updateData = this.updateBody;
+    this.updateNotificationModalRef.closed.subscribe(() => {
+      this.updateNotificationModalRef = null;
+    });
+    this.updateNotificationModalRef.dismissed.subscribe(() => {
+      this.updateNotificationModalRef = null;
+    });
+  }
+
   prettyPrintProgress(progress: number) {
     return Math.trunc(progress * 100);
   }
 
-  prettyPrintEvent(eventType: string) {
+  prettyPrintEvent(eventType: string, event: any) {
     switch(eventType) {
       case (EVENTS.ScanLibraryProgress): return 'Scanning ';
       case (EVENTS.RefreshMetadataProgress): return 'Refreshing ';
       case (EVENTS.CleanupProgress): return 'Clearing Cache';
       case (EVENTS.BackupDatabaseProgress): return 'Backing up Database';
+      case (EVENTS.DownloadProgress): return event.rawBody.userName.charAt(0).toUpperCase() + event.rawBody.userName.substr(1) + ' is downloading ' + event.rawBody.downloadName;
       default: return eventType;
     }
   }

UI/Web/src/app/register-member/register-member.component.html

@@ -12,8 +12,12 @@
     </div>
     
     <div class="form-group" *ngIf="registerForm.get('isAdmin')?.value || !authDisabled">
-        <label for="password">Password</label>
-        <input id="password" class="form-control" formControlName="password" type="password">
+        <label for="password">Password</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="passwordTooltip" role="button" tabindex="0"></i>
+        <ng-template #passwordTooltip>
+            Password must be between 6 and 32 characters in length
+        </ng-template>
+        <span class="sr-only" id="password-help"><ng-container [ngTemplateOutlet]="passwordTooltip"></ng-container></span>
+        <input id="password" class="form-control" formControlName="password" type="password" aria-describedby="password-help">
     </div>
 
     <div class="form-check" *ngIf="!firstTimeFlow">

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

@@ -302,17 +302,11 @@ export class SeriesDetailComponent implements OnInit, OnDestroy {
 
 
   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.')) {
+    this.actionService.deleteSeries(series, (result: boolean) => {
       this.actionInProgress = false;
-      return;
-    }
-
-    this.seriesService.delete(series.id).subscribe((res: boolean) => {
-      if (res) {
-        this.toastr.success('Series deleted');
+      if (result) {
         this.router.navigate(['library', this.libraryId]);
       }
-      this.actionInProgress = false;
     });
   }
 

UI/Web/src/app/shared/shared.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
-import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbCollapseModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
 import { SafeHtmlPipe } from './safe-html.pipe';
 import { RegisterMemberComponent } from '../register-member/register-member.component';
@@ -37,6 +37,7 @@ import { SentenceCasePipe } from './sentence-case.pipe';
     RouterModule,
     ReactiveFormsModule,
     NgbCollapseModule,
+    NgbTooltipModule, // RegisterMemberComponent
     NgCircleProgressModule.forRoot(),
   ],
   exports: [