Added the AddComicsToReadingList component and tests [#274]

comixed-frontend/src/app/library/components/add-comics-to-list-reading-list/add-comics-to-reading-list.component.html

@@ -0,0 +1,30 @@
+<p-dialog [visible]='showDialog'
+          [modal]='true'>
+  <form [formGroup]='readingListForm'>
+    <div class='ui-g'>
+      <div class='ui-g-12 cx-input-label'>
+        <label id='select-reading-list'>{{'add-comics-to-reading-list.label.select-reading-list'|translate}}</label>
+      </div>
+      <div class='ui-g-12'>
+        <p-dropdown class='cx-input-field'
+                    [options]='readingListOptions'
+                    formControlName='readingLists'></p-dropdown>
+      </div>
+      <div class='ui-g-12 cx-horizontal-centered'>
+        <button pButton
+                type='button'
+                class='cx-action-button ui-button-success'
+                icon='fa fa-fw fa-save'
+                [label]='"button.save"|translate'
+                [disabled]='!readingListForm.valid'
+                (click)='readingListSelected()'></button>
+        <button pButton
+                type='button'
+                class='cx-action-button ui-button-danger'
+                icon='fa fa-fw fa-cancel'
+                [label]='"button.cancel"|translate'
+                (click)='hideSelection()'></button>
+      </div>
+    </div>
+  </form>
+</p-dialog>

comixed-frontend/src/app/library/components/add-comics-to-list-reading-list/add-comics-to-reading-list.component.spec.ts

@@ -0,0 +1,87 @@
+/*
+ * 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddComicsToReadingListComponent } from './add-comics-to-reading-list.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { DropdownModule } from 'primeng/dropdown';
+import { DialogModule } from 'primeng/dialog';
+import { ButtonModule } from 'primeng/button';
+import {
+  LibraryAdaptor,
+  ReadingListAdaptor,
+  SelectionAdaptor
+} from 'app/library';
+import { StoreModule } from '@ngrx/store';
+import * as forReadingList from 'app/library/reducers/reading-list.reducer';
+import { READING_LIST_FEATURE_KEY } from 'app/library/reducers/reading-list.reducer';
+import * as forLibrary from 'app/library/reducers/library.reducer';
+import { LIBRARY_FEATURE_KEY } from 'app/library/reducers/library.reducer';
+import { EffectsModule } from '@ngrx/effects';
+import { ReadingListEffects } from 'app/library/effects/reading-list.effects';
+import { LibraryEffects } from 'app/library/effects/library.effects';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { LoggerModule } from '@angular-ru/logger';
+import { MessageService } from 'primeng/api';
+import { ComicsModule } from 'app/comics/comics.module';
+
+describe('AddComicsToReadingListComponent', () => {
+  let component: AddComicsToReadingListComponent;
+  let fixture: ComponentFixture<AddComicsToReadingListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        ComicsModule,
+        HttpClientTestingModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TranslateModule.forRoot(),
+        LoggerModule.forRoot(),
+        StoreModule.forRoot({}),
+        StoreModule.forFeature(
+          READING_LIST_FEATURE_KEY,
+          forReadingList.reducer
+        ),
+        StoreModule.forFeature(LIBRARY_FEATURE_KEY, forLibrary.reducer),
+        EffectsModule.forRoot([]),
+        EffectsModule.forFeature([ReadingListEffects, LibraryEffects]),
+        DropdownModule,
+        DialogModule,
+        ButtonModule
+      ],
+      declarations: [AddComicsToReadingListComponent],
+      providers: [
+        ReadingListAdaptor,
+        LibraryAdaptor,
+        SelectionAdaptor,
+        MessageService
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AddComicsToReadingListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

comixed-frontend/src/app/library/components/add-comics-to-list-reading-list/add-comics-to-reading-list.component.ts

@@ -0,0 +1,93 @@
+/*
+ * 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 { Component, OnDestroy, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import {
+  LibraryAdaptor,
+  ReadingListAdaptor,
+  SelectionAdaptor
+} from 'app/library';
+import { ReadingList } from 'app/comics/models/reading-list';
+import { Subscription } from 'rxjs';
+import { SelectItem } from 'primeng/api';
+import { Comic } from 'app/comics';
+
+@Component({
+  selector: 'app-add-comics-to-reading-list',
+  templateUrl: './add-comics-to-reading-list.component.html',
+  styleUrls: ['./add-comics-to-reading-list.component.scss']
+})
+export class AddComicsToReadingListComponent implements OnInit, OnDestroy {
+  readingListForm: FormGroup;
+  showDialogSubscription: Subscription;
+  showDialog = false;
+  readingListsSubscription: Subscription;
+  readingLists: ReadingList[];
+  readingListOptions: SelectItem[] = [];
+  selectedComicsSubscription: Subscription;
+  selectedComics: Comic[] = [];
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private readingListAdaptor: ReadingListAdaptor,
+    private libraryAdaptor: LibraryAdaptor,
+    private selectionAdaptor: SelectionAdaptor
+  ) {
+    this.readingListForm = this.formBuilder.group({
+      readingLists: ['', Validators.required]
+    });
+    this.showDialogSubscription = this.readingListAdaptor.showSelectionDialog$.subscribe(
+      show => (this.showDialog = show)
+    );
+    this.readingListsSubscription = this.libraryAdaptor.lists$.subscribe(
+      readingLists => {
+        this.readingListOptions = [{ label: '' } as SelectItem].concat(
+          readingLists.map(readingList => {
+            return {
+              label: readingList.name,
+              value: readingList
+            } as SelectItem;
+          })
+        );
+      }
+    );
+    this.selectedComicsSubscription = this.selectionAdaptor.comicSelection$.subscribe(
+      selected => (this.selectedComics = selected)
+    );
+  }
+
+  ngOnInit() {}
+
+  ngOnDestroy(): void {
+    this.showDialogSubscription.unsubscribe();
+    this.readingListsSubscription.unsubscribe();
+    this.selectedComicsSubscription.unsubscribe();
+  }
+
+  readingListSelected() {
+    this.readingListAdaptor.addComicsToList(
+      this.readingListForm.controls['readingLists'].value,
+      this.selectedComics
+    );
+  }
+
+  hideSelection() {
+    this.readingListAdaptor.hideSelectDialog();
+  }
+}

comixed-frontend/src/app/library/library.module.ts

@@ -81,6 +81,7 @@ import { FileSaverModule } from 'ngx-filesaver';
 import { LibraryNavigationTreeComponent } from './components/library-navigation-tree/library-navigation-tree.component';
 import { DuplicateComicsPageComponent } from './pages/duplicate-comics-page/duplicate-comics-page.component';
 import { ReadingListEditComponent } from './components/reading-list-edit/reading-list-edit.component';
+import { AddComicsToReadingListComponent } from './components/add-comics-to-list-reading-list/add-comics-to-reading-list.component';
 
 @NgModule({
   imports: [
@@ -150,7 +151,8 @@ import { ReadingListEditComponent } from './components/reading-list-edit/reading
     LibraryAdminPageComponent,
     LibraryNavigationTreeComponent,
     DuplicateComicsPageComponent,
-    ReadingListEditComponent
+    ReadingListEditComponent,
+    AddComicsToReadingListComponent
   ],
   providers: [
     LibraryService,

comixed-frontend/src/assets/i18n/library-en.json

@@ -471,5 +471,10 @@
       "header": "Save Reading List",
       "message": "Save changes to \"{name}\"?"
     }
+  },
+  "add-comics-to-reading-list": {
+    "label": {
+      "select-reading-list": "Select A Reading List"
+    }
   }
 }