Add sorting on the interface.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,6 +1,6 @@
 ---
 name: Bug report
-about: Create a report to help us improve
+about: Use this template to report actual bugs. If you are looking for general help, please post a discussion.
 title: ''
 labels: ''
 assignees: ''

client/src/app/app.module.ts

@@ -23,6 +23,7 @@ import { SetupComponent } from './setup/setup.component';
 import { TorrentStatusPipe } from './torrent-status.pipe';
 import { TorrentTableComponent } from './torrent-table/torrent-table.component';
 import { TorrentComponent } from './torrent/torrent.component';
+import { SortPipe } from './sort.pipe';
 
 curray();
 
@@ -42,6 +43,7 @@ curray();
     DecodeURIPipe,
     ProfileComponent,
     Nl2BrPipe,
+    SortPipe,
   ],
   imports: [
     BrowserModule,

client/src/app/sort.pipe.ts

@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'sort',
+})
+export class SortPipe implements PipeTransform {
+  transform(array: any[], field: string, order: 'asc' | 'desc' = 'asc'): any[] {
+    if (!Array.isArray(array)) {
+      return [];
+    }
+    const sortedArray = array.sort((a, b) => {
+      if (a[field] < b[field]) {
+        return -1;
+      } else if (a[field] > b[field]) {
+        return 1;
+      } else {
+        return 0;
+      }
+    });
+    return order === 'asc' ? sortedArray : sortedArray.reverse();
+  }
+}

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

@@ -13,18 +13,18 @@
             [checked]="selectedTorrents.length > 0 && selectedTorrents.length === torrents.length"
           />
         </th>
-        <th>Name</th>
-        <th>Category</th>
-        <th>Priority</th>
-        <th>Seeders</th>
-        <th>Files</th>
-        <th>Downloads</th>
-        <th>Size</th>
-        <th>Status</th>
+        <th (click)="sort('rdName')">Name</th>
+        <th (click)="sort('category')">Category</th>
+        <th (click)="sort('priority')">Priority</th>
+        <th (click)="sort('rdSeeders')">Seeders</th>
+        <th (click)="sort('files.length')">Files</th>
+        <th (click)="sort('downloads.length')">Downloads</th>
+        <th (click)="sort('rdSize')">Size</th>
+        <th (click)="sort('status')">Status</th>
       </tr>
     </thead>
     <tbody>
-      <tr *ngFor="let torrent of torrents; trackBy: trackByMethod">
+      <tr *ngFor="let torrent of torrents | sort: sortProperty : sortDirection; trackBy: trackByMethod">
         <td>
           <input
             type="checkbox"

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

@@ -13,6 +13,8 @@ export class TorrentTableComponent implements OnInit {
   public torrents: Torrent[] = [];
   public selectedTorrents: string[] = [];
   public error: string;
+  public sortProperty = 'rdName';
+  public sortDirection: 'asc' | 'desc' = 'asc';
 
   public isDeleteModalActive: boolean;
   public deleteError: string;
@@ -58,6 +60,11 @@ export class TorrentTableComponent implements OnInit {
     );
   }
 
+  public sort(property: string): void {
+    this.sortProperty = property;
+    this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+  }
+
   public openTorrent(torrentId: string): void {
     this.router.navigate([`/torrent/${torrentId}`]);
   }