inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-5311] Notification History Bug Fix (#9011)

Browse Source 
* [ACS-5311] implemented read state for notifications and showing only unread notifications in history menu

* [ACS-5311] linting fixes

* [ACS-5311] linting fixes

* [ACS-5311] fixed code smell

* [ACS-5311] addressed review comments

* [ACS-5311] addressed review comments

* [ACS-5311] updated unit tests

* [ACS-5311] addressed review comments and optimized unit tests

* [ACS-5311] linting fix

* [ACS-5311] addressed review comments

* [ACS-5311] fixed typos

* [ACS-5311] moved NOTIFICATION_STORAGE to notification.model.ts to reuse across repos

* [ACS-5311] addressed review comments
This commit is contained in:
SheenaMalhotra182
2023-11-03 20:11:40 +05:30
committed by GitHub
parent 3687cc58e0
commit 94fb61541c
5 changed files with 95 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
lib/core/src/lib/notifications/components/notification-history.component.html
View File

@@ -7,7 +7,7 @@
id="adf-notification-history-open-button"
(menuOpened)="onMenuOpened()">
<mat-icon matBadge="&#8288;"
[matBadgeHidden]="!notifications.length"
[matBadgeHidden]="!unreadNotifications.length"
matBadgeColor="accent"
matBadgeSize="small">notifications</mat-icon>
</button>
@@ -21,7 +21,7 @@
(click)="$event.stopPropagation()">
<div mat-subheader role="menuitem">
<span>{{ 'NOTIFICATIONS.TITLE' | translate }}</span>
<button *ngIf="notifications.length"
<button *ngIf="unreadNotifications.length"
id="adf-notification-history-mark-as-read"
mat-icon-button
title="{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}"
@@ -33,7 +33,7 @@
<mat-divider></mat-divider>
<mat-list role="menuitem">
<ng-container *ngIf="notifications.length; else empty_list_template">
<ng-container *ngIf="unreadNotifications.length; else empty_list_template">
<mat-list-item *ngFor="let notification of paginatedNotifications"
class="adf-notification-history-menu-item"
(click)="onNotificationClick(notification)">

66
lib/core/src/lib/notifications/components/notification-history.component.spec.ts
View File

@@ -22,7 +22,7 @@ import { OverlayContainer } from '@angular/cdk/overlay';
import { NotificationService } from '../services/notification.service';
import { StorageService } from '../../common/services/storage.service';
import { TranslateModule } from '@ngx-translate/core';
import { NotificationModel, NOTIFICATION_TYPE } from '../models/notification.model';
import { NotificationModel, NOTIFICATION_TYPE, NOTIFICATION_STORAGE } from '../models/notification.model';
describe('Notification History Component', () => {
@@ -32,11 +32,12 @@ describe('Notification History Component', () => {
let notificationService: NotificationService;
let overlayContainerElement: HTMLElement;
let storage: StorageService;
let testNotifications: NotificationModel[];
const openNotification = () => {
fixture.detectChanges();
const button = element.querySelector<HTMLButtonElement>('#adf-notification-history-open-button');
button.click();
button?.click();
fixture.detectChanges();
};
@@ -54,6 +55,26 @@ describe('Notification History Component', () => {
storage = TestBed.inject(StorageService);
notificationService = TestBed.inject(NotificationService);
component.notifications = [];
component.unreadNotifications = [];
testNotifications = [
{
type: NOTIFICATION_TYPE.INFO,
icon: 'info',
datetime: new Date(),
initiator: { key: '*', displayName: 'SYSTEM' },
messages: ['Moved 1 item.'],
read: false
},
{
type: NOTIFICATION_TYPE.INFO,
icon: 'info',
datetime: new Date(),
initiator: { key: '*', displayName: 'SYSTEM' },
messages: ['Copied 1 item.'],
read: false
}
];
});
beforeEach(inject([OverlayContainer], (oc: OverlayContainer) => {
@@ -61,7 +82,7 @@ describe('Notification History Component', () => {
}));
afterEach(() => {
storage.removeItem(NotificationHistoryComponent.NOTIFICATION_STORAGE);
storage.removeItem(NOTIFICATION_STORAGE);
fixture.destroy();
});
@@ -83,12 +104,11 @@ describe('Notification History Component', () => {
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(component.notifications.length).toBe(1);
expect(component.unreadNotifications.length).toBe(1);
const markAllAsRead = overlayContainerElement.querySelector<HTMLButtonElement>('#adf-notification-history-mark-as-read');
markAllAsRead.click();
markAllAsRead?.click();
fixture.detectChanges();
expect(storage.getItem(NotificationHistoryComponent.NOTIFICATION_STORAGE)).toBeNull();
expect(component.notifications.length).toBe(0);
expect(component.unreadNotifications).toEqual([]);
done();
});
});
@@ -101,7 +121,7 @@ describe('Notification History Component', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(overlayContainerElement.querySelector('#adf-notification-history-component-no-message')).toBeNull();
expect(overlayContainerElement.querySelector('.adf-notification-history-list').innerHTML).toContain('Example Message');
expect(overlayContainerElement.querySelector('.adf-notification-history-list')?.innerHTML).toContain('Example Message');
done();
});
});
@@ -123,7 +143,7 @@ describe('Notification History Component', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
const notification = overlayContainerElement.querySelector<HTMLButtonElement>('.adf-notification-history-menu-item');
notification.click();
notification?.click();
expect(callBackSpy).toHaveBeenCalled();
done();
});
@@ -148,7 +168,7 @@ describe('Notification History Component', () => {
});
it('should read notifications from local storage', (done) => {
storage.setItem(NotificationHistoryComponent.NOTIFICATION_STORAGE, JSON.stringify([{
storage.setItem(NOTIFICATION_STORAGE, JSON.stringify([{
messages: ['My new message'],
datetime: new Date(),
type: NOTIFICATION_TYPE.RECURSIVE
@@ -182,4 +202,30 @@ describe('Notification History Component', () => {
});
}, 45000);
});
it('should set unreadNotifications to an empty array when there are no notifications', () => {
component.notifications = [];
fixture.detectChanges();
expect(component.unreadNotifications).toEqual([]);
});
it('should set unreadNotifications to an empty array when all notifications are read', () => {
testNotifications.forEach((notification: NotificationModel) => {
notification.read = true;
});
storage.setItem(NOTIFICATION_STORAGE, JSON.stringify(testNotifications));
fixture.detectChanges();
expect(component.unreadNotifications).toEqual([]);
});
it('should set unreadNotifications by filtering notifications where read is false', () => {
testNotifications[0].read = true;
storage.setItem(NOTIFICATION_STORAGE, JSON.stringify(testNotifications));
fixture.detectChanges();
expect(component.unreadNotifications.length).toEqual(1);
expect(component.unreadNotifications[0].read).toEqual(false);
});
});

49
lib/core/src/lib/notifications/components/notification-history.component.ts
View File

@@ -17,7 +17,7 @@
import { Component, Input, ViewChild, OnDestroy, OnInit, AfterViewInit, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
import { NotificationService } from '../services/notification.service';
import { NotificationModel, NOTIFICATION_TYPE } from '../models/notification.model';
import { NOTIFICATION_STORAGE, NotificationModel } from '../models/notification.model';
import { MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/menu';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
@@ -33,7 +33,6 @@ import { PaginationModel } from '../../models/pagination.model';
export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterViewInit {
public static MAX_NOTIFICATION_STACK_LENGTH = 100;
public static NOTIFICATION_STORAGE = 'notification-history';
@ViewChild(MatMenuTrigger, { static: true })
trigger: MatMenuTrigger;
@@ -53,17 +52,17 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie
onDestroy$ = new Subject<boolean>();
notifications: NotificationModel[] = [];
paginatedNotifications: NotificationModel[] = [];
unreadNotifications: 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)) || [];
this.notifications = JSON.parse(this.storageService.getItem(NOTIFICATION_STORAGE)) || [];
this.unreadNotifications =
JSON.parse(this.storageService.getItem(NOTIFICATION_STORAGE))?.filter(
(notification: NotificationModel) => !notification.read
) || [];
}
ngAfterViewInit(): void {
@@ -81,10 +80,10 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie
}
addNewNotification(notification: NotificationModel) {
this.notifications.unshift(notification);
this.unreadNotifications.unshift(notification);
if (this.notifications.length > NotificationHistoryComponent.MAX_NOTIFICATION_STACK_LENGTH) {
this.notifications.shift();
if (this.unreadNotifications.length > NotificationHistoryComponent.MAX_NOTIFICATION_STACK_LENGTH) {
this.unreadNotifications.shift();
}
this.saveNotifications();
@@ -92,9 +91,11 @@ 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.unreadNotifications.forEach((notification: NotificationModel) => {
this.notifications.push(notification);
});
this.storageService.setItem(NOTIFICATION_STORAGE, JSON.stringify(this.notifications));
}
onMenuOpened() {
@@ -112,9 +113,13 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie
}
markAsRead() {
this.notifications = [];
this.unreadNotifications = [];
this.notifications.forEach((notification: NotificationModel) => {
notification.read = true;
});
this.storageService.setItem(NOTIFICATION_STORAGE, JSON.stringify(this.notifications));
this.paginatedNotifications = [];
this.storageService.removeItem(NotificationHistoryComponent.NOTIFICATION_STORAGE);
this.createPagination();
this.trigger.closeMenu();
}
@@ -123,16 +128,16 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie
this.pagination = {
skipCount: this.maxNotifications,
maxItems: this.maxNotifications,
totalItems: this.notifications.length,
hasMoreItems: this.notifications.length > this.maxNotifications
totalItems: this.unreadNotifications.length,
hasMoreItems: this.unreadNotifications.length > this.maxNotifications
};
this.paginatedNotifications = this.notifications.slice(0, this.pagination.skipCount);
this.paginatedNotifications = this.unreadNotifications.slice(0, this.pagination.skipCount);
}
loadMore() {
this.pagination.skipCount = this.pagination.maxItems + this.pagination.skipCount;
this.pagination.hasMoreItems = this.notifications.length > this.pagination.skipCount;
this.paginatedNotifications = this.notifications.slice(0, this.pagination.skipCount);
this.pagination.hasMoreItems = this.unreadNotifications.length > this.pagination.skipCount;
this.paginatedNotifications = this.unreadNotifications.slice(0, this.pagination.skipCount);
}
hasMoreNotifications(): boolean {

9
lib/core/src/lib/notifications/helpers/notification.factory.ts
View File

@@ -31,7 +31,8 @@ export const info = (messages: string | string[], initiator: NotificationInitiat
icon: 'info',
datetime: new Date(),
initiator,
messages: [].concat(messages)
messages: [].concat(messages),
read: false
});
export const warning = (messages: string | string[], initiator: NotificationInitiator = rootInitiator): NotificationModel => ({
@@ -39,7 +40,8 @@ export const warning = (messages: string | string[], initiator: NotificationInit
icon: 'warning',
datetime: new Date(),
initiator,
messages: [].concat(messages)
messages: [].concat(messages),
read: false
});
export const error = (messages: string | string[], initiator: NotificationInitiator = rootInitiator): NotificationModel => ({
@@ -47,5 +49,6 @@ export const error = (messages: string | string[], initiator: NotificationInitia
icon: 'error',
datetime: new Date(),
initiator,
messages: [].concat(messages)
messages: [].concat(messages),
read: false
});

3
lib/core/src/lib/notifications/models/notification.model.ts
View File

@@ -39,4 +39,7 @@ export interface NotificationModel {
icon?: string;
clickCallBack?: any;
args?: any;
read?: boolean;
}
export const NOTIFICATION_STORAGE = 'notification-history';