feat(torrent-table): Add multiple delete option to torrent table

client/src/app/torrent-table/torrent-table.component.html

@@ -6,6 +6,7 @@
   <table class="table is-fullwidth is-hoverable">
     <thead>
       <tr>
+        <th><input type="checkbox" (click)="toggleSelectAll($event)" [checked]="selectedTorrents.length == torrents.length"></th>
         <th>Name</th>
         <th>Category</th>
         <th>Priority</th>
@@ -16,8 +17,11 @@
       </tr>
     </thead>
     <tbody>
-      <tr (click)="selectTorrent(torrent.torrentId)" *ngFor="let torrent of torrents; trackBy: trackByMethod">
+      <tr *ngFor="let torrent of torrents; trackBy: trackByMethod">
         <td>
+          <input type="checkbox" (click)="toggleSelect(torrent.torrentId)" [checked]="selectedTorrents.contains(torrent.torrentId)">
+        </td>
+        <td (click)="openTorrent(torrent.torrentId)">
           {{ torrent.rdName }}
         </td>
         <td>
@@ -41,4 +45,57 @@
       </tr>
     </tbody>
   </table>
+
+  <button class="button is-danger" (click)="showDeleteModal()" [disabled]="selectedTorrents.length == 0" *ngIf="torrents.length > 0">Delete Selected</button>
+</div>
+
+<div class="modal" [class.is-active]="isDeleteModalActive">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Delete selected torrents</p>
+      <button class="delete" aria-label="close" (click)="deleteCancel()"></button>
+    </header>
+    <section class="modal-card-body">
+      <p>Are you sure you want to delete these torrent?</p>
+      <div class="field">
+        <label class="label"></label>
+        <div class="control">
+          <label class="checkbox">
+            <input type="checkbox" [(ngModel)]="deleteData" />
+            Delete Torrents from client
+          </label>
+          <br />
+          <label class="checkbox">
+            <input type="checkbox" [(ngModel)]="deleteRdTorrent" />
+            Delete Torrents from provider
+          </label>
+          <br />
+          <label class="checkbox">
+            <input type="checkbox" [(ngModel)]="deleteLocalFiles" />
+            Delete local files
+          </label>
+        </div>
+      </div>
+      <div class="notification is-primary">
+        Deleting a torrent from Real-Debrid will automatically delete it here too.
+      </div>
+      <div class="notification is-danger is-light" *ngIf="deleteError?.length > 0">
+        Error deleting torrent: {{ deleteError }}
+      </div>
+    </section>
+    <footer class="modal-card-foot">
+      <button
+        class="button is-success"
+        (click)="deleteOk()"
+        [disabled]="deleting"
+        [ngClass]="{ 'is-loading': deleting }"
+      >
+        Delete selected
+      </button>
+      <button class="button" (click)="deleteCancel()" [disabled]="deleting" [ngClass]="{ 'is-loading': deleting }">
+        Cancel
+      </button>
+    </footer>
+  </div>
 </div>

client/src/app/torrent-table/torrent-table.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Torrent } from '../models/torrent.model';
 import { TorrentService } from '../torrent.service';
+import { forkJoin } from 'rxjs';
 
 @Component({
   selector: 'app-torrent-table',
@@ -10,9 +11,18 @@ import { TorrentService } from '../torrent.service';
 })
 export class TorrentTableComponent implements OnInit {
   public torrents: Torrent[] = [];
+  public selectedTorrents: string[] = [];
   public error: string;
 
-  constructor(private router: Router, private torrentService: TorrentService) {}
+  public isDeleteModalActive: boolean;
+  public deleteError: string;
+  public deleting: boolean;
+  public deleteData: boolean;
+  public deleteRdTorrent: boolean;
+  public deleteLocalFiles: boolean;
+
+  constructor(private router: Router, private torrentService: TorrentService) {
+  }
 
   ngOnInit(): void {
     this.torrentService.getList().subscribe(
@@ -29,11 +39,70 @@ export class TorrentTableComponent implements OnInit {
     );
   }
 
-  public selectTorrent(torrentId: string): void {
+  public openTorrent(torrentId: string): void {
     this.router.navigate([`/torrent/${torrentId}`]);
   }
 
   public trackByMethod(index: number, el: Torrent): string {
     return el.torrentId;
   }
+
+  public toggleSelectAll(event: any) {
+    this.selectedTorrents = [];
+
+    if(event.target.checked){
+      this.torrents.map((torrent) => {
+        this.selectedTorrents.push(torrent.torrentId)
+      });
+    }
+  }
+
+  public toggleSelect(torrentId: string) {
+    const index = this.selectedTorrents.indexOf(torrentId);
+
+    if (index > -1) {
+      this.selectedTorrents.splice(index, 1);
+    }
+    else {
+      this.selectedTorrents.push(torrentId);
+    }
+  }
+
+  public showDeleteModal(): void {
+    this.deleteData = false;
+    this.deleteRdTorrent = false;
+    this.deleteLocalFiles = false;
+    this.deleteError = null;
+
+    this.isDeleteModalActive = true;
+  }
+
+  public deleteCancel(): void {
+    this.isDeleteModalActive = false;
+  }
+
+  public deleteOk(): void {
+    this.deleting = true;
+
+    let calls: any[] = [];
+
+    this.selectedTorrents.forEach((torrentId) =>
+    {
+      calls.push(this.torrentService
+        .delete(torrentId, this.deleteData, this.deleteRdTorrent, this.deleteLocalFiles));
+    });
+
+    forkJoin(calls).subscribe({
+      complete: () => {
+        this.isDeleteModalActive = false;
+        this.deleting = false;
+
+        this.selectedTorrents = [];
+      },
+      error: err => {
+        this.deleteError = err.error
+        this.deleting = false;
+      }
+    })
+  }
 }