feat: extract the public notification component

Change-Id: I0e42ddf844e92b986d9bc1748dfc06b202d37f2b
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

4 files changed, 78 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/shared/components/notification/notification.component.html b/usecaseui-portal/src/app/shared/components/notification/notification.component.html
new file mode 100644
index 00000000..97f66ba5
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/notification/notification.component.html
@@ -0,0 +1,20 @@
+<ng-template #notificationModel>
+  <div class="ant-notification-notice-content">
+    <div class="ant-notification-notice-with-icon">
+      <span class="ant-notification-notice-icon">
+        <img src="{{this.notificationAttributes.imgPath}}" alt="{{notificationAttributes.status}}">
+      </span>
+      <div class="ant-notification-notice-message" *ngIf="notificationAttributes.title == 'Customer'">
+        {{"i18nTextDefine_"+notificationAttributes.title | translate}}&nbsp;
+        {{"i18nTextDefine_"+notificationAttributes.action | translate}}&nbsp;&nbsp;{{"i18nTextDefine_"+notificationAttributes.status | translate}}
+      </div>
+      <div class="ant-notification-notice-description">
+        <div class="notificationlist">
+          <p>{{"i18nTextDefine_"+notificationAttributes.title | translate}}:</p>
+          <span>{{ notificationAttributes.name }}</span>
+        </div>
+      </div>
+      <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
+    </div>
+  </div>
+</ng-template>
diff --git a/usecaseui-portal/src/app/shared/components/notification/notification.component.less b/usecaseui-portal/src/app/shared/components/notification/notification.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/notification/notification.component.less
diff --git a/usecaseui-portal/src/app/shared/components/notification/notification.component.spec.ts b/usecaseui-portal/src/app/shared/components/notification/notification.component.spec.ts
new file mode 100644
index 00000000..69192c5e
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/notification/notification.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationComponent } from './notification.component';
+
+describe('NotificationComponent', () => {
+  let component: NotificationComponent;
+  let fixture: ComponentFixture<NotificationComponent>;
+
+  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/usecaseui-portal/src/app/shared/components/notification/notification.component.ts b/usecaseui-portal/src/app/shared/components/notification/notification.component.ts
new file mode 100644
index 00000000..031b161d
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/notification/notification.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
+import { NzNotificationService } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'app-notification',
+  templateUrl: './notification.component.html',
+  styleUrls: ['./notification.component.less']
+})
+export class NotificationComponent implements OnInit {
+  @ViewChild('notificationModel')notificationModel: any;
+
+  notificationAttributes: object = null;
+
+  constructor(private notification: NzNotificationService) { }
+
+  ngOnInit() {
+  }
+
+  setNotification({ title, imgPath, action, status, name }):void{
+      this.notificationAttributes = { title, imgPath, action, status, name }
+  }
+  notificationSuccess(title: string, action: string, name: string): void {
+    this.notification.remove()
+    this.setNotification({ title, imgPath: "assets/images/execute-success.png", action, status: 'Success', name })
+    this.notification.template(this.notificationModel);
+  }
+  notificationFailed(title: string, action: string, name: string): void {
+    this.notification.remove()
+    this.setNotification({ title, imgPath: "assets/images/execute-faild.png", action, status: 'Failed', name })
+    this.notification.template(this.notificationModel)
+  }
+
+}