diff options
10 files changed, 618 insertions, 370 deletions
diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.html b/usecaseui-portal/src/app/components/charts/bar/bar.component.html index 7c1eee6b..35bf3bce 100644 --- a/usecaseui-portal/src/app/components/charts/bar/bar.component.html +++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.html @@ -20,3 +20,7 @@ (chartInit)="chartInit($event)"> Bar Chart </div> +<div class="footname" style="width: 100%;height: 40px;line-height: 40px;text-align: center;color: #3C4F8C;margin-top: 20px"> + <img src="../../../../assets/images/customerBarUser.png" alt="customerName" style="margin-right: 5px;margin-bottom: 3px;"> + {{this.initData["customer"]}} +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts index bc2beb63..217ee121 100644 --- a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts +++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts @@ -62,6 +62,7 @@ export class BarComponent implements OnInit { updateOption: any; chartDataChange() { this.updateOption = this.chartData; + console.log(this.initData.customer) } chartInit(chart) { this.chartIntance = chart; diff --git a/usecaseui-portal/src/app/components/customer/customer.component.html b/usecaseui-portal/src/app/components/customer/customer.component.html index 6693354b..db5b67ef 100644 --- a/usecaseui-portal/src/app/components/customer/customer.component.html +++ b/usecaseui-portal/src/app/components/customer/customer.component.html @@ -29,18 +29,21 @@ <div class="customer_title"> <div class="customers"> <span>Customer</span> - <img src="./assets/images/customer04.png" alt="" (click)="this.customeradd = !this.customeradd"> + <img src="./assets/images/customer04.png" alt="" (click)="this.customeradd = !this.customeradd" style="cursor: pointer"> </div> </div> <div class="customer_detail"> <div class="customer_add" *ngIf="customeradd"> - <input nz-input placeholder="Input customer name" class="customer_name" nzSize="default"> - <button nz-button nzType="primary" class="customer_addbut">Add</button> + <input nz-input placeholder="Input customer name" class="customer_name" nzSize="default" [(ngModel)]="addNewCustomer"> + <button nz-button nzType="primary" class="customer_addbut" (click) = "createNewCustomer()">Add</button> </div> <div class="customer_list"> <ul> - <li *ngFor ="let item of AllCustomersdata,let i = index" [ngClass]="{active: chose ==i}" (click)="choseCustomer(i,item)"><img src="./assets/images/customer05.png" alt=""><span>{{item.name}}</span><i - class="anticon anticon-delete" nzType="info"></i></li> + <li *ngFor ="let item of AllCustomersdata,let i = index" [ngClass]="{active: chose ==i}" (click)="choseCustomer(i,item)"> + <img src="./assets/images/customer05.png" alt=""> + <span>{{item.name}}</span> + <i class="anticon anticon-delete" nzType="info" (click)="deleteCustomerModel(item)"></i> + </li> </ul> </div> </div> @@ -49,23 +52,55 @@ <div class="services_type_title"> <div class="servicess"> <span>Services Type</span> - <img src="./assets/images/customer03.png" alt="" (click)="this.servicesadd = !this.servicesadd "> + <img src="./assets/images/customer03.png" alt="" (click)="this.servicesadd = !this.servicesadd " style="cursor: pointer"> </div> </div> <div class="services_type_detail"> <div class="services_add" *ngIf="servicesadd"> <input nz-input placeholder="Input services type" class="services_name" nzSize="default"> - <button nz-button nzType="primary" class="services_addbut">Add</button> + <button nz-button nzType="primary" class="services_addbut" (click) = "createNewServiceType()">Add</button> </div> <div class="services_list"> <div class="border_size"></div> <div style="padding:0 20px;"> <ul> - <li *ngFor = "let item of AllServiceTypes" ><span>{{item.type}}</span><i class="anticon anticon-delete" nzType="info"></i></li> + <li *ngFor = "let item of AllServiceTypes" > + <span>{{item.type}}</span> + <i class="anticon anticon-delete" nzType="info" (click)="deleteServiceTypeModel(item)"></i> + </li> </ul> </div> </div> </div> </div> + + <nz-modal nzWidth="428" [(nzVisible)]="deleteCustomerModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCustomerCancel()" + (nzOnOk)="deleteCustomerOk()" nzClassName="deleteModel"> + <h3><span style="color: red">* </span>Are you sure delete this Customer ?</h3> + <div class="question"> + <h4>Customer Name:</h4> + <div class="deleteModelContent">{{thisdeleteCustomer["name"]}}</div> + </div> + <div class="question"> + <h4>Customer ID:</h4> + <div class="deleteModelContent">{{thisdeleteCustomer["id"]}}</div> + </div> + </nz-modal> + <nz-modal nzWidth="428" [(nzVisible)]="deleteServiceTypeModelVisible" nzTitle="Delete" (nzOnCancel)="deleteServiceTypeCancel()" + (nzOnOk)="deleteServiceTypeOk()" nzClassName="deleteModel deleteServiceTypeModel"> + <h3><span style="color: red">* </span>Are you sure delete this Service Type ?</h3> + <div class="question"> + <h4>Customer Name:</h4> + <div class="deleteModelContent">{{selectCustomer.name}}</div> + </div> + <div class="question"> + <h4>Customer ID:</h4> + <div class="deleteModelContent">{{selectCustomer.id}}</div> + </div> + <div class="question"> + <h4>Service Type:</h4> + <div class="deleteModelContent">{{thisdeleteServiceType["type"]}}</div> + </div> + </nz-modal> </div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/components/customer/customer.component.less b/usecaseui-portal/src/app/components/customer/customer.component.less index abfcb5c0..89f49cc0 100644 --- a/usecaseui-portal/src/app/components/customer/customer.component.less +++ b/usecaseui-portal/src/app/components/customer/customer.component.less @@ -15,7 +15,7 @@ */ .content { width: 100%; - height: 100vh; + height: 100%; i.anticon { cursor: pointer; font-size: 18px; @@ -33,7 +33,7 @@ } } .customer { - height: 580px; + height: 100%; overflow: hidden; width: 32%; margin-right: 1.5%; @@ -44,7 +44,7 @@ vertical-align: top; .customer_title { line-height: 3.5; - height: 50px; + height: 5%; width: 100%; border-bottom: 1px #07A9E1 solid; .customers { @@ -61,7 +61,7 @@ } } .customer_detail { - height: 535px; + height: 95%; width: 100%; border-top: 1px #07A9E1 solid; .customer_add { @@ -93,6 +93,7 @@ height: 50px; line-height: 3.5; width: 100%; + cursor: pointer; img { width: 10%; } @@ -109,7 +110,7 @@ } .services_type { overflow: hidden; - height: 580px; + height: 100%; border-radius: 5px; width: 32%; background-color: #fff; @@ -118,7 +119,7 @@ vertical-align: top; .services_type_title { line-height: 3.5; - height: 50px; + height: 5%; width: 100%; border-bottom: 1px #07A9E1 solid; .servicess { @@ -136,7 +137,7 @@ } } .services_type_detail { - height: 535px; + height: 95%; width: 100%; border-top: 1px #07A9E1 solid; .services_add { @@ -163,7 +164,7 @@ .services_list { background:linear-gradient(to right, #E5F6FF, #CFEEFA); - height: 530px; + height: 100%; .border_size{ position: absolute; margin-left: -8px; @@ -175,13 +176,20 @@ } li { height: 50px; - line-height: 3.5; + line-height: 50px; width: 100%; + vertical-align: middle; border-bottom: 2px #FFFFFF dashed; + position: relative; i { - float: right; - clear: both; - padding-top: 17px; + display: inline-block; + vertical-align: middle; + position: absolute; + width: 48px; + height: 48px; + top: 0; + right: -16px; + line-height: 46px; } } } @@ -193,13 +201,14 @@ width: 32%; margin-right: 1.5%; vertical-align: top; + height: 100%; >div{ padding: 20px 20px; } .Cu { - height: 280px; + height: 48%; width: 100%; - margin-bottom: 20px; + margin-bottom: 7%; margin-right: 2.5%; border-radius: 5px; background-color: #fff; @@ -210,17 +219,16 @@ } .legend { height: 10px; - width: 20px; + width: 10px; display: inline-block; background: linear-gradient(to right,#7DCEFB, #0DA9E2); - border-radius: 1px; + border-radius: 50%; margin: 15px 4px 0 43%; } } .type { - height: 280px; + height: 48%; width: 100%; - margin-bottom: 20px; margin-right: 2.5%; border-radius: 5px; background-color: #fff; diff --git a/usecaseui-portal/src/app/components/customer/customer.component.ts b/usecaseui-portal/src/app/components/customer/customer.component.ts index dff15f81..f3d1af3e 100644 --- a/usecaseui-portal/src/app/components/customer/customer.component.ts +++ b/usecaseui-portal/src/app/components/customer/customer.component.ts @@ -26,312 +26,447 @@ export class CustomerComponent implements OnInit { constructor(private managemencs: ManagemencsService) { } - ngOnInit() { - this.getAllCustomers(); - this.getCustomersPie(); - } - AllCustomersdata = []; - AllServiceTypes = []; - customerber = []; - // Get all customers - active; - getAllCustomers() { - this.managemencs.getAllCustomers().subscribe((data) => { - this.AllCustomersdata = data.map((item)=>{return {name:item["subscriber-name"],id:item["global-customer-id"]}}); - this.active = this.AllCustomersdata[0].id - this.getServiceTypes(this.active); - this.getCustomersColumn(this.active); - }) - - } - // Get all servicetype - getServiceTypes(item){ - this.managemencs.getServiceTypes(item).subscribe((data) => { - this.AllServiceTypes = data.map((item) => {return {type:item["service-type"],id:item["global-customer-id"]}}); - }) - } - // Switch user data - choseCustomer(index,item){ - this.chose = index; - this.getServiceTypes(item); - this.getCustomersColumn(item); - } - customeradd = false; - servicesadd = false; - //Customer pie - CUChartData: Object; - CUChartInit: Object = { - height: 180, - option: { - color: ["#F2F6FD"], - series: [{ - type: 'pie', - name: "customer", - radius: '90%', - center: ['50%', '53%'], - data: [{ - value: 67, + ngOnInit() { + this.getAllCustomers(); + } - }, { - value: 10, + AllCustomersdata = []; + AllServiceTypes = []; + customerber = []; + // Get all customers + active; + selectCustomer = { + name:null, + id:null + }; + addNewCustomer = null; + addNewServiceType = null; + deleteCustomerModelVisible = false; + deleteServiceTypeModelVisible = false; - }, { - value: 17, + getAllCustomers() { + this.managemencs.getAllCustomers().subscribe((data) => { + this.AllCustomersdata = data.map((item) => { + return {name: item["subscriber-name"], id: item["global-customer-id"]} + }); + this.active = this.selectCustomer = this.AllCustomersdata[0]; + this.serviceInit["customer"] = this.AllCustomersdata[0].name; + this.getCustomersPie(); + this.getServiceTypes(this.active); + this.getCustomersColumn(this.active); + }) - }, { - value: 33, - },], - label: { - normal: { - position: 'center', - show: false, - formatter: ' {b|{b}：{d}%} ', - backgroundColor: 'rgba(51,51,51,0.9)', - borderColor: 'rgba(51,51,51,0.9)', - borderWidth: 1, - borderRadius: 4, - rich: { - b: { - fontSize: 16, - color: '#fff', - lineHeight: 33 - } - } - }, - emphasis: { - show: true, + } - } - }, - itemStyle: { - normal: { - borderWidth: 2, - borderColor: '#ffffff', - }, - emphasis: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, color: '#7DCEFB' // 0% 处的颜色 - }, { - offset: 1, color: '#0DA9E2' // 100% 处的颜色 - }], - global: false // 缺省为 false - }, - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 10, 5, 0)' - } - } - }] + // Get all servicetype + getServiceTypes(item) { + this.managemencs.getServiceTypes(item).subscribe((data) => { + this.AllServiceTypes = data.map((item) => { + return {type: item["service-type"], id: item["global-customer-id"]} + }); + }) } - }; - // get customers chart pie - getCustomersPie(){ - this.managemencs.getCustomersPie().subscribe((data)=>{ - this.CUChartData = { - series: [{ - data: data - }] - } - console.log(this.CUChartData) - }, (err) => { - console.log(err); - }); - } - // service bar - serviceData: Object; - serviceInit: Object = { - height: 200, - width:280, - option: { - tooltip: { - show: true, - trigger: 'item', - formatter: "{c}" - }, - grid: { - top: '5%', - left: '5%', - bottom: '3%', - containLabel: true - }, - xAxis: [ - { - type: 'value', - splitLine: { - show: false, - }, - axisTick: { - show: false - }, - axisLine: { - lineStyle: { - color: "#EDEDED" - } - }, - axisLabel: { - color: "#3C4F8C" - } + // Switch user data + choseCustomer(index, item) { + this.chose = index; + this.selectCustomer = item; + this.serviceInit["customer"] = this.selectCustomer.name; + this.getServiceTypes(item); + this.getCustomersColumn(item); + } + + customeradd = false; + servicesadd = false; + //Customer pie + CUChartData: Object; + CUChartInit: Object = { + height: 200, + option: { + color: ["#F2F6FD"], + series: [{ + type: 'pie', + name: "customer", + radius: '90%', + center: ['50%', '50%'], + data: [{ + value: 67, + }, { + value: 10, + }, { + value: 17, + }, { + value: 33, + },], + label: { + normal: { + position: 'center', + show: false, + formatter: ' {b|{b}：{d}%} ', + backgroundColor: 'rgba(51,51,51,0.9)', + borderColor: 'rgba(51,51,51,0.9)', + borderWidth: 1, + borderRadius: 4, + rich: { + b: { + fontSize: 16, + color: '#fff', + lineHeight: 33 + } + } + }, + emphasis: { + show: true, + + } + }, + itemStyle: { + normal: { + borderWidth: 3, + borderColor: '#ffffff', + }, + emphasis: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#7DCEFB' + }, { + offset: 1, color: '#0DA9E2' + }], + global: false + }, + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 10, 5, 0)' + } + } + }] } + }; - ], - yAxis: [ - { - type: 'category', - splitLine: { - show: false, - }, - axisTick: { - show: false - }, - axisLine: { - lineStyle: { - color: "#EDEDED" + // get customers chart pie + getCustomersPie() { + this.managemencs.getCustomersPie().subscribe((data) => { + this.CUChartData = { + series: [{ + data: data + }] } - }, - axisLabel: { - color: "#3C4F8C" - }, - data: ['Other', 'Type1', 'Type2', 'Type3', 'Type4'], - }, + console.log(this.CUChartData) + }, (err) => { + console.log(err); + }); + } - ], - series: [ - { - name: '', - barWidth: '40%', - type: 'bar', - data: [2800, 1700, 1200, 1000, 900], - itemStyle: { - normal: { - color: function (params) { - // build a color map as your need. - var colorList = [ - { + // service bar + serviceData: Object; + serviceInit: Object = { + customer: '', + height: 230, + width: 410, + option: { + tooltip: { + show: true, + trigger: 'item', + formatter: "{c}" + }, + grid: { + top: '5%', + left: '5%', + bottom: '3%', + containLabel: true + }, + xAxis: [ + { + type: 'value', + splitLine: { + show: false, + }, + axisTick: { + show: false + }, + axisLine: { + lineStyle: { + color: "#EDEDED" + } + }, + axisLabel: { + color: "#3C4F8C" + } + } + + ], + yAxis: [ + { + type: 'category', + splitLine: { + show: false, + }, + axisTick: { + show: false + }, + axisLine: { + lineStyle: { + color: "#EDEDED" + } + }, + axisLabel: { + color: "#3C4F8C" + }, + data: ['Other', 'Type1', 'Type2', 'Type3', 'Type4'], + }, + + ], + series: [ + { + name: '', + barWidth: '40%', type: 'bar', - colorStops: [{ - offset: 0, - color: '#FCCE2B' - }, { - offset: 1, - color: '#FEE956' - }], - globalCoord: false, - }, - { + data: [2800, 1700, 1200, 1000, 900], + itemStyle: { + normal: { + color: function (params) { + // build a color map as your need. + var colorList = [ + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#FCCE2B' + }, { + offset: 1, + color: '#FEE956' + }], + globalCoord: false, + }, + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#F43A59' + }, { + offset: 1, + color: '#FA6C92' + }], + globalCoord: false, + }, + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#4F5B60' + }, { + offset: 1, + color: '#879499' + }], + globalCoord: false, + }, + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#31DAC3' + }, { + offset: 1, + color: '#5FEFE3' + }], + globalCoord: false, + }, + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#999999' + }, { + offset: 1, + color: '#C9C9C9' + }], + globalCoord: false, + } + ]; + return colorList[params.dataIndex] + }, + } + } + }, + { + name: 'Type4', + type: 'bar', + stack: '', + data: 2800, + + }, + { + name: 'Type1', type: 'bar', - colorStops: [{ - offset: 0, - color: '#F43A59' - }, { - offset: 1, - color: '#FA6C92' - }], - globalCoord: false, - }, - { + stack: '', + data: 1700 + }, + { + name: 'Type2', type: 'bar', - colorStops: [{ - offset: 0, - color: '#4F5B60' - }, { - offset: 1, - color: '#879499' - }], - globalCoord: false, - }, - { + stack: '', + data: 1500 + }, + { + name: 'Type3', type: 'bar', - colorStops: [{ - offset: 0, - color: '#31DAC3' - }, { - offset: 1, - color: '#5FEFE3' - }], - globalCoord: false, - }, - { + stack: '', + data: 1300 + }, + { + name: 'Other', type: 'bar', - colorStops: [{ - offset: 0, - color: '#999999' - }, { - offset: 1, - color: '#C9C9C9' - }], - globalCoord: false, - } - ]; - return colorList[params.dataIndex] - }, + stack: '', + data: 1000, + + } + ] + } + }; + name_s = []; + value_s = []; + + getCustomersColumn(item) { + this.name_s = []; + this.value_s = []; + this.managemencs.getCustomersColumn(item).subscribe((data) => { + data.forEach((item) => { + this.name_s.push(item.name); + this.value_s.push(item.value); + }) + this.serviceData = { + yAxis: [{ + data: this.name_s + }], + series: [{ + data: this.value_s + }] } - } - }, - { - name: 'Type4', - type: 'bar', - stack: '', - data: 2800, + console.log(this.serviceData) + }) + } - }, - { - name: 'Type1', - type: 'bar', - stack: '', - data: 1700 - }, - { - name: 'Type2', - type: 'bar', - stack: '', - data: 1500 - }, - { - name: 'Type3', - type: 'bar', - stack: '', - data: 1300 - }, - { - name: 'Other', - type: 'bar', - stack: '', - data: 1000, + createNewCustomer() { + let createParams = { + customerId: this.addNewCustomer + }; + this.managemencs.createCustomer(this.addNewCustomer, createParams).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.getAllCustomers(); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) + } - } - ] + // Customer delete model + thisdeleteCustomer={ + name:null, + id:null + }; + deleteCustomerModel(itemCustomer) { + this.thisdeleteCustomer = itemCustomer; + this.deleteCustomerModelVisible = true; + } + deleteCustomerCancel() { + this.deleteCustomerModelVisible = false; + } + deleteCustomerOk() { + this.deleteCustomerModelVisible = false; + this.getCustomerVersion(this.thisdeleteCustomer); + } + getCustomerVersion(thisdeleteCustomer){ + this.managemencs.getdeleteCustomerVersion(thisdeleteCustomer).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + let params = { + customerId:thisdeleteCustomer.id, + version:data["result"]["resource-version"] + }; + this.deleteCustomer(params); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) + } + deleteCustomer(params){ + this.managemencs.deleteSelectCustomer(params).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.getAllCustomers(); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) + } + + createNewServiceType() { + let createParams = { + customer: this.selectCustomer, + ServiceType:this.addNewServiceType + }; + this.managemencs.createServiceType(createParams).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.getCustomersColumn(this.selectCustomer); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) + } + + // ServiceType delete model + thisdeleteServiceType={ + type:null + }; + deleteServiceTypeModel(itemServiceType) { + this.thisdeleteServiceType = itemServiceType; + this.deleteServiceTypeModelVisible = true; + } + deleteServiceTypeCancel() { + this.deleteServiceTypeModelVisible = false; + } + deleteServiceTypeOk() { + this.deleteServiceTypeModelVisible = false; + this.getServiceTypeVersion(); + } + getServiceTypeVersion(){ + let params={ + customerId:this.selectCustomer.id, + ServiceType:this.thisdeleteServiceType["type"] + }; + this.managemencs.getdeleteServiceTypeVersion(params).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + let params = { + customerId:this.selectCustomer, + ServiceType:this.thisdeleteServiceType["type"], + version:data["result"]["resource-version"] + }; + this.deleteServiceType(params); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) + } + deleteServiceType(params){ + this.managemencs.deleteSelectServiceType(params).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.getCustomersPie(); + this.getServiceTypes(params.customerId); + this.getCustomersColumn(params.customerId); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) } - } - name_s = []; - value_s = []; - getCustomersColumn(item){ - this.name_s = []; - this.value_s = []; - this.managemencs.getCustomersColumn(item).subscribe((data)=>{ - data.forEach((item)=>{ - this.name_s.push(item.name); - this.value_s.push(item.value); - }) - this.serviceData = { - yAxis:[{ - data:this.name_s - }], - series :[{ - data:this.value_s - }] - } - console.log(this.serviceData) - }) - } - - } diff --git a/usecaseui-portal/src/app/managemencs.service.ts b/usecaseui-portal/src/app/managemencs.service.ts index 686d6180..62113133 100644 --- a/usecaseui-portal/src/app/managemencs.service.ts +++ b/usecaseui-portal/src/app/managemencs.service.ts @@ -8,25 +8,36 @@ import {baseUrl} from './dataInterface'; export class ManagemencsService { constructor(private http: HttpClient) { } - baseUrl = baseUrl.baseUrl + baseUrl = baseUrl.baseUrl; - /* location */ - url = { - customers:this.baseUrl + "/customers/customers_list.json?", - serviceType:this.baseUrl + "/serviceTypes.json?*_*", - CustomersPir:this.baseUrl + "/customers/customersber.json?", - CustomersColumn:this.baseUrl + "/customers/customersber.json?", - - } + /* location */ + // url = { + // customers: this.baseUrl + "/customers/customers_list.json", + // serviceType: this.baseUrl + "/serviceTypes.json?*_*", + // CustomersPir: this.baseUrl + "/customers/customersber.json", + // CustomersColumn: this.baseUrl + "/customers/customersber.json?*_*", + // createCustomer: this.baseUrl + "/customers/createCustomer.json?", + // createServiceType: this.baseUrl + "/customers/createServiceType.json", + // getCustomerResourceVersion: this.baseUrl + "/customers/deleteCustomer.json?*_*", + // deleteCustomer: this.baseUrl + "/customers/createServiceType.json", + // getServiceTypeResourceVersion: this.baseUrl + "/customers/deleteCustomer.json?*_*", + // deleteServiceType: this.baseUrl + "/customers/createServiceType.json", + // }; - /* line up */ - // url = { - // customers:this.baseUrl + "/uui-lcm/customers",/* get */ - // serviceType:this.baseUrl + "/uui-lcm/customers/"+"*_*"+"/service-subscriptions",/* get */ - // CustomersPir:this.baseUrl + "/uui-lcm/serviceNumByCustomer",/* get */ - // CustomersColumn:this.baseUrl + "/uui-lcm/serviceNumByServiceType/"+"*_*",/* get */ - // } + /* line up */ + url = { + customers:this.baseUrl + "/uui-lcm/customers", /* get */ + serviceType:this.baseUrl + "/uui-lcm/customers/"+"*_*"+"/service-subscriptions", /* get */ + CustomersPir:this.baseUrl + "/uui-lcm/serviceNumByCustomer", /* get */ + CustomersColumn:this.baseUrl + "/uui-lcm/serviceNumByServiceType/"+"*_*", /* get */ + createCustomer:this.baseUrl+"/uui-lcm/customers/", /* put */ + createServiceType:this.baseUrl+"/uui-lcm/customers/*_*/service-subscriptions/*+*", /* put */ + getCustomerresourceVersion:this.baseUrl+"/uui-lcm/customers/*_*", /* put */ + deleteCustomer:this.baseUrl+"/uui-lcm/customers?customerId=*_*&resourceVersion=*+*", + getServiceTypeResourceVersion:this.baseUrl+"/uui-lcm/customers/*_*/service-subscriptions/*+*", + deleteServiceType:this.baseUrl+"/uui-lcm/customers/*_*/service-subscriptions/*+*?resourceVersion=*@* ", + }; // Get all customers @@ -48,4 +59,45 @@ export class ManagemencsService { let url = this.url.CustomersColumn.replace("*_*", customer.id); return this.http.get<any>(url); } + // create New Customer + createCustomer(customer, createParams) { + let url = this.url.createCustomer + customer; + // return this.http.get(url, createParams);//location + return this.http.put(url,createParams);//online + } + + createServiceType(createParams) { + let customerId = createParams.customer.id, + ServiceType = createParams.ServiceType; + let url = this.url.createServiceType.replace("*_*", customerId).replace("*+*", ServiceType); + // return this.http.get(url,createParams);//location + return this.http.put(url, createParams);//online + } + + getdeleteCustomerVersion(thisdeleteCustomer) { + let url = this.url.getCustomerresourceVersion.replace("*_*", thisdeleteCustomer.id); + return this.http.get(url); + } + + deleteSelectCustomer(params) { + let customerId = params.customerId, + version = params.version; + let url = this.url.deleteCustomer.replace("*_*", customerId).replace("*+*", version); + return this.http.delete(url); + } + + getdeleteServiceTypeVersion(params) { + let customerId = params.customerId.id, + ServiceType = params.ServiceType; + let url = this.url.getServiceTypeResourceVersion.replace("*_*", customerId).replace("*+*", ServiceType); + return this.http.get(url); + } + + deleteSelectServiceType(params) { + let customerId = params.customerId.id, + ServiceType = params.ServiceType, + version = params.version; + let url = this.url.deleteServiceType.replace("*_*", customerId).replace("*+*", ServiceType).replace("*@*", version); + return this.http.delete(url); + } } diff --git a/usecaseui-portal/src/app/management/management.component.html b/usecaseui-portal/src/app/management/management.component.html index ef8c8435..52a261b9 100644 --- a/usecaseui-portal/src/app/management/management.component.html +++ b/usecaseui-portal/src/app/management/management.component.html @@ -13,22 +13,24 @@ See the License for the specific language governing permissions and limitations under the License. --> -<div class="content" style="padding: 20px 20px;"> - <div class="management" [@showHideAnimate]="show" > +<div class="content" style="padding: 20px 20px;height: 100vh"> + <div class="management" *ngIf="nocuster" > <div class="title"> <p>Create initial customer</p> <span>Customer has not been created in ONAP </span> <span>please create customer and its service type</span> <img src="../../assets/images/customer01.png" alt=""> - <input nz-input placeholder="input customer name" nzSize="large"> - <button nz-button nzType="primary" class="cancel">Cancel</button> - <button nz-button nzType="primary" class="add" (click) = "customerhide()">Add</button> + <input nz-input placeholder="input customer name" nzSize="large" style="height: 50px" [(ngModel)]="firstCustomer"> + <div class="action"> + <button nz-button nzType="primary" class="cancel" (click) = "clearCustomerInput()">Cancel</button> + <button nz-button nzType="primary" class="add" (click) = "createNewCustomer(firstCustomer)">Add</button> + </div> </div> <div class="image"> <img src="../../assets/images/customer02.png" alt=""> </div> </div> - <div [@showHideAnimate]="hide"> + <div *ngIf="!nocuster" style="height: 100%"> <app-customer></app-customer> </div> </div> diff --git a/usecaseui-portal/src/app/management/management.component.less b/usecaseui-portal/src/app/management/management.component.less index 4b4a0ab5..5a3a0f42 100644 --- a/usecaseui-portal/src/app/management/management.component.less +++ b/usecaseui-portal/src/app/management/management.component.less @@ -34,26 +34,33 @@ img { padding-top: 8%; width: 55%; - margin-left: 18%; + margin-left: 20%; margin-bottom: 5%; } input { width: 50%; - margin-left: 20%; + margin: 0 auto; margin-bottom: 5%; display: block; + + } + .action{ + width: 50%; + height: 40px; + margin: 0 auto; + } + .action button{ + width: 40%; + height: 40px; + margin: 0 4%; } .cancel{ background-color: #eee; border-color: #eee; color: #9DA7C5; - width: 80px; - margin-left: 25%; - margin-right: 2%; } .add { color: #fff; - width: 80px; background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%); border-color: #1890ff; } diff --git a/usecaseui-portal/src/app/management/management.component.ts b/usecaseui-portal/src/app/management/management.component.ts index 4228245a..0a5bfd2e 100644 --- a/usecaseui-portal/src/app/management/management.component.ts +++ b/usecaseui-portal/src/app/management/management.component.ts @@ -34,33 +34,35 @@ export class ManagementComponent implements OnInit { this.getAllCustomers(); } - show = "show"; - hide = "hide"; - custerhide = false; - AllCustomersdata = []; - // Get all customers - getAllCustomers() { - this.managemencs.getAllCustomers().subscribe((data) => { - if(data.length > 0){ - this.show = "hide"; - this.hide = "show"; - this.custerhide = false; - }else{ - this.show = "show"; - this.hide = "hide"; - this.custerhide = true; - } - }) - } - customershow(){ - this.show = "show"; - this.hide = "hide"; - this.custerhide = true; - } - customerhide(){ - this.show = "hide"; - this.hide = "show"; - this.custerhide = false; - } + nocuster = true; + firstCustomer = null; + AllCustomersdata = []; + + // Get all customers + getAllCustomers() { + this.managemencs.getAllCustomers().subscribe((data) => { + if (data.length > 0) { + this.nocuster = false; + } else { + this.nocuster = true; + } + }) + } + createNewCustomer(customer) { + let createParams = { + customerId: customer + }; + this.managemencs.createCustomer(customer, createParams).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.nocuster = false; + } else { + this.nocuster = true; + console.log(data, "Interface returned error") + } + }) + } + clearCustomerInput(){ + this.firstCustomer=null; + } } diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less index d4d7f1f8..487d06d5 100644 --- a/usecaseui-portal/src/styles.less +++ b/usecaseui-portal/src/styles.less @@ -713,7 +713,9 @@ nz-modal .nsdeleteModel.ant-modal { } } } - +nz-modal .deleteServiceTypeModel.ant-modal{ + height: 510px !important; +} nz-modal .healModel.ant-modal { min-height: 470px !important; } |