[Feat]: Notification List UI Implementation #2711

Ayush8923 · 2024-12-11T05:55:42Z

closes: #2661

Visible/Frontend Changes

Implement the Notification List UI as per this comment.
Create the different components for the Notification-items.
Create Two tabs for all notifications and unread notifications.
Update the notification settings icon to display three dots instead of the settings icon, and show the settings menu items upon clicking the dots.

…tification entity in system

…the user devices

…/github.com/Aam-Digital/ndb-core into feat/push-notification-firebase-integration

github-actions · 2024-12-11T05:56:02Z

Deployed to https://pr-2711.aam-digital.net/

src/app/features/notification/NotificationTimePipe.ts

src/app/features/notification/notification.component.ts

src/app/features/notifications/notification-item/notification-item.component.html

src/app/features/notification/notification.component.html

src/app/features/notifications/notifications.component.html

sleidig

Looking pretty good already.

A few more optimizations for UI & UX:

menu icons should have some width to cleanly align:
that menu (mark unread / delete upon blue dot) should auto-close after clicking one option, in my opinion
same for the top "..." menu. "Mark all read" should close the action menu (but keep the notifications list open).

src/app/features/notification/notification.component.html

src/app/features/notification/notification-item/notification-item.component.html

src/app/features/notification/NotificationTimePipe.ts

src/app/features/notification/notification-item/notification-item.component.html

Ayush8923 · 2024-12-19T08:33:43Z

that menu (mark unread / delete upon blue dot) should auto-close after clicking one option, in my opinion

@sleidig I tried to implement the functionality in this way, but the mat-menu is not closing due to the use of stopPropagation. When I use stopPropagation in a mat-menu item, the mat-menu doesn't close. However, when I remove stopPropagation, both mat-menu close. So, I implemented it in such a way that whenever the user selects any mat-menu item, the mat-menu does not close. If the user wants to close it, they can do so. Could you please suggest a solution if you have one?

same for the top "..." menu. "Mark all read" should close the action menu (but keep the notifications list open).

Same for this.

Ayush8923 · 2024-12-19T10:58:27Z

Deployed to https://pr-2711.aam-digital.net/

@george-neha I have made some updates to the notification list UI. Please check the notification list UI in the mentioned URL and let us know if you have any suggestions. Also, I have modified the notification time and when the user hovers in the notification time then in the tooltip the actual date and time will be shown.

For notifications 7 or more days ago, show the number of days (e.g. "10d", "15d").
For even longer timespans (30+ days), we can display the month and year (e.g. "Jan 2024").

george-neha · 2024-12-23T08:53:17Z

Working as per discussed functionality and UI. Can be moved to tech review.
@Ayush8923- Can this be aligned?

sleidig

Made some small improvements. Looks fine now 👍

src/app/features/notification/notification.component.html

--------- Co-authored-by: Sebastian Leidig <[email protected]>

Ayush8923 and others added 21 commits November 27, 2024 10:32

feat(*): firebase integration for push notification

832f23a

feat(*): create the wrapper function for the firebase messaging

04b6672

feat(*): create the push notification UI

c29861f

fix(*): update the notification UI alignment

6e7ed4b

fix(*): update the notification UI styling

5293440

fix(*): update the notification list UI

afac897

fix

4f60d7c

fix(*): update the aam digital firebase credintals

4199026

fix(*): refactore the push notification service and create the new No…

91b6a2e

…tification entity in system

feat(*): integrate the firebase send api to send the notification to …

30132b1

…the user devices

fix(*): remove the hardcoded project ID

3e3562c

fix(*): update the notification entity fields

0dae24c

fix(*): implement the get the notification list and cleanups

c13bfe6

fix(*): linting checks

c277454

fix(*): added the padding in the notification item class

6e30e7a

Merge branch 'master' into feat/push-notification-firebase-integration

3896fcf

fix(*): update the firebaseConfig import

9d20b82

Merge branch 'feat/push-notification-firebase-integration' of https:/…

c384ebd

…/github.com/Aam-Digital/ndb-core into feat/push-notification-firebase-integration

fix(*): added the firebase config in the environment prod and spec file

7af4344

fix(*): linting checks fixes

71ed3b4

feat(*): update the notification list UI

7da91d3

Ayush8923 added 2 commits December 11, 2024 11:51

fix*(*): fix the indentation

e0961ee

fix(*): update the notification list UI

da0a887

Ayush8923 self-assigned this Dec 11, 2024

Ayush8923 added 5 commits December 11, 2024 15:39

fix(*): cleanups and refactoring

d3eaa1a

fix(*): update the code description

457e7d6

fix(*): added the logging

ef93d0d

fix(*): cleanups

5c37352

fix(*): remove the unwanted styles

1d05768

fix(*): update the notfication html file name

fc0332b

Ayush8923 commented Dec 18, 2024

View reviewed changes

src/app/features/notification/NotificationTimePipe.ts Outdated Show resolved Hide resolved

fix(*): update the notification component spec name

f94ab94

sleidig reviewed Dec 18, 2024

View reviewed changes

src/app/features/notification/notification.component.ts Outdated Show resolved Hide resolved

src/app/features/notifications/notification-item/notification-item.component.html Outdated Show resolved Hide resolved

sleidig reviewed Dec 18, 2024

View reviewed changes

src/app/features/notification/notification.component.html Outdated Show resolved Hide resolved

src/app/features/notifications/notifications.component.html Outdated Show resolved Hide resolved

sleidig reviewed Dec 18, 2024

View reviewed changes

Ayush8923 added 4 commits December 19, 2024 12:00

feat(*): update in the notification list ui

656630a

fix(*): update the notification time pipe and date on the tooltip

c71f389

fix(*): create the own function for the stop propogation

a842f5b

fix(*): update the name of the enabled notification

f6ea242

Ayush8923 added 3 commits December 19, 2024 14:15

fix(*gst)

25b4b31

fix(*): update the jsDoc in the notification component

7249bb4

fix(*): update the few changes in the notifcation list ui

1244000

sleidig and others added 2 commits December 19, 2024 16:53

prevent submenu actions to close notifications panel

7adaadc

fix(*): update the time of mock notification

92247dc

sleidig added 4 commits December 23, 2024 16:59

translated time periods + more mock events

c9e9b12

UI tuning

d2e25f4

fix outputs

03ddd6e

fix outputs and tests

0566b50

sleidig approved these changes Dec 23, 2024

View reviewed changes

src/app/features/notification/notification.component.html Outdated Show resolved Hide resolved

Ayush8923 and others added 4 commits December 23, 2024 22:38

fix(*): added the position sticky

6534650

fix(*): update the notification list header styling

01d7f97

fix(*): update the css for the notification list ui

1af91d3

fix layout

4643bb5

sleidig merged commit e4dbf3f into feat/1055_notifications-final Dec 27, 2024
12 checks passed

sleidig deleted the feat/notification-final-integration branch December 27, 2024 14:15

sleidig added a commit that referenced this pull request Dec 27, 2024

[Feat]: Notification List UI Implementation (#2711)

020b00d

--------- Co-authored-by: Sebastian Leidig <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat]: Notification List UI Implementation #2711

[Feat]: Notification List UI Implementation #2711

Ayush8923 commented Dec 11, 2024 •

edited

Loading

github-actions bot commented Dec 11, 2024

sleidig left a comment •

edited

Loading

Ayush8923 commented Dec 19, 2024

Ayush8923 commented Dec 19, 2024 •

edited

Loading

george-neha commented Dec 23, 2024

sleidig left a comment

[Feat]: Notification List UI Implementation #2711

[Feat]: Notification List UI Implementation #2711

Conversation

Ayush8923 commented Dec 11, 2024 • edited Loading

Visible/Frontend Changes

github-actions bot commented Dec 11, 2024

sleidig left a comment • edited Loading

Choose a reason for hiding this comment

Ayush8923 commented Dec 19, 2024

Ayush8923 commented Dec 19, 2024 • edited Loading

george-neha commented Dec 23, 2024

sleidig left a comment

Choose a reason for hiding this comment

Ayush8923 commented Dec 11, 2024 •

edited

Loading

sleidig left a comment •

edited

Loading

Ayush8923 commented Dec 19, 2024 •

edited

Loading