diff options
Diffstat (limited to 'ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.html')
| -rw-r--r-- | ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.html | 474 |
1 files changed, 267 insertions, 207 deletions
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.html index 0d4f3c80..4a8f2695 100644 --- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.html +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.html @@ -3,251 +3,311 @@ <div class="card"> <div class="card-body" style="height: 200px;"> <div class="modalTitle">{{EditColstatus}}</div> - <button *ngIf="SQLclosable" (click)="close()" aria-label="Close" class="dialog__close-btn">X</button> + <button (click)="close()" *ngIf="SQLclosable" aria-label="Close" class="dialog__close-btn">X</button> <br/> <label>{{EditColmessage}}</label> </div> - <div class="card-footer"style="width: 500px;"> + <div class="card-footer" style="width: 500px;"> <button (click)="close()" class="btn btn-alt btn-small">Close</button> </div> </div> </app-save-sql-changes-dialog-component> - - <app-columns-edit-component [(visible)]="showDialog"> <div class="card"> - <div class="card-header"> - <div class="modalTitle">{{message}}</div> - <button *ngIf="closable" (click)="close()" aria-label="Close" class="dialog__close-btn">X</button> - <br/> - </div> + <div class="card-header"> + <div class="modalTitle">{{message}}</div> + <button (click)="close()" *ngIf="closable" aria-label="Close" class="dialog__close-btn">X</button> + <br/> + </div> <div class="card-body" style="width: 1000px; height: 532px; "> <div style="height:500px; overflow: scroll; overflow-x: hidden;"> <div class="tab-pane"> - <app-edit-drill-down-link *ngIf="showEditDrillDownPage" [reportId]="reportId" [drillDownObj]="drillDownObj" (completed)="onCompleted($event)" > + <app-edit-drill-down-link (completed)="onCompleted($event)" *ngIf="showEditDrillDownPage" + [drillDownObj]="drillDownObj" [reportId]="reportId"> - </app-edit-drill-down-link> - <app-column-advanced-display *ngIf="showAdvancedDisplayPage" - [semaphoreArr]="semaphoreList" - [inputSemaphoreName]="semaphoreName" + </app-edit-drill-down-link> + <app-column-advanced-display (completed)="finishAdvancedDisplay($event)" + *ngIf="showAdvancedDisplayPage" [addNew]="addDisplay" - (completed)="finishAdvancedDisplay($event)" [columnName]="finalEditRowGetObj.colId"> + [columnList]="columnList" + [columnName]="finalEditRowGetObj.colId" + [inputSemaphoreName]="semaphoreName" + [semaphoreArr]="semaphoreList"> </app-column-advanced-display> - <div *ngIf="!showEditDrillDownPage && !showAdvancedDisplayPage"> - <div class="field-group"> - <label class="defaultFontSize1">Column ID:</label><label class="boxMargin defaultFontSize">{{finalEditRowGetObj.colId}}</label> - </div> - <br/> - <br/> - <div> - <label class="defaultFontSize1">Column Name:</label><label class="boxMargin defaultFontSize">{{finalEditRowGetObj.colName}}</label> - </div> - <br/> - <br/> - <div> - <label class="defaultFontSize1">Depends on formfield:</label><label><input class=" defaultFontSize" id="depeondsOnForField" type="text" [(ngModel)]="dependsOnFormFields" value="{{finalEditRowGetObj.depeondsOnForField}}"/></label> - </div> - <br/> - <br/> - <div> - <label class="defaultFontSize1" for="dataType">Data Type:</label> - <select class="browser-default custom-select" required="required" placeholder="Select Report Type" [(ngModel)]="dataType" value="{{finalEditRowGetObj.dataType}}"> - <option class="defaultFontSize1" selected>Select Data Type </option> - <option class="defaultFontSize1" value="Number" >Number</option> - <option class="defaultFontSize1" value="Date" >Date</option> - <option class="defaultFontSize1" value="Character" >Character</option> - <option class="defaultFontSize1" value="Hyperlink" >Hyperlink</option> - </select> - </div> - <br/> - <div> - <label class="defaultFontSize1">Group By Pos:</label><label><input class="defaultFontSize" id="groupByPos" type="text" [(ngModel)]="groupByPos" value="{{finalEditRowGetObj.groupByPos}}"/></label> - </div> - <br/> - <br/> - <div> - <label class="defaultFontSize1">Custom Text for Sub-Total:</label><label><input class="defaultFontSize" id="subTotalCustomText" type="text" [(ngModel)]="customTextForSubTotal" value="{{finalEditRowGetObj.subTotalCustomText}}"/></label> - </div> - <br/> - <br/> - <div> - <label class="defaultFontSize1">Hide Repeated Values:</label> - <label class="defaultFontSize1" for="hideFormFieldsAfterRun" class="checkbox"> - <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> + <div *ngIf="!showEditDrillDownPage && !showAdvancedDisplayPage"> + <div class="field-group"> + <label class="defaultFontSize1">Column ID:</label><label + class="boxMargin defaultFontSize">{{finalEditRowGetObj.colId}}</label> + </div> + <br/> + <br/> + <div> + <label class="defaultFontSize1">Column Name:</label><label + class="boxMargin defaultFontSize">{{finalEditRowGetObj.colName}}</label> + </div> + <br/> + <br/> + <div> + <label class="defaultFontSize1">Depends on formfield:</label><label><input + [(ngModel)]="dependsOnFormFields" class=" defaultFontSize" id="depeondsOnForField" + type="text" + value="{{finalEditRowGetObj.depeondsOnForField}}"/></label> + </div> + <br/> + <br/> + <div> + <label class="defaultFontSize1" for="dataType">Data Type:</label> + <select [(ngModel)]="dataType" class="browser-default custom-select" + placeholder="Select Report Type" required="required" + value="{{finalEditRowGetObj.dataType}}"> + <option class="defaultFontSize1" selected>Select Data Type</option> + <option class="defaultFontSize1" value="Number">Number</option> + <option class="defaultFontSize1" value="Date">Date</option> + <option class="defaultFontSize1" value="Character">Character</option> + <option class="defaultFontSize1" value="Hyperlink">Hyperlink</option> + </select> + </div> + <br/> + <div> + <label class="defaultFontSize1">Group By Pos:</label><label><input [(ngModel)]="groupByPos" + class="defaultFontSize" + id="groupByPos" + type="text" + value="{{finalEditRowGetObj.groupByPos}}"/></label> + </div> + <br/> + <br/> + <div> + <label class="defaultFontSize1">Custom Text for Sub-Total:</label><label><input + [(ngModel)]="customTextForSubTotal" class="defaultFontSize" id="subTotalCustomText" + type="text" + value="{{finalEditRowGetObj.subTotalCustomText}}"/></label> + </div> + <br/> + <br/> + <div> + <label class="defaultFontSize1">Hide Repeated Values:</label> + <label class="defaultFontSize1" class="checkbox" for="hideFormFieldsAfterRun"> + <input [(ngModel)]="hideRepeatedValues" class="ng-valid ng-dirty ng-valid-parse ng-touched" + id="hideFormFieldsAfterRun" + type="checkbox" + value="{{finalEditRowGetObj.hideRepeatedKey}}"><i class="skin"></i><span></span> + </label> + </div> + <br/> + <br/> + <div> + <label class="defaultFontSize1">Multi Group Column Level:</label> + <label><select [(ngModel)]="multiGroupColumnLevel" class="browser-default custom-select defaultFontSize" + placeholder="Select Report Type" required="required" + value="{{finalEditRowGetObj.multiGroupColumnLevel}}"> + <option class="defaultFontSize1" selected>Select Level</option> + <option class="defaultFontSize1" value="1">1</option> + <option class="defaultFontSize1" value="2">2</option> + <option class="defaultFontSize1" value="3">3</option> + <option class="defaultFontSize1" value="4">4</option> + </select> + </label> + </div> + <br/> + <br/> + <div> + <label class="defaultFontSize1">Multi group Column Range : Colspan:</label><label><input + [(ngModel)]="colspan" class="defaultFontSize" id="colspan" type="text" + value="{{finalEditRowGetObj.colspan}}"/></label> + </div> + <br/> + <br/> + <div> + <label class="displayName">Display Name:</label><label><input [(ngModel)]="displayName" + class="defaultFontSize" id="displayName" + type="text" + value="{{finalEditRowGetObj.displayName}}"/></label> + </div> + <br/> + <br/> + <div> + <label class="defaultFontSize1">Display Width (In Pxls):</label><label><input + [(ngModel)]="displayWidthInPixel" class="defaultFontSize" id="displayWidthInPixel" + type="text" + value="{{finalEditRowGetObj.displayWidthInPixel}}"/></label> + </div> + <br/> + <br/> + <div> + <label class="defaultFontSize1">No Wrap ?:</label> + <label class="defaultFontSize" class="checkbox" for="noWrap"> + <input [(ngModel)]="noWrap" class="ng-valid ng-dirty ng-valid-parse ng-touched" id="noWrap" + type="checkbox" value="{{finalEditRowGetObj.noWrap}}"><i + class="skin"></i><span></span> + </label> + </div> + <br/> + <br/> + <div> + <label class="defaultFontSize1">Indent Parameter to display value:</label> + <label><select [(ngModel)]="indentation" class="browser-default custom-select defaultFontSize" + placeholder="Select Indent" required="required" + value="{{finalEditRowGetObj.indentation}}"> + <option class="defaultFontSize" selected>Select Indent</option> + <option class="defaultFontSize" value="1">1</option> + <option class="defaultFontSize" value="2">2</option> + <option class="defaultFontSize" value="3">3</option> + </select> + </label> + </div> + <br/> + <br/> + <div> + <label class="defaultFontSize1">Display Alignment:</label> + <label><select [(ngModel)]="displayAlignment" class="browser-default custom-select defaultFontSize" + placeholder="Select Report Type" required="required" + value="{{finalEditRowGetObj.displayAlignment}}"> + <option class="defaultFontSize" selected>Select Alignment</option> + <option value="Left">Left</option> + <option class="defaultFontSize" value="Center">Center</option> + <option class="defaultFontSize" value="Right">Right</option> + </select> + </label> + </div> + <br/> + <br/> + <div> + <label class="defaultFontSize1">Display Header Alignment:</label> + <label><select [(ngModel)]="displayHeaderAlignment" class="browser-default custom-select defaultFontSize" + placeholder="Select Report Type" required="required" + value="{{finalEditRowGetObj.displayHeaderAlignment}}"> + <option selected>Select Header Alignment</option> + <option value="Left">Left</option> + <option value="Center">Center</option> + <option value="Right">Right</option> + </select> </label> - </div> - <br/> - <br/> - <div> - <label class="defaultFontSize1">Multi Group Column Level:</label> - <label><select class="browser-default custom-select defaultFontSize" required="required" placeholder="Select Report Type" [(ngModel)]="multiGroupColumnLevel" value="{{finalEditRowGetObj.multiGroupColumnLevel}}"> - <option class="defaultFontSize1" selected>Select Level </option> - <option class="defaultFontSize1" value="1" >1</option> - <option class="defaultFontSize1" value="2" >2</option> - <option class="defaultFontSize1" value="3" >3</option> - <option class="defaultFontSize1" value="4" >4</option> - </select> - </label> - </div> - <br/> - <br/> - <div> - <label class="defaultFontSize1">Multi group Column Range : Colspan:</label><label><input class="defaultFontSize" id="colspan" type="text" [(ngModel)]="colspan" value="{{finalEditRowGetObj.colspan}}"/></label> - </div> - <br/> - <br/> - <div> - <label class="displayName">Display Name:</label><label><input class="defaultFontSize" id="displayName" type="text" [(ngModel)]="displayName" value="{{finalEditRowGetObj.displayName}}"/></label> - </div> - <br/> - <br/> - <div> - <label class="defaultFontSize1">Display Width (In Pxls):</label><label><input class="defaultFontSize" id="displayWidthInPixel" type="text" [(ngModel)]="displayWidthInPixel" value="{{finalEditRowGetObj.displayWidthInPixel}}"/></label> - </div> - <br/> - <br/> - <div> - <label class="defaultFontSize1">No Wrap ?:</label> - <label class="defaultFontSize" for="noWrap" class="checkbox"> - <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> - </label> - </div> - <br/> - <br/> - <div> - <label class="defaultFontSize1">Indent Parameter to display value:</label> - <label><select class="browser-default custom-select defaultFontSize" required="required" placeholder="Select Indent" [(ngModel)]="indentation" value="{{finalEditRowGetObj.indentation}}"> - <option class="defaultFontSize" selected>Select Indent </option> - <option class="defaultFontSize" value="1" >1</option> - <option class="defaultFontSize" value="2" >2</option> - <option class="defaultFontSize" value="3" >3</option> - </select> - </label> - </div> - <br/> - <br/> - <div> - <label class="defaultFontSize1">Display Alignment:</label> - <label><select class="browser-default custom-select defaultFontSize" required="required" placeholder="Select Report Type" [(ngModel)]="displayAlignment" value="{{finalEditRowGetObj.displayAlignment}}"> - <option class="defaultFontSize" selected>Select Alignment </option><option value="Left" >Left</option> - <option class="defaultFontSize" value="Center" >Center</option> - <option class="defaultFontSize" value="Right" >Right</option> - </select> - </label> - </div> - <br/> - <br/> - <div> - <label class="defaultFontSize1">Display Header Alignment:</label> - <label><select class="browser-default custom-select defaultFontSize" required="required" placeholder="Select Report Type" [(ngModel)]="displayHeaderAlignment" value="{{finalEditRowGetObj.displayHeaderAlignment}}"> - <option selected>Select Header Alignment </option> - <option value="Left" >Left</option> - <option value="Center" >Center</option> - <option value="Right" >Right</option> - </select> - </label> - </div> - <br/> - <br/> - <div> - <label class="defaultFontSize1">Sortable:</label> - <label class="defaultFontSize" for="sortable" class="checkbox"> - <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> - </label> - </div> - <br/> - <br/> - <div> - <label class="defaultFontSize1">Visible:</label> - <label class="defaultFontSize" for="visible" class="checkbox"> - <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> - </label> - </div> - <br/> - <br/> - <div> - <label class="defaultFontSize1">Drill-down Link: <mat-icon aria-hidden="false" aria-label="edit" (click)="drillDownLinkPage()">edit</mat-icon> </label> - <label><select class="browser-default custom-select defaultFontSize" required="required" placeholder="Select Report Type" [(ngModel)]="drilldownURL" value="{{finalEditRowGetObj.drilldownURL}}"> - <option class="defaultFontSize" value="" selected>Select Drill Down Link </option> - <option class="defaultFontSize" *ngFor="let URLObj of URLListObjArray" value="{{URLObj.id}}" >{{URLObj.id}}|{{URLObj.name}}</option> - </select> - </label> - </div> - <div> - <label class="defaultFontSize1">Advanced Display - <mat-icon *ngIf="semaphoreName !== 'No Display'" aria-hidden="false" aria-label="edit" (click)="editDisplay()">edit</mat-icon> - <mat-icon aria-hidden="false" aria-label="add" (click)="addNewDisplay()">add</mat-icon> - </label> - <label><select class="browser-default custom-select defaultFontSize" required="required" placeholder="Select Report Type" [(ngModel)]="semaphoreName" value="{{semaphoreName}}"> - <option class="defaultFontSize" selected>No Display </option> - <option class="defaultFontSize" *ngFor="let sem of semaphoreList.semaphore" value="{{sem.semaphoreName}}" >{{sem.semaphoreName}}</option> - </select> - </label> - </div> - <br/> - <br/> - <div> - <label class="defaultFontSize1">Total for the column:</label> - <label><select class="browser-default custom-select defaultFontSize" required="required" placeholder="Select Report Type" [(ngModel)]="displayTotal" value="{{finalEditRowGetObj.displayTotal}}"> - <option selected value="">Select Total </option> - <option *ngFor="let TotalListObj of TotalColListObjArray" value="{{TotalListObj.id}}" >{{TotalListObj.name}}</option> - </select> - </label> - </div> + </div> + <br/> + <br/> + <div> + <label class="defaultFontSize1">Sortable:</label> + <label class="defaultFontSize" class="checkbox" for="sortable"> + <input [(ngModel)]="sortable" class="ng-valid ng-dirty ng-valid-parse ng-touched" id="sortable" + type="checkbox" value="{{finalEditRowGetObj.sortable}}"><i + class="skin"></i><span></span> + </label> + </div> + <br/> + <br/> + <div> + <label class="defaultFontSize1">Visible:</label> + <label class="defaultFontSize" class="checkbox" for="visible"> + <input [(ngModel)]="visible" class="ng-valid ng-dirty ng-valid-parse ng-touched" id="visible" + type="checkbox" value="true"><i class="skin"></i><span></span> + </label> + </div> + <br/> + <br/> + <div> + <label class="defaultFontSize1">Drill-down Link: + <mat-icon (click)="drillDownLinkPage()" aria-hidden="false" aria-label="edit">edit + </mat-icon> + </label> + <label><select [(ngModel)]="drilldownURL" class="browser-default custom-select defaultFontSize" + placeholder="Select Report Type" required="required" + value="{{finalEditRowGetObj.drilldownURL}}"> + <option class="defaultFontSize" selected value="">Select Drill Down Link</option> + <option *ngFor="let URLObj of URLListObjArray" class="defaultFontSize" + value="{{URLObj.id}}">{{URLObj.id}}|{{URLObj.name}}</option> + </select> + </label> + </div> + <div> + <label class="defaultFontSize1">Advanced Display + <mat-icon (click)="editDisplay()" *ngIf="semaphoreName !== 'No Display'" aria-hidden="false" + aria-label="edit">edit + </mat-icon> + <mat-icon (click)="addNewDisplay()" aria-hidden="false" aria-label="add">add</mat-icon> + </label> + <label><select [(ngModel)]="semaphoreName" class="browser-default custom-select defaultFontSize" + placeholder="Select Report Type" required="required" + value="{{semaphoreName}}"> + <option class="defaultFontSize" selected>No Display</option> + <option *ngFor="let sem of semaphoreList.semaphore" class="defaultFontSize" + value="{{sem.semaphoreName}}">{{sem.semaphoreName}}</option> + </select> + </label> + </div> + <br/> + <br/> + <div> + <label class="defaultFontSize1">Total for the column:</label> + <label><select [(ngModel)]="displayTotal" class="browser-default custom-select defaultFontSize" + placeholder="Select Report Type" required="required" + value="{{finalEditRowGetObj.displayTotal}}"> + <option selected value="">Select Total</option> + <option *ngFor="let TotalListObj of TotalColListObjArray" + value="{{TotalListObj.id}}">{{TotalListObj.name}}</option> + </select> + </label> + </div> </div> </div> </div> </div> <div class="card-footer" style="width: 1000px; padding-left: 770px;"> - <button *ngIf="!showConfirmButton && !showAdvancedDisplayPage" (click)="save();" class="btn btn-alt btn-small">Save</button> - <button *ngIf="showConfirmButton && !showAdvancedDisplayPage" (click)="complete();" class="btn btn-alt btn-small">Confirm</button> + <button (click)="save();" *ngIf="!showConfirmButton && !showAdvancedDisplayPage" + class="btn btn-alt btn-small">Save + </button> + <button (click)="complete();" *ngIf="showConfirmButton && !showAdvancedDisplayPage" + class="btn btn-alt btn-small">Confirm + </button> <button (click)="close()" class="btn btn-alt btn-small">Cancel</button> </div> </div> </app-columns-edit-component> - <span class="ecomp-spinner" *ngIf="showSpinner"></span> +<span *ngIf="showSpinner" class="ecomp-spinner"></span> <div class="app-data-table"> - <table mat-table class="full-width-table app-data-table" matSort aria-label="Elements"> - <!-- Id Column --> - <ng-container matColumnDef="id"> - <th mat-header-cell *matHeaderCellDef mat-sort-header class="defaultFontSize">ID</th> - <td mat-cell *matCellDef="let row">{{row.id}}</td> - </ng-container> + <table aria-label="Elements" class="full-width-table app-data-table" mat-table matSort> + <!-- Id Column --> + <ng-container matColumnDef="id"> + <th *matHeaderCellDef class="defaultFontSize" mat-header-cell mat-sort-header>ID</th> + <td *matCellDef="let row" mat-cell>{{row.id}}</td> + </ng-container> - <!-- No Column --> - <ng-container matColumnDef="no"> - <th mat-header-cell *matHeaderCellDef mat-sort-header class="defaultFontSize">NO</th> - <td mat-cell *matCellDef="let row">{{row.no}}</td> - </ng-container> + <!-- No Column --> + <ng-container matColumnDef="no"> + <th *matHeaderCellDef class="defaultFontSize" mat-header-cell mat-sort-header>NO</th> + <td *matCellDef="let row" mat-cell>{{row.no}}</td> + </ng-container> - <!-- Name Column --> - <ng-container matColumnDef="name"> - <th mat-header-cell *matHeaderCellDef mat-sort-header class="defaultFontSize">NAME</th> - <td mat-cell *matCellDef="let row">{{row.name}}</td> - </ng-container> + <!-- Name Column --> + <ng-container matColumnDef="name"> + <th *matHeaderCellDef class="defaultFontSize" mat-header-cell mat-sort-header>NAME</th> + <td *matCellDef="let row" mat-cell>{{row.name}}</td> + </ng-container> - <!-- Name Column --> - <ng-container matColumnDef="edit"> - <th mat-header-cell *matHeaderCellDef mat-sort-header class="defaultFontSize">EDIT</th> - <td mat-cell *matCellDef="let row"><mat-icon aria-hidden="false" aria-label="edit" (click)="editRecord(row.id)">edit</mat-icon></td> + <!-- Name Column --> + <ng-container matColumnDef="edit"> + <th *matHeaderCellDef class="defaultFontSize" mat-header-cell mat-sort-header>EDIT</th> + <td *matCellDef="let row" mat-cell> + <mat-icon (click)="editRecord(row.id)" aria-hidden="false" aria-label="edit">edit</mat-icon> + </td> </ng-container> - <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> - <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> - </table> + <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr> + <tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr> + </table> - <mat-paginator #paginator - [length]="dataSource?.data.length" - [pageIndex]="0" - [pageSize]="25" - [pageSizeOptions]="[25, 50, 100, 250]"> - </mat-paginator> + <mat-paginator #paginator + [length]="dataSource?.data.length" + [pageIndex]="0" + [pageSizeOptions]="[25, 50, 100, 250]" + [pageSize]="25"> + </mat-paginator> </div> |