From 8566f046b1dc454b8773d4f94a72fc80f0496e98 Mon Sep 17 00:00:00 2001 From: Arundathi Patil Date: Tue, 4 Jun 2019 15:35:52 +0530 Subject: CCSDK-1377- Notification Implementation Implemented notification component Issue-ID: CCSDK-1377 Change-Id: Ib2dbcf425de9fc279072bb45c99634fbe94496e3 Signed-off-by: Arundathi Patil --- .../notification/notification.component.html | 24 +++++++ .../notification/notification.component.scss | 20 ++++++ .../notification/notification.component.spec.ts | 46 +++++++++++++ .../notification/notification.component.ts | 71 ++++++++++++++++++++ .../notification/notification.service.spec.ts | 33 ++++++++++ .../notification/notification.service.ts | 77 ++++++++++++++++++++++ .../shared/components/notification/notification.ts | 38 +++++++++++ 7 files changed, 309 insertions(+) create mode 100644 cds-ui/client/src/app/common/shared/components/notification/notification.component.html create mode 100644 cds-ui/client/src/app/common/shared/components/notification/notification.component.scss create mode 100644 cds-ui/client/src/app/common/shared/components/notification/notification.component.spec.ts create mode 100644 cds-ui/client/src/app/common/shared/components/notification/notification.component.ts create mode 100644 cds-ui/client/src/app/common/shared/components/notification/notification.service.spec.ts create mode 100644 cds-ui/client/src/app/common/shared/components/notification/notification.service.ts create mode 100644 cds-ui/client/src/app/common/shared/components/notification/notification.ts (limited to 'cds-ui') diff --git a/cds-ui/client/src/app/common/shared/components/notification/notification.component.html b/cds-ui/client/src/app/common/shared/components/notification/notification.component.html new file mode 100644 index 000000000..f240908a6 --- /dev/null +++ b/cds-ui/client/src/app/common/shared/components/notification/notification.component.html @@ -0,0 +1,24 @@ + + +
+ {{alert.message}} + × +
diff --git a/cds-ui/client/src/app/common/shared/components/notification/notification.component.scss b/cds-ui/client/src/app/common/shared/components/notification/notification.component.scss new file mode 100644 index 000000000..93f5c9dea --- /dev/null +++ b/cds-ui/client/src/app/common/shared/components/notification/notification.component.scss @@ -0,0 +1,20 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 IBM Intellectual Property. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software 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. +============LICENSE_END============================================ +*/ \ No newline at end of file diff --git a/cds-ui/client/src/app/common/shared/components/notification/notification.component.spec.ts b/cds-ui/client/src/app/common/shared/components/notification/notification.component.spec.ts new file mode 100644 index 000000000..c86d6a0e9 --- /dev/null +++ b/cds-ui/client/src/app/common/shared/components/notification/notification.component.spec.ts @@ -0,0 +1,46 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 IBM Intellectual Property. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software 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. +============LICENSE_END============================================ +*/ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NotificationComponent } from './notification.component'; + +describe('NotificationComponent', () => { + let component: NotificationComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NotificationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NotificationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/common/shared/components/notification/notification.component.ts b/cds-ui/client/src/app/common/shared/components/notification/notification.component.ts new file mode 100644 index 000000000..8a70b03af --- /dev/null +++ b/cds-ui/client/src/app/common/shared/components/notification/notification.component.ts @@ -0,0 +1,71 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 IBM Intellectual Property. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software 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. +============LICENSE_END============================================ +*/ + +import { Component, OnInit, Input } from '@angular/core'; + +import { Notification, NotificationType } from './notification'; +import { NotificationService } from './notification.service'; + +@Component({ + selector: 'app-notification', + templateUrl: './notification.component.html', + styleUrls: ['./notification.component.scss'] +}) +export class NotificationComponent implements OnInit { + + @Input() id: string; + + alerts: Notification[] = []; + + constructor(private alertService: NotificationService) { } + + ngOnInit() { + this.alertService.getAlert(this.id).subscribe((alert: Notification) => { + if (!alert.message) { + this.alerts = []; + return; + } + this.alerts.push(alert); + }); + } + + + cssStyles(alert: Notification) { + if (!alert) { + return; + } + switch (alert.type) { + case NotificationType.Success: + return 'alert alert-success'; + case NotificationType.Error: + return 'alert alert-danger'; + case NotificationType.Info: + return 'alert alert-info'; + case NotificationType.Warning: + return 'alert alert-warning'; + } +} + + closeNotification(alert: Notification) { + this.alerts = this.alerts.filter(x => x !== alert); + } + +} diff --git a/cds-ui/client/src/app/common/shared/components/notification/notification.service.spec.ts b/cds-ui/client/src/app/common/shared/components/notification/notification.service.spec.ts new file mode 100644 index 000000000..0270d2716 --- /dev/null +++ b/cds-ui/client/src/app/common/shared/components/notification/notification.service.spec.ts @@ -0,0 +1,33 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 IBM Intellectual Property. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software 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. +============LICENSE_END============================================ +*/ + +import { TestBed } from '@angular/core/testing'; + +import { NotificationService } from './notification.service'; + +describe('NotificationService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: NotificationService = TestBed.get(NotificationService); + expect(service).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/common/shared/components/notification/notification.service.ts b/cds-ui/client/src/app/common/shared/components/notification/notification.service.ts new file mode 100644 index 000000000..83c0504ac --- /dev/null +++ b/cds-ui/client/src/app/common/shared/components/notification/notification.service.ts @@ -0,0 +1,77 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 IBM Intellectual Property. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software 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. +============LICENSE_END============================================ +*/ + +import { Injectable } from '@angular/core'; +import { Router, NavigationStart } from '@angular/router'; +import { Observable, Subject } from 'rxjs'; +// import { Subject } from 'rxjs/Subject'; + +import { Notification, NotificationType} from './notification'; + +@Injectable({ + providedIn: 'root' +}) +export class NotificationService { + + private subject = new Subject(); + private keepAfterRouteChange = false; + + constructor(private router: Router) { + router.events.subscribe(event => { + if (event instanceof NavigationStart) { + if (this.keepAfterRouteChange) { + this.keepAfterRouteChange = false; + } else { + this.clear(); + } + } + }); + } + + getAlert(alertId?: string): Observable { + return this.subject.asObservable(); + } + + success(message: string) { + this.alert(new Notification({ message, type: NotificationType.Success })); + } + + error(message: string) { + this.alert(new Notification({ message, type: NotificationType.Error })); + } + + info(message: string) { + this.alert(new Notification({ message, type: NotificationType.Info })); + } + + warn(message: string) { + this.alert(new Notification({ message, type: NotificationType.Warning })); + } + + alert(alert: Notification) { + this.keepAfterRouteChange = alert.keepAfterRouteChange; + this.subject.next(alert); + } + + clear(alertId?: string) { + this.subject.next(new Notification({ alertId })); + } +} diff --git a/cds-ui/client/src/app/common/shared/components/notification/notification.ts b/cds-ui/client/src/app/common/shared/components/notification/notification.ts new file mode 100644 index 000000000..95f3f17b0 --- /dev/null +++ b/cds-ui/client/src/app/common/shared/components/notification/notification.ts @@ -0,0 +1,38 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 IBM Intellectual Property. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software 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. +============LICENSE_END============================================ +*/ + +export class Notification { + type: NotificationType; + message: string; + alertId: string; + keepAfterRouteChange: boolean; + + constructor(init?:Partial) { + Object.assign(this, init); + } +} + +export enum NotificationType { + Success, + Error, + Info, + Warning +} \ No newline at end of file -- cgit 1.2.3-korg