feat: extract the public notification component

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

7 files changed, 109 insertions, 63 deletions

diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index 9aaa7ebf..07080bbc 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -75,6 +75,8 @@ import { TestComponent } from './test/test.component';
 import { TextService } from './core/services/text.service';
 import { TopCardComponent } from './views/services/services-list/top-card/top-card.component';
 import { CreateModelComponent } from './views/services/services-list/create-model/create-model.component';
+// import { DeleteModalComponent } from './views/services/services-list/delete-modal/delete-modal.component';
+import { NotificationComponent } from './shared/components/notification/notification.component';
 
 @NgModule({
   providers: [
@@ -116,7 +118,9 @@ import { CreateModelComponent } from './views/services/services-list/create-mode
     FcapsComponent,
     TestComponent,
     TopCardComponent,
-    CreateModelComponent
+    CreateModelComponent,
+    // DeleteModalComponent,
+    NotificationComponent
   ],
   imports: [
     BrowserModule,
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)
+  }
+
+}
diff --git a/usecaseui-portal/src/app/views/management/customer/customer.component.html b/usecaseui-portal/src/app/views/management/customer/customer.component.html
index 4f532f8f..0f033e47 100644
--- a/usecaseui-portal/src/app/views/management/customer/customer.component.html
+++ b/usecaseui-portal/src/app/views/management/customer/customer.component.html
@@ -41,7 +41,7 @@
         <input nz-input placeholder=" {{'i18nTextDefine_Input_customerName' | translate}} " class="customer_name"
           nzSize="default" [(ngModel)]="addNewCustomer">
         <button nz-button nzType="primary" class="customer_addbut"
-          (click)="createNewCustomer(notificationModel)">{{"i18nTextDefine_Add" | translate}}</button>
+          (click)="createNewCustomer()">{{"i18nTextDefine_Add" | translate}}</button>
       </div>
       <div class="customer_list">
         <ul>
@@ -67,7 +67,7 @@
         <input nz-input placeholder=" {{'i18nTextDefine_Input_ServicesType' | translate}} " class="services_name"
           nzSize="default" [(ngModel)]="addNewServiceType">
         <button nz-button nzType="primary" class="services_addbut"
-          (click)="createNewServiceType(notificationModel)">{{"i18nTextDefine_Add" | translate}}</button>
+          (click)="createNewServiceType()">{{"i18nTextDefine_Add" | translate}}</button>
       </div>
       <div class="services_list_content">
         <div class="border_size"></div>
@@ -84,7 +84,7 @@
   </div>
 
   <nz-modal nzWidth="428" [(nzVisible)]="deleteCustomerModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} "
-    (nzOnCancel)="deleteCustomerCancel()" (nzOnOk)="deleteCustomerOk(notificationModel)" nzClassName="deleteModel"
+    (nzOnCancel)="deleteCustomerCancel()" (nzOnOk)="deleteCustomerOk()" nzClassName="deleteModel"
     nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
     <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_Input_Sure_deleteCustomer" | translate}} </h3>
     <div class="question">
@@ -98,7 +98,7 @@
   </nz-modal>
   <nz-modal nzWidth="428" [(nzVisible)]="deleteServiceTypeModelVisible"
     nzTitle=" {{'i18nTextDefine_delete' | translate}} " (nzOnCancel)="deleteServiceTypeCancel()"
-    (nzOnOk)="deleteServiceTypeOk(notificationModel)" nzClassName="deleteModel deleteServiceTypeModel"
+    (nzOnOk)="deleteServiceTypeOk()" nzClassName="deleteModel deleteServiceTypeModel"
     nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
     <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_Input_Sure_deleteServiceType" | translate}} </h3>
     <div class="question">
@@ -114,25 +114,5 @@
       <div class="deleteModelContent">{{thisdeleteServiceType["type"]}}</div>
     </div>
   </nz-modal>
-  <!--2019.08.14 add notification-->
-  <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>
+  <app-notification #notification></app-notification> 
 </div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/management/customer/customer.component.ts b/usecaseui-portal/src/app/views/management/customer/customer.component.ts
index 39c42a0d..20cebccb 100644
--- a/usecaseui-portal/src/app/views/management/customer/customer.component.ts
+++ b/usecaseui-portal/src/app/views/management/customer/customer.component.ts
@@ -15,7 +15,6 @@
 */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ManagemencsService } from '../../../core/services/managemencs.service';
-import { NzNotificationService } from 'ng-zorro-antd';
 import { Observable } from 'rxjs';
 
 @Component({
@@ -26,12 +25,12 @@ import { Observable } from 'rxjs';
 export class CustomerComponent implements OnInit {
     @ViewChild('chart') chart;
     @ViewChild('pie') pie;
+    @ViewChild('notification')notification:any;
     public chose = '';
 
     resizeMark;
     constructor(
         private managemencs: ManagemencsService,
-        private notification: NzNotificationService
     ) {
     }
 
@@ -63,21 +62,6 @@ export class CustomerComponent implements OnInit {
     addNewServiceType = null;
     deleteCustomerModelVisible = false;
     deleteServiceTypeModelVisible = false;
-    //2019.08.14 add
-    notificationAttributes = null;
-    setNotification({ title, imgPath, action, status, name }):void{
-        this.notificationAttributes = { title, imgPath, action, status, name }
-    }
-    notificationSuccess(notificationModel,title,action,name) {
-        this.notification.remove()
-        this.setNotification({ title, imgPath: "assets/images/execute-success.png", action, status: 'Success', name })
-        this.notification.template(notificationModel);
-    }
-    notificationFailed(notificationModel,title,action,name) {
-        this.notification.remove()
-        this.setNotification({ title, imgPath: "assets/images/execute-faild.png", action, status: 'Failed', name })
-        this.notification.template(notificationModel)
-    }
     getAllCustomers() {
         this.managemencs.getAllCustomers().subscribe((data) => {
             this.AllCustomersdata = data.map((item) => {
@@ -383,7 +367,7 @@ export class CustomerComponent implements OnInit {
         })
     }
 
-    createNewCustomer(notificationModel) {
+    createNewCustomer(): void {
         let createParams = {
             customerId: this.addNewCustomer,
             'global-customer-id': this.addNewCustomer,
@@ -392,10 +376,10 @@ export class CustomerComponent implements OnInit {
         };
         this.managemencs.createCustomer(this.addNewCustomer, createParams).subscribe((data) => {
             if (data["status"] == 'SUCCESS') {
-                this.notificationSuccess(notificationModel,'Customer','Create',this.addNewCustomer);
+                this.notification.notificationSuccess('Customer','Create',this.addNewCustomer);
                 this.getAllCustomers();
             } else {
-                this.notificationFailed(notificationModel,'Customer','Create',this.addNewCustomer);
+                this.notification.notificationFailed('Customer','Create',this.addNewCustomer);
             }
         })
     }
@@ -412,35 +396,35 @@ export class CustomerComponent implements OnInit {
     deleteCustomerCancel() {
         this.deleteCustomerModelVisible = false;
     }
-    deleteCustomerOk(notificationModel) {
+    deleteCustomerOk() {
         this.deleteCustomerModelVisible = false;
-        this.getCustomerVersion(this.thisdeleteCustomer, notificationModel);
+        this.getCustomerVersion(this.thisdeleteCustomer,);
     }
-    getCustomerVersion(thisdeleteCustomer, notificationModel) {
+    getCustomerVersion(thisdeleteCustomer) {
         this.managemencs.getdeleteCustomerVersion(thisdeleteCustomer).subscribe((data) => {
             if (data["status"] == 'SUCCESS') {
                 let params = {
                     customerId: thisdeleteCustomer.id,
                     resourceVersion: data["result"]["resource-version"]
                 };
-                this.deleteCustomer(params, notificationModel)
+                this.deleteCustomer(params)
             } else {
                 console.error(data, "Interface returned error")
             }
         })
     }
-    deleteCustomer(paramsObj, notificationModel) {
+    deleteCustomer(paramsObj) {
         this.managemencs.deleteSelectCustomer(paramsObj).subscribe((data) => {
             if (data["status"] == 'SUCCESS') {
-                this.notificationSuccess(notificationModel,'Customer','delete',this.thisdeleteCustomer.name);
+                this.notification.notificationSuccess('Customer','delete',this.thisdeleteCustomer.name);
                 this.getAllCustomers();
             } else {
-                this.notificationFailed(notificationModel,'Customer','delete',this.thisdeleteCustomer.name);
+                this.notification.notificationFailed('Customer','delete',this.thisdeleteCustomer.name);
             }
         })
     }
 
-    createNewServiceType(notificationModel) {
+    createNewServiceType() {
         let createParams = {
             customer: this.selectCustomer,
             ServiceType: this.addNewServiceType,
@@ -449,10 +433,10 @@ export class CustomerComponent implements OnInit {
         };
         this.managemencs.createServiceType(createParams).subscribe((data) => {
             if (data["status"] == 'SUCCESS') {
-                this.notificationSuccess(notificationModel,'ServiceType','Create',this.addNewServiceType);
+                this.notification.notificationSuccess('ServiceType','Create',this.addNewServiceType);
                 this.getAllCustomers();
             } else {
-                this.notificationFailed(notificationModel,'ServiceType','Create',this.addNewServiceType);
+                this.notification.notificationFailed('ServiceType','Create',this.addNewServiceType);
             }
         })
     }
@@ -468,11 +452,11 @@ export class CustomerComponent implements OnInit {
     deleteServiceTypeCancel() {
         this.deleteServiceTypeModelVisible = false;
     }
-    deleteServiceTypeOk(notificationModel) {
+    deleteServiceTypeOk() {
         this.deleteServiceTypeModelVisible = false;
-        this.getServiceTypeVersion(notificationModel);
+        this.getServiceTypeVersion();
     }
-    getServiceTypeVersion(notificationModel) {
+    getServiceTypeVersion() {
         let paramss = {
             customerId: this.selectCustomer,
             ServiceType: this.thisdeleteServiceType["type"]
@@ -484,19 +468,19 @@ export class CustomerComponent implements OnInit {
                     ServiceType: this.thisdeleteServiceType["type"],
                     version: data["result"]["resource-version"]
                 };
-                this.deleteServiceType(params, notificationModel);
+                this.deleteServiceType(params);
             } else {
                 console.error(data, "Interface returned error")
             }
         })
     }
-    deleteServiceType(params, notificationModel) {
+    deleteServiceType(params) {
         this.managemencs.deleteSelectServiceType(params).subscribe((data) => {
             if (data["status"] == 'SUCCESS') {
-                this.notificationSuccess(notificationModel,'ServiceType','delete',this.thisdeleteServiceType["type"]);
+                this.notification.notificationSuccess('ServiceType','delete',this.thisdeleteServiceType["type"]);
                 this.getAllCustomers();
             } else {
-                this.notificationFailed(notificationModel,'ServiceType','delete',this.thisdeleteServiceType["type"]);
+                this.notification.notificationFailed('ServiceType','delete',this.thisdeleteServiceType["type"]);
             }
         })
     }