Notifications style improvements

2026-03-19 11:10:57 +03:00 · 2022-12-29 13:56:45 -06:00
parent 992947fba5
commit cc2be46ad8
11 changed files with 75 additions and 51 deletions
--- a/backend/app.js
+++ b/backend/app.js
@@ -2009,10 +2009,9 @@ app.post('/api/getNotifications', optionalJwt, async (req, res) => {

 // set notifications to read
 app.post('/api/setNotificationsToRead', optionalJwt, async (req, res) => {
-    const uids = req.body.uids;
+    const uuid = req.user.uid;

-    // TODO: do a bulk update
-    const success = true; // await db_api.updateRecords('notifications', {user_uid: uuid});
+    const success = await db_api.updateRecords('notifications', {user_uid: uuid}, {read: true});

    res.send({success: success});
 });
--- a/backend/db.js
+++ b/backend/db.js
@@ -354,7 +354,7 @@ exports.addMetadataPropertyToDB = async (property_key) => {
            }
        }

-        return await exports.bulkUpdateRecords('files', 'uid', update_obj);
+        return await exports.bulkUpdateRecordsByKey('files', 'uid', update_obj);
    } catch(err) {
        logger.error(err);
        return false;
@@ -681,7 +681,7 @@ exports.updateRecords = async (table, filter_obj, update_obj) => {
    return !!(output['result']['ok']);
 }

-exports.bulkUpdateRecords = async (table, key_label, update_obj) => {
+exports.bulkUpdateRecordsByKey = async (table, key_label, update_obj) => {
    // local db override
    if (using_local_db) {
        local_db.get(table).each((record) => {
--- a/backend/test/tests.js
+++ b/backend/test/tests.js
@@ -212,7 +212,7 @@ describe('Database', async function() {
            const received_records = await db_api.getRecords('test');
            assert(received_records && received_records.length === NUM_RECORDS_TO_ADD);

-            success = await db_api.bulkUpdateRecords('test', 'uid', update_obj);
+            success = await db_api.bulkUpdateRecordsByKey('test', 'uid', update_obj);
            assert(success);

            const received_updated_records = await db_api.getRecords('test');
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -7,11 +7,11 @@
                        <div style="display: flex; align-items: center;">
                            <button #hamburgerMenu style="outline: none" *ngIf="router.url.split(';')[0] !== '/player'" mat-icon-button aria-label="Toggle side navigation" (click)="toggleSidenav()"><mat-icon>menu</mat-icon></button>
                            <button (click)="goBack()" *ngIf="router.url.split(';')[0] === '/player'" mat-icon-button><mat-icon>arrow_back</mat-icon></button>
-                            <div style="margin-left: 8px; display: inline-block;"><a routerLink='/home'><img style="width: 32px;" src="assets/images/logo_128px.png"></a></div>
+                            <div style="margin-left: 8px; display: inline-block;"><button mat-icon-button routerLink='/home'><img style="width: 32px;" src="assets/images/logo_128px.png"></button></div>
                        </div>
                    </div>
                    <div class="col-6" style="text-align: right; align-items: flex-end; display: inline-block">
-                        <button [matMenuTriggerFor]="notificationsMenu" mat-icon-button><mat-icon [matBadge]="notification_count" matBadgeColor="warn" matBadgeSize="small" *ngIf="notification_count > 0">notifications</mat-icon><mat-icon *ngIf="notification_count === 0">notifications_none</mat-icon></button>
+                        <button [matMenuTriggerFor]="notificationsMenu" (menuOpened)="notificationMenuOpened()" mat-icon-button><mat-icon [matBadge]="notification_count" matBadgeColor="warn" matBadgeSize="small" *ngIf="notification_count > 0">notifications</mat-icon><mat-icon *ngIf="notification_count === 0">notifications_none</mat-icon></button>
                        <mat-menu (close)="notificationMenuClosed()" #notificationsMenu="matMenu">
                            <app-notifications #notifications (notificationCount)="notificationCountUpdate($event)" (click)="$event.stopPropagation()"></app-notifications>
                        </mat-menu>
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -211,6 +211,10 @@ export class AppComponent implements OnInit, AfterViewInit {
    this.notification_count = new_count;
  }

+  notificationMenuOpened(): void {
+    this.notifications.getNotifications();
+  }
+
  notificationMenuClosed(): void {
    this.notifications.setNotificationsToRead();
  }
--- a/src/app/components/notifications-list/notifications-list.component.html
+++ b/src/app/components/notifications-list/notifications-list.component.html
@@ -1,17 +1,28 @@
-<div *ngFor="let notification of notifications; let i = index;">
-    <mat-divider class="notification-divider"></mat-divider>
-    <div class="notification-text">
-        <ng-container *ngIf="NOTIFICATION_PREFIX[notification.type]">
-            {{NOTIFICATION_PREFIX[notification.type]}}&nbsp;
-        </ng-container>
-        <ng-container *ngIf="NOTIFICATION_SUFFIX_KEY[notification.type]">
-            {{notification['data'][NOTIFICATION_SUFFIX_KEY[notification.type]]}}
-        </ng-container>
-    </div>
-    <div *ngIf="notification.actions?.length > 0">
-        <button matTooltip="Remove" i18n-matTooltip="Remove" (click)="emitDeleteNotification(notification.uid)" mat-icon-button><mat-icon>close</mat-icon></button>
-        <span *ngFor="let action of notification.actions">
-            <button [matTooltip]="NOTIFICATION_ACTION_TO_STRING[action]" (click)="emitNotificationAction(notification, action)" mat-icon-button><mat-icon>{{NOTIFICATION_ICON[action]}}</mat-icon></button>
-        </span>
-    </div>
+<div class="card-radius mat-elevation-z2" *ngFor="let notification of notifications; let i = index;">
+    <mat-card class="notification-card card-radius">
+        <mat-card-header>
+            <mat-card-subtitle>
+                <div>
+                    <span class="notification-timestamp">{{notification.timestamp * 1000 | date:'short'}}</span>
+                </div>
+            </mat-card-subtitle>
+            <mat-card-title>
+                <ng-container *ngIf="NOTIFICATION_PREFIX[notification.type]">
+                    {{NOTIFICATION_PREFIX[notification.type]}}&nbsp;
+                </ng-container>
+            </mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+            <ng-container *ngIf="NOTIFICATION_SUFFIX_KEY[notification.type]">
+                {{notification['data'][NOTIFICATION_SUFFIX_KEY[notification.type]]}}
+            </ng-container>
+        </mat-card-content>
+        <mat-card-actions *ngIf="notification.actions?.length > 0">
+            <button matTooltip="Remove" i18n-matTooltip="Remove" (click)="emitDeleteNotification(notification.uid)" mat-icon-button><mat-icon>close</mat-icon></button>
+            <span *ngFor="let action of notification.actions">
+                <button [matTooltip]="NOTIFICATION_ACTION_TO_STRING[action]" (click)="emitNotificationAction(notification, action)" mat-icon-button><mat-icon>{{NOTIFICATION_ICON[action]}}</mat-icon></button>
+            </span>
+        </mat-card-actions>
+        <span *ngIf="!notification.read" class="dot"></span>
+    </mat-card>
 </div>
--- a/src/app/components/notifications-list/notifications-list.component.scss
+++ b/src/app/components/notifications-list/notifications-list.component.scss
@@ -7,4 +7,27 @@
    margin-left: 10px;
    margin-right: 10px;
    display: inline-block;
-}
+}
+
+.notification-timestamp {
+    font-size: 14px;
+}
+
+.notification-card {
+    margin-top: 5px;
+}
+
+.card-radius {
+    border-radius: 12px;
+}
+
+.dot {
+    height: 8px;
+    width: 8px;
+    background-color: red;
+    border-radius: 50%;
+    display: inline-block;
+    position: absolute;
+    right: 8px;
+    top: 8px;
+  }
--- a/src/app/components/notifications-list/notifications-list.component.ts
+++ b/src/app/components/notifications-list/notifications-list.component.ts
@@ -14,8 +14,8 @@ export class NotificationsListComponent {
  @Output() notificationAction = new EventEmitter<{notification: Notification, action: NotificationAction}>();

  NOTIFICATION_PREFIX: { [key in NotificationType]: string } = {
-    download_complete: $localize`Finished downloading:`,
-    download_error: $localize`Download failed:`
+    download_complete: $localize`Finished downloading`,
+    download_error: $localize`Download failed`
  }

  // Attaches string to the end of the notification text
--- a/src/app/components/notifications/notifications.component.html
+++ b/src/app/components/notifications/notifications.component.html
@@ -1,10 +1,5 @@
-<strong *ngIf="notifications !== null && notifications.length === 0 && read_notifications.length === 0" style="text-align: center; margin: 10px; position: relative; top: 8px;" i18n="No notifications available">No notifications available</strong>
+<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">
-    <strong class="notification-title" i18n="New notifications">New notifications</strong>
    <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>
-
-<div style="margin: 10px;" *ngIf="read_notifications?.length > 0">
-    <strong class="notification-title" i18n="Old notifications">Old notifications</strong>
-    <app-notifications-list (notificationAction)="notificationAction($event)" (deleteNotification)="deleteNotification($event)" [notifications]="read_notifications"></app-notifications-list>
-</div>
--- a/src/app/components/notifications/notifications.component.ts
+++ b/src/app/components/notifications/notifications.component.ts
@@ -11,8 +11,7 @@ import { NotificationAction } from 'api-types/models/NotificationAction';
 })
 export class NotificationsComponent implements OnInit {

-  notifications = null;
-  read_notifications = null;
+  notifications: Notification[] = null;

  @Output() notificationCount = new EventEmitter<number>();

@@ -33,9 +32,8 @@ export class NotificationsComponent implements OnInit {

  getNotifications(): void {
    this.postsService.getNotifications().subscribe(res => {
-      this.notifications = res['notifications'].filter(notification => !notification.read);
-      this.read_notifications = res['notifications'].filter(notification => notification.read);
-      this.notificationCount.emit(this.notifications.length);
+      this.notifications = res['notifications'];
+      this.notificationCount.emit(this.notifications.filter(notification => !notification.read).length);
    });
  }

@@ -48,7 +46,10 @@ export class NotificationsComponent implements OnInit {
        this.router.navigate(['downloads']);
        break;
      case NotificationAction.RETRY_DOWNLOAD:
-        this.postsService.restartDownload(action_info['notification']['data']['download_uid'])
+        this.postsService.restartDownload(action_info['notification']['data']['download_uid']).subscribe(res => {
+          this.postsService.openSnackBar($localize`Download restarted!`);
+          this.deleteNotification(action_info['notification']['uid']);
+        });
        break;
      default:
        console.error(`Notification action ${action_info['action']} does not exist!`);
@@ -59,7 +60,6 @@ export class NotificationsComponent implements OnInit {
  deleteNotification(uid: string): void {
    this.postsService.deleteNotification(uid).subscribe(res => {
      this.notifications.filter(notification => notification['uid'] !== uid);
-      this.read_notifications.filter(read_notification => read_notification['uid'] !== uid);
      this.notificationCount.emit(this.notifications.length);
      this.getNotifications();
    });
@@ -67,9 +67,7 @@ export class NotificationsComponent implements OnInit {

  deleteAllNotifications(): void {
    this.postsService.deleteAllNotifications().subscribe(res => {
-      console.log(res);
      this.notifications = [];
-      this.read_notifications = [];
      this.getNotifications();
    });
    this.notificationCount.emit(0);
@@ -78,15 +76,9 @@ export class NotificationsComponent implements OnInit {
  setNotificationsToRead(): void {
    const uids = this.notifications.map(notification => notification.uid);
    this.postsService.setNotificationsToRead(uids).subscribe(res => {
-      console.log(res);
+      this.getNotifications();
    });
    this.notificationCount.emit(0);
  }

-  notificationMenuClosed(): void {
-    if (this.notifications.length > 0) {
-      this.setNotificationsToRead();
-    }
-  }
-
 }
--- a/src/app/posts.services.ts
+++ b/src/app/posts.services.ts
@@ -868,7 +868,7 @@ export class PostsService implements CanActivate {
    }
    
    deleteAllNotifications(): Observable<SuccessObject> {
-        return this.http.post<SuccessObject>(this.path + 'deleteNotifications', {},
+        return this.http.post<SuccessObject>(this.path + 'deleteAllNotifications', {},
                                                                    this.httpOptions);
    }