Added filters for notifications

Added notifications for tasks

src/app/components/notifications-list/notifications-list.component.ts

@@ -15,31 +15,36 @@ export class NotificationsListComponent {
 
   NOTIFICATION_PREFIX: { [key in NotificationType]: string } = {
     download_complete: $localize`Finished downloading`,
-    download_error: $localize`Download failed`
+    download_error: $localize`Download failed`,
+    task_finished: $localize`Task finished`
   }
 
   // Attaches string to the end of the notification text
   NOTIFICATION_SUFFIX_KEY: { [key in NotificationType]: string } = {
     download_complete: 'file_title',
-    download_error: 'download_url'
+    download_error: 'download_url',
+    task_finished: 'task_title'
   }
 
   NOTIFICATION_ACTION_TO_STRING: { [key in NotificationAction]: string } = {
     play: $localize`Play`,
     retry_download: $localize`Retry download`,
-    view_download_error: $localize`View error`
+    view_download_error: $localize`View error`,
+    view_tasks: $localize`View task`
   }
 
   NOTIFICATION_COLOR: { [key in NotificationAction]: string } = {
     play: 'primary',
     retry_download: 'primary',
-    view_download_error: 'warn'
+    view_download_error: 'warn',
+    view_tasks: 'primary'
   }
 
   NOTIFICATION_ICON: { [key in NotificationAction]: string } = {
     play: 'smart_display',
     retry_download: 'restart_alt',
-    view_download_error: 'warning'
+    view_download_error: 'warning',
+    view_tasks: 'task'
   }
 
   emitNotificationAction(notification: Notification, action: NotificationAction): void {

src/app/components/notifications/notifications.component.css

@@ -1,4 +1,10 @@
 .notification-title {
     margin-bottom: 6px;
     text-align: center
+}
+
+.notifications-list-parent {
+    max-height: 70vh;
+    overflow-y: auto;
+    padding: 0px 10px 10px 10px;
 }

src/app/components/notifications/notifications.component.html

@@ -1,5 +1,10 @@
 <div *ngIf="notifications !== null && notifications.length === 0" style="text-align: center; margin: 10px;" i18n="No notifications available">No notifications available</div>
-<div style="margin: 10px;" *ngIf="notifications?.length > 0">
-    <app-notifications-list (notificationAction)="notificationAction($event)" (deleteNotification)="deleteNotification($event)" [notifications]="notifications"></app-notifications-list>
-    <button style="margin-top: 15px;" *ngIf="notifications?.length > 0" color="warn" (click)="deleteAllNotifications()" mat-stroked-button>Remove all</button>
+<div *ngIf="notifications?.length > 0">
+    <div class="notifications-list-parent">
+        <mat-chip-listbox [value]="selectedFilters" [multiple]="true" (change)="selectedFiltersChanged($event)">
+            <mat-chip-option *ngFor="let filter of notificationFilters | keyvalue: originalOrder" [value]="filter.key" [selected]="selectedFilters.includes(filter.key)" color="accent">{{filter.value.label}}</mat-chip-option>
+        </mat-chip-listbox>
+        <app-notifications-list (notificationAction)="notificationAction($event)" (deleteNotification)="deleteNotification($event)" [notifications]="filtered_notifications"></app-notifications-list>
+    </div>
+    <button style="margin: 10px 0px 2px 10px;" *ngIf="notifications?.length > 0" color="warn" (click)="deleteAllNotifications()" mat-stroked-button>Remove all</button>
 </div>

src/app/components/notifications/notifications.component.ts

@@ -1,8 +1,9 @@
 import { Component, ElementRef, EventEmitter, OnInit, Output } from '@angular/core';
 import { Router } from '@angular/router';
 import { PostsService } from 'app/posts.services';
-import { Notification } from 'api-types';
+import { Notification, NotificationType } from 'api-types';
 import { NotificationAction } from 'api-types/models/NotificationAction';
+import { MatChipListboxChange } from '@angular/material/chips';
 
 @Component({
   selector: 'app-notifications',
@@ -12,9 +13,27 @@ import { NotificationAction } from 'api-types/models/NotificationAction';
 export class NotificationsComponent implements OnInit {
 
   notifications: Notification[] = null;
+  filtered_notifications: Notification[] = null;
 
   @Output() notificationCount = new EventEmitter<number>();
 
+  notificationFilters: { [key in NotificationType]: {key: string, label: string} } = {
+    download_complete: {
+      key: 'download_complete',
+      label: $localize`Download completed`
+    },
+    download_error: {
+      key: 'download_error',
+      label: $localize`Download error`
+    },
+    task_finished: {
+      key: 'task_finished',
+      label: $localize`Task`
+    },
+  };
+
+  selectedFilters = [];
+
   constructor(public postsService: PostsService, private router: Router, private elRef: ElementRef) { }
 
   ngOnInit(): void {
@@ -33,7 +52,10 @@ export class NotificationsComponent implements OnInit {
   getNotifications(): void {
     this.postsService.getNotifications().subscribe(res => {
       this.notifications = res['notifications'];
+      this.notifications.sort((a, b) => b.timestamp - a.timestamp);
       this.notificationCount.emit(this.notifications.filter(notification => !notification.read).length);
+
+      this.filterNotifications();
     });
   }
 
@@ -51,6 +73,9 @@ export class NotificationsComponent implements OnInit {
           this.deleteNotification(action_info['notification']['uid']);
         });
         break;
+      case NotificationAction.VIEW_TASKS:
+        this.router.navigate(['tasks']);
+        break;
       default:
         console.error(`Notification action ${action_info['action']} does not exist!`);
         break;
@@ -60,6 +85,7 @@ export class NotificationsComponent implements OnInit {
   deleteNotification(uid: string): void {
     this.postsService.deleteNotification(uid).subscribe(res => {
       this.notifications.filter(notification => notification['uid'] !== uid);
+      this.filterNotifications();
       this.notificationCount.emit(this.notifications.length);
       this.getNotifications();
     });
@@ -68,6 +94,7 @@ export class NotificationsComponent implements OnInit {
   deleteAllNotifications(): void {
     this.postsService.deleteAllNotifications().subscribe(res => {
       this.notifications = [];
+      this.filtered_notifications = [];
       this.getNotifications();
     });
     this.notificationCount.emit(0);
@@ -81,4 +108,17 @@ export class NotificationsComponent implements OnInit {
     this.notificationCount.emit(0);
   }
 
+  filterNotifications(): void {
+    this.filtered_notifications = this.notifications.filter(notification => this.selectedFilters.length === 0 || this.selectedFilters.includes(notification.type));
+  }
+
+  selectedFiltersChanged(event: MatChipListboxChange): void {
+    this.selectedFilters = event.value;
+    this.filterNotifications();
+  }
+
+  originalOrder = (): number => {
+    return 0;
+  }
+
 }