From cc2be46ad8554ace1c6c05fe1361a8cb313eb085 Mon Sep 17 00:00:00 2001 From: Isaac Abadi Date: Thu, 29 Dec 2022 13:56:45 -0600 Subject: [PATCH] Notifications style improvements --- backend/app.js | 5 +-- backend/db.js | 4 +- backend/test/tests.js | 2 +- src/app/app.component.html | 4 +- src/app/app.component.ts | 4 ++ .../notifications-list.component.html | 43 ++++++++++++------- .../notifications-list.component.scss | 25 ++++++++++- .../notifications-list.component.ts | 4 +- .../notifications.component.html | 9 +--- .../notifications/notifications.component.ts | 24 ++++------- src/app/posts.services.ts | 2 +- 11 files changed, 75 insertions(+), 51 deletions(-) diff --git a/backend/app.js b/backend/app.js index bdcc7d6..560f13a 100644 --- 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}); }); diff --git a/backend/db.js b/backend/db.js index beae2fa..f9400eb 100644 --- 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) => { diff --git a/backend/test/tests.js b/backend/test/tests.js index b640687..ca72656 100644 --- 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'); diff --git a/src/app/app.component.html b/src/app/app.component.html index 5cf533d..94ddab1 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -7,11 +7,11 @@
-
+
- + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 5c63583..4947793 100644 --- 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(); } diff --git a/src/app/components/notifications-list/notifications-list.component.html b/src/app/components/notifications-list/notifications-list.component.html index d0923fc..8253525 100644 --- a/src/app/components/notifications-list/notifications-list.component.html +++ b/src/app/components/notifications-list/notifications-list.component.html @@ -1,17 +1,28 @@ -
- -
- - {{NOTIFICATION_PREFIX[notification.type]}}  - - - {{notification['data'][NOTIFICATION_SUFFIX_KEY[notification.type]]}} - -
-
- - - - -
+
+ + + +
+ {{notification.timestamp * 1000 | date:'short'}} +
+ + + + {{NOTIFICATION_PREFIX[notification.type]}}  + + + + + + {{notification['data'][NOTIFICATION_SUFFIX_KEY[notification.type]]}} + + + + + + + + + +
\ No newline at end of file diff --git a/src/app/components/notifications-list/notifications-list.component.scss b/src/app/components/notifications-list/notifications-list.component.scss index b7e5363..8ea107a 100644 --- 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; -} \ No newline at end of file +} + +.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; + } \ No newline at end of file diff --git a/src/app/components/notifications-list/notifications-list.component.ts b/src/app/components/notifications-list/notifications-list.component.ts index b8e424b..23a84cf 100644 --- 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 diff --git a/src/app/components/notifications/notifications.component.html b/src/app/components/notifications/notifications.component.html index 67e8a99..cd60af8 100644 --- a/src/app/components/notifications/notifications.component.html +++ b/src/app/components/notifications/notifications.component.html @@ -1,10 +1,5 @@ -No notifications available +
No notifications available
- New notifications +
- -
- Old notifications - -
\ No newline at end of file diff --git a/src/app/components/notifications/notifications.component.ts b/src/app/components/notifications/notifications.component.ts index 50ed7fc..870b421 100644 --- 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(); @@ -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(); - } - } - } diff --git a/src/app/posts.services.ts b/src/app/posts.services.ts index 1cc4ef6..4c5eef5 100644 --- a/src/app/posts.services.ts +++ b/src/app/posts.services.ts @@ -868,7 +868,7 @@ export class PostsService implements CanActivate { } deleteAllNotifications(): Observable { - return this.http.post(this.path + 'deleteNotifications', {}, + return this.http.post(this.path + 'deleteAllNotifications', {}, this.httpOptions); }