From 26c4303919ff7469d899e4b5177c2055c215624d Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Fri, 20 Jan 2023 18:08:30 +0200 Subject: [PATCH] UI: Add customize notification web template --- .../src/app/core/http/notification.service.ts | 4 ++ .../show-notification-popover.component.html | 5 +- .../notification-center.component.html | 23 ++------ .../notification-center.component.ts | 5 +- .../notification-table/inbox-table-config.ts | 12 ++-- .../request-table-config.ts | 16 +++--- ...request-notification-dialog.component.html | 13 ++++- ...request-notification-dialog.component.scss | 21 ++++++- .../request-notification-dialog.componet.ts | 9 ++- ...emplate-notification-dialog.component.html | 38 +++++++++++++ ...emplate-notification-dialog.component.scss | 14 +++++ .../template-notification-dialog.component.ts | 39 ++++++++++++- .../notification/notification.component.html | 11 +++- .../notification/notification.component.scss | 7 ++- .../notification/notification.component.ts | 55 +++++++++++++++++-- .../shared/models/notification-ws.models.ts | 5 +- .../app/shared/models/notification.models.ts | 19 ++++++- ui-ngx/src/app/shared/pipe/date-ago.pipe.ts | 2 +- .../assets/locale/locale.constant-en_US.json | 5 ++ 19 files changed, 250 insertions(+), 53 deletions(-) diff --git a/ui-ngx/src/app/core/http/notification.service.ts b/ui-ngx/src/app/core/http/notification.service.ts index a83aa3c998..32f3382f20 100644 --- a/ui-ngx/src/app/core/http/notification.service.ts +++ b/ui-ngx/src/app/core/http/notification.service.ts @@ -53,6 +53,10 @@ export class NotificationService { return this.http.put(`/api/notification/${id}/read`, defaultHttpOptionsFromConfig(config)); } + public markAllNotificationsAsRead(config?: RequestConfig): Observable { + return this.http.put('/api/notifications/read', defaultHttpOptionsFromConfig(config)); + } + public createNotificationRequest(notification: NotificationRequest, config?: RequestConfig): Observable { return this.http.post('/api/notification/request', notification, defaultHttpOptionsFromConfig(config)); } 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 fa04d38253..c3886bacb6 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 @@ -26,7 +26,10 @@
- + +
diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.html b/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.html index b81aa6cee6..bd7925d7a1 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.html +++ b/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.html @@ -17,40 +17,25 @@ -->
- - - - - - - - - - - - - - -
- + - + - + - + diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.ts b/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.ts index 45bdd13ae3..64635cb470 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.ts +++ b/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.ts @@ -18,7 +18,7 @@ import { Component, QueryList, ViewChild, ViewChildren } from '@angular/core'; import { PageComponent } from '@shared/components/page.component'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; -import { MatTabGroup } from '@angular/material/tabs'; +import { MatTab, MatTabGroup } from '@angular/material/tabs'; import { NotificationTableComponent } from '@home/pages/notification-center/notification-table/notification-table.component'; @@ -34,6 +34,7 @@ export class NotificationCenterComponent extends PageComponent { entityType = EntityType; @ViewChild('matTabGroup', {static: true}) matTabs: MatTabGroup; + @ViewChild('requestTab', {static: true}) requestTab: MatTab; @ViewChild('notificationRequest', {static: true}) notificationRequestTable: NotificationTableComponent; @ViewChildren(NotificationTableComponent) tableComponent: QueryList; @@ -56,6 +57,6 @@ export class NotificationCenterComponent extends PageComponent { } sendNotification($event: Event) { - this.notificationRequestTable.entityTableConfig.onEntityAction({event: $event, action: 'add', entity: null}); + this.notificationRequestTable.entityTableConfig.onEntityAction({event: $event, action: this.requestTab.isActive ? 'add' : 'add-without-update', entity: null}); } } diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/inbox-table-config.ts b/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/inbox-table-config.ts index d5f3b6a782..482100b168 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/inbox-table-config.ts +++ b/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/inbox-table-config.ts @@ -88,11 +88,13 @@ export class InboxTableConfig extends EntityTableConfig { if ($event) { $event.stopPropagation(); } - if (this.componentsData.unreadOnly) { - this.getTable().resetSortAndFilter(true); - } else { - this.updateData(); - } + this.notificationService.markAllNotificationsAsRead().subscribe(() => { + if (this.componentsData.unreadOnly) { + this.getTable().resetSortAndFilter(true); + } else { + this.updateData(); + } + }); } private markAsRead($event, entity){ diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/request-table-config.ts b/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/request-table-config.ts index efd84c0565..eb27a05426 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/request-table-config.ts +++ b/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/request-table-config.ts @@ -84,7 +84,7 @@ export class RequestTableConfig extends EntityTableConfig { - if (res) { - this.updateData(); - } - }); + }).afterClosed().subscribe((res) => { + if (res && updateData) { + this.updateData(); + } + }); } private onRequestAction(action: EntityAction): boolean { @@ -109,6 +108,9 @@ export class RequestTableConfig extends EntityTableConfig
+
+
+ +
Web notification preview
+
+
+ +
+
supervisor_account -
{{ 'notification.recipients-count' | translate : {count: preview.totalRecipientsCount} }}
+
{{ 'notification.recipients-count' | translate : {count: preview.totalRecipientsCount} }}
-
+
{{ detail.value }}{{ detail.key }}
diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.scss index 54aeea8bc4..fed8fa0592 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.scss @@ -14,6 +14,7 @@ * limitations under the License. */ @import "../../../../../../scss/constants"; +@import "../../../../../../theme"; :host-context(.tb-fullscreen-dialog .mat-dialog-container) { width: 640px; @@ -24,11 +25,15 @@ border: 1px groove rgba(0, 0, 0, .12); border-radius: 4px; + &.notification { + background-color: #F3F6FA; //map_get($tb-mat-indigo, 50); + } + .mat-icon { color: rgba(0, 0, 0, 0.38); } - .total-recipients { + .group-title { font-weight: 500; letter-spacing: .25px; } @@ -51,6 +56,20 @@ margin-bottom: 8px; } } + + .web-preview { + flex-direction: row; + align-items: center; + justify-content: center; + display: flex; + + tb-notification { + border: 1px groove $tb-primary-color; + border-radius: 4px; + width: 80%; + background-color: #fff; + } + } } @media #{$mat-gt-xs} { diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.componet.ts b/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.componet.ts index 53e6078a9e..58413f42d9 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.componet.ts +++ b/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.componet.ts @@ -129,7 +129,14 @@ export class RequestNotificationDialogComponent extends private getPreview() { if (this.allValid()) { this.preview = null; - this.notificationService.getNotificationRequestPreview(this.notificationFormValue).subscribe( + this.notificationService.getNotificationRequestPreview(this.notificationFormValue).pipe( + map(data => { + if (data.processedTemplates.PUSH?.enabled) { + (data.processedTemplates.PUSH as any).text = data.processedTemplates.PUSH.body; + } + return data; + }) + ).subscribe( (preview) => this.preview = preview ); } diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.html index c6eaec492d..1325edb0c8 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.html +++ b/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.html @@ -95,6 +95,44 @@ notification.message +
+
+ + {{ 'icon.icon' | translate }} + +
+ + + + +
+
+
+ + {{ 'notification.action-button' | translate }} + +
+
+ + notification.button-text + + + {{ 'notification.button-text-required' | translate }} + + + + +
+ + notification.link + + + {{ 'notification.link-required' | translate }} + + +
+
+
{ + if (value) { + this.pushTemplateForm.get('additionalConfig.icon.icon').enable({emitEvent: false}); + } else { + this.pushTemplateForm.get('additionalConfig.icon.icon').disable({emitEvent: false}); + } + }); + + this.pushTemplateForm.get('additionalConfig.actionButtonConfig.enabled').valueChanges.pipe( + takeUntil(this.destroy$) + ).subscribe((value) => { + if (value) { + this.pushTemplateForm.get('additionalConfig.actionButtonConfig.text').enable({emitEvent: false}); + this.pushTemplateForm.get('additionalConfig.actionButtonConfig.link').enable({emitEvent: false}); + } else { + this.pushTemplateForm.get('additionalConfig.actionButtonConfig.text').disable({emitEvent: false}); + this.pushTemplateForm.get('additionalConfig.actionButtonConfig.link').disable({emitEvent: false}); + } }); this.emailTemplateForm = this.fb.group({ diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.html b/ui-ngx/src/app/shared/components/notification/notification.component.html index 91c6b50f0a..a3274ce597 100644 --- a/ui-ngx/src/app/shared/components/notification/notification.component.html +++ b/ui-ngx/src/app/shared/components/notification/notification.component.html @@ -16,15 +16,22 @@ -->
- account_circle + + {{ notification.additionalConfig.icon.icon }} +
{{ notification.subject }}
{{ notification.text }}
+
- {{ notification.createdTime | dateAgo }} + {{ notification.createdTime | dateAgo }}
diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.scss b/ui-ngx/src/app/shared/components/notification/notification.component.scss index 50b568394d..4ce043d6c7 100644 --- a/ui-ngx/src/app/shared/components/notification/notification.component.scss +++ b/ui-ngx/src/app/shared/components/notification/notification.component.scss @@ -17,7 +17,7 @@ padding: 10px; display: block; - .mat-icon { + .icon { margin-right: 14px; color: rgba(0, 0, 0, 0.54); } @@ -33,6 +33,11 @@ line-height: 16px; color: rgba(0, 0, 0, 0.76); } + + .button { + margin-top: 8px; + border-color: initial; + } } .description { diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.ts b/ui-ngx/src/app/shared/components/notification/notification.component.ts index 5cf12edc7a..442524755c 100644 --- a/ui-ngx/src/app/shared/components/notification/notification.component.ts +++ b/ui-ngx/src/app/shared/components/notification/notification.component.ts @@ -14,28 +14,75 @@ /// limitations under the License. /// -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { Notification } from '@shared/models/notification.models'; +import { UtilsService } from '@core/services/utils.service'; +import { Router } from '@angular/router'; +import { coerceBooleanProperty } from '@angular/cdk/coercion'; @Component({ selector: 'tb-notification', templateUrl: './notification.component.html', styleUrls: ['./notification.component.scss'] }) -export class NotificationComponent { +export class NotificationComponent implements OnInit { @Input() notification: Notification; + @Input() + onClose: () => void; + @Output() markAsRead = new EventEmitter(); - constructor() { + + private previewValue = false; + get preview(): boolean { + return this.previewValue; + } + @Input() + set preview(value: boolean) { + this.previewValue = coerceBooleanProperty(value); + } + + showIcon = false; + showButton = false; + buttonLabel = ''; + + constructor( + private utils: UtilsService, + private router: Router + ) { + } + + ngOnInit() { + this.showIcon = this.notification.additionalConfig?.icon?.enabled; + this.showButton = this.notification.additionalConfig?.actionButtonConfig?.enabled; + if (this.showButton) { + this.buttonLabel = this.utils.customTranslation(this.notification.additionalConfig.actionButtonConfig.text, + this.notification.additionalConfig.actionButtonConfig.text); + } } markRead($event: Event) { if ($event) { $event.stopPropagation(); } - this.markAsRead.next(this.notification.id.id); + if (!this.preview) { + this.markAsRead.next(this.notification.id.id); + } + } + + navigate($event: Event) { + if ($event) { + $event.stopPropagation(); + } + if (!this.preview) { + this.router.navigateByUrl(this.router.parseUrl(this.notification.additionalConfig.actionButtonConfig.link)).then(() => { + }); + if (this.onClose) { + this.onClose(); + } + } } } diff --git a/ui-ngx/src/app/shared/models/notification-ws.models.ts b/ui-ngx/src/app/shared/models/notification-ws.models.ts index f3224b8c36..ef077097d6 100644 --- a/ui-ngx/src/app/shared/models/notification-ws.models.ts +++ b/ui-ngx/src/app/shared/models/notification-ws.models.ts @@ -183,11 +183,12 @@ export class UnsubscribeCmd implements WebsocketCmd { cmdId: number; } -export class MarkAsReadCmd extends UnreadCountSubCmd { +export class MarkAsReadCmd implements WebsocketCmd { + + cmdId: number; notifications: string[]; constructor(ids: string[]) { - super(); this.notifications = ids; } } diff --git a/ui-ngx/src/app/shared/models/notification.models.ts b/ui-ngx/src/app/shared/models/notification.models.ts index b1f39f9de9..83aa994c3c 100644 --- a/ui-ngx/src/app/shared/models/notification.models.ts +++ b/ui-ngx/src/app/shared/models/notification.models.ts @@ -35,6 +35,8 @@ export interface Notification { readonly info: NotificationInfo; readonly originatorType: NotificationOriginatorType; readonly status: NotificationStatus; + readonly createdTime: number; + readonly additionalConfig?: PushDeliveryMethodAdditionalConfig; } export interface NotificationInfo { @@ -155,8 +157,21 @@ export interface DeliveryMethodNotificationTemplate extends interface PushDeliveryMethodNotificationTemplate { subject?: string; - icon?: string; - actionButtonConfig?: string; + additionalConfig: PushDeliveryMethodAdditionalConfig; +} + +interface PushDeliveryMethodAdditionalConfig { + icon: { + enabled: boolean; + icon: string; + color: string; + }; + actionButtonConfig: { + enabled: boolean; + text: string; + color: string; + link: string; + }; } interface EmailDeliveryMethodNotificationTemplate { diff --git a/ui-ngx/src/app/shared/pipe/date-ago.pipe.ts b/ui-ngx/src/app/shared/pipe/date-ago.pipe.ts index 4ecafe3d10..79f391c85a 100644 --- a/ui-ngx/src/app/shared/pipe/date-ago.pipe.ts +++ b/ui-ngx/src/app/shared/pipe/date-ago.pipe.ts @@ -51,7 +51,7 @@ export class DateAgoPipe implements PipeTransform { } } } - return value.toString(); + return ''; } } 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 ad567cc4ae..3a4e17d815 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -2669,6 +2669,7 @@ "copied": "Copied!" }, "notification": { + "action-button": "Action button", "add-notification-target": "Add notification target", "add-notification-template": "Add notification template", "add-target": "Add target", @@ -2676,6 +2677,8 @@ "at-least-one-should-be-selected": "At least one should be selected", "all": "All", "basic-settings": "Basic settings", + "button-text": "Button text", + "button-text-required": "Button text is required", "compose": "Compose", "copy-notification-template": "Copy notification template", "create-target": "Create target", @@ -2700,6 +2703,8 @@ "email-settings": "Email settings", "get-customer-id-from-originator": "Get Customer id from originator", "inbox": "Inbox", + "link": "Link", + "link-required": "Link is required", "management": "Notification management", "mark-all-as-read": "Mark all as read", "mark-as-read": "Mark as read",