[ACS-7386] remove material module dependency and components conversion to standalone (#9595)

This commit is contained in:
tamaragruszka
2024-04-29 10:32:44 +02:00
committed by GitHub
parent 10244f45ac
commit 52bcc7f7c7
5 changed files with 86 additions and 94 deletions

View File

@@ -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: `<button mat-raised-button (click)="showInfo()">Add Notification</button>`
standalone: true,
imports: [MatButtonModule],
template: ` <button mat-raised-button (click)="showInfo()">Add Notification</button>`
})
export class AddNotificationStorybookComponent {
infoCounter: number = 1;
constructor(private notificationService: NotificationService) { }
constructor(private notificationService: NotificationService) {}
showInfo() {
this.notificationService.showInfo(`Example notification ${this.infoCounter}`);

View File

@@ -1,38 +1,34 @@
<div (keyup)="onKeyPress($event)" tabindex="-1" role="button" class="adf-notification-history-container">
<button
mat-button
[matMenuTriggerFor]="menu"
[attr.aria-label]="'NOTIFICATIONS.OPEN_HISTORY' | translate"
title="{{ 'NOTIFICATIONS.OPEN_HISTORY' | translate }}"
class="adf-notification-history-menu_button"
id="adf-notification-history-open-button"
(menuOpened)="onMenuOpened()"
>
<mat-icon matBadge="&#8288;" [matBadgeHidden]="!notifications.length" matBadgeColor="accent" matBadgeSize="small">notifications</mat-icon>
<button mat-button
[matMenuTriggerFor]="menu"
[attr.aria-label]="'NOTIFICATIONS.OPEN_HISTORY' | translate"
title="{{ 'NOTIFICATIONS.OPEN_HISTORY' | translate }}"
class="adf-notification-history-menu_button"
id="adf-notification-history-open-button"
(menuOpened)="onMenuOpened()">
<mat-icon matBadge="&#8288;"
[matBadgeHidden]="!notifications.length"
matBadgeColor="accent"
matBadgeSize="small">notifications
</mat-icon>
</button>
<mat-menu
#menu="matMenu"
[xPosition]="menuPositionX"
[yPosition]="menuPositionY"
id="adf-notification-history-menu"
class="adf-notification-history-menu"
>
<div
class="adf-notification-history-list"
role="button"
tabindex="0"
(keyup.enter)="$event.stopPropagation()"
(click)="$event.stopPropagation()"
>
<mat-menu #menu="matMenu"
[xPosition]="menuPositionX"
[yPosition]="menuPositionY"
id="adf-notification-history-menu"
class="adf-notification-history-menu">
<div class="adf-notification-history-list"
role="button"
tabindex="0"
(keyup.enter)="$event.stopPropagation()"
(click)="$event.stopPropagation()">
<div mat-subheader role="menuitem">
<span>{{ 'NOTIFICATIONS.TITLE' | translate }}</span>
<button
*ngIf="notifications.length"
id="adf-notification-history-mark-as-read"
mat-icon-button
title="{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}"
(click)="markAsRead()"
>
<button *ngIf="notifications.length"
id="adf-notification-history-mark-as-read"
mat-icon-button
title="{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}"
(click)="markAsRead()">
<mat-icon>done_all</mat-icon>
</button>
</div>
@@ -41,26 +37,22 @@
<mat-list role="menuitem">
<ng-container *ngIf="notifications.length; else empty_list_template">
<mat-list-item
*ngFor="let notification of paginatedNotifications"
class="adf-notification-history-menu-item"
(click)="onNotificationClick(notification)"
>
<div
*ngIf="notification.initiator; else no_avatar"
matListAvatar
[outerHTML]="notification.initiator | usernameInitials : 'adf-notification-initiator-pic'"
></div>
<mat-list-item *ngFor="let notification of paginatedNotifications"
class="adf-notification-history-menu-item"
(click)="onNotificationClick(notification)">
<div *ngIf="notification.initiator; else no_avatar"
matListAvatar
[outerHTML]="notification.initiator | usernameInitials : 'adf-notification-initiator-pic'"></div>
<ng-template #no_avatar>
<mat-icon mat-list-icon class="adf-notification-history-menu-initiator">{{ notification.icon }}</mat-icon>
<mat-icon mat-list-icon
class="adf-notification-history-menu-initiator">{{ notification.icon }}
</mat-icon>
</ng-template>
<p
class="adf-notification-history-menu-text adf-notification-history-menu-message"
*ngFor="let message of notification.messages"
mat-line
[matTooltip]="message"
matTooltipShowDelay="1000"
>
<p class="adf-notification-history-menu-text adf-notification-history-menu-message"
*ngFor="let message of notification.messages"
mat-line
[matTooltip]="message"
matTooltipShowDelay="{{ 1000 }}">
{{ message }}
</p>
<p class="adf-notification-history-menu-text adf-notification-history-menu-date" mat-line>
@@ -69,7 +61,8 @@
</mat-list-item>
</ng-container>
<ng-template #empty_list_template>
<mat-list-item id="adf-notification-history-component-no-message" class="adf-notification-history-menu-no-message">
<mat-list-item id="adf-notification-history-component-no-message"
class="adf-notification-history-menu-no-message">
<p mat-line>{{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}</p>
</mat-list-item>
</ng-template>

View File

@@ -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<NotificationHistoryComponent>;

View File

@@ -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() {

View File

@@ -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 {}