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

[ADF-4896] Merging AMA and ADF notifications for a better world

Browse Source
This commit is contained in:
Andras Popovics
2019-09-17 14:33:35 +01:00
committed by Denys Vuika
parent 922a85935e
commit 14800ce399
35 changed files with 276 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
lib/core/notifications/components/notification-history.component.html Normal file
View File

@@ -0,0 +1,33 @@
<div (keyup)="onKeyPress($event)">
<button mat-button [matMenuTriggerFor]="menu" class="adf-notification-history-menu_button"
id="adf-notification-history-open-button">
<mat-icon>mail_outline</mat-icon>
</button>
<mat-menu #menu="matMenu" [xPosition]="menuPositionX" [yPosition]="menuPositionY"
[overlapTrigger]="false" id="adf-notification-history-menu" class="adf-notification-history-menu">
<div id="adf-notification-history-list">
<mat-list>
<mat-list-item>
<h6 mat-line>{{ 'NOTIFICATIONS.TITLE' | translate }}</h6>
</mat-list-item>
</mat-list>
<mat-divider></mat-divider>
<mat-list>
<mat-list-item *ngFor="let notification of notifications">
<mat-icon mat-list-icon>{{notification.info ? notification.info: 'info'}}</mat-icon>
<h4 *ngFor="let message of notification.messages" mat-line>{{ message }}</h4>
<p mat-line> {{notification.datetime | date}} </p>
</mat-list-item>
<mat-list-item *ngIf="isEmptyNotification()" id="adf-notification-history-component-no-message">
<h4 mat-line>{{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}</h4>
</mat-list-item>
<mat-action-list *ngIf="!isEmptyNotification()" id="adf-notification-history-mark-as-read">
<button mat-list-item (click)="markAsRead()">{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}
</button>
</mat-action-list>
</mat-list>
</div>
</mat-menu>
</div>

23
lib/core/notifications/components/notification-history.component.scss Normal file
View File

@@ -0,0 +1,23 @@
.adf {
&-notification-history-menu_button.mat-button {
margin-right: 0;
border-radius: 90%;
padding: 0;
min-width: 40px;
height: 40px;
}
}
@media only screen and (min-device-width: 480px) {
.mat-menu-panel.adf-notification-history-menu {
max-height: 450px;
min-width: 450px;
overflow: auto;
padding: 0;
}
}
.mat-menu-panel.adf-notification-history-menu .mat-menu-content {
padding: 0;
}

80
lib/core/notifications/components/notification-history.component.spec.ts Normal file
View File

@@ -0,0 +1,80 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing';
import { setupTestBed } from '../../testing/setupTestBed';
import { CoreTestingModule } from '../../testing/core.testing.module';
import { NotificationHistoryComponent } from './notification-history.component';
import { OverlayContainer } from '@angular/cdk/overlay';
import { NotificationService } from '../services/notification.service';
describe('Notification History Component', () => {
let fixture: ComponentFixture<NotificationHistoryComponent>;
let element: HTMLElement;
let notificationService: NotificationService;
let overlayContainerElement: HTMLElement;
function openNotification() {
fixture.detectChanges();
const button: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#adf-notification-history-open-button');
button.click();
fixture.detectChanges();
}
setupTestBed({
imports: [CoreTestingModule]
});
beforeEach(async(() => {
fixture = TestBed.createComponent(NotificationHistoryComponent);
element = fixture.nativeElement;
notificationService = TestBed.get(NotificationService);
}));
beforeEach(inject([OverlayContainer], (oc: OverlayContainer) => {
overlayContainerElement = oc.getContainerElement();
}));
afterEach(() => {
fixture.destroy();
});
describe('ui ', () => {
it('should empty message be present when there are no notifications in the history', (done) => {
openNotification();
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(overlayContainerElement.querySelector('#adf-notification-history-component-no-message')).toBeDefined();
done();
});
});
it('should message be present and empty message not be present when there are notifications in the history', (done) => {
notificationService.showInfo('Example Message');
openNotification();
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(overlayContainerElement.querySelector('#adf-notification-history-component-no-message')).toBeNull();
expect(overlayContainerElement.querySelector('#adf-notification-history-list').innerHTML).toContain('Example Message');
done();
});
});
});
});

78
lib/core/notifications/components/notification-history.component.ts Normal file
View File

@@ -0,0 +1,78 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, Input, ViewChild, OnDestroy } from '@angular/core';
import { NotificationService } from '../services/notification.service';
import { Notification } from '../models/notification.model';
import { MatMenuTrigger } from '@angular/material';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
@Component({
selector: 'adf-notification-history',
styleUrls: ['notification-history.component.scss'],
templateUrl: 'notification-history.component.html'
})
export class NotificationHistoryComponent implements OnDestroy {
onDestroy$ = new Subject<boolean>();
notifications: Notification[] = [];
@ViewChild(MatMenuTrigger)
trigger: MatMenuTrigger;
/** Custom choice for opening the menu at the bottom. Can be `before` or `after`. */
@Input()
menuPositionX: string = 'after';
/** Custom choice for opening the menu at the bottom. Can be `above` or `below`. */
@Input()
menuPositionY: string = 'below';
constructor(
private notificationService: NotificationService) {
this.notificationService.notifications$
.pipe(takeUntil(this.onDestroy$))
.subscribe((message) => {
this.notifications.push(message);
});
}
isEmptyNotification(): boolean {
return (!this.notifications || this.notifications.length === 0);
}
onKeyPress(event: KeyboardEvent) {
this.closeUserModal(event);
}
markAsRead() {
this.notifications = [];
}
ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();
}
private closeUserModal($event: KeyboardEvent) {
if ($event.keyCode === 27) {
this.trigger.closeMenu();
}
}
}