diff --git a/lib/core/src/lib/notifications/components/add-notification.stories.component.ts b/lib/core/src/lib/notifications/components/add-notification.stories.component.ts index c3416ce5e08..6b1efd19271 100644 --- a/lib/core/src/lib/notifications/components/add-notification.stories.component.ts +++ b/lib/core/src/lib/notifications/components/add-notification.stories.component.ts @@ -17,16 +17,18 @@ import { Component } from '@angular/core'; import { NotificationService } from '../services/notification.service'; +import { MatButtonModule } from '@angular/material/button'; @Component({ selector: 'adf-add-notification-storybook', - template: `` + standalone: true, + imports: [MatButtonModule], + template: ` ` }) export class AddNotificationStorybookComponent { - infoCounter: number = 1; - constructor(private notificationService: NotificationService) { } + constructor(private notificationService: NotificationService) {} showInfo() { this.notificationService.showInfo(`Example notification ${this.infoCounter}`); diff --git a/lib/core/src/lib/notifications/components/notification-history.component.html b/lib/core/src/lib/notifications/components/notification-history.component.html index f216ed94ca5..861767a6f26 100644 --- a/lib/core/src/lib/notifications/components/notification-history.component.html +++ b/lib/core/src/lib/notifications/components/notification-history.component.html @@ -1,38 +1,34 @@
- - -
+ +
{{ 'NOTIFICATIONS.TITLE' | translate }} -
@@ -41,26 +37,22 @@ - -
+ +
- {{ notification.icon }} + {{ notification.icon }} + -

+

{{ message }}

@@ -69,7 +61,8 @@ - +

{{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}

 diff --git a/lib/core/src/lib/notifications/components/notification-history.component.spec.ts b/lib/core/src/lib/notifications/components/notification-history.component.spec.ts index 79e725250e6..473713e7f9b 100644 --- a/lib/core/src/lib/notifications/components/notification-history.component.spec.ts +++ b/lib/core/src/lib/notifications/components/notification-history.component.spec.ts @@ -21,7 +21,7 @@ import { NotificationHistoryComponent } from './notification-history.component'; import { OverlayContainer } from '@angular/cdk/overlay'; import { NotificationService } from '../services/notification.service'; import { StorageService } from '../../common/services/storage.service'; -import { NotificationModel, NOTIFICATION_TYPE } from '../models/notification.model'; +import { NOTIFICATION_TYPE, NotificationModel } from '../models/notification.model'; describe('Notification History Component', () => { let fixture: ComponentFixture; diff --git a/lib/core/src/lib/notifications/components/notification-history.component.ts b/lib/core/src/lib/notifications/components/notification-history.component.ts index 34e2d997bd3..108a5930049 100644 --- a/lib/core/src/lib/notifications/components/notification-history.component.ts +++ b/lib/core/src/lib/notifications/components/notification-history.component.ts @@ -15,23 +15,44 @@ * limitations under the License. */ -import { Component, Input, ViewChild, OnDestroy, OnInit, AfterViewInit, ChangeDetectorRef, ViewEncapsulation } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { NotificationService } from '../services/notification.service'; -import { NotificationModel, NOTIFICATION_TYPE } from '../models/notification.model'; -import { MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/menu'; +import { NOTIFICATION_TYPE, NotificationModel } from '../models/notification.model'; +import { MatMenuModule, MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/menu'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; import { StorageService } from '../../common/services/storage.service'; import { PaginationModel } from '../../models/pagination.model'; +import { MatButtonModule } from '@angular/material/button'; +import { TranslateModule } from '@ngx-translate/core'; +import { MatIconModule } from '@angular/material/icon'; +import { MatBadgeModule } from '@angular/material/badge'; +import { MatListModule } from '@angular/material/list'; +import { NgForOf, NgIf } from '@angular/common'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { InitialUsernamePipe, TimeAgoPipe } from '../../pipes'; @Component({ selector: 'adf-notification-history', + standalone: true, templateUrl: 'notification-history.component.html', styleUrls: ['./notification-history.component.scss'], + imports: [ + MatButtonModule, + MatMenuModule, + TranslateModule, + MatIconModule, + MatBadgeModule, + MatListModule, + NgIf, + NgForOf, + MatTooltipModule, + TimeAgoPipe, + InitialUsernamePipe + ], encapsulation: ViewEncapsulation.None }) export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterViewInit { - public static MAX_NOTIFICATION_STACK_LENGTH = 100; public static NOTIFICATION_STORAGE = 'notification-history'; @@ -55,24 +76,17 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie paginatedNotifications: NotificationModel[] = []; pagination: PaginationModel; - constructor( - private notificationService: NotificationService, - public storageService: StorageService, - public cd: ChangeDetectorRef) { - - } + constructor(private notificationService: NotificationService, public storageService: StorageService, public cd: ChangeDetectorRef) {} ngOnInit() { this.notifications = JSON.parse(this.storageService.getItem(NotificationHistoryComponent.NOTIFICATION_STORAGE)) || []; } ngAfterViewInit(): void { - this.notificationService.notifications$ - .pipe(takeUntil(this.onDestroy$)) - .subscribe((notification: NotificationModel) => { - this.addNewNotification(notification); - this.cd.detectChanges(); - }); + this.notificationService.notifications$.pipe(takeUntil(this.onDestroy$)).subscribe((notification: NotificationModel) => { + this.addNewNotification(notification); + this.cd.detectChanges(); + }); } ngOnDestroy() { @@ -92,9 +106,10 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie } saveNotifications() { - this.storageService.setItem(NotificationHistoryComponent.NOTIFICATION_STORAGE, JSON.stringify(this.notifications.filter((notification) => - notification.type !== NOTIFICATION_TYPE.RECURSIVE - ))); + this.storageService.setItem( + NotificationHistoryComponent.NOTIFICATION_STORAGE, + JSON.stringify(this.notifications.filter((notification) => notification.type !== NOTIFICATION_TYPE.RECURSIVE)) + ); } onMenuOpened() { diff --git a/lib/core/src/lib/notifications/notification-history.module.ts b/lib/core/src/lib/notifications/notification-history.module.ts index 351c490a978..31eafd4c146 100644 --- a/lib/core/src/lib/notifications/notification-history.module.ts +++ b/lib/core/src/lib/notifications/notification-history.module.ts @@ -15,30 +15,12 @@ * limitations under the License. */ -import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { MaterialModule } from '../material.module'; -import { PipeModule } from '../pipes/pipe.module'; import { NotificationHistoryComponent } from './components/notification-history.component'; -import { TranslateModule } from '@ngx-translate/core'; -import { PaginationModule } from '../pagination/pagination.module'; import { AddNotificationStorybookComponent } from './components/add-notification.stories.component'; @NgModule({ - imports: [ - CommonModule, - MaterialModule, - TranslateModule, - PipeModule, - PaginationModule - ], - declarations: [ - NotificationHistoryComponent, - AddNotificationStorybookComponent - ], - exports: [ - NotificationHistoryComponent, - AddNotificationStorybookComponent - ] + imports: [NotificationHistoryComponent, AddNotificationStorybookComponent], + exports: [NotificationHistoryComponent, AddNotificationStorybookComponent] }) -export class NotificationHistoryModule { } +export class NotificationHistoryModule {}