111 lines
3.6 KiB
TypeScript
111 lines
3.6 KiB
TypeScript
/** Angular Imports */
|
|
import { Component, OnInit, ViewChild } from '@angular/core';
|
|
import { MatPaginator } from '@angular/material/paginator';
|
|
import { MatSort } from '@angular/material/sort';
|
|
import { MatTableDataSource } from '@angular/material/table';
|
|
import { ActivatedRoute, Router } from '@angular/router';
|
|
|
|
/**
|
|
* Reports component.
|
|
*/
|
|
@Component({
|
|
selector: 'mifosx-reports',
|
|
templateUrl: './reports.component.html',
|
|
styleUrls: ['./reports.component.scss']
|
|
})
|
|
export class ReportsComponent implements OnInit {
|
|
|
|
/** Reports data. */
|
|
reportsData: any;
|
|
/** Report category filter. */
|
|
filter: string;
|
|
/** Columns to be displayed in reports table. */
|
|
displayedColumns: string[] = ['reportName', 'reportType', 'reportCategory'];
|
|
/** Data source for reports table. */
|
|
dataSource = new MatTableDataSource();
|
|
|
|
/** Paginator for reports table. */
|
|
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
|
|
/** Sorter for reports table. */
|
|
@ViewChild(MatSort, { static: true }) sort: MatSort;
|
|
|
|
/**
|
|
* Retrieves the reports data from `resolve`.
|
|
* @param {ActivatedRoute} route Activated Route.
|
|
* Prevents reuse of route parameter `filter`.
|
|
* @param {Router} router: Router.
|
|
*/
|
|
constructor(private route: ActivatedRoute,
|
|
private router: Router) {
|
|
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
|
|
this.route.data.subscribe(( data: { reports: any }) => {
|
|
this.reportsData = data.reports;
|
|
});
|
|
this.filter = this.route.snapshot.params['filter'];
|
|
}
|
|
|
|
/*
|
|
*Sets and filters the reports table by category.
|
|
*/
|
|
ngOnInit() {
|
|
this.setReports();
|
|
this.filterReportsByCategory();
|
|
}
|
|
|
|
/**
|
|
* Switches filterPredicate if filterValue is not null.
|
|
* @param {string} filterValue filter string for mat-table.
|
|
*/
|
|
applyFilter(filterValue: string) {
|
|
if (filterValue.length) {
|
|
this.setCustomFilterPredicate();
|
|
this.dataSource.filter = filterValue.trim().toLowerCase();
|
|
} else {
|
|
this.filterReportsByCategory();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Initializes the data source, paginator and sorter for reports table.
|
|
*/
|
|
setReports() {
|
|
this.dataSource = new MatTableDataSource(this.reportsData);
|
|
this.dataSource.paginator = this.paginator;
|
|
this.dataSource.sort = this.sort;
|
|
}
|
|
|
|
/**
|
|
* Filters the data source only for report category passed in route params.
|
|
*/
|
|
filterReportsByCategory() {
|
|
this.dataSource.filterPredicate = (data: any, filter: string) => {
|
|
return data.reportCategory === filter;
|
|
};
|
|
this.dataSource.filter = this.filter;
|
|
}
|
|
|
|
/**
|
|
* Filters Reports for filter value string and report category.
|
|
*/
|
|
setCustomFilterPredicate() {
|
|
this.dataSource.filterPredicate = (data: any, filter: string) => {
|
|
/** Transform the data into a lowercase string of all property values. */
|
|
const dataStr = Object.keys(data).reduce(function (currentTerm: string, key: string) {
|
|
/** Use an obscure Unicode character to delimit the words in the concatenated string.
|
|
* This avoids matches where the values of two columns combined will match the user's query
|
|
*/
|
|
return currentTerm + ((/** @type {any} */ (data)))[key] + '◬';
|
|
}, '').toLowerCase();
|
|
/** Transform the filter by converting it to lowercase and removing whitespace. */
|
|
const transformedFilter = filter.trim().toLowerCase();
|
|
/* Seperates filter for All reports page.*/
|
|
if (this.filter) {
|
|
return dataStr.indexOf(transformedFilter) !== -1 && data.reportCategory === this.filter;
|
|
} else {
|
|
return dataStr.indexOf(transformedFilter) !== -1;
|
|
}
|
|
};
|
|
}
|
|
|
|
}
|