From ef9130dd7124057cca4bca7e210430febd4a1847 Mon Sep 17 00:00:00 2001
From: cyuamber <xuranyjy@chinamobile.com>
Date: Wed, 25 Sep 2019 14:29:06 +0800
Subject: feat: fix ns file upload logic of onboard page

Change-Id: I84e144f53d170ca11b949b458083de1c4f12077f
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
---
 .../onboard-vnf-vm/onboard-vnf-vm.component.html   | 52 ++++++++++------------
 1 file changed, 24 insertions(+), 28 deletions(-)

(limited to 'usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html')

diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html
index 4f865ff3..787d76b6 100644
--- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html
+++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html
@@ -17,7 +17,7 @@
     <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)">
         <!-- nsList -->
         <div class="list" *ngIf="tab === 'NS'">
-            <div style="width:100%;height: 30%;margin-bottom: 1%">
+            <div  class="listUploadContainer">
                 <div class="listupload">
                     <nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS">
                         <p class="ant-upload-drag-icon">
@@ -26,43 +26,39 @@
                         <p class="ant-upload-text"> {{"i18nTextDefine_Click_CSAR_File" | translate}} </p>
                         <p class="ant-upload-hint"></p>
                     </nz-upload>
-                    <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0"
-                        style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;">
+                    <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0" class="upload">
                         {{ nsuploading ? 'Uploading' : 'Start Upload' }}
                     </button>
                 </div>
                 <div class="listlin"></div>
                 <div class="listfile">
-                    <div style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
-                    <div class="nouploadfile">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
-                    <div style="height:80%;overflow: auto">
-                        <div class="listfilebgc" *ngFor="let itemns of nsRightList">
-                            <div>
-                                <i class="anticon anticon-link"></i>
-                            </div>
-                            <div class="color" [ngClass]="{'progress':itemns.status == true}">{{itemns.name}}</div>
-                            <div class="color" *ngIf="itemns.status">
-                                <nz-progress [nzPercent]="itemns.progress" [nzShowInfo]="false"></nz-progress>
-                            </div>
-                            <div class="color" *ngIf="!itemns.status">
-                                <span *ngIf="itemns.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
-                                <span *ngIf="itemns.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
-                            </div>
-                            <div *ngIf="!itemns.status">
-                                <i class="anticon anticon-check-circle" *ngIf="itemns.success == 0" style="color:#7BC7F3!important;"></i>
-                                <i class="anticon anticon-exclamation-circle"  *ngIf="itemns.success == 1" style="color:#fb5c5c!important;"></i>
-                            </div>
+                    <div class="listFileTitle"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
+                    <div class="nouploadfile" [style.display]="isNone">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
+                    <div class="listfilebgc" *ngIf="nsfile">
+                        <i class="anticon anticon-link icon"></i>
+                        <div class="color" [ngClass]="{'progress':nsfile.status}">{{nsfile.name}}</div>
+                        <div class="color" *ngIf="nsfile.status">
+                            <nz-progress [nzPercent]="nsfile.progress" [nzShowInfo]="false"></nz-progress>
+                        </div>
+                        <div class="color" *ngIf="!nsfile.status">
+                            <span *ngIf="nsfile.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
+                            <span *ngIf="nsfile.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
+                        </div>
+                        <div *ngIf="!nsfile.status">
+                            <i class="anticon anticon-check-circle" *ngIf="nsfile.success == 0" class="success"></i>
+                            <i class="anticon anticon-exclamation-circle"  *ngIf="nsfile.success == 1" class="fail"></i>
                         </div>
                     </div>
                 </div>
             </div>
-            <nz-spin [nzSpinning]="isSpinning" style="height: 69%">
+            <nz-spin [nzSpinning]="isSpinning" class="listContainer">
                 <div class="mask" *ngIf="isSpinning"></div>
+                
                 <nz-table #nzTable [nzData]="nstableData" nzShowSizeChanger [nzFrontPagination]="true"
                     [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="nspageSize"
                     [(nzPageIndex)]='nspageIndex' [nzLoading]="loading" nzSize="middle">
                     <thead (nzSortChange)="sort($event)" nzSingleSort>
-                        <tr>
+                        <tr class="theadColor">
                             <th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th>
                             <th nzWidth="15%" nzShowSort nzSortKey="name"> {{"i18nTextDefine_Name" | translate}} </th>
                             <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th>
@@ -108,7 +104,7 @@
         </div>
         <!-- VNFList -->
         <div class="list" *ngIf="tab === 'VNF'">
-            <div style="width:100%;height: 30%;margin-bottom: 1%">
+            <div  class="listUploadContainer">
             <div class="listupload">
                 <nz-upload nzType="drag" [(nzFileList)]="fileListVNF" [nzBeforeUpload]="beforeUploadVNF">
                     <p class="ant-upload-drag-icon">
@@ -147,7 +143,7 @@
                 </div>
             </div>
             </div>
-            <nz-spin [nzSpinning]="isSpinning"  style="height: 69%">
+            <nz-spin [nzSpinning]="isSpinning" class="listContainer">
                 <div class="mask" *ngIf="isSpinning"></div>
                 <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true"
                     [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="vnfpageSize"
@@ -190,7 +186,7 @@
         </div>
         <!-- PNFList -->
         <div class="list" *ngIf="tab === 'PNF'">
-            <div style="width:100%;height: 30%;margin-bottom: 1%">
+            <div class="listUploadContainer">
             <div class="listupload">
                 <nz-upload nzType="drag" [(nzFileList)]="fileListPNF" [nzBeforeUpload]="beforeUploadPNF">
                     <p class="ant-upload-drag-icon">
@@ -229,7 +225,7 @@
                 </div>
             </div>
             </div>
-            <nz-spin [nzSpinning]="isSpinning" style="height: 69%">
+            <nz-spin [nzSpinning]="isSpinning" class="listContainer">
                 <div class="mask" *ngIf="isSpinning"></div>
                 <nz-table #nzTable [nzData]="pnftableData" nzShowSizeChanger [nzFrontPagination]="true"
                     [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pnfpageSize"
-- 
cgit 1.2.3-korg