fix the issue with the alignment in the order service, added the SOTN table for UNI

Issue-ID: USECASEUI-387

Signed-off-by: seshukm <seshu.kumar.m@huawei.com>
Change-Id: Ibe9b54ab3fce8892e5c9dd7c2467d578e9f8ef5c

2 files changed, 43 insertions, 22 deletions

diff --git a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.html b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.html
index 4adf3747..a89ef1af 100644
--- a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.html
+++ b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.html
@@ -4,7 +4,7 @@
       <tr>
         <td width="4%"></td>
         <td width="96%">
-          <button style="float:right" (click)="selectOrderSiteData()" nz-button nzType="primary">Create Service</button>
+          <button style="float:right" [disabled]="buttonDisabled" (click)="selectOrderSiteData()" nz-button nzType="primary">Create Service</button>
         </td>
       </tr>
       <ng-template ngFor let-data [ngForOf]="nzExpandTable.data">
@@ -95,7 +95,7 @@
                       </div>
                       <div class="sotn-form ">
                         <nz-form-item  class="mar-0x">
-                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_colorAware" ><span class="form-lable-font">Color Aware</span></nz-form-label>
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_colorAware" ><span class="form-lable-font">{{ "i18nTextDefine_colorAware" | translate }}</span></nz-form-label>
                           <nz-form-control [nzSm]="14" [nzXs]="24">
                             <input nz-input formControlName="l2vpn_colorAware" id="l2vpn_colorAware" [(ngModel)]="l2vpn.l2vpn_colorAware">
                           </nz-form-control>
@@ -107,7 +107,7 @@
                           </nz-form-control>
                         </nz-form-item>
                         <nz-form-item class="mar-0x  child">
-                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_couplingFlag"><span class="form-lable-font">Coupling Flag</span></nz-form-label>
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_couplingFlag"><span class="form-lable-font">{{ "i18nTextDefine_couplingFlag" | translate }}</span></nz-form-label>
                           <nz-form-control [nzSm]="14" [nzXs]="24">
                             <input nz-input formControlName="l2vpn_couplingFlag" id="l2vpn_couplingFlag" [(ngModel)]="l2vpn.l2vpn_couplingFlag"  (keypress)="numberOnly($event)">
                           </nz-form-control>
@@ -153,45 +153,45 @@
                     <div style="display: flex; justify-content: space-around;">
                       <div class="sotn-form">
                         <nz-form-item  class="mar-0x">
-                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="sotnuni_cVLAN" ><span class="form-lable-font">VLAN</span></nz-form-label>
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="sotnuni_cVLAN" ><span class="form-lable-font">UNI</span></nz-form-label>
                           <nz-form-control [nzSm]="14" [nzXs]="24">
                             <input nz-input formControlName="sotnuni_cVLAN" id="sotnuni_cVLAN" [(ngModel)]="uni.sotnuni_cVLAN">
                           </nz-form-control>
                         </nz-form-item>
                       </div>
-                      <div class="sotn-form ">
+                      <div class="sotn-form">
                         <nz-form-item  class="mar-0x">
-                          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="sotnuni_tpId" ><span class="form-lable-font">TP ID</span></nz-form-label>
+                          <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="sotnuni_tpId" ><span class="form-lable-font">{{ "i18nTextDefine_terminationPoint" | translate }}</span></nz-form-label>
                           <nz-form-control [nzSm]="14" [nzXs]="24">
                             <input nz-input formControlName="sotnuni_tpId" id="sotnuni_tpId" [(ngModel)]="uni.sotnuni_tpId">
                           </nz-form-control>
                         </nz-form-item>
                       </div>
-                      <div class="sotn-form ">
+                      <div class="sotn-form" style="width:10%">
                         <nz-form-item  class="mar-0x">
                           <nz-form-control [nzSm]="14" [nzXs]="24">
-                            <button (click)="addUNI($event)" nz-button nzType="primary">Add</button>
+                            <button (click)="addUNI($event)" nz-button nzType="primary">{{ "i18nTextDefine_Add" | translate }}</button>
                           </nz-form-control>
                         </nz-form-item>
                       </div>
                     </div>
-                    <nz-table #basicTable [nzData]="sotnUni" [nzShowPagination]="false">
-                      <thead>
+                    <div style="width:100%">
+                      <table class="tableStyle" *ngIf="sotnUni.length > 0">
                         <tr>
-                          <th>VLAN</th>
-                          <th>TP Id</th>
+                          <th>UNI</th>
+                          <th>{{ "i18nTextDefine_terminationPoint" | translate }}</th>
+                          <th>{{ "i18nTextDefine_Action" | translate }}</th>
                         </tr>
-                      </thead>
-                      <tbody>
-                          <tr *ngFor="let data of basicTable.data">
-                          <td>{{ data.sotnuni_cVLAN }}</td>
-                          <td>{{ data.sotnuni_tpId }}</td>
-                          <td>
-                            <a>Delete</a>
-                          </td>
+                        <tr *ngFor="let data of sotnUni">
+                          <td>{{data.sotnuni_cVLAN}}</td>
+                          <td>{{data.sotnuni_tpId}}</td>
+                          <td><a (click)="deletesotnUni(data)">{{ "i18nTextDefine_delete" | translate }}</a></td>
                         </tr>
-                      </tbody>
-                    </nz-table>
+                      </table>
+                      <div style="width: 80%;height: 5%;margin-top:30px;text-align: center"  *ngIf="sotnUni.length == 0">
+                        <strong>No Data</strong>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </ng-template>
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.less b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.less
index 5ac5c07d..9ed34a53 100644
--- a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.less
+++ b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.less
@@ -57,3 +57,24 @@ nz-table
     color: var(--on-primary);
 }
 
+.tableStyle {
+    width: 92%;
+    margin-left: 4%;
+    margin-right: 4%;
+    margin-top: 2%;
+    border: 2px solid lightgray;
+
+    tr {
+        th {
+            color: white;
+            background: lightgray;
+            // text-align: center;
+            // margin: 5px;
+            padding: 12px 8px;
+        }
+        td {
+            // border: 1px solid lightgray;
+            padding: 12px 8px;
+        }
+    }
+}
\ No newline at end of file