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/_modals/edit-series-modal/edit-series-modal.component.html

@@ -160,7 +160,6 @@
         <div [ngbNavOutlet]="nav" class="mt-3"></div>
     </div>
     <div class="modal-footer">
-        <!-- TODO: Replace secondary buttons in modals with btn-light -->
         <button type="button" class="btn btn-secondary" (click)="close()">Close</button>
         <button type="submit" class="btn btn-primary" (click)="save()">Save</button>
     </div>

UI/Web/src/app/_models/in-progress-chapter.ts

@@ -1,4 +1,3 @@
-//TODO: Refactor this name to something better
 export interface InProgressChapter {
     id: number;
     range: string;

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

@@ -14,7 +14,8 @@ export class LibraryService {
 
   baseUrl = environment.apiUrl;
 
-  libraryNames: {[key:number]: string} | undefined = undefined;
+  private libraryNames: {[key:number]: string} | undefined = undefined;
+  private libraryTypes: {[key: number]: LibraryType} | undefined = undefined;
 
   constructor(private httpClient: HttpClient) {}
 
@@ -75,8 +76,17 @@ export class LibraryService {
   }
 
   getLibraryType(libraryId: number) {
-    // TODO: Cache this in browser
-    return this.httpClient.get<LibraryType>(this.baseUrl + 'library/type?libraryId=' + libraryId);
+    if (this.libraryTypes != undefined && this.libraryTypes.hasOwnProperty(libraryId)) {
+      return of(this.libraryTypes[libraryId]);
+    }
+    return this.httpClient.get<LibraryType>(this.baseUrl + 'library/type?libraryId=' + libraryId).pipe(map(l => {
+      if (this.libraryTypes === undefined) {
+        this.libraryTypes = {};
+      }
+
+      this.libraryTypes[libraryId] = l;
+      return this.libraryTypes[libraryId];
+    }));
   }
 
   search(term: string) {

UI/Web/src/app/admin/_modals/directory-picker/directory-picker.component.ts

@@ -42,7 +42,6 @@ export class DirectoryPickerComponent implements OnInit {
   }
 
   goBack() {
-    // BUG: When Going back to initial listing, this code gets stuck on first drive
     this.routeStack.pop();
     const stackPeek = this.routeStack.peek();
     if (stackPeek !== undefined) {
@@ -53,7 +52,6 @@ export class DirectoryPickerComponent implements OnInit {
       this.currentRoot = '';
       this.loadChildren(this.currentRoot);
     }
-    
   }
 
   loadChildren(path: string) {

UI/Web/src/app/admin/_modals/edit-rbs-modal/edit-rbs-modal.component.ts

@@ -30,7 +30,7 @@ export class EditRbsModalComponent implements OnInit {
   }
 
   close() {
-    this.modal.close(false);
+    this.modal.close(undefined);
   }
 
   save() {
@@ -42,8 +42,10 @@ export class EditRbsModalComponent implements OnInit {
     this.memberService.updateMemberRoles(this.member?.username, selectedRoles).subscribe(() => {
       if (this.member) {
         this.member.roles = selectedRoles;
+        this.modal.close(this.member);
+        return;
       }
-      this.modal.close(true);
+      this.modal.close(undefined);
     });
   }
 

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

@@ -69,7 +69,7 @@ export class ManageLibraryComponent implements OnInit, OnDestroy {
       this.libraryService.delete(library.id).pipe(take(1)).subscribe(() => {
         this.deletionInProgress = false;
         this.getLibraries();
-        this.toastr.success('Library has been removed'); // BUG: This is not causing a refresh
+        this.toastr.success('Library has been removed');
       });
     }
   }

UI/Web/src/app/admin/manage-settings/manage-settings.component.html

@@ -25,18 +25,14 @@
         </div>
 
         <div class="form-group">
-            <label for="stat-collection">Allow Anonymous Usage Collection</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="statTooltip" role="button" tabindex="0"></i>
-            <ng-template #statTooltip>Send anonymous usage and error information to Kavita's servers. This includes information on your browser, error reporting as well as OS and runtime version. We will use this information to prioritize features and bug fixes. Requires restart to take effect.</ng-template>
-            <span class="sr-only" id="logging-level-port-help">Send anonymous usage and error information to Kavita's servers. This includes information on your browser, error reporting as well as OS and runtime version. We will use this information to prioritize features and bug fixes. Requires restart to take effect.</span>
-            <p class="accent">Send anonymous usage and error information to Kavita's servers. This includes information on your browser, error reporting as well as OS and runtime version. We will use this information to prioritize features and bug fixes. Requires restart to take effect</p>
+            <label for="stat-collection" aria-describedby="collection-info">Allow Anonymous Usage Collection</label>
+            <p class="accent" id="collection-info">Send anonymous usage and error information to Kavita's servers. This includes information on your browser, error reporting as well as OS and runtime version. We will use this information to prioritize features, bug fixes, and preformance tuning. Requires restart to take effect.</p>
             <div class="form-check">
                 <input id="stat-collection" type="checkbox" aria-label="Admin" class="form-check-input" formControlName="allowStatCollection">
                 <label for="stat-collection" class="form-check-label">Send Data</label>
             </div>
         </div>
 
-        
-
         <h4>Reoccuring Tasks</h4>
         <div class="form-group">
             <label for="settings-tasks-scan">Library Scan</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="taskScanTooltip" role="button" tabindex="0"></i>

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

@@ -82,6 +82,11 @@ export class ManageUsersComponent implements OnInit {
   openEditRole(member: Member) {
     const modalRef = this.modalService.open(EditRbsModalComponent);
     modalRef.componentInstance.member = member;
+    modalRef.closed.subscribe((updatedMember: Member) => {
+      if (updatedMember !== undefined) {
+        member = updatedMember;
+      }
+    })
   }
 
   updatePassword(member: Member) {

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

@@ -37,6 +37,8 @@ import { TypeaheadModule } from './typeahead/typeahead.module';
 import { AllCollectionsComponent } from './all-collections/all-collections.component';
 import { EditCollectionTagsComponent } from './_modals/edit-collection-tags/edit-collection-tags.component';
 import { RecentlyAddedComponent } from './recently-added/recently-added.component';
+import { LibraryCardComponent } from './library-card/library-card.component';
+import { SeriesCardComponent } from './series-card/series-card.component';
 
 let sentryProviders: any[] = [];
 
@@ -100,6 +102,8 @@ if (environment.production) {
     AllCollectionsComponent,
     EditCollectionTagsComponent,
     RecentlyAddedComponent,
+    LibraryCardComponent,
+    SeriesCardComponent
   ],
   imports: [
     HttpClientModule,

UI/Web/src/app/manga-reader/manga-reader.component.html

@@ -27,7 +27,7 @@
         <div class="webtoon-images" *ngIf="readerMode === READER_MODE.WEBTOON && !isLoading">
             <app-infinite-scroller [pageNum]="pageNum" [bufferPages]="5" [goToPage]="goToPageEvent" (pageNumberChange)="handleWebtoonPageChange($event)" [totalPages]="maxPages" [urlProvider]="getPageUrl"></app-infinite-scroller>
         </div>
-        <ng-container *ngIf="readerMode === READER_MODE.MANGA_LR || readerMode === READER_MODE.MANGA_UD"> <!--; else webtoonClickArea; TODO: See if people want this mode WEBTOON_WITH_CLICKS-->
+        <ng-container *ngIf="readerMode === READER_MODE.MANGA_LR || readerMode === READER_MODE.MANGA_UD"> <!--; else webtoonClickArea; See if people want this mode WEBTOON_WITH_CLICKS-->
             <div class="{{readerMode === READER_MODE.MANGA_LR ? 'right' : 'top'}} {{clickOverlayClass('right')}}" (click)="handlePageChange($event, 'right')"></div>
             <div class="{{readerMode === READER_MODE.MANGA_LR ? 'left' : 'bottom'}} {{clickOverlayClass('left')}}" (click)="handlePageChange($event, 'left')"></div>
         </ng-container>

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

@@ -7,10 +7,9 @@ import { EditSeriesModalComponent } from 'src/app/_modals/edit-series-modal/edit
 import { Series } from 'src/app/_models/series';
 import { AccountService } from 'src/app/_services/account.service';
 import { ImageService } from 'src/app/_services/image.service';
-import { LibraryService } from 'src/app/_services/library.service';
 import { ActionFactoryService, Action, ActionItem } from 'src/app/_services/action-factory.service';
 import { SeriesService } from 'src/app/_services/series.service';
-import { ConfirmService } from '../confirm.service';
+import { ConfirmService } from '../shared/confirm.service';
 
 @Component({
   selector: 'app-series-card',
@@ -30,9 +29,8 @@ export class SeriesCardComponent implements OnInit, OnChanges {
 
   constructor(private accountService: AccountService, private router: Router,
               private seriesService: SeriesService, private toastr: ToastrService,
-              private libraryService: LibraryService, private modalService: NgbModal,
-              private confirmService: ConfirmService, public imageService: ImageService,
-              private actionFactoryService: ActionFactoryService) {
+              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);

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

@@ -3,14 +3,12 @@ import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { CardItemComponent } from './card-item/card-item.component';
 import { NgbCollapseModule, NgbDropdownModule, NgbPaginationModule, NgbProgressbarModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import { LibraryCardComponent } from './library-card/library-card.component';
-import { SeriesCardComponent } from './series-card/series-card.component';
 import { CardDetailsModalComponent } from './_modals/card-details-modal/card-details-modal.component';
 import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
 import { SafeHtmlPipe } from './safe-html.pipe';
 import { LazyLoadImageModule } from 'ng-lazyload-image';
 import { CardActionablesComponent } from './card-item/card-actionables/card-actionables.component';
-import { RegisterMemberComponent } from './register-member/register-member.component';
+import { RegisterMemberComponent } from '../register-member/register-member.component';
 import { ReadMoreComponent } from './read-more/read-more.component';
 import { RouterModule } from '@angular/router';
 import { DrawerComponent } from './drawer/drawer.component';
@@ -24,8 +22,6 @@ import { A11yClickDirective } from './a11y-click.directive';
   declarations: [
     RegisterMemberComponent,
     CardItemComponent,
-    LibraryCardComponent,
-    SeriesCardComponent,
     CardDetailsModalComponent,
     ConfirmDialogComponent,
     SafeHtmlPipe,
@@ -49,10 +45,8 @@ import { A11yClickDirective } from './a11y-click.directive';
     NgbPaginationModule // CardDetailLayoutComponent
   ],
   exports: [
-    RegisterMemberComponent, // TODO: Move this out and put in normal app
+    RegisterMemberComponent,
     CardItemComponent,
-    LibraryCardComponent, // TODO: Move this out and put in normal app
-    SeriesCardComponent, // TODO: Move this out and put in normal app
     SafeHtmlPipe,
     CardActionablesComponent,
     ReadMoreComponent,

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

@@ -27,13 +27,6 @@ export class SelectionModel<T> {
     });
   }
 
-  // __lookupItem(item: T) {
-  //   if (this._propAccessor != '') {
-  //     // TODO: Implement this code to speedup lookups (use a map rather than array)
-  //   }
-  //   const dataItem = this._data.filter(data => data.value == d);
-  // }
-
   /**
    * Will toggle if the data item is selected or not. If data option is not tracked, will add it and set state to true.
    * @param data Item to toggle