fixed list switching function

Change-Id: I3d659ffcf2055221340388e35ebafb67bff8bcba
Issue-ID: USECASEUI-159
Signed-off-by: zhangab <zhanganbing@chinamobile.com>

1 files changed, 206 insertions, 56 deletions

diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
index 9ada2aef..c0e91543 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
@@ -16,13 +16,13 @@
 <h3 class="title"> Onboard VNF </h3>
 <nz-upload nzType="drag" [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">
     <p class="ant-upload-drag-icon">
-      <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
+        <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
     </p>
     <p class="ant-upload-text">Click or drag file to this area to upload</p>
-    <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
+    <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or
+        other band files</p>
 </nz-upload>
-<button nz-button [nzLoading]="uploading" (click)="handleUpload()" [disabled]="fileList.length == 0"
-    style="margin-top: 16px">
+<button nz-button [nzLoading]="uploading" (click)="handleUpload()" [disabled]="fileList.length == 0" style="margin-top: 16px">
     {{ uploading ? 'Uploading' : 'Start Upload' }}
 </button>
 <!-- <button nz-button nzType="primary" (click)="showModal()">
@@ -31,10 +31,10 @@
 <nz-modal [(nzVisible)]="isVisible" nzTitle="Modal Title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
     [nzOkLoading]="isOkLoading">
     <p>
-        <input nz-input placeholder="??¨º?¨¨?key" [(ngModel)]="value1">
+        <input nz-input placeholder="请输入key" [(ngModel)]="value1">
     </p>
     <p>
-        <input nz-input placeholder="??¨º?¨¨?value" [(ngModel)]="value2">
+        <input nz-input placeholder="请输入value" [(ngModel)]="value2">
     </p>
 </nz-modal> -->
 
@@ -45,54 +45,204 @@
 </nz-tabset> -->
 
 <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
-        <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)">
-                <div class="list">
-                        <nz-table #nzTable [nzData]="tableData" 
-                            nzShowSizeChanger
-                            [nzFrontPagination]="true" 
-                            [nzShowQuickJumper]="true" 
-                            [nzPageSizeOptions]="[5,10,15,20]" 
-                            [nzTotal]= 'total'
-                            [(nzPageSize)]="pageSize" 
-                            [(nzPageIndex)]='pageIndex'
-                            [nzLoading]="loading"
-                            nzSize="middle"
-                            (nzPageIndexChange)="searchData()"
-                            (nzPageSizeChange)="searchData(true)">
-                            <thead (nzSortChange)="sort($event)" nzSingleSort>
-                                <tr>
-                                <th nzWidth="5%">NO</th>
-                                <th nzWidth="20%" nzShowSort nzSortKey="name"> Name </th>
-                                <th nzWidth="20%">Type</th>
-                                <th nzWidth="20%">Version</th>
-                                <th nzWidth="15%">Onboarding State</th>
-                                <th nzWidth="20%">Operational State</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
-                                <tr *ngFor="let item of nzTable.data; let i = index; ">
-                                    <!-- <td>{{i+1}}</td> -->
-                                    <td>{{item.id}}</td>
-                                    <td>{{item.name}}</td>
-                                    <td>{{item.type}}</td>
-                                    <td>{{item.version}}</td>
-                                    <td>
-                                        <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
-                                            'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
-                                        <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
-                                    </td>
-                                    <td>
-                                        <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
-                                        <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)" *ngIf="item.uuid"></i>
-                                        <i class="anticon anticon-download" (click)="downloadService(item.id)"></i>
-                                        <i class="anticon anticon-delete" (click)="deleteService(i,item.id)" id="{{ item.id }}"></i>
-                                    </td>
-                                </tr>
-                                <!-- </ng-template> -->
-                            </tbody>
-                        </nz-table>
-                    </div>
-        </nz-tab>
-    </nz-tabset>
+    <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab, url)">
+        <!-- nsList -->
+        <div class="list" *ngIf="tab === 'NS'">
+            <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+                [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
+                [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
+                <thead (nzSortChange)="sort($event)" nzSingleSort>
+                    <tr>
+                        <th nzWidth="5%">NO</th>
+                        <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
+                        <!-- <th nzWidth="20%">Type</th> -->
+                        <th nzWidth="10%">Version</th>
+                        <th nzWidth="15%">Onboarding State</th>
+                        <th nzWidth="20%">Operational State</th>
+                        <th nzWidth="20%">Usage State</th>
+                        <th nzWidth="15%"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let item of nzTable.data; let i = index; ">
+                        <td *ngIf="item.nsdId">{{item.nsdId}}</td>
+                        <td *ngIf="item.uuid">{{item.uuid}}</td>
+
+                        <td *ngIf="item.nsdName">{{item.nsdName}}</td>
+                        <td *ngIf="item.name">{{item.name}}</td>
 
+                        <!-- <td>{{item.onboardingFailureDetails.type}}</td> -->
+                        <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td>
+                        <td *ngIf="item.version">{{ item.version }}</td>
+                        <td>
+                            <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+                                            'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.nsdOnboardingState}}</span>
+                            <!-- <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> -->
+                        </td>
+                        <td>{{item.nsdOperationalState}}</td>
+                        <td>{{item.nsdUsageState}}</td>
+                        <td>
+                            <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
+                            <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)"></i>
+                            <i class="anticon anticon-download" (click)="downloadService(item.id)" *ngIf="item.id"></i>
+                            <i class="anticon anticon-delete" (click)="deleteService(i,item.id)" id="{{ item.id }}"></i>
+                        </td>
+                    </tr>
+                </tbody>
+            </nz-table>
+        </div>
+        <!-- VNFList -->
+        <!-- <div class="list" *ngIf="tab === 'VNF'">
+            <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+                [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
+                [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
+                <thead (nzSortChange)="sort($event)" nzSingleSort>
+                    <tr>
+                        <th nzWidth="5%">NO</th>
+                        <th nzWidth="20%" nzShowSort nzSortKey="name"> Name </th>
+                        <th nzWidth="20%">Type</th>
+                        <th nzWidth="20%">Version</th>
+                        <th nzWidth="15%">Onboarding State</th>
+                        <th nzWidth="20%">Operational State</th>
+                    </tr>
+                </thead> -->
+        <!-- <tbody>
+                    <tr *ngFor="let item of nzTable.data; let i = index; ">
+                        <td>{{item.id}}</td>
+                        <td>{{item.name}}</td>
+                        <td>{{item.type}}</td>
+                        <td>{{item.version}}</td>
+                        <td>
+                            <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+                                            'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
+                            <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
+                        </td>
+                        <td> -->
+        <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
+        <!-- <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.id)"></i>
+                            <i class="anticon anticon-download" (click)="downloadVnfService(item.id)" *ngIf="item.uuid"></i>
+                            <i class="anticon anticon-delete" (click)="deleteVnfService(i,item.id)" id="{{ item.id }}"></i>
+                        </td>
+                    </tr>
+                </tbody>
+            </nz-table>
+        </div> -->
+        <div class="list" *ngIf="tab === 'VNF'">
+            <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+                [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
+                [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
+                <thead (nzSortChange)="sort($event)" nzSingleSort>
+                    <tr>
+                        <th nzWidth="5%">NO</th>
+                        <th nzWidth="10%" nzShowSort nzSortKey="name"> Name </th>
+                        <th nzWidth="10%">Version</th>
+                        <th nzWidth="20%">Onboarding State</th>
+                        <th nzWidth="15%">usageState</th>
+                        <th nzWidth="20%">Operational State</th>
+                        <th nzWidth="20%">Operation button</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
+                    <tr *ngFor="let item of nzTable.data; let i = index; ">
+                        <!-- <td>{{i+1}}</td> -->
+                        <td>{{item.id}}</td>
+                        <td>{{item.vnfProductName}}</td>
+                        <td>{{item.vnfdVersion}}</td>
+                        <td>{{item.onboardingState}}</td>
+                        <td>{{item.usageState}}</td>
+                        <td>{{item.operationalState}}</td>
+                        <!-- <td>
+                <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+                'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
+                <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
+                </td> -->
+                        <td>
+                            <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
+                            <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)"
+                                *ngIf="item.uuid"></i>
+                            <i class="anticon anticon-download" (click)="downloadService(item.id)" *ngIf="item.id"></i>
+                            <i class="anticon anticon-delete" (click)="deleteService(i,item.id)" id="{{ item.id }}"></i>
+                        </td>
+                    </tr>
+                    <!-- </ng-template> -->
+                </tbody>
+            </nz-table>
+        </div>
+        <!-- PNFList -->
+        <!-- <div class="list" *ngIf="tab === 'PNF'">
+            <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+                [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
+                [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
+                <thead (nzSortChange)="sort($event)" nzSingleSort>
+                    <tr>
+                        <th nzWidth="5%">NO</th>
+                        <th nzWidth="20%" nzShowSort nzSortKey="name"> Name </th>
+                        <th nzWidth="20%">Type</th>
+                        <th nzWidth="20%">Version</th>
+                        <th nzWidth="15%">Onboarding State</th>
+                        <th nzWidth="20%">Operational State</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let item of nzTable.data; let i = index; ">
+                        <td>{{item.id}}</td>
+                        <td>{{item.name}}</td>
+                        <td>{{item.type}}</td>
+                        <td>{{item.version}}</td>
+                        <td>
+                            <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+                                            'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
+                            <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
+                        </td>
+                        <td>
+                            <i class="anticon anticon-upload upicon" #upload_icon (click)="updataPnfService(item.id)"></i>
+                            <i class="anticon anticon-download" (click)="downloadPnfService(item.id)"  *ngIf="item.uuid"></i>
+                            <i class="anticon anticon-delete" (click)="deletePnfService(i,item.id)" id="{{ item.id }}"></i>
+                        </td>
+                    </tr>
+                </tbody>
+            </nz-table>
+        </div> -->
+        <div class="list" *ngIf="tab === 'PNF'">
+            <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+                [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
+                [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
+                <thead (nzSortChange)="sort($event)" nzSingleSort>
+                    <tr>
+                        <th nzWidth="5%">NO</th>
+                        <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
+                        <th nzWidth="15%">Version</th>
+                        <th nzWidth="20%">Onboarding State</th>
+                        <th nzWidth="20%">usageState</th>
+                        <th nzWidth="25%">Operation button</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
+                    <tr *ngFor="let item of nzTable.data; let i = index; ">
+                        <!-- <td>{{i+1}}</td> -->
+                        <td>{{item.id}}</td>
+                        <td>{{item.pnfdName}}</td>
+                        <td>{{item.pnfdVersion}}</td>
+                        <td>{{item.pnfdOnboardingState}}</td>
+                        <td>{{item.pnfdUsageState}}</td>
+                        <!-- <td>
+        <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+        'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
+        <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
+        </td> -->
+                        <td>
+                            <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
+                            <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)"
+                                *ngIf="item.uuid"></i>
+                            <i class="anticon anticon-download" (click)="downloadService(item.id)"></i>
+                            <i class="anticon anticon-delete" (click)="deleteService(i,item.id)" id="{{ item.id }}"></i>
+                        </td>
+                    </tr>
+                    <!-- </ng-template> -->
+                </tbody>
+            </nz-table>
+        </div>
+    </nz-tab>
+</nz-tabset>
\ No newline at end of file