User and service type management interface

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

3 files changed, 51 insertions, 40 deletions

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;
+    }
 }