Added the ComicImport page [#539]

 * Added routing to show the page.
 * Added user preference loading.
 * Added a menu item to go to the page.

comixed-web/angular.json

@@ -17,6 +17,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "allowedCommonJsDependencies": ["lodash"],
             "outputPath": "target/classes/static",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -49,13 +50,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
+                  "maximumWarning": "4mb",
                   "maximumError": "5mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
+                  "maximumWarning": "150kb",
+                  "maximumError": "150kb"
                 }
               ]
             }

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

@@ -23,17 +23,18 @@ import { LoggerModule } from '@angular-ru/logger';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import {
   initialState as initialUserState,
-  USER_FEATURE_KEY,
+  USER_FEATURE_KEY
 } from '@app/user/reducers/user.reducer';
 import {
   BUSY_FEATURE_KEY,
-  initialState as initialBusyState,
+  initialState as initialBusyState
 } from '@app/core/reducers/busy.reducer';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('AppComponent', () => {
   const initialState = {
     [USER_FEATURE_KEY]: initialUserState,
-    [BUSY_FEATURE_KEY]: initialBusyState,
+    [BUSY_FEATURE_KEY]: initialBusyState
   };
 
   let component: AppComponent;
@@ -42,9 +43,13 @@ describe('AppComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule, LoggerModule.forRoot()],
+      imports: [
+        RouterTestingModule,
+        TranslateModule.forRoot(),
+        LoggerModule.forRoot()
+      ],
       declarations: [AppComponent],
-      providers: [provideMockStore({ initialState })],
+      providers: [provideMockStore({ initialState })]
     }).compileComponents();
 
     fixture = TestBed.createComponent(AppComponent);

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

@@ -23,6 +23,7 @@ import { selectUser } from '@app/user/selectors/user.selectors';
 import { User } from '@app/user/models/user';
 import { loadCurrentUser } from '@app/user/actions/user.actions';
 import { selectBusyState } from '@app/core/selectors/busy.selectors';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'cx-root',
@@ -33,7 +34,12 @@ export class AppComponent implements OnInit {
   user: User = null;
   busy = false;
 
-  constructor(private logger: LoggerService, private store: Store<any>) {
+  constructor(
+    private logger: LoggerService,
+    private translateService: TranslateService,
+    private store: Store<any>
+  ) {
+    this.translateService.use('en');
     this.logger.trace('Subscribing to user changes');
     this.store.select(selectUser).subscribe(user => {
       this.logger.debug('User updated:', user);

comixed-web/src/app/app.module.ts

@@ -34,7 +34,7 @@ import { StoreRouterConnectingModule } from '@ngrx/router-store';
 import {
   TranslateCompiler,
   TranslateLoader,
-  TranslateModule
+  TranslateModule,
 } from '@ngx-translate/core';
 import { HttpLoaderFactory } from '@app/app.translate';
 import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
@@ -43,11 +43,18 @@ import { LoggerLevel, LoggerModule } from '@angular-ru/logger';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { ComicImportModule } from '@app/comic-import/comic-import.module';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import {
+  _MatMenuDirectivesModule,
+  MatMenuModule,
+} from '@angular/material/menu';
 
 @NgModule({
   declarations: [AppComponent, HomeComponent, NavigationBarComponent],
   imports: [
     UserModule,
+    ComicImportModule,
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
@@ -61,21 +68,24 @@ import { MatTooltipModule } from '@angular/material/tooltip';
       loader: {
         provide: TranslateLoader,
         useFactory: HttpLoaderFactory,
-        deps: [HttpClient]
+        deps: [HttpClient],
       },
       compiler: {
         provide: TranslateCompiler,
-        useClass: TranslateMessageFormatCompiler
+        useClass: TranslateMessageFormatCompiler,
       },
-      defaultLanguage: 'en'
+      defaultLanguage: 'en',
     }),
     MatButtonModule,
     MatFormFieldModule,
-    MatTooltipModule
+    MatTooltipModule,
+    MatProgressSpinnerModule,
+    _MatMenuDirectivesModule,
+    MatMenuModule,
   ],
   providers: [
-    [{ provide: HTTP_INTERCEPTORS, useClass: HttpInterceptor, multi: true }]
+    [{ provide: HTTP_INTERCEPTORS, useClass: HttpInterceptor, multi: true }],
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
 export class AppModule {}

comixed-web/src/app/comic-import/comic-import-routing.module.ts

@@ -0,0 +1,34 @@
+/*
+ * ComiXed - A digital comic book library management application.
+ * Copyright (C) 2020, The ComiXed Project
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses>
+ */
+
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { ImportComicsComponent } from './pages/import-comics/import-comics.component';
+
+const routes: Routes = [
+  {
+    path: 'admin/import',
+    component: ImportComicsComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ComicImportRoutingModule {}

comixed-web/src/app/comic-import/components/import-toolbar/import-toolbar.component.html

@@ -1,25 +1,29 @@
 <div class="cx-width-100">
   <form [formGroup]="loadFilesForm">
-    <div class="cx-width-80">
-      <input id="directory"
-             matInput
-             formControlName="directory"
-             [placeholder]="'load-comic-files.directory-placeholder'|translate"
-             required>
+    <div fxLayout="row">
+      <div fxFlex="60"
+           class="cx-padding-left-5 cx-padding-right-15">
+        <input id="directory"
+               class="cx-width-100"
+               matInput
+               formControlName="directory"
+               [placeholder]="'load-comic-files.directory-placeholder'|translate"
+               required>
+      </div>
+      <div fxFlex="20">
+        <mat-select formControlName="maximum">
+          <mat-option *ngFor="let option of maximumOptions"
+                      [value]="option.value">{{option.label|translate}}</mat-option>
+        </mat-select>
+      </div>
+      <div fxFlex="20">
+        <button mat-icon-button
+                color="primary"
+                [disabled]="!loadFilesForm.valid"
+                (click)="onLoadFiles()">
+          <mat-icon>search</mat-icon>
+          <span>{{"button.load"|translate}}</span></button>
+      </div>
     </div>
-    <div class="cx-width-10">
-      <mat-select formControlName="maximum">
-        <mat-option *ngFor="let option of maximumOptions"
-                    [value]="option.value">{{option.label|translate}}</mat-option>
-      </mat-select>
-    </div>
-
-    <button mat-icon-button
-            color="primary"
-            [disabled]="!loadFilesForm.valid"
-            (click)="onLoadFiles()">
-      <mat-icon>search</mat-icon>
-      <span>{{"button.load"|translate}}</span></button>
-
   </form>
 </div>

comixed-web/src/app/comic-import/pages/import-comics/import-comics.component.html

@@ -0,0 +1,29 @@
+<div fxLayout="column">
+  <div>
+    <cx-import-toolbar></cx-import-toolbar>
+  </div>
+  <div>
+    <h2>{{"import-comic-files.page-title"|translate:{count: files.length, selected: selectedFiles.length} }}</h2>
+  </div>
+  <div fxLayout="row">
+    <div fxFlex>
+      <cx-comic-file-list [files]="files"
+                          [selectedFiles]="selectedFiles"
+                          (currentFile)="onCurrentFile($event)"></cx-comic-file-list>
+    </div>
+    <div fxFlex="20">
+      <div fxLayout="column">
+        <mat-checkbox [(ngModel)]="ignoreMetadata">{{"import-comic-files.label.ignore-metadata"|translate}}</mat-checkbox>
+        <mat-checkbox [(ngModel)]="deleteBlockedPages">{{"import-comic-files.label.delete-blocked-pages"|translate}}</mat-checkbox>
+        <button mat-flat-button
+                [disabled]="selectedFiles.length === 0"
+                (click)="onStartImport()">
+          <mat-icon>start</mat-icon>
+          <span>{{"button.start"|translate}}</span>
+        </button>
+        <cx-comic-file-details [file]="currentFile"
+                               [selected]="currentFileSelected"></cx-comic-file-details>
+      </div>
+    </div>
+  </div>
+</div>