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

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

Browse Source 
This reverts commit 94fb61541c.
This commit is contained in:
Raviraj Bahirsheth
2023-11-17 16:56:51 +05:30
committed by GitHub
parent cf62196fc4
commit 4af945123b
5 changed files with 38 additions and 95 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" id="adf-notification-history-open-button"
(menuOpened)="onMenuOpened()"> (menuOpened)="onMenuOpened()">
<mat-icon matBadge="&#8288;" <mat-icon matBadge="&#8288;"
[matBadgeHidden]="!unreadNotifications.length" [matBadgeHidden]="!notifications.length"
matBadgeColor="accent" matBadgeColor="accent"
matBadgeSize="small">notifications</mat-icon> matBadgeSize="small">notifications</mat-icon>
</button> </button>
@@ -21,7 +21,7 @@
(click)="$event.stopPropagation()"> (click)="$event.stopPropagation()">
<div mat-subheader role="menuitem"> <div mat-subheader role="menuitem">
<span>{{ 'NOTIFICATIONS.TITLE' | translate }}</span> <span>{{ 'NOTIFICATIONS.TITLE' | translate }}</span>
<button *ngIf="unreadNotifications.length" <button *ngIf="notifications.length"
id="adf-notification-history-mark-as-read" id="adf-notification-history-mark-as-read"
mat-icon-button mat-icon-button
title="{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}" title="{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}"
@@ -33,7 +33,7 @@
<mat-divider></mat-divider> <mat-divider></mat-divider>
<mat-list role="menuitem"> <mat-list role="menuitem">
<ng-container *ngIf="unreadNotifications.length; else empty_list_template"> <ng-container *ngIf="notifications.length; else empty_list_template">
<mat-list-item *ngFor="let notification of paginatedNotifications" <mat-list-item *ngFor="let notification of paginatedNotifications"
class="adf-notification-history-menu-item" class="adf-notification-history-menu-item"
(click)="onNotificationClick(notification)"> (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 { NotificationService } from '../services/notification.service';
import { StorageService } from '../../common/services/storage.service'; import { StorageService } from '../../common/services/storage.service';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { NotificationModel, NOTIFICATION_TYPE, NOTIFICATION_STORAGE } from '../models/notification.model'; import { NotificationModel, NOTIFICATION_TYPE } from '../models/notification.model';
describe('Notification History Component', () => { describe('Notification History Component', () => {
@@ -32,12 +32,11 @@ describe('Notification History Component', () => {
let notificationService: NotificationService; let notificationService: NotificationService;
let overlayContainerElement: HTMLElement; let overlayContainerElement: HTMLElement;
let storage: StorageService; let storage: StorageService;
let testNotifications: NotificationModel[];
const openNotification = () => { const openNotification = () => {
fixture.detectChanges(); fixture.detectChanges();
const button = element.querySelector<HTMLButtonElement>('#adf-notification-history-open-button'); const button = element.querySelector<HTMLButtonElement>('#adf-notification-history-open-button');
button?.click(); button.click();
fixture.detectChanges(); fixture.detectChanges();
}; };
@@ -55,26 +54,6 @@ describe('Notification History Component', () => {
storage = TestBed.inject(StorageService); storage = TestBed.inject(StorageService);
notificationService = TestBed.inject(NotificationService); notificationService = TestBed.inject(NotificationService);
component.notifications = []; 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) => { beforeEach(inject([OverlayContainer], (oc: OverlayContainer) => {
@@ -82,7 +61,7 @@ describe('Notification History Component', () => {
})); }));
afterEach(() => { afterEach(() => {
storage.removeItem(NOTIFICATION_STORAGE); storage.removeItem(NotificationHistoryComponent.NOTIFICATION_STORAGE);
fixture.destroy(); fixture.destroy();
}); });
@@ -104,11 +83,12 @@ describe('Notification History Component', () => {
fixture.detectChanges(); fixture.detectChanges();
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); fixture.detectChanges();
expect(component.unreadNotifications.length).toBe(1); expect(component.notifications.length).toBe(1);
const markAllAsRead = overlayContainerElement.querySelector<HTMLButtonElement>('#adf-notification-history-mark-as-read'); const markAllAsRead = overlayContainerElement.querySelector<HTMLButtonElement>('#adf-notification-history-mark-as-read');
markAllAsRead?.click(); markAllAsRead.click();
fixture.detectChanges(); fixture.detectChanges();
expect(component.unreadNotifications).toEqual([]); expect(storage.getItem(NotificationHistoryComponent.NOTIFICATION_STORAGE)).toBeNull();
expect(component.notifications.length).toBe(0);
done(); done();
}); });
}); });
@@ -121,7 +101,7 @@ describe('Notification History Component', () => {
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); fixture.detectChanges();
expect(overlayContainerElement.querySelector('#adf-notification-history-component-no-message')).toBeNull(); 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(); done();
}); });
}); });
@@ -143,7 +123,7 @@ describe('Notification History Component', () => {
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); fixture.detectChanges();
const notification = overlayContainerElement.querySelector<HTMLButtonElement>('.adf-notification-history-menu-item'); const notification = overlayContainerElement.querySelector<HTMLButtonElement>('.adf-notification-history-menu-item');
notification?.click(); notification.click();
expect(callBackSpy).toHaveBeenCalled(); expect(callBackSpy).toHaveBeenCalled();
done(); done();
}); });
@@ -168,7 +148,7 @@ describe('Notification History Component', () => {
}); });
it('should read notifications from local storage', (done) => { it('should read notifications from local storage', (done) => {
storage.setItem(NOTIFICATION_STORAGE, JSON.stringify([{ storage.setItem(NotificationHistoryComponent.NOTIFICATION_STORAGE, JSON.stringify([{
messages: ['My new message'], messages: ['My new message'],
datetime: new Date(), datetime: new Date(),
type: NOTIFICATION_TYPE.RECURSIVE type: NOTIFICATION_TYPE.RECURSIVE
@@ -202,30 +182,4 @@ describe('Notification History Component', () => {
}); });
}, 45000); }, 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 { Component, Input, ViewChild, OnDestroy, OnInit, AfterViewInit, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
import { NotificationService } from '../services/notification.service'; import { NotificationService } from '../services/notification.service';
import { NOTIFICATION_STORAGE, NotificationModel } from '../models/notification.model'; import { NotificationModel, NOTIFICATION_TYPE } from '../models/notification.model';
import { MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/menu'; import { MatMenuTrigger, MenuPositionX, MenuPositionY } from '@angular/material/menu';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
@@ -33,6 +33,7 @@ import { PaginationModel } from '../../models/pagination.model';
export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterViewInit { export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterViewInit {
public static MAX_NOTIFICATION_STACK_LENGTH = 100; public static MAX_NOTIFICATION_STACK_LENGTH = 100;
public static NOTIFICATION_STORAGE = 'notification-history';
@ViewChild(MatMenuTrigger, { static: true }) @ViewChild(MatMenuTrigger, { static: true })
trigger: MatMenuTrigger; trigger: MatMenuTrigger;
@@ -52,17 +53,17 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie
onDestroy$ = new Subject<boolean>(); onDestroy$ = new Subject<boolean>();
notifications: NotificationModel[] = []; notifications: NotificationModel[] = [];
paginatedNotifications: NotificationModel[] = []; paginatedNotifications: NotificationModel[] = [];
unreadNotifications: NotificationModel[] = [];
pagination: PaginationModel; pagination: PaginationModel;
constructor(private notificationService: NotificationService, public storageService: StorageService, public cd: ChangeDetectorRef) {} constructor(
private notificationService: NotificationService,
public storageService: StorageService,
public cd: ChangeDetectorRef) {
}
ngOnInit() { ngOnInit() {
this.notifications = JSON.parse(this.storageService.getItem(NOTIFICATION_STORAGE)) || []; this.notifications = JSON.parse(this.storageService.getItem(NotificationHistoryComponent.NOTIFICATION_STORAGE)) || [];
this.unreadNotifications =
JSON.parse(this.storageService.getItem(NOTIFICATION_STORAGE))?.filter(
(notification: NotificationModel) => !notification.read
) || [];
} }
ngAfterViewInit(): void { ngAfterViewInit(): void {
@@ -80,10 +81,10 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie
} }
addNewNotification(notification: NotificationModel) { addNewNotification(notification: NotificationModel) {
this.unreadNotifications.unshift(notification); this.notifications.unshift(notification);
if (this.unreadNotifications.length > NotificationHistoryComponent.MAX_NOTIFICATION_STACK_LENGTH) { if (this.notifications.length > NotificationHistoryComponent.MAX_NOTIFICATION_STACK_LENGTH) {
this.unreadNotifications.shift(); this.notifications.shift();
} }
this.saveNotifications(); this.saveNotifications();
@@ -91,11 +92,9 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie
} }
saveNotifications() { saveNotifications() {
this.unreadNotifications.forEach((notification: NotificationModel) => { this.storageService.setItem(NotificationHistoryComponent.NOTIFICATION_STORAGE, JSON.stringify(this.notifications.filter((notification) =>
this.notifications.push(notification); notification.type !== NOTIFICATION_TYPE.RECURSIVE
}); )));
this.storageService.setItem(NOTIFICATION_STORAGE, JSON.stringify(this.notifications));
} }
onMenuOpened() { onMenuOpened() {
@@ -113,13 +112,9 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie
} }
markAsRead() { markAsRead() {
this.unreadNotifications = []; this.notifications = [];
this.notifications.forEach((notification: NotificationModel) => {
notification.read = true;
});
this.storageService.setItem(NOTIFICATION_STORAGE, JSON.stringify(this.notifications));
this.paginatedNotifications = []; this.paginatedNotifications = [];
this.storageService.removeItem(NotificationHistoryComponent.NOTIFICATION_STORAGE);
this.createPagination(); this.createPagination();
this.trigger.closeMenu(); this.trigger.closeMenu();
} }
@@ -128,16 +123,16 @@ export class NotificationHistoryComponent implements OnDestroy, OnInit, AfterVie
this.pagination = { this.pagination = {
skipCount: this.maxNotifications, skipCount: this.maxNotifications,
maxItems: this.maxNotifications, maxItems: this.maxNotifications,
totalItems: this.unreadNotifications.length, totalItems: this.notifications.length,
hasMoreItems: this.unreadNotifications.length > this.maxNotifications hasMoreItems: this.notifications.length > this.maxNotifications
}; };
this.paginatedNotifications = this.unreadNotifications.slice(0, this.pagination.skipCount); this.paginatedNotifications = this.notifications.slice(0, this.pagination.skipCount);
} }
loadMore() { loadMore() {
this.pagination.skipCount = this.pagination.maxItems + this.pagination.skipCount; this.pagination.skipCount = this.pagination.maxItems + this.pagination.skipCount;
this.pagination.hasMoreItems = this.unreadNotifications.length > this.pagination.skipCount; this.pagination.hasMoreItems = this.notifications.length > this.pagination.skipCount;
this.paginatedNotifications = this.unreadNotifications.slice(0, this.pagination.skipCount); this.paginatedNotifications = this.notifications.slice(0, this.pagination.skipCount);
} }
hasMoreNotifications(): boolean { hasMoreNotifications(): boolean {

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

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

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

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