From efb31c8139526215182dda47b949ddc11dfca534 Mon Sep 17 00:00:00 2001 From: mravula Date: Tue, 15 Dec 2020 16:00:49 -0500 Subject: Raptor Crosstab report UI Changes Issue-ID: PORTAL-902 Change-Id: I02f1e5651251a8c26d6c524d659617e5941343a2 Signed-off-by: mravula --- .../run-cross-tab-report.component.ts | 444 +++++++++++++++++++++ 1 file changed, 444 insertions(+) create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-cross-tab-report/run-cross-tab-report.component.ts (limited to 'ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-cross-tab-report/run-cross-tab-report.component.ts') diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-cross-tab-report/run-cross-tab-report.component.ts b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-cross-tab-report/run-cross-tab-report.component.ts new file mode 100644 index 00000000..dcbc4835 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report/run-cross-tab-report/run-cross-tab-report.component.ts @@ -0,0 +1,444 @@ +import {Component, OnInit, Input, AfterViewInit, ViewChild, ElementRef, ChangeDetectorRef} from '@angular/core'; +import {GridsterConfig, GridType, GridsterItem} from 'angular-gridster2'; +import {MatTableDataSource} from '@angular/material/table'; +import {MatPaginator} from '@angular/material/paginator'; + +import {MatSort} from '@angular/material'; +import {Router} from '@angular/router'; +import {RunService} from '../../run.service'; +import {FormControl} from '@angular/forms'; +import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; +import {environment} from '../../../../../environments/environment'; +import {DisplayHtml} from '../../../../pages/analytics/Report_List/Report/display-html'; +import {ErrorModalComponent} from '../../../../modals/error-modal/error-modal.component'; +import {DashboardReportService} from '../run-dashboard-report/dashboard-report.service'; +import {HttpCacheService} from '../../../../shared/services/cache.service'; + +export interface PeriodicElement { + +} + +const ELEMENT_DATA: PeriodicElement[] = [{}]; + +@Component({ + selector: 'app-run-cross-tab-report', + templateUrl: './run-cross-tab-report.component.html', + styleUrls: ['./run-cross-tab-report.component.scss'] +}) +export class RunCrossTabReportComponent implements OnInit { + + @Input('reportId') inputReportId: string; + @Input('queryString') queryString: string; + @Input('hitCnt') hitCnt: number; + @Input('reportType') reportType: string; + @Input('reportMode') reportMode: string; + @Input('parentId') parentId: string; + @Input('groupSelectValue') groupSelectValue: string; + @Input('isGoBack') isGoBack: string; + dataSource = new MatTableDataSource(ELEMENT_DATA); + @ViewChild(MatPaginator, {static: false} as any) paginator: MatPaginator; + @ViewChild(MatSort, {static: false} as any) sort: MatSort; + @ViewChild('iframe') iframe: ElementRef; + options: GridsterConfig; + dashboard: Array = []; + displayedColumns: string[]; + IncomingReportId: string; + displayedColumnsArr: string[]; + displayedRowObj: {}[]; + formFieldPresent: boolean; + showSpinner: boolean; + formFieldList: {}[]; + isReady: boolean; + responseFormFieldListLength: number; + NEWdisplayedColumns: string[]; + initCnt: number; + reportName: string; + showDashboardReport: boolean; + checkCnt: number; + initialQueryString: string; + initCounter: number; + runButtonHitCounter: number; + showChart = false; + displayColumValue: string; + displayTotal: any[]; + nodeName: string; + uploadId: string; + ecgi: string; + lac: string; + cid: string; + commentCtrl = new FormControl(); + replaceDisplayValue: String; + saveResponseObj: any; + customFieldsDataArray: any[]; + private chartRunUrl: string; + pageSize = []; + download_in_progress = false; + + constructor(private _dashboardReportService: DashboardReportService, + private _router: Router, + private _runService: RunService, + private ngModal: NgbModal, + private changeDetectorRefs: ChangeDetectorRef, + public ngbModal: NgbModal, + private httpCacheService: HttpCacheService) { + this.initCounter = 0; + this.runButtonHitCounter = 0; + this.pageSize = []; + } + + ngOnInit() { + this.initialQueryString = this.queryString; + this.initCounter++; + this.runButtonHitCounter = this.hitCnt; + if (this.reportType === 'Chart') { + this.showChart = true; + } + this.initialProcesses(); + } + + initialProcesses() { + // this.dataSource.paginator = this.paginator; + } + + ngOnChanges() { + if (this.initialQueryString !== this.queryString && this.initCounter > 0 && this.runButtonHitCounter !== this.hitCnt) { + this.initialQueryString = this.queryString; + this.runButtonHitCounter = this.hitCnt; + this.initialProcesses(); + this.afterViewInitProcesses(); + } else { + this.runButtonHitCounter = this.hitCnt; + this.initialQueryString = this.queryString; + } + } + + ngAfterViewInit() { + this.afterViewInitProcesses(); + } + + afterViewInitProcesses() { + if (this.showChart) { + this.chartRunUrl = environment.baseUrl + 'raptor.htm?action=chart.run&c_master=' + + this.inputReportId + this.queryString + '&refresh=Y&display_content=Y&r_page=0'; + this.iframe.nativeElement.setAttribute('src', this.chartRunUrl); + this.showSpinner = false; + } else { + + this.displayedColumnsArr = []; + this.displayedRowObj = []; + this.displayedColumns = []; + this.formFieldList = []; + this.showSpinner = true; + this.isReady = false; + this.NEWdisplayedColumns = []; + this.displayTotal = []; + if (localStorage.getItem(this.inputReportId)) { + this.postFetchingReportDataFn(JSON.parse(localStorage.getItem(this.inputReportId))); + localStorage.removeItem(this.inputReportId); + } else { + this._runService.getReportDataWithFormFields(this.queryString, this.inputReportId, this.groupSelectValue) + .subscribe((response) => { + if (response['errormessage']){ + this.openErrorModel(response['errormessage']); + this.showSpinner = false; + this.changeDetectorRefs.detectChanges(); + } else { + this.postFetchingReportDataFn(response); + } + }, error => { + this.openErrorModel('Error occurred while running report: ' + this.inputReportId); + this.showSpinner = false; + this.changeDetectorRefs.detectChanges(); + }); + } + } + } + + postFetchingReportDataFn(response: any) { + this.displayedColumnsArr = []; + this.displayedColumns = []; + this.customFieldsDataArray = []; + this.formFieldPresent = false; + this.responseFormFieldListLength = 0; + this.reportName = response['reportName']; + let rdc_cntr = 0; + while (response['reportDataColumns'][rdc_cntr]) { + const columnTitle = response['reportDataColumns'][rdc_cntr]['columnTitle']; + const columnId = response['reportDataColumns'][rdc_cntr]['colId']; + this.displayedColumnsArr.push(columnTitle + '||' + columnId); + this.displayedColumns.push(columnId); + rdc_cntr++; + } + + + /* let totalCnt = 0; + while (response['reportTotalDataRows'][totalCnt]) { + this.displayTotal.push(response['reportTotalDataRows'][totalCnt]); + totalCnt++; + }*/ + this.customFieldsDataArray = response['reportDataRows']; + let rdr_cntr = 0; + while (response['reportDataRows'][rdr_cntr]) { + let dca_cntr = 0; + const obj = {}; + const reportDataRows = response['reportDataRows'][rdr_cntr]; + while (this.displayedColumnsArr[dca_cntr]) { + const rowColumnId = this.displayedColumnsArr[dca_cntr].split('||')[1]; + if (reportDataRows[rowColumnId]) { + let drillDownHtml = ''; + let displayValue = ''; + drillDownHtml = reportDataRows[rowColumnId]['drillDownURL']; + displayValue = reportDataRows[rowColumnId]['displayValue']; + if (drillDownHtml !== null && + drillDownHtml.length > 0 && + !displayValue.includes('linkToReport')) { + const value = this.convertToLinkToReport(drillDownHtml); + if (value.length > 0) { + let valueCount = []; + let valueDisplay = ''; + valueCount = reportDataRows[rowColumnId]['displayValue'].split('|'); + if (valueCount.length > 1 && this.reportType === 'Cross-Tab') { + for (let count = 0; count < valueCount.length - 1; count++) { + valueDisplay = valueDisplay + valueCount[count]; + } + this.replaceDisplayValue = value + ',' + valueDisplay; + } else { + this.replaceDisplayValue = value + ',' + reportDataRows[rowColumnId]['displayValue']; + } + } else { + this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue']; + } + } else { + this.replaceDisplayValue = reportDataRows[rowColumnId]['displayValue']; + } + let displayObj: DisplayHtml = new class implements DisplayHtml { + 'background-color': string; + 'font-family': string; + 'font-size': string; + 'font-style': string; + 'font-weight': string; + 'text-align': string; + 'text-decoration': string; + color: string; + }; + if (this.reportType === ('Cross-Tab') && reportDataRows[rowColumnId]['displayValueHtml'].includes('|')) { + let crossTabDisplayValArr = []; + crossTabDisplayValArr = reportDataRows[rowColumnId]['displayValueHtml'].split('|'); + if (crossTabDisplayValArr.length > 1) { + displayObj['background-color'] = crossTabDisplayValArr[1]; + } + } + if (reportDataRows[rowColumnId]['displayValueHtml'].includes('setStyle')) { + displayObj = JSON.parse(reportDataRows[rowColumnId]['displayValueHtml']); + } + displayObj['text-align'] = reportDataRows[rowColumnId]['alignment']; + if (this.replaceDisplayValue.includes('linkToReport') || this.replaceDisplayValue.includes('linkToFeedback') || this.replaceDisplayValue.includes('linkToMail') + || this.replaceDisplayValue.includes('linkToMap')) { + let replaceValArr = []; + if (this.replaceDisplayValue.includes('linkToReport')) { + obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|'); + replaceValArr = obj[reportDataRows[rowColumnId]['colId']].split('|'); + if (replaceValArr.length > 4) { + const dispValue = replaceValArr[3] + ',' + replaceValArr[4]; + obj[reportDataRows[rowColumnId]['colId']] = obj[reportDataRows[rowColumnId]['colId']].replace(replaceValArr[3] + '|' + replaceValArr[4], replaceValArr[3] + ',' + replaceValArr[4]) + '|' + JSON.stringify(displayObj); + } else { + obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|') + + '|' + JSON.stringify(displayObj); + } + } else { + obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split(',').join('|') + + '|' + JSON.stringify(displayObj); + } + } else { + obj[reportDataRows[rowColumnId]['colId']] = this.replaceDisplayValue.split('comment-break-line').join('') + + '|' + JSON.stringify(displayObj); + } + } + dca_cntr++; + } + this.displayedRowObj.push(obj); + rdr_cntr++; + } + this.pageSize = response['pageSize']; +/* for (let cntr = 0; cntr < this.displayedColumnsArr.length; cntr++) { + const columnArrId = this.displayedColumnsArr[cntr].split(',')[1]; + this.displayedColumns.push(columnArrId); + }*/ + this.pageSize = [response['pageSize']]; + this.showSpinner = false; + this.dataSource = new MatTableDataSource(this.displayedRowObj); + this.dataSource.paginator = this.paginator; + this.changeDetectorRefs.detectChanges(); + } + + linkToReport(reportID: string, queryParameters: string) { + if (!this.httpCacheService.getPreviousId(this.inputReportId)) { + this.httpCacheService.setPreviousId(this.inputReportId, 'parent'); + } + this.httpCacheService.setPreviousId(reportID, this.inputReportId); + let queryParamsArr = []; + let columnDrilldownqueryParamsArr = []; + let groupSelectValue = ''; + if (queryParameters.includes('groupSelectValue')) { + queryParamsArr = queryParameters.split('&'); + for (let val = 0; val < queryParamsArr.length; val++) { + if (queryParamsArr[val].includes('groupSelectValue')) { + groupSelectValue = queryParamsArr[val].substring(queryParamsArr[val].indexOf('=') + 1, queryParamsArr[val].length); + } + } + this._router.navigate(['v2/run', reportID, queryParameters, groupSelectValue]); + } else if (queryParameters.includes('SELECTCRITERIA-')) { + columnDrilldownqueryParamsArr = queryParameters.split('&'); + for (let val = 0; val < columnDrilldownqueryParamsArr.length; val++) { + if (columnDrilldownqueryParamsArr[val].includes('SELECTCRITERIA-')) { + groupSelectValue = columnDrilldownqueryParamsArr[val].substring(columnDrilldownqueryParamsArr[val].indexOf('-') + 1, columnDrilldownqueryParamsArr[val].length); + } + } + this._router.navigate(['v2/run', reportID, queryParameters, groupSelectValue, 'true', '']); + } else { + this._router.navigate(['v2/run', reportID, queryParameters, '', 'true', '']); + } + } + + linkToMail(mailId: string) { + const email = 'mailto:' + mailId; + window.location.href = email; + } + + applyFilter(filterValue: string) { + this.dataSource.filter = filterValue.trim().toLowerCase(); + } + + setStyle(rowData: string) { + let styles = ''; + if (rowData.split('|')[0] === 'linkToReport' || rowData.split('|')[0] === 'linkToFeedback') { + styles = rowData.split('|')[4]; + } else if (this.reportType = 'Cross-Tab') { + const rowDataArray = rowData.split('|'); + let crossTabstyles = {}; + if (rowDataArray.length > 1) { + if (rowDataArray[1].includes('{')) { + styles = rowDataArray[1]; + return JSON.parse(styles); + } else { + crossTabstyles = {'background-color': rowData.split('|')[1]}; + return crossTabstyles; + } + } + } else { + styles = rowData.split('|')[1]; + } + if (styles.includes('{')) { + return JSON.parse(styles); + } else { + return {}; + } + } + + getDisplayTotal(keys: any) { + if (this.displayTotal.length > 0) { + return this.displayTotal[0][keys].displayValue; + } else { + return ''; + } + } + + clearComments() { + this.commentCtrl.setValue(''); + } + + convertToLinkToReport(value: string) { + value = value.replace(/;/g, ''); + let outPut = ''; + while (value.includes('c_master=')) { + const index = value.indexOf('c_master='); + if (index > 0) { + value = value.substring(index, value.length); + } else if (index === 0) { + value = value.replace('c_master=', ''); + } + } + const split = value.split('&'); + // const spltFirst = split[0].split('='); + if (split[1].length <= 0) { + return outPut; + } + outPut = 'linkToReport,' + split[0] + ','; + let splitCounter = 1; + for (splitCounter = 1; splitCounter < split.length; splitCounter++) { + if (!split[splitCounter].includes('LOGIN_ID=') && + !split[splitCounter].includes('display_content=') && + !split[splitCounter].includes('drilldown_index=') && + !split[splitCounter].includes('show_back_btn=') && + !split[splitCounter].includes('r_action')) { + outPut = outPut + '&' + split[splitCounter]; + } + } + return outPut; + } + + openErrorModel(_message: string) { + const modalInfoRef = this.ngbModal.open(ErrorModalComponent); + modalInfoRef.componentInstance.message = _message; + return modalInfoRef; + } + + downloadReport(contentType: string, extension: string) { + + this.changeDetectorRefs.detectChanges(); + if (this.showDashboardReport === false) { + this.download_in_progress = true; + this._runService.downloadReport(this.inputReportId, extension, this.isGoBack) + .subscribe((responseExcel) => { + + this.downLoadFile(responseExcel, contentType, extension, ''); + this.download_in_progress = false; + this.changeDetectorRefs.detectChanges(); + }); + } else { + this.download_in_progress = true; + this._runService.getDashboardReportFormFields(this.inputReportId) + .subscribe((dashboardFormFields) => { + /* this._runService.runDashboardReport(this.inputReportId, this.queryString) + .subscribe((runDashboardReportResp) => {*/ + this._runService.downloadDashboardReportExcel(this.inputReportId) + .subscribe((responseDownloadDashboardReport) => { + this.downLoadFile(responseDownloadDashboardReport, contentType, extension, 'Dashboard'); + this.download_in_progress = false; + this.changeDetectorRefs.detectChanges(); + }); + // }); + + }); + } + } + + downLoadFile(data: any, type: string, extension: string, reportType: string) { + const blob = new Blob([data], {type: type}); + const date = new Date(); + const dateStr = + ('00' + (date.getMonth() + 1)).slice(-2) + + ('00' + date.getDate()).slice(-2) + + date.getFullYear() + + ('00' + date.getHours()).slice(-2) + + ('00' + date.getMinutes()).slice(-2) + + ('00' + date.getMilliseconds()); + let fileName = this.reportName + dateStr + '.' + extension; + if (reportType === 'Dashboard') { + fileName = ''; + fileName = reportType + '_' + this.inputReportId + '_' + dateStr + '.' + extension; + } + if (window.navigator.msSaveOrOpenBlob) { + window.navigator.msSaveBlob(blob, fileName); + } else { + const anchor = window.document.createElement('a'); + anchor.href = window.URL.createObjectURL(blob); + anchor.download = fileName; + document.body.appendChild(anchor); + anchor.click(); + document.body.removeChild(anchor); + window.URL.revokeObjectURL(anchor.href); + } + } +} + -- cgit 1.2.3-korg