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