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