Service instance life cycle Create a modal box

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

2 files changed, 32 insertions, 16 deletions

diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html
index 04289c62..770cda06 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.html
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html
@@ -43,8 +43,10 @@
     <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle="Service Creation" (nzOnCancel)="handleCancel()"
               (nzOnOk)="handleOk()" nzClassName="serviceCreationModel">
         <div class="select-list">
-            <span style="display:inline-block;">Customer: </span>
-            <nz-select style="width: 176px;float: right;" [(ngModel)]="customerSelected2.name" nzAllowClear>
+            <span style="display:inline-block;">CUSTOMER: </span>
+
+
+            <nz-select style="width: 176px;float: right;" [(ngModel)]="customerSelected2.name" nzAllowClear (ngModelChange)="customerChange()">
                 <nz-option *ngFor="let item of customerList2" [nzValue]="item.name" [nzLabel]="item.name"></nz-option>
             </nz-select>
         </div>
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
index 113b8e4c..3a066746 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
@@ -44,6 +44,7 @@ export class ServicesListComponent implements OnInit {
   serviceTypeList2 = [];
   serviceTypeSelected = {name:null};
   serviceTypeSelected2 = {name: null};
+    templateTypeSelected =null;
   orchestratorSelected = {name:null,id:null};
   listSortMasters=JSON.parse(sessionStorage.getItem('listSortMasters'));
   language="en";
@@ -60,10 +61,6 @@ export class ServicesListComponent implements OnInit {
             "number": 20,
             "detailName":"Network Service"
         },
-        // {
-        //     "serviceDomain": "SOTN",
-        //     "number": 30
-        // },
         {
             "serviceDomain": "CCVPN",
             "number": 40,
@@ -104,6 +101,8 @@ export class ServicesListComponent implements OnInit {
         this.customerSelected = this.customerList[0];
                 this.customerSelected2 = this.customerList2[0];
         this.choseCustomer(this.customerSelected);
+	 this.getServiceType(this.customerSelected2);
+
         // console.log(this.customers)
       })
   }
@@ -125,19 +124,14 @@ export class ServicesListComponent implements OnInit {
     this.myhttp.getServiceTypes(this.customerSelected)
       .subscribe((data)=>{
         this.serviceTypeList = data.map((item)=>{return {name:item["service-type"]}});
-                this.serviceTypeList2 = data.map((item) => {
-                    return {name: item["service-type"]}
-                });
+              
         if(this.serviceTypeList.length==0){
           console.log("serviceTypeList.length == 0",this.serviceTypeList);
           return false;
         }
-          if (this.serviceTypeList2.length == 0) {
-              console.log("serviceTypeList2.length == 0", this.serviceTypeList2);
-              return false;
-          }
+          
         this.serviceTypeSelected = this.serviceTypeList[0];
-                this.serviceTypeSelected2 = this.serviceTypeList2[0];
+
         this.choseServiceType(this.serviceTypeSelected);
         // console.log(this.listServiceTypes);
       })
@@ -151,15 +145,35 @@ export class ServicesListComponent implements OnInit {
 
   // Create modal box 2 (dialog box) create -------------------------------
   isVisible = false;
+    customerChange(): void {
+        console.log(this.customerSelected2)
+        this.getServiceType(this.customerSelected2);
+    }
+    getServiceType(customerSelected2) {
+        this.myhttp.getServiceTypes(customerSelected2)
+            .subscribe((data) => {
+                this.serviceTypeList2 = data.map((item) => {
+                    return {name: item["service-type"]}
+                });
+                if (this.serviceTypeList2.length == 0) {
+                    console.log("serviceTypeList.length == 0", this.serviceTypeList2);
+                    return false;
+                }
+                this.serviceTypeSelected2 = this.serviceTypeList2[0];
+                this.templateTypeSelected = this.serviceTypeList2[0].name;
+                console.log(this.serviceTypeList2);
+                this.getAlltemplates();
+            })
+    }
   createModal(): void {
     this.isVisible = true;
     this.getallOrchestrators();
-    this.getAlltemplates();
+
   }
   //
-    templateTypeSelected = this.serviceTypeList2["name"];
 
   choseTemplateType(){
+  this.templateTypeSelected = this.serviceTypeSelected2.name;
     this.getallOrchestrators();
     this.getAlltemplates();
   }