Added more UI changes to make it reactive [#667]

 * Changed the main area to be vertically scrollable.
 * Changed the comic cover display toolbar.

comixed-rest-api/src/main/java/org/comixedproject/controller/comic/ComicFormatController.java

@@ -42,7 +42,11 @@ public class ComicFormatController {
   @Autowired private ComicFormatService comicFormatService;
   @Autowired private SimpMessagingTemplate messagingTemplate;
 
-  /** Retrieves the list of all comic formats and publishes them. */
+  /**
+   * Retrieves the list of all comic formats and publishes them.
+   *
+   * @param principal the user principal
+   */
   @MessageMapping(Constants.LOAD_COMIC_FORMATS)
   public void getAll(final Principal principal) {
     log.info("Getting all comic formats for {}", principal.getName());

comixed-web/src/app/app.component.html

@@ -7,7 +7,7 @@
     ></mat-progress-spinner>
   </div>
 </div>
-<div class="cx-width-100 cx-height-100">
+<div id="cx-navigation-bar" class="cx-width-100 cx-height-100">
   <cx-navigation-bar
     [user]="user"
     (toggleSidebar)="sidenav.toggle()"
@@ -19,14 +19,17 @@
       </div>
     </mat-sidenav>
     <mat-sidenav-content #sidebar>
-      <div class="cx-width-100 cx-height-100">
+      <div
+        id="cx-main-content-area"
+        class="cx-width-100 cx-height-100 cx-margin-bottom-50px"
+      >
         <router-outlet></router-outlet>
       </div>
     </mat-sidenav-content>
   </mat-sidenav-container>
 
   <div
-    id="footer"
+    id="cx-footer"
     class="cx-width-100 cx-padding-left-15 cx-padding-right-15 cx-padding-top-5 cx-padding-bottom-5"
   >
     <cx-footer [user]="user"></cx-footer>

comixed-web/src/app/app.component.scss

@@ -1,6 +1,18 @@
 @import '~theme';
 
-#footer {
+#cx-navigation-bar {
+  left: 0;
+  top: 0;
+  position: fixed;
+  z-index: 100;
+}
+
+#cx-main-content-area {
+  height: 100%;
+  overflow-y: scroll;
+}
+
+#cx-footer {
   left: 0;
   bottom: 0;
   position: fixed;

comixed-web/src/app/app.component.spec.ts

@@ -55,6 +55,13 @@ import {
   initialState as initialComicListState
 } from '@app/library/reducers/comic-list.reducer';
 import { loadComics } from '@app/library/actions/comic-list.actions';
+import {
+  MatSidenavContainer,
+  MatSidenavModule
+} from '@angular/material/sidenav';
+import { SideNavigationComponent } from '@app/components/side-navigation/side-navigation.component';
+import { FooterComponent } from '@app/components/footer/footer.component';
+import { MatListModule } from '@angular/material/list';
 
 describe('AppComponent', () => {
   const USER = USER_READER;
@@ -78,7 +85,12 @@ describe('AppComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [AppComponent, NavigationBarComponent],
+      declarations: [
+        AppComponent,
+        NavigationBarComponent,
+        SideNavigationComponent,
+        FooterComponent
+      ],
       imports: [
         NoopAnimationsModule,
         RouterTestingModule.withRoutes([{ path: '**', redirectTo: '' }]),
@@ -91,7 +103,9 @@ describe('AppComponent', () => {
         MatTooltipModule,
         MatFormFieldModule,
         MatDividerModule,
-        MatSelectModule
+        MatSelectModule,
+        MatSidenavModule,
+        MatListModule
       ],
       providers: [provideMockStore({ initialState })]
     }).compileComponents();

comixed-web/src/app/components/navigation-bar/navigation-bar.component.spec.ts

@@ -279,4 +279,15 @@ describe('NavigationBarComponent', () => {
     component.onShowBuildDetails();
     expect(router.navigate).toHaveBeenCalledWith(['/build']);
   });
+
+  describe('toggling the sidebar', () => {
+    beforeEach(() => {
+      spyOn(component.toggleSidebar, 'emit');
+      component.onToggleSidebar();
+    });
+
+    it('emits an event', () => {
+      expect(component.toggleSidebar.emit).toHaveBeenCalled();
+    });
+  });
 });

comixed-web/src/app/components/side-navigation/side-navigation.component.spec.ts

@@ -21,6 +21,7 @@ import { SideNavigationComponent } from './side-navigation.component';
 import { LoggerModule } from '@angular-ru/logger';
 import { TranslateModule } from '@ngx-translate/core';
 import { USER_ADMIN, USER_READER } from '@app/user/user.fixtures';
+import { MatListModule } from '@angular/material/list';
 
 describe('SideNavigationComponent', () => {
   let component: SideNavigationComponent;
@@ -29,7 +30,11 @@ describe('SideNavigationComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [SideNavigationComponent],
-      imports: [LoggerModule.forRoot(), TranslateModule.forRoot()]
+      imports: [
+        LoggerModule.forRoot(),
+        TranslateModule.forRoot(),
+        MatListModule
+      ]
     }).compileComponents();
   }));
 

comixed-web/src/app/library/components/comic-covers/comic-covers.component.html

@@ -1,13 +1,9 @@
 <div class="cx-width-100 cx-height-100">
-  <mat-toolbar>
-    <div class="cx-spacer"></div>
-    <mat-paginator
-      [pageSizeOptions]="paginationOptions"
-      [showFirstLastButtons]="true"
-      [pageSize]="pagination"
-      (page)="onPaginationChange($event.pageSize)"
-    ></mat-paginator>
-  </mat-toolbar>
+  <cx-library-toolbar
+    [comics]="comics"
+    [selected]="selected"
+    [pagination]="pagination"
+  ></cx-library-toolbar>
   <div id="cx-all-comics" class="cx-comic-detail-card-container">
     <cx-comic-detail-card
       *ngFor="let comic of comics"

comixed-web/src/app/library/components/comic-covers/comic-covers.component.spec.ts

@@ -55,6 +55,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatMenuModule } from '@angular/material/menu';
 import { ComicDetailsDialogComponent } from '@app/library/components/comic-details-dialog/comic-details-dialog.component';
+import { LibraryToolbarComponent } from '@app/library/components/library-toolbar/library-toolbar.component';
 
 describe('ComicCoversComponent', () => {
   const PAGINATION = 25;
@@ -73,7 +74,7 @@ describe('ComicCoversComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ComicCoversComponent],
+      declarations: [ComicCoversComponent, LibraryToolbarComponent],
       imports: [
         NoopAnimationsModule,
         RouterTestingModule.withRoutes([{ path: '**', redirectTo: '' }]),
@@ -107,21 +108,6 @@ describe('ComicCoversComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  describe('pagination changes', () => {
-    beforeEach(() => {
-      component.onPaginationChange(PAGINATION);
-    });
-
-    it('fires an action', () => {
-      expect(store.dispatch).toHaveBeenCalledWith(
-        saveUserPreference({
-          name: PAGINATION_PREFERENCE,
-          value: `${PAGINATION}`
-        })
-      );
-    });
-  });
-
   describe('loading comics to display', () => {
     beforeEach(() => {
       component.dataSource.data = [];
@@ -212,17 +198,6 @@ describe('ComicCoversComponent', () => {
     });
   });
 
-  describe('chaning the language used', () => {
-    beforeEach(() => {
-      component.paginator._intl.itemsPerPageLabel = null;
-      translateService.use('fr');
-    });
-
-    it('sets the items per page label', () => {
-      expect(component.paginator._intl.itemsPerPageLabel).not.toBeNull();
-    });
-  });
-
   describe('setting the read state', () => {
     const READ = Math.random() > 0.5;
 

comixed-web/src/app/library/components/comic-covers/comic-covers.component.ts

@@ -26,18 +26,10 @@ import {
 } from '@angular/core';
 import { Comic } from '@app/library';
 import { MatTableDataSource } from '@angular/material/table';
-import { MatPaginator } from '@angular/material/paginator';
-import { BehaviorSubject, Subscription } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
 import { LoggerService } from '@angular-ru/logger';
 import { Store } from '@ngrx/store';
-import { saveUserPreference } from '@app/user/actions/user.actions';
-import {
-  PAGINATION_OPTIONS,
-  PAGINATION_PREFERENCE
-} from '@app/library/library.constants';
-import { selectDisplayState } from '@app/library/selectors/display.selectors';
 import { ActivatedRoute, Router } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
 import {
   deselectComics,
   selectComics,
@@ -46,48 +38,36 @@ import {
 import { MatMenuTrigger } from '@angular/material/menu';
 import { MatDialog } from '@angular/material/dialog';
 import { ComicDetailsDialogComponent } from '@app/library/components/comic-details-dialog/comic-details-dialog.component';
+import { PAGINATION_DEFAULT } from '@app/library/library.constants';
+import { LibraryToolbarComponent } from '@app/library/components/library-toolbar/library-toolbar.component';
 
 @Component({
   selector: 'cx-comic-covers',
   templateUrl: './comic-covers.component.html',
   styleUrls: ['./comic-covers.component.scss']
 })
 export class ComicCoversComponent implements OnInit, OnDestroy, AfterViewInit {
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(LibraryToolbarComponent) toolbar: LibraryToolbarComponent;
   @ViewChild(MatMenuTrigger) contextMenu: MatMenuTrigger;
 
   @Input() selected: Comic[] = [];
 
-  readonly paginationOptions = PAGINATION_OPTIONS;
-
-  langChangeSubscription: Subscription;
-  displaySubscription: Subscription;
-  pagination = this.paginationOptions[0];
+  pagination = PAGINATION_DEFAULT;
 
   dataSource = new MatTableDataSource<Comic>();
   comic: Comic = null;
   contextMenuX = '';
   contextMenuY = '';
+
   private _comicObservable = new BehaviorSubject<Comic[]>([]);
 
   constructor(
     private logger: LoggerService,
     private store: Store<any>,
     private activatedRoute: ActivatedRoute,
     private router: Router,
-    private translateService: TranslateService,
     private dialog: MatDialog
-  ) {
-    this.langChangeSubscription = this.translateService.onLangChange.subscribe(
-      () => this.loadTranslations()
-    );
-    this.displaySubscription = this.store
-      .select(selectDisplayState)
-      .subscribe(state => {
-        this.logger.debug('loading pagination from preferences');
-        this.pagination = state.pagination;
-      });
-  }
+  ) {}
 
   get comics(): Comic[] {
     return this._comicObservable.getValue();
@@ -104,22 +84,6 @@ export class ComicCoversComponent implements OnInit, OnDestroy, AfterViewInit {
 
   ngOnDestroy(): void {
     this.dataSource.disconnect();
-    this.displaySubscription.unsubscribe();
-  }
-
-  ngAfterViewInit(): void {
-    this.dataSource.paginator = this.paginator;
-    this.loadTranslations();
-  }
-
-  onPaginationChange(pagination: number): void {
-    this.logger.debug('Pagination changed:', pagination);
-    this.store.dispatch(
-      saveUserPreference({
-        name: PAGINATION_PREFERENCE,
-        value: `${pagination}`
-      })
-    );
   }
 
   isSelected(comic: Comic): boolean {
@@ -159,10 +123,7 @@ export class ComicCoversComponent implements OnInit, OnDestroy, AfterViewInit {
     this.store.dispatch(setReadState({ comics: this.selected, read }));
   }
 
-  private loadTranslations(): void {
-    this.logger.debug('Loading translations');
-    this.paginator._intl.itemsPerPageLabel = this.translateService.instant(
-      'library.label.pagination-items-per-page'
-    );
+  ngAfterViewInit(): void {
+    this.dataSource.paginator = this.toolbar.paginator;
   }
 }

comixed-web/src/app/library/components/library-toolbar/library-toolbar.component.html

@@ -1,4 +1,11 @@
-<mat-toolbar>
+<mat-toolbar class="cx-primary-light-background">
+  <mat-paginator
+    class="cx-primary-light-background"
+    [pageSizeOptions]="paginationOptions"
+    [showFirstLastButtons]="true"
+    [pageSize]="pagination"
+    (page)="onPaginationChange($event.pageSize)"
+  ></mat-paginator>
   <div class="cx-spacer"></div>
   <button
     id="select-all-button"