feat: optimize the code for the service-list component

Change-Id: I99c497d700c988fcb6569a4a907ca2a5489f08bf
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

3 files changed, 31 insertions, 36 deletions

diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.html b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
index 431228d8..a82c8a2b 100644
--- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
@@ -55,7 +55,7 @@
     </app-create-model>
     
 </div>
-<nz-layout style=" padding: 20px 32px; ">
+<nz-layout>
     <div class="top-num">
         <app-top-card
             *ngFor="let item of serviceNunber"
@@ -67,9 +67,9 @@
         </app-top-card>
     </div>
     <div class="list" id="services-list" [ngClass]="{'listdisplay':listDisplay == true}">
-        <nz-table *ngIf="1" #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="false"
+        <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="false"
             [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize"
-            [(nzPageIndex)]='pageIndex' [nzLoading]="loading" [nzSize]="'middle'" [nzScroll]="{ y: '58vh' }"
+            [(nzPageIndex)]='pageIndex' [nzLoading]="loading" [nzSize]="'middle'"
             (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
             <thead>
                 <tr>
@@ -90,31 +90,30 @@
                         <td>{{data["service-instance-name"] || data.nsName}}</td>
                         <td>{{data["service-instance-id"] || data.nsInstanceId}}</td>
                         <td>
-                            <p
-                                [ngClass]="{'e2eColor':data.serviceDomain=='E2E Service','nsColor':data.serviceDomain=='Network Service','ccvpnColor':data.serviceDomain=='CCVPN','sotnColor':data.serviceDomain=='SOTN','voLTEColor':data.serviceDomain=='voLTE type'}">
+                            <p class="usecase">
                                 {{data.serviceDomain}}
                             </p>
                         </td>
                         <td>
-                            <span [ngClass]="{'active':data.statusClass=='2001','closed':data.statusClass=='Closed','onboarding':data.statusClass=='Onboarding',
-                    'updating':data.statusClass=='Updating','deleting':data.statusClass=='1002','creating':data.statusClass=='1001',
-                    'scaling':data.statusClass=='1003','healing':data.statusClass=='1004'}"
-                                *ngIf="data.tips != 'Available' && data.tips != 'Unavailable'">{{data.tips}}</span>
-                            <span *ngIf="data.tips == 'Available' " style="margin-left: 10px">
+                            <span [ngClass]="{'active':data.statusClass==='2001','closed':data.statusClass==='Closed','onboarding':data.statusClass==='Onboarding',
+                    'updating':data.statusClass==='Updating','deleting':data.statusClass==='1002','creating':data.statusClass==='1001',
+                    'scaling':data.statusClass==='1003','healing':data.statusClass==='1004'}"
+                                *ngIf="data.tips !== 'Available' && data.tips !== 'Unavailable'">{{data.tips}}</span>
+                            <span *ngIf="data.tips === 'Available' " class="marginLeft10">
                                 <img src="assets/images/wancheng-icon.png" alt="Available">
                             </span>
-                            <span *ngIf="data.tips == 'Unavailable' " style="margin-left: 10px">
+                            <span *ngIf="data.tips === 'Unavailable' " class="marginLeft10">
                                 <img src="assets/images/shibai-icon.png" alt="Unavailable">
                             </span>
-                            <nz-progress *ngIf="data.status == 'In Progress'" [nzPercent]="data.rate"
+                            <nz-progress *ngIf="data.status === 'In Progress'" [nzPercent]="data.rate"
                                 [nzShowInfo]="false" nzStatus="active"></nz-progress>
                         </td>
                         <td>
-                            <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
+                            <i [ngClass]="{'cannotclick':data.status === 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status==='Failed' && data.operationType=='1002')}"
                                 class="anticon anticon-bars" (click)="serviceDetail(data,1)"></i>
-                            <i [ngClass]="{'cannotclick':data.status == 'In Progress'}" class="anticon anticon-delete"
+                            <i [ngClass]="{'cannotclick':data.status === 'In Progress'}" class="anticon anticon-delete"
                                 (click)="deleteModel(data)"></i>
-                            <i [ngClass]="{'cannotclick':data.status == 'In Progress'}" class="anticon anticon-ellipsis"
+                            <i [ngClass]="{'cannotclick':data.status === 'In Progress'}" class="anticon anticon-ellipsis"
                                 (click)="iconMoreShow(data,tableData)" style="transform: rotate(90deg);"></i>
 
                             <ul *ngIf="data.iconMore==true " class="icon-more">
@@ -154,7 +153,6 @@
                 </ng-template>
             </tbody>
         </nz-table>
-
         <nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle=" {{'i18nTextDefine_Scale' | translate}} "
             (nzOnCancel)="scaleCancel()" (nzOnOk)="scaleOk(templatescalestarting,templateScaleSuccessFaild)"
             nzClassName="scaleModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
@@ -224,8 +222,8 @@
                 </div>
             </ng-template>
         </nz-modal>
-
-        <nz-modal nzWidth="428" [(nzVisible)]="deleteModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} "
+        <!-- <app-delete-modal *ngIf="deleteModalVisible" [deleteModalVisible]="deleteModalVisible"></app-delete-modal> -->
+        <nz-modal nzWidth="428" [(nzVisible)]="deleteModalVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}}"
             (nzOnCancel)="deleteCancel()" (nzOnOk)="deleteOk(templatedeletestarting,templateDeleteSuccessFaild)"
             nzClassName="{{thisService['serviceDomain'] == 'Network Service'?'nsdeleteModel':'deleteModel'}}"
             nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
@@ -665,7 +663,7 @@
     </div>
     <div class="detailComponent" *ngIf="detailshow2">
         <app-e2e-detail [detailParams]="detailData" (closeDetail)="detailshow2 = false;listDisplay = false;">
-        </app-e2e-detail>
+        </app-e2e-detail> 
     </div>
     <div class="createComponent" *ngIf="createshow">
         <app-ccvpn-creation [createParams]="createData" [ccvpn_temParametersContent]="ccvpn_temParametersContent"
diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.less b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
index dd26bcb7..454e3bc8 100644
--- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
@@ -252,6 +252,9 @@ nz-layout{
                     font-size: 12px;
                     color: orangered;
                 }
+                span.marginLeft10{
+                    margin-left: 10px;
+                }
                 i.anticon {
                     cursor: pointer;
                     font-size: 18px;
@@ -335,7 +338,7 @@ nz-layout{
     z-index: 3;
 }
 
-.e2eColor,.nsColor,.ccvpnColor,.sotnColor,.voLTEColor{
+.usecase{
     width:120px;
     height: 34px;
     line-height: 34px;
diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts
index 0fc46aae..5a1a1ab0 100644
--- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts
@@ -51,11 +51,9 @@ export class ServicesListComponent implements OnInit {
     isSol005Interface = false;
     orchestratorList = [];
     customerList = [];
-    customerList2 = [];
     customerSelected = { name: null, id: null };
     customerSelected2 = { name: null, id: null };
     serviceTypeList = [];
-    serviceTypeList2 = [];
     serviceTypeSelected = { name: '' };
     serviceTypeSelected2 = { name: '' };
     serviceTypeSelectedName = "";
@@ -89,7 +87,7 @@ export class ServicesListComponent implements OnInit {
         }
     ];
 
-    progressCcvpnOutTimer :any; // ccvpn¡¢NS progress Timer
+    progressCcvpnOutTimer :any; // ccvpn��NS progress Timer
     progressingCcvpnTimer :any;
     progressNsOutTimer :any;
     progressingNsTimer :any;
@@ -116,7 +114,6 @@ export class ServicesListComponent implements OnInit {
             .subscribe((data) => {
                 this.customerList = data.map(item => ({ name: item["subscriber-name"], id: item["global-customer-id"] }) );
                 if(data.length !== 0){
-                    // this.customerList2 = data.map(item => ({ name: item["subscriber-name"], id: item["global-customer-id"] }) );
                     this.customerSelected = this.customerList[0];
                     this.choseCustomer();
                 }
@@ -156,9 +153,6 @@ export class ServicesListComponent implements OnInit {
     // Create modal box 2 (dialog box) create -------------------------------
     isVisible = false;
 
-
-
-
     createModal(): void {
         this.isVisible = true;
     }
@@ -347,6 +341,7 @@ export class ServicesListComponent implements OnInit {
                         }
                     }
                 })
+                console.log(this.tableData)
                 this.loading = false;
             }, (err) => {
                 console.log(err);
@@ -513,39 +508,38 @@ export class ServicesListComponent implements OnInit {
         service["serviceType"] = this.serviceTypeSelected;
 
         service.childServiceInstances.forEach((item) => {
-            if (item.serviceDomain == "SITE") {
+            if (item.serviceDomain === "SITE") {
                 service.siteSer.push(item);
-            } else if (item.serviceDomain == "SDWAN") {
+            } else if (item.serviceDomain === "SDWAN") {
                 service.sdwanSer.push(item);
             }
         })
-        if (service["serviceDomain"] == 'CCVPN' || service["serviceDomain"] == 'SOTN') {
+        if (service["serviceDomain"] === 'CCVPN' || service["serviceDomain"] === 'SOTN') {
             this.detailshow = true;
             if (typeNum == 1) {
                 this.upDateShow = false;
             } else {
                 this.upDateShow = true;
             }
-        } else if (service["serviceDomain"] == 'E2E Service' || service["serviceDomain"] == 'Network Service') {
+        } else if (service["serviceDomain"] === 'E2E Service' || service["serviceDomain"] === 'Network Service') {
             this.detailshow2 = true;
         }
         this.listDisplay = true;
         this.detailData = service;
-        console.log(service);
     }
 
-    deleteModelVisible = false;
+    deleteModalVisible = false;
     terminationType = "graceful";
     gracefulTerminationTimeout = 120;
 
     // delete Model show
     deleteModel(service) {
         this.thisService = service;
-        this.deleteModelVisible = true;
+        this.deleteModalVisible = true;
     }
 
     deleteOk(templatedeletestarting, templateDeleteSuccessFaild) {
-        this.deleteModelVisible = false;
+        this.deleteModalVisible = false;
         this.loadingAnimateShow = true;
         if (this.thisService["serviceDomain"] == "Network Service") {
             this.deleteNsService(this.thisService, templateDeleteSuccessFaild);
@@ -556,7 +550,7 @@ export class ServicesListComponent implements OnInit {
     }
 
     deleteCancel() {
-        this.deleteModelVisible = false;
+        this.deleteModalVisible = false;
     }
 
     deleteNotification(template: TemplateRef<{}>): void {