feat:improve notification for Customer page

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

2 files changed, 106 insertions, 21 deletions

diff --git a/usecaseui-portal/src/app/components/customer/customer.component.html b/usecaseui-portal/src/app/components/customer/customer.component.html
index fea9dfdf..04975e41 100644
--- a/usecaseui-portal/src/app/components/customer/customer.component.html
+++ b/usecaseui-portal/src/app/components/customer/customer.component.html
@@ -40,7 +40,7 @@
     <div class="customer_detail">
       <div class="customer_add" *ngIf="customeradd">
         <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()">{{"i18nTextDefine_Add" | translate}}</button>
+        <button nz-button nzType="primary" class="customer_addbut" (click) = "createNewCustomer(notificationModel)">{{"i18nTextDefine_Add" | translate}}</button>
       </div>
       <div class="customer_list">
         <ul>
@@ -63,7 +63,7 @@
     <div class="services_type_detail">
       <div class="services_add" *ngIf="servicesadd">
         <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()">{{"i18nTextDefine_Add" | translate}}</button>
+        <button nz-button nzType="primary" class="services_addbut" (click) = "createNewServiceType(notificationModel)">{{"i18nTextDefine_Add" | translate}}</button>
       </div>
       <div class="services_list">
         <div class="border_size"></div>
@@ -80,7 +80,7 @@
   </div>
 
   <nz-modal nzWidth="428"  [(nzVisible)]="deleteCustomerModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} " (nzOnCancel)="deleteCustomerCancel()"
-            (nzOnOk)="deleteCustomerOk()"  nzClassName="deleteModel"  nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+            (nzOnOk)="deleteCustomerOk(notificationModel)"  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">
       <h4> {{"i18nTextDefine_CustomerName" | translate}} :</h4>
@@ -92,7 +92,7 @@
     </div>
   </nz-modal>
   <nz-modal nzWidth="428" [(nzVisible)]="deleteServiceTypeModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} " (nzOnCancel)="deleteServiceTypeCancel()"
-            (nzOnOk)="deleteServiceTypeOk()"  nzClassName="deleteModel deleteServiceTypeModel"  nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+            (nzOnOk)="deleteServiceTypeOk(notificationModel)"  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">
       <h4> {{"i18nTextDefine_CustomerName" | translate}} :</h4>
@@ -107,5 +107,25 @@
       <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>
 </div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.ts b/usecaseui-portal/src/app/components/customer/customer.component.ts
index f59f72bf..d4d843ff 100644
--- a/usecaseui-portal/src/app/components/customer/customer.component.ts
+++ b/usecaseui-portal/src/app/components/customer/customer.component.ts
@@ -13,9 +13,9 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit, TemplateRef} from '@angular/core';
 import { ManagemencsService } from '../../managemencs.service';
-
+import { NzNotificationService } from 'ng-zorro-antd';
 @Component({
   selector: 'app-customer',
   templateUrl: './customer.component.html',
@@ -24,7 +24,11 @@ import { ManagemencsService } from '../../managemencs.service';
 export class CustomerComponent implements OnInit {
   public chose = '';
  
-  constructor(private managemencs: ManagemencsService) { }
+    constructor(
+        private managemencs: ManagemencsService,
+        private notification: NzNotificationService
+    ) {
+    }
 
     ngOnInit() {
         this.getAllCustomers();
@@ -43,7 +47,28 @@ export class CustomerComponent implements OnInit {
     addNewServiceType = null;
     deleteCustomerModelVisible = false;
     deleteServiceTypeModelVisible = false;
-
+    //2019.08.14 add
+    notificationAttributes = {
+        "title":"Customer",
+        "imgPath":"../../../../assets/images/execute-inproess.png",
+        "action":"Create",
+        "status":"InProgress",
+        "name":""
+    };
+    notificationModelShow(template: TemplateRef<{}>): void {
+        console.log(this.notificationAttributes,"notificationModelShow show");
+        this.notification.template(template);
+    }
+    notificationSuccess(notificationModel){
+        this.notificationAttributes.imgPath = "../../../assets/images/execute-success.png";
+        this.notificationAttributes.status = "Success";
+        this.notificationModelShow(notificationModel);
+    }
+    notificationFailed(notificationModel){
+        this.notificationAttributes.imgPath = "../../../assets/images/execute-faild.png";
+        this.notificationAttributes.status = "Failed";
+        this.notificationModelShow(notificationModel);
+    }
     getAllCustomers() {
         this.managemencs.getAllCustomers().subscribe((data) => {
             this.AllCustomersdata = data.map((item) => {
@@ -359,18 +384,28 @@ export class CustomerComponent implements OnInit {
         })
     }
 
-    createNewCustomer() {
+    createNewCustomer(notificationModel) {
         let createParams = {
             customerId: this.addNewCustomer,
             'global-customer-id':this.addNewCustomer,
             'subscriber-name':this.addNewCustomer,
             'subscriber-type':'INFRA'
         };
+ 	this.notificationAttributes = {
+            "title":"Customer",
+            "imgPath":"../../../../assets/images/execute-inproess.png",
+            "action":"Create",
+            "status":"InProgress",
+            "name":this.addNewCustomer
+        };
+        this.notificationModelShow(notificationModel);
         this.managemencs.createCustomer(this.addNewCustomer, createParams).subscribe((data) => {
             if (data["status"] == 'SUCCESS') {
+               this.notificationSuccess(notificationModel);
                 this.getAllCustomers();
                 console.log(data, "Interface returned success")
             } else {
+                this.notificationFailed(notificationModel);
                 console.log(data, "Interface returned error")
             }
         })
@@ -388,48 +423,68 @@ export class CustomerComponent implements OnInit {
     deleteCustomerCancel() {
         this.deleteCustomerModelVisible = false;
     }
-    deleteCustomerOk() {
+    deleteCustomerOk(notificationModel) {
         this.deleteCustomerModelVisible = false;
-        this.getCustomerVersion(this.thisdeleteCustomer);
+        this.getCustomerVersion(this.thisdeleteCustomer,notificationModel);
+        this.notificationAttributes = {
+            "title":"Customer",
+            "imgPath":"../../../../assets/images/execute-inproess.png",
+            "action":"delete",
+            "status":"InProgress",
+            "name":this.thisdeleteCustomer.name
+        };
+        this.notificationModelShow(notificationModel);
     }
-    getCustomerVersion(thisdeleteCustomer){
+    getCustomerVersion(thisdeleteCustomer,notificationModel){
         this.managemencs.getdeleteCustomerVersion(thisdeleteCustomer).subscribe((data) => {
             if (data["status"] == 'SUCCESS') {
                 let params = {
                     customerId:thisdeleteCustomer.id,
                     version:data["result"]["resource-version"]
                 };
-                this.deleteCustomer(params);
+                this.deleteCustomer(params,notificationModel);
                 console.log(data, "Interface returned success")
             } else {
                 console.log(data, "Interface returned error")
             }
         })
     }
-    deleteCustomer(params){
+    deleteCustomer(params,notificationModel){
         this.managemencs.deleteSelectCustomer(params).subscribe((data) => {
             if (data["status"] == 'SUCCESS') {
+                this.notificationSuccess(notificationModel);
                 this.getAllCustomers();
                 console.log(data, "Interface returned success")
             } else {
+                this.notificationFailed(notificationModel);
                 console.log(data, "Interface returned error")
             }
         })
     }
 
-    createNewServiceType() {
+    createNewServiceType(notificationModel) {
         let createParams = {
             customer: this.selectCustomer,
             ServiceType: this.addNewServiceType,
             "service-type":this.addNewServiceType,
             "temp-ub-sub-account-id":"sotnaccount"
         };
+	this.notificationAttributes = {
+            "title":"ServiceType",
+            "imgPath":"../../../../assets/images/execute-inproess.png",
+            "action":"Create",
+            "status":"InProgress",
+            "name":this.addNewServiceType
+        };
+	this.notificationModelShow(notificationModel);
         this.managemencs.createServiceType(createParams).subscribe((data) => {
             if (data["status"] == 'SUCCESS') {
+                this.notificationSuccess(notificationModel);
                 this.getCustomersColumn(this.selectCustomer);
                 this.getAllCustomers();
                 console.log(data, "Interface returned success")
             } else {
+                this.notificationFailed(notificationModel);
                 console.log(data, "Interface returned error")
             }
         })
@@ -446,15 +501,23 @@ export class CustomerComponent implements OnInit {
     deleteServiceTypeCancel() {
         this.deleteServiceTypeModelVisible = false;
     }
-    deleteServiceTypeOk() {
+    deleteServiceTypeOk(notificationModel) {
         this.deleteServiceTypeModelVisible = false;
-        this.getServiceTypeVersion();
+        this.getServiceTypeVersion(notificationModel);
     }
-    getServiceTypeVersion() {
+    getServiceTypeVersion(notificationModel) {
         let paramss = {
             customerId: this.selectCustomer,
             ServiceType: this.thisdeleteServiceType["type"]
         };
+	this.notificationAttributes = {
+            "title":"ServiceType",
+            "imgPath":"../../../../assets/images/execute-inproess.png",
+            "action":"delete",
+            "status":"InProgress",
+            "name":this.thisdeleteServiceType["type"]
+        };
+        this.notificationModelShow(notificationModel);
         this.managemencs.getdeleteServiceTypeVersion(paramss).subscribe((data) => {
             console.log(data)
             if (data["status"] == 'SUCCESS') {
@@ -463,21 +526,23 @@ export class CustomerComponent implements OnInit {
                     ServiceType:this.thisdeleteServiceType["type"],
                     version:data["result"]["resource-version"]
                 };
-                this.deleteServiceType(params);
+                this.deleteServiceType(params,notificationModel);
                 console.log(data, "Interface returned success")
             } else {
                 console.log(data, "Interface returned error")
             }
         })
     }
-    deleteServiceType(params){
+    deleteServiceType(params,notificationModel){
         this.managemencs.deleteSelectServiceType(params).subscribe((data) => {
             if (data["status"] == 'SUCCESS') {
+  		this.notificationSuccess(notificationModel);
                 this.getServiceTypes(params.customerId);
                 this.getCustomersColumn(params.customerId);
                 this.getAllCustomers();
                 console.log(data, "Interface returned success")
             } else {
+		this.notificationFailed(notificationModel);	
                 console.log(data, "Interface returned error")
             }
         })