Added missing tab titles [#1027]

* Fixed collection list page. * Fixed collection detail page. * Fixed the reading lists page. * Fixed the reading list detail page. * Fixed the unscraped comics page. * Fixed the web audit log. * Fixed the build details page. * Fixed the user preferences page.
comixed · Oct 13, 2021 · 9c84456 · 9c84456
1 parent 4278c29
commit 9c84456
Show file tree

Hide file tree

Showing 53 changed files with 398 additions and 43 deletions.
diff --git a/comixed-webui/src/app/admin/pages/web-audit-log-page/web-audit-log-page.component.ts b/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')
+    );
   }
 }
diff --git a/...c/app/blocked-pages/pages/blocked-page-list-page/blocked-page-list-page.component.spec.ts b/...c/app/blocked-pages/pages/blocked-page-list-page/blocked-page-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/blocked-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 { setBlockedPageDeletionFlags } from '@app/blocked-pages/actions/set-blocked-page-deletion-flag.actions';
+import { TitleService } from '@app/core/services/title.service';
 
 describe('BlockedPageListPageComponent', () => {
   const ENTRIES = [BLOCKED_PAGE_1, BLOCKED_PAGE_3, BLOCKED_PAGE_5];
@@ -60,6 +61,8 @@ describe('BlockedPageListPageComponent', () => {
   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('BlockedPageListPageComponent', () => {
         MatIconModule,
         MatTooltipModule
       ],
-      providers: [provideMockStore({ initialState }), ConfirmationService]
+      providers: [
+        provideMockStore({ initialState }),
+        ConfirmationService,
+        TitleService
+      ]
     }).compileComponents();
 
     fixture = TestBed.createComponent(BlockedPageListPageComponent);
@@ -86,13 +93,26 @@ describe('BlockedPageListPageComponent', () => {
     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({

diff --git a/...ui/src/app/blocked-pages/pages/blocked-page-list-page/blocked-page-list-page.component.ts b/...ui/src/app/blocked-pages/pages/blocked-page-list-page/blocked-page-list-page.component.ts
@@ -16,7 +16,13 @@
  * along with this program. If not, see <http://www.gnu.org/licenses>
  */
 
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  OnDestroy,
+  OnInit,
+  ViewChild
+} from '@angular/core';
 import { loadBlockedPageList } from '@app/blocked-pages/actions/blocked-page-list.actions';
 import { Store } from '@ngrx/store';
 import { LoggerService } from '@angular-ru/logger';
@@ -33,16 +39,20 @@ import { BlockedPage } from '@app/blocked-pages/models/blocked-page';
 import { SelectableListItem } from '@app/core/models/ui/selectable-list-item';
 import { ConfirmationService } from '@app/core/services/confirmation.service';
 import { setBlockedPageDeletionFlags } from '@app/blocked-pages/actions/set-blocked-page-deletion-flag.actions';
+import { TitleService } from '@app/core/services/title.service';
 
 @Component({
   selector: 'cx-blocked-page-list',
   templateUrl: './blocked-page-list-page.component.html',
   styleUrls: ['./blocked-page-list-page.component.scss']
 })
-export class BlockedPageListPageComponent implements OnInit, AfterViewInit {
+export class BlockedPageListPageComponent
+  implements OnInit, AfterViewInit, OnDestroy
+{
   @ViewChild('MatPagination') paginator: MatPaginator;
 
   pageSubscription: Subscription;
+  langChangeSubscription: Subscription;
   dataSource = new MatTableDataSource<SelectableListItem<BlockedPage>>([]);
   readonly displayedColumns = [
     'selected',
@@ -59,11 +69,15 @@ export class BlockedPageListPageComponent implements OnInit, AfterViewInit {
     private store: Store<any>,
     private router: Router,
     private confirmationService: ConfirmationService,
-    private translateService: TranslateService
+    private translateService: TranslateService,
+    private titleService: TitleService
   ) {
     this.pageSubscription = this.store
       .select(selectBlockedPageList)
       .subscribe(entries => (this.entries = entries));
+    this.langChangeSubscription = this.translateService.onLangChange.subscribe(
+      () => this.loadTranslations()
+    );
   }
 
   set entries(entries: BlockedPage[]) {
@@ -76,8 +90,16 @@ export class BlockedPageListPageComponent implements OnInit, AfterViewInit {
     this.hasSelections = this.dataSource.data.some(entry => entry.selected);
   }
 
+  ngOnDestroy(): void {
+    this.logger.trace('Unsubscribing from blocked page list updates');
+    this.pageSubscription.unsubscribe();
+    this.logger.trace('Unsubscribing from language changes');
+    this.langChangeSubscription.unsubscribe();
+  }
+
   ngOnInit(): void {
     this.store.dispatch(loadBlockedPageList());
+    this.loadTranslations();
   }
 
   onChangeSelection(
@@ -186,4 +208,11 @@ export class BlockedPageListPageComponent implements OnInit, AfterViewInit {
       })
     );
   }
+
+  private loadTranslations(): void {
+    this.logger.trace('Loading tab title');
+    this.titleService.setTitle(
+      this.translateService.instant('blocked-page-list.tab-title')
+    );
+  }
 }
diff --git a/...xed-webui/src/app/collections/pages/collection-detail/collection-detail.component.spec.ts b/...xed-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({

diff --git a/comixed-webui/src/app/collections/pages/collection-detail/collection-detail.component.ts b/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
+      })
+    );
   }
 }
diff --git a/comixed-webui/src/app/collections/pages/collection-list/collection-list.component.spec.ts b/comixed-webui/src/app/collections/pages/collection-list/collection-list.component.spec.ts
@@ -31,7 +31,8 @@ import {
 import { COMIC_1, COMIC_3, COMIC_5 } from '@app/comic-book/comic-book.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];
@@ -44,6 +45,8 @@ describe('CollectionListComponent', () => {
   let store: MockStore<any>;
   let activatedRoute: ActivatedRoute;
   let router: Router;
+  let titleService: TitleService;
+  let translateService: TranslateService;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -61,7 +64,8 @@ describe('CollectionListComponent', () => {
           useValue: {
             params: new BehaviorSubject<{}>({})
           }
-        }
+        },
+        TitleService
       ]
     }).compileComponents();
 
@@ -72,13 +76,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({