diff options
author | 2019-08-14 12:36:42 +0800 | |
---|---|---|
committer | 2019-08-14 12:39:51 +0800 | |
commit | 8ad7c581b715e43f364cc7ca23ea773530826bf7 (patch) | |
tree | 2da5300f4a7f03a6f052c84e277eec927248ba23 /usecaseui-portal/src/app/components | |
parent | 45fe372a7b7840b3d2c207e4b29bf7028f7df58d (diff) |
feat:improve notification for Customer page
Change-Id: Ic1b37d7f1d67df132514a7acf93c1b748a8446be
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/components')
-rw-r--r-- | usecaseui-portal/src/app/components/customer/customer.component.html | 30 | ||||
-rw-r--r-- | usecaseui-portal/src/app/components/customer/customer.component.ts | 97 |
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">* </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">* </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}} + {{"i18nTextDefine_"+notificationAttributes.action | translate}} {{"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") } }) |