portal-FE-common/src/app/pages/role/bulk-upload-role/bulk-upload-role.component.html

   1 <!--
   2   ============LICENSE_START==========================================
   3   ONAP Portal
   4   ===================================================================
   5   Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
   6   ===================================================================
   7
   8   Unless otherwise specified, all software contained herein is licensed
   9   under the Apache License, Version 2.0 (the "License");
  10   you may not use this software except in compliance with the License.
  11   You may obtain a copy of the License at
  12
  13               http://www.apache.org/licenses/LICENSE-2.0
  14
  15   Unless required by applicable law or agreed to in writing, software
  16   distributed under the License is distributed on an "AS IS" BASIS,
  17   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18   See the License for the specific language governing permissions and
  19   limitations under the License.
  20
  21   Unless otherwise specified, all documentation contained herein is licensed
  22   under the Creative Commons License, Attribution 4.0 Intl. (the "License");
  23   you may not use this documentation except in compliance with the License.
  24   You may obtain a copy of the License at
  25
  26               https://creativecommons.org/licenses/by/4.0/
  27
  28   Unless required by applicable law or agreed to in writing, documentation
  29   distributed under the License is distributed on an "AS IS" BASIS,
  30   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  31   See the License for the specific language governing permissions and
  32   limitations under the License.
  33
  34   ============LICENSE_END============================================
  35
  36
  37   -->
  38
  39 <div class="container">
  40   <div class="modal-header">
  41     <h4 class="modal-title">{{title}}</h4>
  42     <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')">
  43       <span aria-hidden="true">&times;</span>
  44     </button>
  45   </div>
  46   <div class="modal-body">
  47     <div *ngIf="dialogState === 1">
  48       <mat-form-field>
  49         <mat-label> Select Upload Type: </mat-label>
  50         <mat-select [(ngModel)]="selectedUploadDropdown">
  51           <mat-option *ngFor="let uploadOpt of ngRepeatBulkUploadOptions" [value]="uploadOpt">
  52             {{uploadOpt.title}}</mat-option>
  53         </mat-select>
  54       </mat-form-field>
  55     </div>
  56     <div *ngIf="dialogState === 2">
  57       <div class="upload-instructions">Select Upload File:</div>
  58       <!-- input type=file is difficult to style.
  59              Instead use a label styled as a button. -->
  60       <label class="file-label">
  61         <input type="file" (change)="onFileSelect($event.target)" accept="text/plain,.csv" />
  62       </label>{{selectedFile}}
  63       <div *ngIf="selectedUploadDropdown.value === 'functions'" class="upload-instructions">File must be .csv or .txt
  64         and one entry per line with this format:
  65         <pre>Function Type, Function Instance, Function Action, Function Name</pre>
  66       </div>
  67       <div *ngIf="selectedUploadDropdown.value === 'roles'" class="upload-instructions">File must be .csv or .txt and
  68         one entry per line with this format:
  69         <pre>Role Name, Priority (Optional)</pre>
  70       </div>
  71       <div *ngIf="selectedUploadDropdown.value === 'roleFunctions'" class="upload-instructions">File must be .csv or
  72         .txt and one entry per line with this format:
  73         <pre>Role Name, Function Type, Function Instance, Function Action, Function Name</pre>
  74       </div>
  75       <div *ngIf="selectedUploadDropdown.value === 'globalRoleFunctions'" class="upload-instructions">File must be .csv
  76         or .txt and one entry per line with this format:
  77         <pre>Global Role Name, Function Type, Function Instance, Function Action, Function Name</pre>
  78       </div>
  79     </div>
  80     <div class="bulk-upload" *ngIf="dialogState === 3">
  81
  82       <div *ngIf="selectedUploadDropdown.value === 'roles' && !isProcessing">Click OK to upload the valid
  83         roles. Invalid or existing roles will be ignored.
  84         <p style="font-size: 80%;">
  85           <span id="required" style="color: Red;" visible="false">*</span>Name can only contain alphanumeric
  86           characters, dots(.), forward slashes(/), and underscores(_)
  87         </p>
  88       </div>
  89
  90       <div *ngIf="selectedUploadDropdown.value === 'functions' && !isProcessing">Click OK to upload the valid
  91         functions. Invalid or existing functions will be ignored.
  92         <p style="font-size: 80%;">
  93           <span id="required" style="color: Red; font-size: 180%;" visible="false">*</span>Type can only contain
  94           alphanumeric
  95           characters, dots(.) and underscores(_)
  96         </p>
  97         <p style="font-size: 80%;">
  98           <span id="required" style="color: Red; font-size: 180%;" visible="false">*</span>Action can only contain
  99           alphanumeric
 100           characters, hyphens(-), dots(.) and underscores(_) and single
 101           asterisk character(*)
 102         </p>
 103         <p style="font-size: 80%;">
 104           <span id="required" style="color: Red; font-size: 180%;" visible="false">*</span>Instance/Code can only
 105           contain alphanumeric
 106           characters, hyphens(-), dots(.), colons(:), forwardSlash(/) ,
 107           asterisk(*) and underscores(_)
 108         </p>
 109         <p style="font-size: 80%;">
 110           <span id="required" style="color: Red; font-size: 180%;" visible="false">*</span>Name can only contain
 111           alphanumeric
 112           characters, spaces, hyphens(-), dots(.) and underscores(_)
 113         </p>
 114       </div>
 115
 116       <div *ngIf="selectedUploadDropdown.value === 'roleFunctions' && !isProcessing">Click OK to upload the valid
 117         role functions. Invalid or existing functions will be ignored.
 118       </div>
 119       <div *ngIf="selectedUploadDropdown.value === 'globalRoleFunctions' && !isProcessing">Click OK to upload the valid
 120         global role functions. Invalid or existing functions will be ignored.
 121       </div>
 122       <!-- progress indicator -->
 123       <div class="upload-instructions" [hidden]="!isProcessing">
 124         {{progressMsg}}
 125         <br>
 126         <br>
 127         <span class="onap-spinner"></span>
 128       </div>
 129
 130       <!-- progress indicator -->
 131       <div class="upload-instructions" [hidden]="!isProcessedRecords">
 132         {{conformMsg}}
 133       </div>
 134       <div [hidden]="isProcessing || isProcessedRecords">
 135
 136         <table [hidden]="selectedUploadDropdown.value !== 'functions'" mat-table
 137           [dataSource]="uploadFunctionsDataSource">
 138
 139           <ng-container matColumnDef="line">
 140             <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Line
 141             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">{{element.line}}
 142             </td>
 143           </ng-container>
 144           <ng-container matColumnDef="type">
 145             <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Type
 146             <td id="rowheader_t1_{{i}}-roles" mat-cell *matCellDef="let element; let i=index;">
 147               {{element.type}}
 148             </td>
 149           </ng-container>
 150           <ng-container matColumnDef="instance">
 151             <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Instance/Code
 152             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">
 153               {{element.instance  }}
 154             </td>
 155           </ng-container>
 156           <ng-container matColumnDef="action">
 157             <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Action
 158             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">
 159               {{element.action}}
 160             </td>
 161           </ng-container>
 162           <ng-container matColumnDef="name">
 163             <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Name
 164             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">
 165               {{element.name}}
 166             </td>
 167           </ng-container>
 168           <ng-container matColumnDef="status">
 169             <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Status
 170             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">
 171               {{element.status}}
 172             </td>
 173           </ng-container>
 174
 175           <tr mat-header-row *matHeaderRowDef="displayedFunctionColumns; sticky: true"></tr>
 176           <tr mat-row id="table-row-{{i}}" *matRowDef="let row; columns: displayedFunctionColumns; let i = index;"></tr>
 177         </table>
 178
 179         <table [hidden]="selectedUploadDropdown.value !== 'roles'" mat-table [dataSource]="uploadRolesDataSource">
 180
 181           <ng-container matColumnDef="line">
 182             <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Line
 183             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">{{element.line}}
 184             </td>
 185           </ng-container>
 186           <ng-container matColumnDef="name">
 187             <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Name
 188             <td id="rowheader_t1_{{i}}-roles" mat-cell *matCellDef="let element; let i=index;">
 189               {{element.name}}
 190             </td>
 191           </ng-container>
 192           <ng-container matColumnDef="priority">
 193             <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Priority
 194             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">
 195               {{element.priority}}
 196             </td>
 197           </ng-container>
 198           <ng-container matColumnDef="status">
 199             <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Status
 200             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">
 201               {{element.status}}
 202             </td>
 203           </ng-container>
 204
 205           <tr mat-header-row *matHeaderRowDef="displayedRoleColumns; sticky: true"></tr>
 206           <tr mat-row id="table-row-{{i}}" *matRowDef="let row; columns: displayedRoleColumns; let i = index;"></tr>
 207         </table>
 208
 209
 210         <table [hidden]="selectedUploadDropdown.value !== 'roleFunctions'" mat-table
 211           [dataSource]="uploadRoleFunctionsDataSource">
 212
 213           <ng-container matColumnDef="line">
 214             <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Line
 215             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">{{element.line}}
 216             </td>
 217           </ng-container>
 218           <ng-container matColumnDef="role">
 219             <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Role Name
 220             <td id="rowheader_t1_{{i}}-roles" mat-cell *matCellDef="let element; let i=index;">
 221               {{element.role}}
 222             </td>
 223           </ng-container>
 224           <ng-container matColumnDef="type">
 225             <th id="rowheader-result" mat-header-cell *matHeaderCellDef>Function Type
 226             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">
 227               {{element.type}}
 228             </td>
 229           </ng-container>
 230           <ng-container matColumnDef="instance">
 231             <th id="rowheader-result" mat-header-cell *matHeaderCellDef>Function Instance
 232             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">
 233               {{element.instance}}
 234             </td>
 235           </ng-container>
 236           <ng-container matColumnDef="action">
 237             <th id="rowheader-result" mat-header-cell *matHeaderCellDef>Function Action
 238             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">
 239               {{element.action}}
 240             </td>
 241           </ng-container>
 242           <ng-container matColumnDef="name">
 243             <th id="rowheader-result" mat-header-cell *matHeaderCellDef>Function Name
 244             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">
 245               {{element.name}}
 246             </td>
 247           </ng-container>
 248           <ng-container matColumnDef="status">
 249             <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Status
 250             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">
 251               {{element.status}}
 252             </td>
 253           </ng-container>
 254
 255           <tr mat-header-row *matHeaderRowDef="displayedRoleFunctionColumns; sticky: true"></tr>
 256           <tr mat-row id="table-row-{{i}}" *matRowDef="let row; columns: displayedRoleFunctionColumns; let i = index;">
 257           </tr>
 258         </table>
 259
 260         <table [hidden]="selectedUploadDropdown.value !== 'globalRoleFunctions'" mat-table
 261           [dataSource]="uploadGlobalRoleFunctionsDataSource">
 262
 263           <ng-container matColumnDef="line">
 264             <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Line
 265             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">{{element.line}}
 266             </td>
 267           </ng-container>
 268           <ng-container matColumnDef="role">
 269             <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Global Role Name
 270             <td id="rowheader_t1_{{i}}-roles" mat-cell *matCellDef="let element; let i=index;">
 271               {{element.role}}
 272             </td>
 273           </ng-container>
 274           <ng-container matColumnDef="type">
 275             <th id="rowheader-result" mat-header-cell *matHeaderCellDef>Function Type
 276             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">
 277               {{element.type}}
 278             </td>
 279           </ng-container>
 280           <ng-container matColumnDef="instance">
 281             <th id="rowheader-result" mat-header-cell *matHeaderCellDef>Function Instance
 282             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">
 283               {{element.instance}}
 284             </td>
 285           </ng-container>
 286           <ng-container matColumnDef="action">
 287             <th id="rowheader-result" mat-header-cell *matHeaderCellDef>Function Action
 288             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">
 289               {{element.action}}
 290             </td>
 291           </ng-container>
 292           <ng-container matColumnDef="name">
 293             <th id="rowheader-result" mat-header-cell *matHeaderCellDef>Function Name
 294             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">
 295               {{element.name}}
 296             </td>
 297           </ng-container>
 298           <ng-container matColumnDef="status">
 299             <th id="rowheader-result" mat-header-cell *matHeaderCellDef> Status
 300             <td id="table-data-{{i}}" mat-cell *matCellDef="let element; let i = index;">
 301               {{element.status}}
 302             </td>
 303           </ng-container>
 304
 305           <tr mat-header-row *matHeaderRowDef="displayedGlobalRoleFunctionColumns; sticky: true"></tr>
 306           <tr mat-row id="table-row-{{i}}"
 307             *matRowDef="let row; columns: displayedGlobalRoleFunctionColumns; let i = index;"></tr>
 308         </table>
 309       </div>
 310     </div>
 311   </div>
 312   <div class="modal-footer">
 313     <button type="submit" class="btn btn-primary" [hidden]="dialogState !== 1"
 314       (click)="navigateUploadScreen()">Next</button> &nbsp;
 315     <button type="submit" class="btn btn-primary" [hidden]="dialogState !== 2"
 316       (click)="navigateSelectTypeUpload()">Back</button>
 317     <button type="submit" class="btn btn-primary" [hidden]="dialogState !== 3" (click)="updateInDB()">Ok</button>
 318     <button type="submit" class="btn btn-primary" [hidden]="dialogState !== 3"
 319       (click)="navigateUploadScreen()">Cancel</button>
 320     <button type="button" class="btn btn-primary" [hidden]="dialogState !== 1"
 321       (click)="activeModal.close('Close')">Cancel</button>
 322   </div>
 323 </div>