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/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.html

@@ -0,0 +1,46 @@
+
+<div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">Add to Collection</h4>
+    <button type="button" class="close" aria-label="Close" (click)="close()">
+    <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+<form style="width: 100%" [formGroup]="listForm">
+<div class="modal-body">
+    <div class="form-group" *ngIf="lists.length >= 5">
+        <label for="filter">Filter</label>
+        <div class="input-group">
+            <input id="filter" autocomplete="off" class="form-control" formControlName="filterQuery" type="text" aria-describedby="reset-input">
+            <div class="input-group-append">
+                <button class="btn btn-outline-secondary" type="button" id="reset-input" (click)="listForm.get('filterQuery')?.setValue('');">Clear</button>
+            </div>
+        </div>
+    </div>
+    <ul class="list-group">
+        <li class="list-group-item clickable" tabindex="0" role="button" *ngFor="let collectionTag of lists | filter: filterList; let i = index" (click)="addToCollection(collectionTag)">
+            {{collectionTag.title}} <i class="fa fa-angle-double-up" *ngIf="collectionTag.promoted" title="Promoted"></i>
+        </li>
+        <li class="list-group-item" *ngIf="lists.length === 0 && !loading">No collections created yet</li>
+        <li class="list-group-item" *ngIf="loading">
+            <div class="spinner-border text-secondary" role="status">
+                <span class="sr-only">Loading...</span>
+            </div>
+        </li>
+    </ul>
+</div>
+<div class="modal-footer" style="justify-content: normal">
+    <div style="width: 100%;">
+        <div class="form-row">
+            <div class="col-9 col-lg-10">
+              <label class="sr-only" for="add-rlist">Collection</label>
+              <input width="100%" #title ngbAutofocus type="text" class="form-control mb-2" id="add-rlist" formControlName="title">
+            </div>
+            <div class="col-2">
+              <button type="submit" class="btn btn-primary" (click)="create()">Create</button>
+            </div>
+          </div>
+    </div>
+</div>
+</form>
+
+

UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.scss

@@ -0,0 +1,7 @@
+.clickable {
+    cursor: pointer;
+}
+
+.clickable:hover, .clickable:focus {
+    background-color: lightgreen;
+}

UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.ts

@@ -0,0 +1,79 @@
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { FormGroup, FormControl } from '@angular/forms';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastrService } from 'ngx-toastr';
+import { CollectionTag } from 'src/app/_models/collection-tag';
+import { ReadingList } from 'src/app/_models/reading-list';
+import { CollectionTagService } from 'src/app/_services/collection-tag.service';
+
+@Component({
+  selector: 'app-bulk-add-to-collection',
+  templateUrl: './bulk-add-to-collection.component.html',
+  styleUrls: ['./bulk-add-to-collection.component.scss']
+})
+export class BulkAddToCollectionComponent implements OnInit {
+
+  @Input() title!: string;
+  /**
+   * Series Ids to add to Collection Tag
+   */
+  @Input() seriesIds: Array<number> = [];
+
+  /**
+   * All existing collections sorted by recent use date
+   */
+  lists: Array<CollectionTag> = [];
+  loading: boolean = false;
+  listForm: FormGroup = new FormGroup({});
+
+  @ViewChild('title') inputElem!: ElementRef<HTMLInputElement>;
+
+
+  constructor(private modal: NgbActiveModal, private collectionService: CollectionTagService, private toastr: ToastrService) { }
+
+  ngOnInit(): void {
+
+    this.listForm.addControl('title', new FormControl(this.title, []));
+    this.listForm.addControl('filterQuery', new FormControl('', []));
+    
+    this.loading = true;
+    this.collectionService.allTags().subscribe(tags => {
+      this.lists = tags;
+      this.loading = false;
+    });
+  }
+
+  ngAfterViewInit() {
+    // Shift focus to input
+    if (this.inputElem) {
+      this.inputElem.nativeElement.select();
+    }
+  }
+
+  close() {
+    this.modal.close();
+  }
+
+  create() {
+    const tagName = this.listForm.value.title;
+    this.collectionService.addByMultiple(0, this.seriesIds, tagName).subscribe(() => {
+      this.toastr.success('Series added to ' + tagName + ' collection');
+      this.modal.close();
+    });
+  }
+
+  addToCollection(tag: CollectionTag) {
+    if (this.seriesIds.length === 0) return;
+
+    this.collectionService.addByMultiple(tag.id, this.seriesIds, '').subscribe(() => {
+      this.toastr.success('Series added to ' + tag.title + ' collection');
+      this.modal.close();
+    });
+    
+  }
+
+  filterList = (listItem: ReadingList) => {
+    return listItem.title.toLowerCase().indexOf((this.listForm.value.filterQuery || '').toLowerCase()) >= 0;
+  }
+
+}