Added missing tab titles [#1027]

comixed-webui/src/app/admin/pages/web-audit-log-page/web-audit-log-page.component.ts

@@ -42,6 +42,7 @@ import {
 import { MatSort } from '@angular/material/sort';
 import { MatSidenav } from '@angular/material/sidenav';
 import { ConfirmationService } from '@app/core/services/confirmation.service';
+import { TitleService } from '@app/core/services/title.service';
 
 @Component({
   selector: 'cx-web-audit-log-page',
@@ -78,7 +79,8 @@ export class WebAuditLogPageComponent
     private logger: LoggerService,
     private store: Store<any>,
     private confirmationService: ConfirmationService,
-    private translateService: TranslateService
+    private translateService: TranslateService,
+    private titleService: TitleService
   ) {
     this.langChangeSubscription = this.translateService.onLangChange.subscribe(
       () => this.loadTranslations()
@@ -166,5 +168,8 @@ export class WebAuditLogPageComponent
     this.paginator._intl.itemsPerPageLabel = this.translateService.instant(
       'web-audit-log.label.pagination-items-per-page'
     );
+    this.titleService.setTitle(
+      this.translateService.instant('web-audit-log.tab-title')
+    );
   }
 }

comixed-webui/src/app/collections/pages/collection-detail/collection-detail.component.spec.ts

@@ -32,7 +32,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatMenuModule } from '@angular/material/menu';
 import { LibraryToolbarComponent } from '@app/library/components/library-toolbar/library-toolbar.component';
 import { MatIconModule } from '@angular/material/icon';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -65,6 +65,7 @@ import {
   initialState as initialUserState,
   USER_FEATURE_KEY
 } from '@app/user/reducers/user.reducer';
+import { TitleService } from '@app/core/services/title.service';
 
 describe('CollectionDetailComponent', () => {
   const COMICS = [COMIC_1, COMIC_2, COMIC_3, COMIC_4, COMIC_5];
@@ -81,6 +82,8 @@ describe('CollectionDetailComponent', () => {
   let store: MockStore<any>;
   let activatedRoute: ActivatedRoute;
   let router: Router;
+  let titleService: TitleService;
+  let translateService: TranslateService;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -115,7 +118,8 @@ describe('CollectionDetailComponent', () => {
               collectionName: 'Batman'
             })
           }
-        }
+        },
+        TitleService
       ]
     }).compileComponents();
 
@@ -126,13 +130,26 @@ describe('CollectionDetailComponent', () => {
     router = TestBed.inject(Router);
     spyOn(router, 'navigate');
     spyOn(router, 'navigateByUrl');
+    titleService = TestBed.inject(TitleService);
+    spyOn(titleService, 'setTitle');
+    translateService = TestBed.inject(TranslateService);
     fixture.detectChanges();
   }));
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
+  describe('when the language changes', () => {
+    beforeEach(() => {
+      translateService.use('fr');
+    });
+
+    it('loads the title', () => {
+      expect(titleService.setTitle).toHaveBeenCalledWith(jasmine.any(String));
+    });
+  });
+
   describe('when the collection type is invalid', () => {
     beforeEach(() => {
       (activatedRoute.params as BehaviorSubject<{}>).next({

comixed-webui/src/app/collections/pages/collection-detail/collection-detail.component.ts

@@ -32,6 +32,8 @@ import { ReadingList } from '@app/lists/models/reading-list';
 import { selectUserReadingLists } from '@app/lists/selectors/reading-lists.selectors';
 import { selectUser } from '@app/user/selectors/user.selectors';
 import { isAdmin } from '@app/user/user.functions';
+import { TitleService } from '@app/core/services/title.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'cx-collection-detail',
@@ -51,17 +53,21 @@ export class CollectionDetailComponent implements OnInit, OnDestroy {
   readingLists: ReadingList[] = [];
   userSubscription: Subscription;
   isAdmin = false;
+  langChangeSubscription: Subscription;
 
   constructor(
     private logger: LoggerService,
     private store: Store<any>,
     private activatedRoute: ActivatedRoute,
-    private router: Router
+    private router: Router,
+    private translateService: TranslateService,
+    private titleService: TitleService
   ) {
     this.paramSubscription = this.activatedRoute.params.subscribe(params => {
       this.routableTypeName = params.collectionType;
       this.collectionName = params.collectionName;
       this.collectionType = collectionTypeFromString(this.routableTypeName);
+      this.loadTranslations();
       if (!this.collectionType) {
         this.logger.error('Invalid collection type:', params.collectionType);
         this.router.navigateByUrl('/library');
@@ -97,9 +103,14 @@ export class CollectionDetailComponent implements OnInit, OnDestroy {
     this.readingListsSubscription = this.store
       .select(selectUserReadingLists)
       .subscribe(lists => (this.readingLists = lists));
+    this.langChangeSubscription = this.translateService.onLangChange.subscribe(
+      () => this.loadTranslations()
+    );
   }
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.loadTranslations();
+  }
 
   ngOnDestroy(): void {
     this.logger.trace('Unsubscribing from parameter updates');
@@ -111,5 +122,15 @@ export class CollectionDetailComponent implements OnInit, OnDestroy {
     this.userSubscription.unsubscribe();
     this.logger.trace('Unsubscribing from reading list updats');
     this.readingListsSubscription.unsubscribe();
+    this.langChangeSubscription.unsubscribe();
+  }
+
+  private loadTranslations(): void {
+    this.titleService.setTitle(
+      this.translateService.instant('collection-detail.tab-title', {
+        collection: this.collectionType,
+        name: this.collectionName
+      })
+    );
   }
 }

comixed-webui/src/app/collections/pages/collection-list/collection-list.component.spec.ts

@@ -35,7 +35,8 @@ import {
 } from '@app/comic-books/comic-books.fixtures';
 import { CollectionListEntry } from '@app/collections/models/collection-list-entry';
 import { MatTableModule } from '@angular/material/table';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { TitleService } from '@app/core/services/title.service';
 
 describe('CollectionListComponent', () => {
   const COMICS = [COMIC_1, COMIC_3, COMIC_5];
@@ -48,6 +49,8 @@ describe('CollectionListComponent', () => {
   let store: MockStore<any>;
   let activatedRoute: ActivatedRoute;
   let router: Router;
+  let titleService: TitleService;
+  let translateService: TranslateService;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -65,7 +68,8 @@ describe('CollectionListComponent', () => {
           useValue: {
             params: new BehaviorSubject<{}>({})
           }
-        }
+        },
+        TitleService
       ]
     }).compileComponents();
 
@@ -76,13 +80,26 @@ describe('CollectionListComponent', () => {
     router = TestBed.inject(Router);
     spyOn(router, 'navigate');
     spyOn(router, 'navigateByUrl');
+    titleService = TestBed.inject(TitleService);
+    spyOn(titleService, 'setTitle');
+    translateService = TestBed.inject(TranslateService);
     fixture.detectChanges();
   }));
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
+  describe('when the language changes', () => {
+    beforeEach(() => {
+      translateService.use('fr');
+    });
+
+    it('loads the title', () => {
+      expect(titleService.setTitle).toHaveBeenCalledWith(jasmine.any(String));
+    });
+  });
+
   describe('when the collection type is invalid', () => {
     beforeEach(() => {
       (activatedRoute.params as BehaviorSubject<{}>).next({

comixed-webui/src/app/collections/pages/collection-list/collection-list.component.ts

@@ -35,6 +35,8 @@ import { selectComicListCollection } from '@app/comic-books/selectors/comic-list
 import { MatTableDataSource } from '@angular/material/table';
 import { CollectionListEntry } from '@app/collections/models/collection-list-entry';
 import { MatSort } from '@angular/material/sort';
+import { TranslateService } from '@ngx-translate/core';
+import { TitleService } from '@app/core/services/title.service';
 
 @Component({
   selector: 'cx-collection-list',
@@ -53,16 +55,20 @@ export class CollectionListComponent
   collectionSubscription: Subscription;
   dataSource = new MatTableDataSource<CollectionListEntry>([]);
   readonly displayedColumns = ['name', 'comic-count'];
+  langChangeSubscription: Subscription;
 
   constructor(
     private logger: LoggerService,
     private store: Store<any>,
     private activatedRoute: ActivatedRoute,
-    private router: Router
+    private router: Router,
+    private translateService: TranslateService,
+    private titleService: TitleService
   ) {
     this.paramSubscription = this.activatedRoute.params.subscribe(params => {
       this.routableTypeName = params.collectionType;
       this.collectionType = collectionTypeFromString(this.routableTypeName);
+      this.loadTranslations();
       if (!this.collectionType) {
         this.logger.error('Invalid collection type:', params.collectionType);
         this.router.navigateByUrl('/library');
@@ -76,6 +82,9 @@ export class CollectionListComponent
           );
       }
     });
+    this.langChangeSubscription = this.translateService.onLangChange.subscribe(
+      () => this.loadTranslations()
+    );
   }
 
   set entries(entries: CollectionListEntry[]) {
@@ -88,9 +97,12 @@ export class CollectionListComponent
     if (!!this.collectionSubscription) {
       this.collectionSubscription.unsubscribe();
     }
+    this.langChangeSubscription.unsubscribe();
   }
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.loadTranslations();
+  }
 
   onShowCollection(entry: CollectionListEntry): void {
     this.logger.debug('Collection entry selected:', entry);
@@ -113,4 +125,12 @@ export class CollectionListComponent
       }
     };
   }
+
+  private loadTranslations(): void {
+    this.titleService.setTitle(
+      this.translateService.instant('collection-list.tab-title', {
+        collection: this.collectionType
+      })
+    );
+  }
 }

comixed-webui/src/app/comic-pages/pages/blocked-hash-list-page/blocked-hash-list-page.component.spec.ts

@@ -36,7 +36,7 @@ import {
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTableModule } from '@angular/material/table';
 import { MatPaginatorModule } from '@angular/material/paginator';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { downloadBlockedPages } from '@app/comic-pages/actions/download-blocked-pages.actions';
 import { MatDialogModule } from '@angular/material/dialog';
@@ -48,6 +48,7 @@ import { SelectableListItem } from '@app/core/models/ui/selectable-list-item';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { markPagesWithHash } from '@app/comic-pages/actions/blocked-hash-list.actions';
+import { TitleService } from '@app/core/services/title.service';
 
 describe('BlockedHashListPageComponent', () => {
   const ENTRIES = [BLOCKED_HASH_1, BLOCKED_HASH_3, BLOCKED_HASH_5];
@@ -60,6 +61,8 @@ describe('BlockedHashListPageComponent', () => {
   let router: Router;
   let store: MockStore<any>;
   let confirmationService: ConfirmationService;
+  let titleService: TitleService;
+  let translateService: TranslateService;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -76,7 +79,11 @@ describe('BlockedHashListPageComponent', () => {
         MatIconModule,
         MatTooltipModule
       ],
-      providers: [provideMockStore({ initialState }), ConfirmationService]
+      providers: [
+        provideMockStore({ initialState }),
+        ConfirmationService,
+        TitleService
+      ]
     }).compileComponents();
 
     fixture = TestBed.createComponent(BlockedHashListPageComponent);
@@ -86,13 +93,26 @@ describe('BlockedHashListPageComponent', () => {
     store = TestBed.inject(MockStore);
     spyOn(store, 'dispatch');
     confirmationService = TestBed.inject(ConfirmationService);
+    titleService = TestBed.inject(TitleService);
+    spyOn(titleService, 'setTitle');
+    translateService = TestBed.inject(TranslateService);
     fixture.detectChanges();
   }));
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
+  describe('when the language changes', () => {
+    beforeEach(() => {
+      translateService.use('fr');
+    });
+
+    it('loads the title', () => {
+      expect(titleService.setTitle).toHaveBeenCalledWith(jasmine.any(String));
+    });
+  });
+
   describe('receiving blocked page updates', () => {
     beforeEach(() => {
       store.setState({