Bulk Operations (#596)

* Implemented the ability to perform multi-selections on cards. Basic selection code is done, CSS needed and exposing actions.

* Implemented a bulk selection bar. Added logic to the card on when to force show checkboxes.

* Fixed some bad parsing groups and cases for Comic Chapters.

* Hooked up some bulk actions on series detail page. Not hooked up to backend yet.

* Fixes #593. URI Enocde library names as sometimes they can have & in them.

* Implemented the ability to mark volume/chapters as read/unread.

* Hooked up mark as unread with specials as well.

* Add to reading list hooked up for Series Detail

* Implemented ability to add multiple series to a reading list.

* Implemented bulk selection for series cards

* Added comments to the new code in ReaderService.cs

* Implemented proper styling on bulk operation bar and integrated for collections.

* Fixed an issue with shift clicking

* Cleaned up css of bulk operations bar

* Code cleanup

UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html

@@ -0,0 +1,8 @@
+<div *ngIf="bulkSelectionService.hasSelections()" class="bulk-select mb-3 fixed-top" [ngStyle]="{'margin-top': topOffset + 'px'}">
+    <div class="d-flex justify-content-around align-items-center">
+        <span class="highlight"><i class="fa fa-check" aria-hidden="true"></i>&nbsp;{{bulkSelectionService.totalSelections()}} selected</span>
+        <app-card-actionables [actions]="actions" labelBy="bulk-actions-header" iconClass="fa-ellipsis-h" (actionHandler)="performAction($event)"></app-card-actionables>
+        <span id="bulk-actions-header"  class="sr-only">Bulk Actions</span>
+        <button class="btn btn-icon" (click)="bulkSelectionService.deselectAll()"><i class="fa fa-times" aria-hidden="true"></i>&nbsp;Deselect All</button>
+    </div>
+</div>

UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss

@@ -0,0 +1,16 @@
+@import "../../../theme/colors";
+@import "../../../assets/themes/dark.scss";
+
+.bulk-select {
+    background-color: $dark-form-background-no-opacity;
+    border-bottom: 2px solid $primary-color;
+    color: white;
+}
+
+.btn-icon {
+    color: white;
+}
+
+.highlight {
+    color: $primary-color !important;
+}

UI/Web/src/app/cards/bulk-operations/bulk-operations.component.ts

@@ -0,0 +1,39 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Action, ActionItem } from 'src/app/_services/action-factory.service';
+import { BulkSelectionService } from '../bulk-selection.service';
+
+@Component({
+  selector: 'app-bulk-operations',
+  templateUrl: './bulk-operations.component.html',
+  styleUrls: ['./bulk-operations.component.scss']
+})
+export class BulkOperationsComponent implements OnInit {
+
+  @Input() actionCallback!: (action: Action, data: any) => void;
+  topOffset: number = 0;
+
+  get actions() {
+    return this.bulkSelectionService.getActions(this.actionCallback.bind(this));
+  }
+
+  constructor(public bulkSelectionService: BulkSelectionService) { }
+
+  ngOnInit(): void {
+    const navBar = document.querySelector('.navbar');
+    if (navBar) {
+      this.topOffset = Math.ceil(navBar.getBoundingClientRect().height);
+    }
+  }
+
+  handleActionCallback(action: Action, data: any) {
+    this.actionCallback(action, data);
+  }
+
+  performAction(action: ActionItem<any>) {
+    if (typeof action.callback === 'function') {
+      action.callback(action.action, null);
+    }
+  }
+
+
+}