From b60b5154fcd60488b8e2176195207a84f1099f37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Mon, 2 Nov 2020 05:40:59 +0200 Subject: [PATCH] Filters in project overview --- .../project-overview-screen.component.html | 56 +++++--- .../project-overview-screen.component.ts | 120 +++++++++++++++++- 2 files changed, 152 insertions(+), 24 deletions(-) diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html index 5c9046ed5..75acce1d5 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html @@ -9,24 +9,36 @@
- - - - - - + + + + + + + + + + + +
+
+
{ - this._calculateChartConfig(); + this._calculateData(); }); } ngOnInit(): void { this._fileDropOverlayService.initFileDropHandling(); - this._calculateChartConfig(); + this._calculateData(); this._displayNewRuleToast(); } @@ -162,10 +170,16 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { private _reloadProjects() { this.appStateService.loadAllProjects().then(() => { - this._calculateChartConfig(); + this._calculateData(); }); } + private _calculateData(): void { + this._computeAllFilters(); + this._filterFiles(); + this._calculateChartConfig(); + } + private _calculateChartConfig() { if (this.appStateService.activeProject) { const groups = groupBy(this.appStateService.activeProject?.files, 'status'); @@ -213,7 +227,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { fileStatus.projectId, fileStatus.fileId, () => { - this._calculateChartConfig(); + this._calculateData(); } ); } @@ -284,6 +298,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { this._fileUploadService.uploadFiles(uploadFiles); this._uploadStatusOverlayService.openStatusOverlay(); } + public canOpenFile(fileStatus: FileStatus): boolean { // TODO check correct condition for this return !this.isError(fileStatus) && !this.isProcessing(fileStatus); @@ -293,4 +308,99 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { const sortedByRecent: boolean = this.sortingOption === this.sortingOptions[0]; this.sortingOption = sortedByRecent ? this.sortingOptions[1] : this.sortingOptions[0]; } + + private _computeAllFilters() { + const allDistinctFileStatus = new Set(); + const allDistinctPeople = new Set(); + const allDistinctAddedDates = new Set(); + + // All people + this.appStateService.activeProject.project.memberIds.forEach((memberId) => + allDistinctPeople.add(memberId) + ); + + // File statuses + this.appStateService.activeProject.files.forEach((file) => + allDistinctFileStatus.add(file.status) + ); + + // Added dates + this.appStateService.activeProject.files.forEach((file) => + allDistinctAddedDates.add(moment(file.added).format('DD/MM/YYYY')) + ); + + this.statusFilters = []; + allDistinctFileStatus.forEach((status) => { + this.statusFilters.push({ + key: status, + label: humanize(status) + }); + }); + + this.peopleFilters = []; + allDistinctPeople.forEach((userId) => { + this.peopleFilters.push({ + key: userId, + label: this.userService.getNameForId(userId) + }); + }); + + this.addedDateFilters = []; + allDistinctAddedDates.forEach((date) => { + this.addedDateFilters.push({ + key: date, + label: date + }); + }); + } + + filtersChanged() { + this._filterFiles(); + } + + private _filterFiles() { + const filteredFiles = []; + + for (const file of this.appStateService.activeProject.files) { + const statusFilterMatched = this._checkFilter( + file, + this.statusFilters, + (file: FileStatus, filter: FilterModel) => file.status === filter.key + ); + + const peopleFilterMatched = this._checkFilter( + file, + this.peopleFilters, + (file: FileStatus, filter: FilterModel) => file.currentReviewer === filter.key + ); + + const addedFilterMatched = this._checkFilter( + file, + this.peopleFilters, + (file: FileStatus, filter: FilterModel) => + moment(file.added).format('DD/MM/YYYY') === filter.key + ); + + if (statusFilterMatched && peopleFilterMatched && addedFilterMatched) { + filteredFiles.push(file); + } + } + + this.displayedFiles = filteredFiles; + } + + private _checkFilter(file: FileStatus, filters: FilterModel[], validate: Function) { + const hasChecked = filters.find((f) => f.checked); + if (!hasChecked) { + return true; + } + let filterMatched = false; + for (const filter of filters) { + if (filter.checked && validate(file, filter)) { + filterMatched = true; + break; + } + } + return filterMatched; + } }