User and service type management interface

Change-Id: Ie4f66f28ea964cd8a773e7c1c52e5d589762b371
Issue-ID: USECASEUI-212
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

9 files changed, 615 insertions, 369 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">*&nbsp;</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">*&nbsp;</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;
+    }
 }