diff options
Diffstat (limited to 'ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set')
5 files changed, 487 insertions, 0 deletions
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set-datasource.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set-datasource.ts new file mode 100644 index 00000000..a6a515b5 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set-datasource.ts @@ -0,0 +1,86 @@ +import { DataSource } from '@angular/cdk/collections'; +import { MatPaginator } from '@angular/material/paginator'; +import { MatSort } from '@angular/material/sort'; +import { map } from 'rxjs/operators'; +import { Observable, of as observableOf, merge } from 'rxjs'; + +// TODO: Replace this with your own data model type +export interface RunReportFinalTableItem { + +} + +// TODO: replace this with real data from your application + + +/** + * Data source for the RunReportFinalTable view. This class should + * encapsulate all logic for fetching and manipulating the displayed data + * (including sorting, pagination, and filtering). + */ +export class RunReportFinalTableDataSource extends DataSource<RunReportFinalTableItem> { + data: RunReportFinalTableItem[]; + paginator: MatPaginator; + sort: MatSort; + + constructor() { + super(); + } + + /** + * Connect this data source to the table. The table will only update when + * the returned stream emits new items. + * @returns A stream of the items to be rendered. + */ + connect(): Observable<RunReportFinalTableItem[]> { + // Combine everything that affects the rendered data into one update + // stream for the data-table to consume. + const dataMutations = [ + observableOf(this.data), + this.paginator.page, + this.sort.sortChange + ]; + + return merge(...dataMutations).pipe(map(() => { + return this.getPagedData(this.getSortedData([...this.data])); + })); + } + + /** + * Called when the table is being destroyed. Use this function, to clean up + * any open connections or free any held resources that were set up during connect. + */ + disconnect() {} + + /** + * Paginate the data (client-side). If you're using server-side pagination, + * this would be replaced by requesting the appropriate data from the server. + */ + private getPagedData(data: RunReportFinalTableItem[]) { + const startIndex = this.paginator.pageIndex * this.paginator.pageSize; + return data.splice(startIndex, this.paginator.pageSize); + } + + /** + * Sort the data (client-side). If you're using server-side sorting, + * this would be replaced by requesting the appropriate data from the server. + */ + private getSortedData(data: RunReportFinalTableItem[]) { + if (!this.sort.active || this.sort.direction === '') { + return data; + } + + return data.sort((a, b) => { + const isAsc = this.sort.direction === 'asc'; + switch (this.sort.active) { + // case 'name': return compare(a.name, b.name, isAsc); + // case 'id': return compare(+a.id, +b.id, isAsc); + default: return 0; + } + }); + } +} + +/** Simple sort comparator for example ID/Name columns (for client-side sorting). */ +function compare(a, b, isAsc) { + return (a < b ? -1 : 1) * (isAsc ? 1 : -1); +} diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.css b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.css new file mode 100644 index 00000000..d74a7bd4 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.css @@ -0,0 +1,201 @@ +/* .left { + width: auto; + float: left; + text-align: right; +} +.right { + width: auto; + + float: left; +} */ + +mat-icon{ + color: #006496; + cursor: pointer; +} + +/* .tab-pane{ + padding-right: 130px; + padding-left: 120px; + color: rgba(0, 0, 0, 0.603) +} */ + +.boxMargin{ + + width: auto; +} + +mat-button-toggle{ + display: block; + width: 400px; + border-radius: 5px; +} + +input { + width: 400px; + height: 20px; +} + +.tab-content{ + margin-right: 20px; + /* background-color: #006496; */ + color: rgb(0, 0, 0); +} + +.stdForm{ + margin-left: 20px; +} + +.field-group { + position: relative; + display: block; +} + +label + .field-group, label + .input-append, label + .row, label + .row-nowrap, label + .form-row { + margin-top: 5px; +} + +textarea { + display: block; + width: 400px; + max-width: 50%; + padding: 15px; +} + +select{ + display: block; + width: 400px; + max-width: 400px; + padding: 15px; + background-color: #cfcfcf7a +} + +.webform-component-my-select select { + height: 200px; +} + +.checkbox .skin { + background-color: #fff; + border: 1px solid #d2d2d2; + border-radius: 3px; + display: inline-block; + height: 24px; + width: 24px; + position: absolute; + left: 0; + top: 0; +} + +i, em { + font-family: "Omnes-ECOMP-W02-Italic", Arial; + font-style: normal; +} + + + +.card{ + border-radius: 5px; +} + +.card-header{ + height: 50px; +} + +.card-body{ + height: 150px; +} + +.card-footer{ + height: 50px; +} + +.dialog__close-btn { + border: 0; + background: #087ac2; + color: #ffffff; + position: absolute; + top: 8px; + right: 8px; + font-size: 1.2em; + display: block; + border: #087ac2 2px solid; +} + +.modalTitle{ + font-size: 35px; +} + + +.full-width-table { + width: 100%; +} + + +.app-data-table { + margin-top: 80px; + /* margin-left: 250px; + margin-right: 250px; */ + /* overflow: scroll; */ +} + +.app-data-table1 { + margin-left: 150px; + margin-right: 150px; +} + +th{ + /* background-color: #006496; */ + color: rgb(0, 0, 0); + font-size: 15px; + border-radius: 2px; + height: 35px; +} + +tr:nth-child(even) { + /* background-color: #dddddd; */ + font-size: 2px; + height: 35px; + border-radius: 4px; + +} + +tr:nth-child(odd) { + font-size: 2px; + height: 35px; + border-radius: 4px; +} + + +.card{ + border-radius: 5px; + +} + +.card-header{ + height: 50px; +} + +.card-body{ + height: 150px; +} + +.card-footer{ + height: 50px; + margin-right: 10px; +} + +.dialog__close-btn { + border: 0; + background: #087ac2; + color: #ffffff; + position: absolute; + top: 8px; + right: 8px; + font-size: 1.2em; + display: block; + border: #087ac2 2px solid; +} + +.modalTitle{ + font-size: 35px; +}
\ No newline at end of file diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.html new file mode 100644 index 00000000..76183db3 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.html @@ -0,0 +1,23 @@ +<div class="app-data-table"> + <table mat-table class="full-width-table" matSort aria-label="Elements"> + <!-- Id Column --> + <!-- <div *ngFor="let b of "> --> + <div *ngFor="let keys of displayedColumns; let i = index"> + <ng-container matColumnDef="{{keys}}"> + <th mat-header-cell *matHeaderCellDef mat-sort-header >{{displayedColumnsArr[i].split(",")[0]}}</th> + <td mat-cell *matCellDef="let row">{{row[keys]}}</td> + </ng-container> + </div> + + <!-- </div> --> + <tr mat-header-row *matHeaderRowDef="displayedColumns" ></tr> + <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> + </table> + + <mat-paginator #paginator + [length]="dataSource?.data.length" + [pageIndex]="0" + [pageSize]="15" + [pageSizeOptions]="[15, 25, 50, 100, 250]"> + </mat-paginator> +</div> diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.spec.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.spec.ts new file mode 100644 index 00000000..cc8fd2bd --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.spec.ts @@ -0,0 +1,38 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatSortModule } from '@angular/material/sort'; +import { MatTableModule } from '@angular/material/table'; + +import { RunReportResultSetComponent } from './run-report-result-set.component'; +import { HttpClientTestingModule } from '@angular/common/http/testing'; +import { RouterTestingModule } from '@angular/router/testing'; + +describe('RunReportResultSetComponent', () => { + let component: RunReportResultSetComponent; + let fixture: ComponentFixture<RunReportResultSetComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RunReportResultSetComponent ], + imports: [ + NoopAnimationsModule, + MatPaginatorModule, + MatSortModule, + MatTableModule, + HttpClientTestingModule, + RouterTestingModule + ], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RunReportResultSetComponent); + component = fixture.componentInstance; + //fixture.detectChanges(); + }); + + it('should compile', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.ts new file mode 100644 index 00000000..4f18ff8e --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-result-set/run-report-result-set.component.ts @@ -0,0 +1,139 @@ +import { AfterViewInit, Component, OnInit, ViewChild, Input, SimpleChange } from '@angular/core'; +import { MatPaginator } from '@angular/material/paginator'; +import { MatSort } from '@angular/material/sort'; +import { MatTable } from '@angular/material/table'; +import { RunReportFinalTableDataSource, RunReportFinalTableItem } from './run-report-result-set-datasource'; +import { ActivatedRoute } from '@angular/router'; +import { HttpClient } from '@angular/common/http'; +import { RunService } from '../run.service'; + +@Component({ + selector: 'app-run-report-result-set', + templateUrl: './run-report-result-set.component.html', + styleUrls: ['./run-report-result-set.component.css'] +}) +export class RunReportResultSetComponent implements AfterViewInit, OnInit { + + @Input("reportId") reportId1 : string; + + + @ViewChild(MatPaginator, {static: false} as any) paginator: MatPaginator; + @ViewChild(MatSort, {static: false} as any) sort: MatSort; + @ViewChild(MatTable, {static: false} as any) table: MatTable<RunReportFinalTableItem>; + dataSource: RunReportFinalTableDataSource; + + /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */ + displayedColumns : string[]; + IncomingReportId : string; + displayedColumnsArr : string[]; + displayedRowObj : RunReportFinalTableItem[]; + + constructor(private _http : HttpClient, private _route : ActivatedRoute, private _runService : RunService){ + this.displayedColumnsArr = new Array(); + this.displayedRowObj = new Array(); + this.displayedColumns = new Array(); + } + + ngOnInit() { + this.dataSource = new RunReportFinalTableDataSource(); + + this._route.params.subscribe(params => { + + this.IncomingReportId = params["reportId"]; + }); + this._runService.getReportData(this.reportId1) + .subscribe((response) => { + console.log(response); + + let i=0; + while(response["reportDataColumns"][i]) + { + this.displayedColumnsArr.push(response["reportDataColumns"][i]["columnTitle"] +","+ response["reportDataColumns"][i]["colId"]); + i++; + } + + let j=0; + while(response["reportDataRows"][j]) + { + let k=0; + let obj = new Object(); + while(this.displayedColumnsArr[k]) + { + if(response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]) + { + obj[response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]["colId"]] = response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]["displayValue"]; + } + k++; + } + this.displayedRowObj.push(obj); + j++; + } + + console.log(this.displayedColumnsArr); + console.log(this.displayedRowObj); + + for(let l=0; l<this.displayedColumnsArr.length; l++) + { + this.displayedColumns.push(this.displayedColumnsArr[l].split(",")[1]); + } + + + this.dataSource.data = this.displayedRowObj; + this.dataSource.sort = this.sort; + this.dataSource.paginator = this.paginator; + this.table.dataSource = this.dataSource; + + }); + + + } + + ngAfterViewInit() { + this._runService.getReportData(this.reportId1) + .subscribe((response) => { + console.log(response); + + let i=0; + while(response["reportDataColumns"][i]) + { + this.displayedColumnsArr.push(response["reportDataColumns"][i]["columnTitle"] +","+ response["reportDataColumns"][i]["colId"]); + i++; + } + + let j=0; + while(response["reportDataRows"][j]) + { + let k=0; + let obj = new Object(); + while(this.displayedColumnsArr[k]) + { + if(response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]) + { + obj[response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]["colId"]] = response["reportDataRows"][j][this.displayedColumnsArr[k].split(",")[1]]["displayValue"]; + } + k++; + } + this.displayedRowObj.push(obj); + j++; + } + + console.log(this.displayedColumnsArr); + console.log(this.displayedRowObj); + + for(let l=0; l<this.displayedColumnsArr.length; l++) + { + this.displayedColumns.push(this.displayedColumnsArr[l].split(",")[1]); + } + + this.dataSource.data = this.displayedRowObj; + this.dataSource.sort = this.sort; + this.dataSource.paginator = this.paginator; + this.table.dataSource = this.dataSource; + + }); + + + } + + +} |