Bulk Add to Collection (#674)

* Fixed the typeahead not having the same size input box as other inputs

* Implemented the ability to add multiple series to a collection through bulk operations flow. Updated book parser to handle "@import url('...');" syntax as well as @import '...';

* Implemented the ability to create a new Collection tag via bulk operations flow.

UI/Web/src/app/_services/action-factory.service.ts

@@ -19,7 +19,8 @@ export enum Action {
   Download = 7,
   Bookmarks = 8,
   IncognitoRead = 9,
-  AddToReadingList = 10
+  AddToReadingList = 10,
+  AddToCollection = 11
 }
 
 export interface ActionItem<T> {
@@ -90,6 +91,13 @@ export class ActionFactoryService {
           requiresAdmin: true
         });
 
+        this.seriesActions.push({
+          action: Action.AddToCollection,
+          title: 'Add to Collection',
+          callback: this.dummyCallback,
+          requiresAdmin: true
+        });
+
         this.seriesActions.push({
           action: Action.Edit,
           title: 'Edit',
@@ -209,7 +217,7 @@ export class ActionFactoryService {
         title: 'Add to Reading List',
         callback: this.dummyCallback,
         requiresAdmin: false
-      },
+      }
     ];
 
     this.volumeActions = [

UI/Web/src/app/_services/action.service.ts

@@ -4,6 +4,7 @@ import { ToastrService } from 'ngx-toastr';
 import { Subject } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { BookmarksModalComponent } from '../cards/_modals/bookmarks-modal/bookmarks-modal.component';
+import { BulkAddToCollectionComponent } from '../cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component';
 import { AddToListModalComponent, ADD_FLOW } from '../reading-list/_modals/add-to-list-modal/add-to-list-modal.component';
 import { EditReadingListModalComponent } from '../reading-list/_modals/edit-reading-list-modal/edit-reading-list-modal.component';
 import { ConfirmService } from '../shared/confirm.service';
@@ -34,6 +35,7 @@ export class ActionService implements OnDestroy {
   private readonly onDestroy = new Subject<void>();
   private bookmarkModalRef: NgbModalRef | null = null;
   private readingListModalRef: NgbModalRef | null = null;
+  private collectionModalRef: NgbModalRef | null = null;
 
   constructor(private libraryService: LibraryService, private seriesService: SeriesService, 
     private readerService: ReaderService, private toastr: ToastrService, private modalService: NgbModal,
@@ -358,6 +360,32 @@ export class ActionService implements OnDestroy {
       });
   }
 
+  /**
+   * Adds a set of series to a collection tag
+   * @param series 
+   * @param callback 
+   * @returns 
+   */
+  addMultipleSeriesToCollectionTag(series: Array<Series>, callback?: VoidActionCallback) {
+    if (this.collectionModalRef != null) { return; }
+      this.collectionModalRef = this.modalService.open(BulkAddToCollectionComponent, { scrollable: true, size: 'md' });
+      this.collectionModalRef.componentInstance.seriesIds = series.map(v => v.id);
+      this.collectionModalRef.componentInstance.title = 'New Collection';
+
+      this.collectionModalRef.closed.pipe(take(1)).subscribe(() => {
+        this.collectionModalRef = null;
+        if (callback) {
+          callback();
+        }
+      });
+      this.collectionModalRef.dismissed.pipe(take(1)).subscribe(() => {
+        this.collectionModalRef = null;
+        if (callback) {
+          callback();
+        }
+      });
+  }
+
   addSeriesToReadingList(series: Series, callback?: SeriesActionCallback) {
     if (this.readingListModalRef != null) { return; }
       this.readingListModalRef = this.modalService.open(AddToListModalComponent, { scrollable: true, size: 'md' });

UI/Web/src/app/_services/collection-tag.service.ts

@@ -35,4 +35,8 @@ export class CollectionTagService {
   updateSeriesForTag(tag: CollectionTag, seriesIdsToRemove: Array<number>) {
     return this.httpClient.post(this.baseUrl + 'collection/update-series', {tag, seriesIdsToRemove}, {responseType: 'text' as 'json'});
   }
+
+  addByMultiple(tagId: number, seriesIds: Array<number>, tagTitle: string = '') {
+    return this.httpClient.post(this.baseUrl + 'collection/update-for-series', {collectionTagId: tagId, collectionTagTitle: tagTitle, seriesIds}, {responseType: 'text' as 'json'});
+  }
 }