From 25f2a54e5beae89eb9d50ab05a6a4e33e50c410a Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Mon, 23 Jan 2023 12:47:00 +0200 Subject: [PATCH] UI: Add notification not in popover and added filter for noification template --- .../src/app/core/http/notification.service.ts | 12 ++++++-- .../notification-bell.component.ts | 1 + .../show-notification-popover.component.html | 28 +++++++++++-------- .../show-notification-popover.component.ts | 6 +--- ...request-notification-dialog.component.html | 1 + .../request-notification-dialog.componet.ts | 3 +- .../template-autocomplete.component.ts | 11 ++++++-- .../assets/locale/locale.constant-en_US.json | 1 + ui-ngx/src/assets/notification-bell.svg | 1 + 9 files changed, 41 insertions(+), 23 deletions(-) create mode 100644 ui-ngx/src/assets/notification-bell.svg diff --git a/ui-ngx/src/app/core/http/notification.service.ts b/ui-ngx/src/app/core/http/notification.service.ts index 32f3382f20..348ba7f6ef 100644 --- a/ui-ngx/src/app/core/http/notification.service.ts +++ b/ui-ngx/src/app/core/http/notification.service.ts @@ -29,10 +29,12 @@ import { NotificationSettings, NotificationTarget, NotificationTemplate, + NotificationType, SlackChanelType, SlackConversation } from '@shared/models/notification.models'; import { User } from '@shared/models/user.model'; +import { isDefinedAndNotNull } from '@core/utils'; @Injectable({ providedIn: 'root' @@ -143,8 +145,12 @@ export class NotificationService { return this.http.delete(`/api/notification/template/${id}`, defaultHttpOptionsFromConfig(config)); } - public getNotificationTemplates(pageLink: PageLink, config?: RequestConfig): Observable> { - return this.http.get>(`/api/notification/templates${pageLink.toQuery()}`, - defaultHttpOptionsFromConfig(config)); + public getNotificationTemplates(pageLink: PageLink, notificationTypes?: NotificationType, + config?: RequestConfig): Observable> { + let url = `/api/notification/templates${pageLink.toQuery()}`; + if (isDefinedAndNotNull(notificationTypes)) { + url += `¬ificationTypes=${notificationTypes}`; + } + return this.http.get>(url, defaultHttpOptionsFromConfig(config)); } } diff --git a/ui-ngx/src/app/modules/home/components/notification/notification-bell.component.ts b/ui-ngx/src/app/modules/home/components/notification/notification-bell.component.ts index ff670fa167..41566ed03f 100644 --- a/ui-ngx/src/app/modules/home/components/notification/notification-bell.component.ts +++ b/ui-ngx/src/app/modules/home/components/notification/notification-bell.component.ts @@ -54,6 +54,7 @@ export class NotificationBellComponent implements OnInit { this.notificationSubscriber = NotificationSubscriber.createNotificationCountSubscription( this.notificationWsService, this.zone); this.notificationSubscriber.subscribe(); + this.count$ = this.notificationSubscriber.notificationCount$.pipe( distinctUntilChanged(), publishReplay(1), diff --git a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html index c3886bacb6..80a51bc9b7 100644 --- a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html +++ b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html @@ -15,25 +15,25 @@ limitations under the License. --> -
+
notification.notification
-
-
- - - -
-
-
+
+
+
+ + + +
+
+ + empty notification + notification.no-notifications-yet + diff --git a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.ts b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.ts index 4f25f644ff..2a421de7f3 100644 --- a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.ts +++ b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.ts @@ -56,11 +56,7 @@ export class ShowNotificationPopoverComponent extends PageComponent implements O this.notifications$ = this.notificationSubscriber.notifications$.pipe( publishReplay(1), refCount(), - tap(() => { - setTimeout(() => { - this.cd.markForCheck(); - }); - }) + tap(() => setTimeout(() => this.cd.markForCheck())) ); this.notificationSubscriber.subscribe(); } diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.html index 346ac1092e..ecf3634799 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.html +++ b/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.html @@ -39,6 +39,7 @@
; isAdd = true; entityType = EntityType; + notificationType = NotificationType; notificationRequestForm: FormGroup; selectedIndex = 0; diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-autocomplete.component.ts b/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-autocomplete.component.ts index b478718758..31333546c0 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-autocomplete.component.ts +++ b/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-autocomplete.component.ts @@ -28,7 +28,11 @@ import { TruncatePipe } from '@shared/pipe/truncate.pipe'; import { PageLink } from '@shared/models/page/page-link'; import { Direction } from '@shared/models/page/sort-order'; import { emptyPageData } from '@shared/models/page/page-data'; -import { NotificationDeliveryMethodTranslateMap, NotificationTemplate } from '@shared/models/notification.models'; +import { + NotificationDeliveryMethodTranslateMap, + NotificationTemplate, + NotificationType +} from '@shared/models/notification.models'; import { NotificationService } from '@core/http/notification.service'; import { isEqual } from '@core/utils'; @@ -65,6 +69,9 @@ export class TemplateAutocompleteComponent implements ControlValueAccessor, OnIn @Input() disabled: boolean; + @Input() + notificationTypes: NotificationType; + @ViewChild('templateInput', {static: true}) templateInput: ElementRef; filteredTemplate: Observable>; @@ -187,7 +194,7 @@ export class TemplateAutocompleteComponent implements ControlValueAccessor, OnIn property: 'name', direction: Direction.ASC }); - return this.notificationService.getNotificationTemplates(pageLink, {ignoreLoading: true}).pipe( + return this.notificationService.getNotificationTemplates(pageLink, this.notificationTypes, {ignoreLoading: true}).pipe( catchError(() => of(emptyPageData())), map(pageData => { return pageData.data; diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 3a4e17d815..55bd9ee662 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -2714,6 +2714,7 @@ "no-inbox-notification": "No notification found", "no-notification-request": "No notification request", "no-notification-templates": "No notification templates", + "no-notifications-yet": "No notifications yet", "no-targets-notification": "No targets notification", "notification": "Notification", "notification-center": "Notification center", diff --git a/ui-ngx/src/assets/notification-bell.svg b/ui-ngx/src/assets/notification-bell.svg new file mode 100644 index 0000000000..f5bb251293 --- /dev/null +++ b/ui-ngx/src/assets/notification-bell.svg @@ -0,0 +1 @@ +