gerrit.onap Code Review - portal/sdk.git/blob

   1 <app-save-sql-changes-dialog-component [(visible)]="showSaveColDialog">
   2
   3     <div class="card">
   4         <div class="card-body" style="height: 200px;">
   5             <div class="modalTitle">{{EditColstatus}}</div>
   6             <button *ngIf="SQLclosable" (click)="close()" aria-label="Close" class="dialog__close-btn">X</button>
   7             <br/>
   8             <label>{{EditColmessage}}</label>
   9         </div>
  10         <div class="card-footer"style="width: 500px;">
  11             <button (click)="close()" class="btn btn-alt btn-small">Close</button>
  12         </div>
  13     </div>
  14 </app-save-sql-changes-dialog-component>
  15
  16
  17
  18
  19 <app-columns-edit-component [(visible)]="showDialog">
  20     <div class="card">
  21       <div class="card-header">
  22           <div class="modalTitle">{{message}}</div>
  23           <button *ngIf="closable" (click)="close()" aria-label="Close" class="dialog__close-btn">X</button>
  24           <br/>
  25       </div>
  26         <div class="card-body" style="width: 1000px; height: 532px; ">
  27             <div style="height:500px; overflow: scroll;">
  28                 <div class="tab-pane">
  29                     <app-edit-drill-down-link *ngIf="showEditDrillDownPage" [reportId]="reportId" [drillDownObj]="drillDownObj" (completed)="onCompleted($event)" >
  30
  31                       </app-edit-drill-down-link>
  32                       <div *ngIf="!showEditDrillDownPage">
  33                     <div class="field-group">
  34                         <label class="defaultFontSize1">Column ID:</label><label class="boxMargin defaultFontSize">{{finalEditRowGetObj.colId}}</label>
  35                      </div>
  36                      <br/>
  37                      <br/>
  38                      <div>
  39                         <label class="defaultFontSize1">Column Name:</label><label class="boxMargin defaultFontSize">{{finalEditRowGetObj.colName}}</label>
  40                      </div>
  41                      <br/>
  42                      <br/>
  43                      <div>
  44                         <label class="defaultFontSize1">Depends on formfield:</label><label><input  class=" defaultFontSize" id="depeondsOnForField" type="text"  [(ngModel)]="dependsOnFormFields" value="{{finalEditRowGetObj.depeondsOnForField}}"/></label>
  45                      </div>
  46                      <br/>
  47                      <br/>
  48                      <div>
  49                         <label class="defaultFontSize1" for="dataType">Data Type:</label>
  50                         <select  class="browser-default custom-select"  required="required" placeholder="Select Report Type" [(ngModel)]="dataType"  value="{{finalEditRowGetObj.dataType}}">
  51                             <option class="defaultFontSize1" selected>Select Data Type  </option>
  52                             <option class="defaultFontSize1" value="Number" >Number</option>
  53                             <option class="defaultFontSize1" value="Date" >Date</option>
  54                             <option class="defaultFontSize1" value="Character" >Character</option>
  55                             <option class="defaultFontSize1" value="Hyperlink" >Hyperlink</option>
  56                           </select>
  57                      </div>
  58                      <br/>
  59                      <div>
  60                         <label class="defaultFontSize1">Group By Pos:</label><label><input  class="defaultFontSize" id="groupByPos" type="text"  [(ngModel)]="groupByPos" value="{{finalEditRowGetObj.groupByPos}}"/></label>
  61                      </div>
  62                      <br/>
  63                      <br/>
  64                      <div>
  65                         <label class="defaultFontSize1">Custom Text for Sub-Total:</label><label><input class="defaultFontSize" id="subTotalCustomText" type="text"  [(ngModel)]="customTextForSubTotal" value="{{finalEditRowGetObj.subTotalCustomText}}"/></label>
  66                      </div>
  67                      <br/>
  68                      <br/>
  69                      <div>
  70                         <label class="defaultFontSize1">Hide Repeated Values:</label>
  71                           <label class="defaultFontSize1" for="hideFormFieldsAfterRun" class="checkbox">
  72                               <input id="hideFormFieldsAfterRun" type="checkbox"  class="ng-valid ng-dirty ng-valid-parse ng-touched" [(ngModel)]="hideRepeatedValues" value="{{finalEditRowGetObj.hideRepeatedKey}}"><i class="skin"></i><span></span>
  73                             </label>
  74                      </div>
  75                      <br/>
  76                      <br/>
  77                      <div>
  78                         <label class="defaultFontSize1">Multi Group Column Level:</label>
  79                         <label><select class="browser-default custom-select defaultFontSize"  required="required" placeholder="Select Report Type" [(ngModel)]="multiGroupColumnLevel"  value="{{finalEditRowGetObj.multiGroupColumnLevel}}">
  80                             <option class="defaultFontSize1" selected>Select Level  </option>
  81                             <option  class="defaultFontSize1" value="1" >1</option>
  82                             <option  class="defaultFontSize1" value="2" >2</option>
  83                             <option class="defaultFontSize1"  value="3" >3</option>
  84                             <option class="defaultFontSize1"  value="4" >4</option>
  85                           </select>
  86                         </label>
  87                      </div>
  88                      <br/>
  89                      <br/>
  90                      <div>
  91                         <label class="defaultFontSize1">Multi group Column Range : Colspan:</label><label><input class="defaultFontSize" id="colspan" type="text"  [(ngModel)]="colspan" value="{{finalEditRowGetObj.colspan}}"/></label>
  92                      </div>
  93                      <br/>
  94                      <br/>
  95                      <div>
  96                       <label class="displayName">Display Name:</label><label><input class="defaultFontSize" id="displayName" type="text"  [(ngModel)]="displayName" value="{{finalEditRowGetObj.displayName}}"/></label>
  97                    </div>
  98                    <br/>
  99                    <br/>
 100                      <div>
 101                         <label class="defaultFontSize1">Display Width (In Pxls):</label><label><input class="defaultFontSize" id="displayWidthInPixel" type="text"  [(ngModel)]="displayWidthInPixel" value="{{finalEditRowGetObj.displayWidthInPixel}}"/></label>
 102                      </div>
 103                      <br/>
 104                      <br/>
 105                      <div>
 106                         <label class="defaultFontSize1">No Wrap ?:</label>
 107                         <label class="defaultFontSize" for="noWrap" class="checkbox">
 108                             <input id="noWrap" type="checkbox"  class="ng-valid ng-dirty ng-valid-parse ng-touched" [(ngModel)]="noWrap" value="{{finalEditRowGetObj.noWrap}}"><i class="skin"></i><span></span>
 109                           </label>
 110                      </div>
 111                      <br/>
 112                      <br/>
 113                      <div>
 114                         <label class="defaultFontSize1">Indent Parameter to display value:</label>
 115                         <label><select class="browser-default custom-select defaultFontSize"  required="required" placeholder="Select Indent" [(ngModel)]="indentation"  value="{{finalEditRowGetObj.indentation}}">
 116                             <option class="defaultFontSize" selected>Select Indent  </option>
 117                             <option  class="defaultFontSize" value="1" >1</option>
 118                             <option class="defaultFontSize"  value="2" >2</option>
 119                             <option class="defaultFontSize"  value="3" >3</option>
 120                           </select>
 121                         </label>
 122                      </div>
 123                      <br/>
 124                      <br/>
 125                      <div>
 126                         <label class="defaultFontSize1">Display Alignment:</label>
 127                         <label><select class="browser-default custom-select defaultFontSize"  required="required" placeholder="Select Report Type" [(ngModel)]="displayAlignment"  value="{{finalEditRowGetObj.displayAlignment}}">
 128                             <option class="defaultFontSize" selected>Select Alignment  </option><option value="Left" >Left</option>
 129                             <option class="defaultFontSize"  value="Center" >Center</option>
 130                             <option class="defaultFontSize"  value="Right" >Right</option>
 131                           </select>
 132                         </label>
 133                      </div>
 134                      <br/>
 135                      <br/>
 136                      <div>
 137                         <label class="defaultFontSize1">Display Header Alignment:</label>
 138                         <label><select class="browser-default custom-select defaultFontSize"  required="required" placeholder="Select Report Type" [(ngModel)]="displayHeaderAlignment"  value="{{finalEditRowGetObj.displayHeaderAlignment}}">
 139                             <option selected>Select Header Alignment  </option>
 140                             <option value="Left" >Left</option>
 141                             <option value="Center" >Center</option>
 142                             <option value="Right" >Right</option>
 143                           </select>
 144                         </label>
 145                      </div>
 146                      <br/>
 147                      <br/>
 148                      <div>
 149                         <label class="defaultFontSize1">Sortable:</label>
 150                         <label  class="defaultFontSize" for="sortable" class="checkbox">
 151                             <input id="sortable" type="checkbox"  class="ng-valid ng-dirty ng-valid-parse ng-touched" [(ngModel)]="sortable" value="{{finalEditRowGetObj.sortable}}"><i class="skin"></i><span></span>
 152                           </label>
 153                      </div>
 154                      <br/>
 155                      <br/>
 156                      <div>
 157                         <label class="defaultFontSize1">Visible:</label>
 158                         <label  class="defaultFontSize" for="visible" class="checkbox">
 159                             <input id="visible" type="checkbox" class="ng-valid ng-dirty ng-valid-parse ng-touched" [(ngModel)]="visible" value="true"><i class="skin"></i><span></span>
 160                           </label>
 161                      </div>
 162                      <br/>
 163                      <br/>
 164                      <div>
 165                         <label class="defaultFontSize1">Drill-down Link: <mat-icon aria-hidden="false" aria-label="edit"  (click)="drillDownLinkPage()">edit</mat-icon> </label>
 166                         <label><select class="browser-default custom-select defaultFontSize"  required="required" placeholder="Select Report Type" [(ngModel)]="drilldownURL"  value="{{finalEditRowGetObj.drilldownURL}}">
 167                             <option class="defaultFontSize" selected>Select Drill Down Link  </option>
 168                             <option  class="defaultFontSize" *ngFor="let URLObj of URLListObjArray" value="{{URLObj.id}}" >{{URLObj.name}}</option>
 169                           </select>
 170                         </label>
 171                      </div>
 172                      <br/>
 173                      <br/>
 174                      <div>
 175                         <label class="defaultFontSize1">Total for the column:</label>
 176                         <label><select class="browser-default custom-select defaultFontSize"  required="required" placeholder="Select Report Type" [(ngModel)]="displayTotal"  value="{{finalEditRowGetObj.displayTotal}}">
 177                             <option selected>Select Total  </option>
 178                             <option *ngFor="let TotalListObj of TotalColListObjArray" value="{{TotalListObj.id}}" >{{TotalListObj.id}}</option>
 179                           </select>
 180                         </label>
 181                      </div>
 182                     </div>
 183                 </div>
 184             </div>
 185         </div>
 186         <div class="card-footer" style="width: 1000px; padding-left: 770px;">
 187             <button *ngIf="!showConfirmButton" (click)="save();" class="btn btn-alt btn-small">Save</button>&nbsp;
 188             <button *ngIf="showConfirmButton" (click)="complete();" class="btn btn-alt btn-small">Confirm</button>&nbsp;&nbsp;
 189             <button (click)="close()" class="btn btn-alt btn-small">Cancel</button>
 190         </div>
 191     </div>
 192 </app-columns-edit-component>
 193
 194     <div *ngIf="showSpinner">
 195         <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
 196     </div>
 197
 198
 199
 200 <div class="app-data-table">
 201
 202   <table mat-table class="full-width-table app-data-table" matSort aria-label="Elements">
 203     <!-- Id Column -->
 204     <ng-container matColumnDef="id">
 205       <th mat-header-cell *matHeaderCellDef mat-sort-header class="defaultFontSize">ID</th>
 206       <td mat-cell *matCellDef="let row">{{row.id}}</td>
 207     </ng-container>
 208
 209     <!-- No Column -->
 210     <ng-container matColumnDef="no">
 211       <th mat-header-cell *matHeaderCellDef mat-sort-header class="defaultFontSize">NO</th>
 212       <td mat-cell *matCellDef="let row">{{row.no}}</td>
 213     </ng-container>
 214
 215     <!-- Name Column -->
 216     <ng-container matColumnDef="name">
 217         <th mat-header-cell *matHeaderCellDef mat-sort-header class="defaultFontSize">NAME</th>
 218         <td mat-cell *matCellDef="let row">{{row.name}}</td>
 219       </ng-container>
 220
 221     <!-- Name Column -->
 222       <ng-container matColumnDef="edit">
 223           <th mat-header-cell *matHeaderCellDef mat-sort-header class="defaultFontSize">EDIT</th>
 224           <td mat-cell *matCellDef="let row"><mat-icon aria-hidden="false" aria-label="edit" (click)="editRecord(row.id)">edit</mat-icon></td>
 225
 226         </ng-container>
 227
 228     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
 229     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 230   </table>
 231
 232   <mat-paginator #paginator
 233       [length]="dataSource?.data?.length"
 234       [pageIndex]="0"
 235       [pageSize]="25"
 236       [pageSizeOptions]="[25, 50, 100, 250]">
 237   </mat-paginator>
 238 </div>
 239