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