diff options
Diffstat (limited to 'ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns')
5 files changed, 332 insertions, 263 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> 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.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.spec.ts index e9b8ff85..c4c200e7 100644 --- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.spec.ts +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.spec.ts @@ -78,8 +78,10 @@ describe('ColumnListComponent', () => { it('should test close method',()=>{ let spy1=spyOn(_columnService,'getColumnList').and.returnValue(Observable.of('')); + const spy = spyOn((component as any).changeDetectorRefs, 'detectChanges'); component.close(); expect(spy1).toHaveBeenCalled(); + expect(spy).toHaveBeenCalled(); expect(component.finalObjArr).toEqual([]); expect(component.finalGetObj).toEqual(''); expect(component.dataSource.data).toEqual(component.finalObjArr); @@ -103,7 +105,9 @@ it('should test onCompleted method',()=>{ it('should test save method',()=>{ component.noWrap=true; + const spy = spyOn((component as any).changeDetectorRefs, 'detectChanges'); component.save(); + expect(spy).toHaveBeenCalled(); expect(component.showSpinner).toBe(true); expect(component.finalPOSTObj["tabId"]).toEqual("ColEdit"); expect(component.finalPOSTObj["tabName"]).toEqual("Column Edit"); @@ -140,8 +144,10 @@ it('should test save method',()=>{ it('should test if codition inside save method',()=>{ component.showSaveColDialog=true; let spy=spyOn(_columnService,'postColumnChanges').and.returnValue(Observable.of('you object')) + const spy1 = spyOn((component as any).changeDetectorRefs, 'detectChanges'); component.save(); expect(spy).toHaveBeenCalled(); + expect(spy1).toHaveBeenCalled(); expect(component.EditColstatus).toEqual("Success!"); expect(component.EditColmessage).toEqual("Your change has been saved! Row definition is updated."); expect(component.showSaveColDialog).toBe(false); @@ -151,8 +157,10 @@ it('should test if codition inside save method',()=>{ it('should test else codition inside save method',()=>{ component.showSaveColDialog=true; let spy=spyOn(_columnService,'postColumnChanges').and.returnValue(Observable.of('')) + const spy1 = spyOn((component as any).changeDetectorRefs, 'detectChanges'); component.save(); expect(spy).toHaveBeenCalled(); + expect(spy1).toHaveBeenCalled(); expect(component.EditColstatus).toEqual("Failure!"); expect(component.EditColmessage).toEqual("Row definition could not be updated."); expect(component.showSaveColDialog).toBe(false); 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.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.ts index 25f5109c..193e5ad0 100644 --- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.ts +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/column-list/column-list.component.ts @@ -1,28 +1,23 @@ -import { AfterViewInit, Component, OnInit, ViewChild, SimpleChange, Input, Output } from '@angular/core'; -import { MatPaginator } from '@angular/material/paginator'; -import { MatSort } from '@angular/material/sort'; -import { MatTable } from '@angular/material/table'; -import { DataTableDataSource, DataTableItem } from './column-list-datasource'; -import { HttpClient } from '@angular/common/http'; -import { environment } from '../../../../../../../environments/environment'; -import { ColumnService } from '../column.service'; +import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, ViewChild} from '@angular/core'; +import {MatPaginator} from '@angular/material/paginator'; +import {MatSort} from '@angular/material/sort'; +import {MatTable} from '@angular/material/table'; +import {DataTableDataSource, DataTableItem} from './column-list-datasource'; +import {HttpClient} from '@angular/common/http'; +import {ColumnService} from '../column.service'; import {SemaphoreList} from '../model/semaphore-list'; import {Semaphore} from '../model/semaphore'; @Component({ selector: 'app-column-list', templateUrl: './column-list.component.html', - styleUrls: ['./column-list.component.css'] + styleUrls: ['./column-list.component.css'], }) export class ColumnListComponent implements OnInit { @ViewChild(MatPaginator, {static: false} as any) paginator: MatPaginator; @ViewChild(MatSort, {static: false} as any) sort: MatSort; @ViewChild(MatTable, {static: false} as any) table: MatTable<DataTableItem>; - @Input('reportId') reportId: number; - - - dataSource: DataTableDataSource; finalGetObj: {}; finalEditRowGetObj: {}; @@ -31,7 +26,6 @@ export class ColumnListComponent implements OnInit { message: string; showDialog: boolean; closable: boolean; - columnId: string; id: string; name: string; @@ -59,8 +53,6 @@ export class ColumnListComponent implements OnInit { finalPOSTObj: {}; isDisabled: boolean; showConfirmButton: boolean; - - /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */ displayedColumns = ['no', 'id', 'name', 'edit']; SQLstatus: string; SQLmessage: string; @@ -68,7 +60,6 @@ export class ColumnListComponent implements OnInit { Colclosable: boolean; EditColmessage: string; EditColstatus: string; - showEditDrillDownPage: boolean; showAdvancedDisplayPage = false; drillDownReportId: string; @@ -81,45 +72,47 @@ export class ColumnListComponent implements OnInit { semaphoreList: SemaphoreList; semaphoreName: String; semaphoreId: String; - private newSemaphoreList: any; - private addDisplay = false; incomingDrillDownParams: string; isIncomingDrillDownParams: boolean; + SQLclosable: any; + private newSemaphoreList: any; + private addDisplay = false; + columnList: any; - constructor(private _http: HttpClient, private _columnService: ColumnService) { + constructor(private _http: HttpClient, + private _columnService: ColumnService, + private changeDetectorRefs: ChangeDetectorRef) { this.showEditDrillDownPage = false; this.showAdvancedDisplayPage = false; this.showConfirmButton = false; this.addDisplay = false; - this.dataSource = new DataTableDataSource(); - - this.finalGetObj = new Object(); - this.finalObjArr = new Array(); - this.finalEditRowGetObj = new Object(); - this.URLListObjArray = new Array(); - this.TotalColListObjArray = new Array(); - this.finalPOSTObj = new Object(); - this.drillDownObj = new Object(); + this.finalGetObj = {}; + this.finalObjArr = []; + this.finalEditRowGetObj = {}; + this.URLListObjArray = []; + this.TotalColListObjArray = []; + this.finalPOSTObj = {}; + this.drillDownObj = {}; this.checkCnt = 0; this.showSpinner = false; this.semaphoreList = new class implements SemaphoreList { semaphore: Semaphore[]; }; this.semaphoreName = 'No Display'; + this.semaphoreId = ''; this.incomingDrillDownParams = ''; this.isIncomingDrillDownParams = false; - } ngOnInit() { - this.showSpinner = true; this.displayTable = true; this._columnService.getColumnList() .subscribe((response) => { this.showSpinner = true; this.finalGetObj = response; + this.columnList = response; let fgo_counter = 0; while (this.finalGetObj[fgo_counter]) { this.finalGetObj[fgo_counter]['no'] = fgo_counter + 1; @@ -136,8 +129,6 @@ export class ColumnListComponent implements OnInit { }); this.showDialog = false; this.showSaveColDialog = false; - - } @@ -151,7 +142,11 @@ export class ColumnListComponent implements OnInit { editRecord(id: string) { this.showSpinner = true; - + this.semaphoreList = new class implements SemaphoreList { + semaphore: Semaphore[]; + }; + this.semaphoreName = 'No Display'; + this.semaphoreId = ''; this.columnId = id; this._columnService.getIndividualColumnData(id) .subscribe((response) => { @@ -162,13 +157,13 @@ export class ColumnListComponent implements OnInit { this.visible = this.finalEditRowGetObj['visible']; this.dependsOnFormFields = this.finalEditRowGetObj['depeondsOnForField']; this.dataType = this.finalEditRowGetObj['dataType']; - this.groupByPos = (this.finalEditRowGetObj['groupByPos'] == null ? 0 : this.finalEditRowGetObj['groupByPos'] ); + this.groupByPos = (this.finalEditRowGetObj['groupByPos'] == null ? 0 : this.finalEditRowGetObj['groupByPos']); this.customTextForSubTotal = this.finalEditRowGetObj['subTotalCustomText']; this.hideRepeatedValues = this.finalEditRowGetObj['hideRepeatedKey']; this.multiGroupColumnLevel = (this.finalEditRowGetObj['level'] == null ? 0 : this.finalEditRowGetObj['level']); - this.colspan = (this.finalEditRowGetObj['colspan'] == null ? 0 : this.finalEditRowGetObj['colspan']); + this.colspan = (this.finalEditRowGetObj['colspan'] == null ? 0 : this.finalEditRowGetObj['colspan']); this.displayName = this.finalEditRowGetObj['displayName']; - this.displayWidthInPixel = (this.finalEditRowGetObj['displayWidthInPixel'] == null ? 0 : this.finalEditRowGetObj['displayWidthInPixel'] ); + this.displayWidthInPixel = (this.finalEditRowGetObj['displayWidthInPixel'] == null ? 0 : this.finalEditRowGetObj['displayWidthInPixel']); this.indentation = (this.finalEditRowGetObj['indentation'] == null ? 0 : this.finalEditRowGetObj['indentation']); this.displayAlignment = this.finalEditRowGetObj['displayAlignment']; this.displayHeaderAlignment = (this.finalEditRowGetObj['displayHeaderAlignment'] == null ? '' : this.finalEditRowGetObj['displayHeaderAlignment']); @@ -179,7 +174,7 @@ export class ColumnListComponent implements OnInit { this.drillDownObj['drillDownUrl'] = this.drilldownURL; this.drillDownObj['drillDownParams'] = this.drilldownParams; this.drillDownObj['drillDownType'] = this.drilldownType; - this.semaphoreList = this.finalEditRowGetObj['semaphoreList']; + this.semaphoreList = this.finalEditRowGetObj['semaphoreList']; this.semaphoreId = this.finalEditRowGetObj['semaphoreId']; if (this.semaphoreId === '') { this.semaphoreName = 'No Display'; @@ -192,7 +187,7 @@ export class ColumnListComponent implements OnInit { } } } - this. displayTotal = (this.finalEditRowGetObj['displayTotal'] == null ? '' : this.finalEditRowGetObj['displayTotal']); + this.displayTotal = (this.finalEditRowGetObj['displayTotal'] == null ? '' : this.finalEditRowGetObj['displayTotal']); this._columnService.getDrillDownReportList() .subscribe((responseURLList) => { this.URLListObj = responseURLList; @@ -203,7 +198,6 @@ export class ColumnListComponent implements OnInit { listCtr++; } }); - this._columnService.getResponseTotalColsList() .subscribe((responseTotalColList) => { this.TotalColListObj = responseTotalColList; @@ -227,13 +221,13 @@ export class ColumnListComponent implements OnInit { close() { + this.changeDetectorRefs.detectChanges(); this._columnService.getColumnList() .subscribe((response) => { this.showSpinner = true; this.dataSource = new DataTableDataSource(); this.finalObjArr = []; this.finalGetObj = response; - let fgo_counter = 0; while (this.finalGetObj[fgo_counter]) { this.finalGetObj[fgo_counter]['no'] = fgo_counter + 1; @@ -270,15 +264,12 @@ export class ColumnListComponent implements OnInit { save() { - + this.changeDetectorRefs.detectChanges(); this.showSpinner = true; - this.finalPOSTObj['tabId'] = 'ColEdit'; this.finalPOSTObj['tabName'] = 'Column Edit'; - this.finalPOSTObj['colId'] = this.id; this.finalPOSTObj['colName'] = this.name; - this.finalPOSTObj['colType'] = ''; this.finalPOSTObj['colspan'] = this.colspan; this.finalPOSTObj['dataType'] = this.dataType; @@ -309,41 +300,38 @@ export class ColumnListComponent implements OnInit { if (this.semaphoreName === 'No Display') { this.semaphoreId = ''; } else { - for ( let slcount = 0 ; slcount < this.semaphoreList.semaphore.length; slcount++) { - if (this.semaphoreName === this.semaphoreList.semaphore[slcount].semaphoreName) { - this.semaphoreId = this.semaphoreList.semaphore[slcount].semaphoreId; + if(this.semaphoreList && this.semaphoreList.semaphore){ + for (let slcount = 0; slcount < this.semaphoreList.semaphore.length; slcount++) { + if (this.semaphoreName === this.semaphoreList.semaphore[slcount].semaphoreName) { + this.semaphoreId = this.semaphoreList.semaphore[slcount].semaphoreId; + this.semaphoreList.semaphore[slcount].comment = this.id; + } } } } this.finalPOSTObj['semaphoreId'] = this.semaphoreId; this.finalPOSTObj['semaphoreList'] = this.semaphoreList; - this._columnService.postColumnChanges(this.finalPOSTObj) .subscribe((finalPOSTResponse) => { - if (finalPOSTResponse) { this.EditColstatus = 'Success!'; this.EditColmessage = 'Your change has been saved! Row definition is updated.'; this.showSaveColDialog = !this.showSaveColDialog; - this.Colclosable = true; - } else { this.EditColstatus = 'Failure!'; this.EditColmessage = 'Row definition could not be updated.'; this.showSaveColDialog = !this.showSaveColDialog; - this.Colclosable = true; } - this.showEditDrillDownPage = false; this.showAdvancedDisplayPage = false; this.isIncomingDrillDownParams = false; this.addDisplay = false; this.showSpinner = false; - }); + }); } diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/columns-edit-component/column-advanced-display/column-advanced-display.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/columns-edit-component/column-advanced-display/column-advanced-display.component.html index 63d024b1..55df3786 100644 --- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/columns-edit-component/column-advanced-display/column-advanced-display.component.html +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/columns-edit-component/column-advanced-display/column-advanced-display.component.html @@ -6,12 +6,22 @@ <input [(ngModel)]="semaphore.semaphoreName" class="defaultFontSize" id="semaphoreName" name="displayName" style="width: 60%" type="text" > </div> +<label class="defaultFontSize1">Comments: {{semaphore.comment}}</label> <div class="field-group"> <mat-form-field> <mat-label class="b2b-dro">Apply To:</mat-label> <mat-select data-select-color="blue" [(ngModel)]="semaphore.semaphoreType" aria-label="reportType" placeholder="Select chart Type"> <mat-option value="CELL">Current Value Only</mat-option> - <mat-option value="CELL">Entire Row</mat-option> + <mat-option value="ROW">Entire Row</mat-option> + </mat-select> + </mat-form-field> +</div> +<div class="field-group"> + <mat-form-field> + <mat-label class="b2b-dro">Target Column:</mat-label> + <mat-select data-select-color="blue" [(ngModel)]="semaphore.target" aria-label="reportType" placeholder="Select chart Type"> + <mat-option value="">None</mat-option> + <mat-option *ngFor="let column of columnList" [value]="column.id">{{column.name}}</mat-option> </mat-select> </mat-form-field> </div> diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/columns-edit-component/column-advanced-display/column-advanced-display.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/columns-edit-component/column-advanced-display/column-advanced-display.component.ts index 2b0e6c6d..7458fd1f 100644 --- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/columns-edit-component/column-advanced-display/column-advanced-display.component.ts +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/columns/columns-edit-component/column-advanced-display/column-advanced-display.component.ts @@ -14,6 +14,8 @@ export class ColumnAdvancedDisplayComponent implements OnInit { @Input('inputSemaphoreName') inputSemaphoreName: String; @Input('addNew') addNew: boolean; @Input('columnName') columnName: String; + @Input('columnList') columnList: any; + @Output() completed = new EventEmitter<any>(); semaphoreObjArr: {}[]; semaphore: Semaphore; @@ -116,6 +118,7 @@ export class ColumnAdvancedDisplayComponent implements OnInit { semCount = this.semaphoreArr.semaphore.length + 1; } else { semCount = 1 ; } this.newSemaphore['comment'] = this.columnName; + this.newSemaphore['target'] = ''; this.newSemaphore['semaphoreType'] = 'CELL'; this.newSemaphore['semaphoreName'] = 'Display Formatting ' + semCount; this.newSemaphore['semaphoreId'] = 'sem' + semCount; |