From c7d76e31412a0b21124d188cfd967dee9967bd01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Mon, 19 Apr 2021 00:18:22 +0300 Subject: [PATCH] Base listing (filter, search, select) for project listing & overview --- .../project-listing-screen.component.html | 16 +- .../project-listing-screen.component.ts | 107 +++++------- .../project-overview-screen.component.html | 35 ++-- .../project-overview-screen.component.ts | 152 ++++++------------ .../shared/base/base-listing.component.ts | 132 +++++++++++++++ .../src/app/modules/shared/shared.module.ts | 2 + 6 files changed, 239 insertions(+), 205 deletions(-) create mode 100644 apps/red-ui/src/app/modules/shared/base/base-listing.component.ts diff --git a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html index 13b48099b..580753ad9 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html @@ -48,7 +48,7 @@
- {{ 'project-listing.table-header.title' | translate: { length: displayedProjects.length || 0 } }} + {{ 'project-listing.table-header.title' | translate: { length: displayedEntities.length || 0 } }}
@@ -70,22 +70,18 @@
- +
- - diff --git a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts index ba7d43e8f..cdeffd5a8 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { Component, Injector, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { FileManagementControllerService, Project, RuleSetModel } from '@redaction/red-ui-http'; import { AppStateService } from '../../../../state/app-state.service'; import { UserService } from '../../../../services/user.service'; @@ -7,7 +7,6 @@ import { groupBy } from '../../../../utils/functions'; import { FilterModel } from '../../../shared/components/filter/model/filter.model'; import { annotationFilterChecker, - getFilteredEntities, processFilters, projectMemberChecker, projectStatusChecker, @@ -23,21 +22,19 @@ import { TranslateChartService } from '../../../../services/translate-chart.serv import { RedactionFilterSorter } from '../../../../utils/sorters/redaction-filter-sorter'; import { StatusSorter } from '../../../../utils/sorters/status-sorter'; import { Router } from '@angular/router'; -import { FormBuilder, FormGroup } from '@angular/forms'; -import { debounce } from '../../../../utils/debounce'; import { FilterComponent } from '../../../shared/components/filter/filter.component'; import { ProjectsDialogService } from '../../services/projects-dialog.service'; +import { BaseListingComponent } from '../../../shared/base/base-listing.component'; @Component({ selector: 'redaction-project-listing-screen', templateUrl: './project-listing-screen.component.html', styleUrls: ['./project-listing-screen.component.scss'] }) -export class ProjectListingScreenComponent implements OnInit, OnDestroy { +export class ProjectListingScreenComponent extends BaseListingComponent implements OnInit, OnDestroy { public projectsChartData: DoughnutChartConfig[] = []; public documentsChartData: DoughnutChartConfig[] = []; - public searchForm: FormGroup; public actionMenuOpen: boolean; public statusFilters: FilterModel[]; @@ -51,7 +48,6 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy { statusFilters: [] }; - public displayedProjects: ProjectWrapper[] = []; private projectAutoUpdateTimer: Subscription; @ViewChild('statusFilter') private _statusFilterComponent: FilterComponent; @@ -60,36 +56,33 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy { @ViewChild('ruleSetFilter') private _ruleSetFilterComponent: FilterComponent; constructor( - public readonly appStateService: AppStateService, + private readonly _appStateService: AppStateService, public readonly userService: UserService, public readonly permissionsService: PermissionsService, - private readonly _changeDetectorRef: ChangeDetectorRef, private readonly _dialogService: ProjectsDialogService, private readonly _translateService: TranslateService, private readonly _router: Router, public readonly sortingService: SortingService, public readonly translateChartService: TranslateChartService, - private readonly _formBuilder: FormBuilder, - private readonly _fileManagementControllerService: FileManagementControllerService + private readonly _fileManagementControllerService: FileManagementControllerService, + protected readonly _injector: Injector ) { - this.appStateService.reset(); - this.searchForm = this._formBuilder.group({ - query: [''] - }); - - this.searchForm.valueChanges.subscribe((value) => this._executeSearch(value)); + super(_injector); + this._appStateService.reset(); + this._loadEntitiesFromState(); } public ngOnInit(): void { this.projectAutoUpdateTimer = timer(0, 10000) .pipe( tap(async () => { - await this.appStateService.loadAllProjects(); + await this._appStateService.loadAllProjects(); + this._loadEntitiesFromState(); }) ) .subscribe(); this._calculateData(); - this.appStateService.fileChanged.subscribe(() => { + this._appStateService.fileChanged.subscribe(() => { this._calculateData(); }); } @@ -98,37 +91,30 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy { this.projectAutoUpdateTimer.unsubscribe(); } - public get hasActiveFilters() { - return ( - this._statusFilterComponent?.hasActiveFilters || - this._peopleFilterComponent?.hasActiveFilters || - this._needsWorkFilterComponent?.hasActiveFilters || - this._ruleSetFilterComponent?.hasActiveFilters || - this.searchForm.get('query').value - ); + private _loadEntitiesFromState() { + this.allEntities = this._appStateService.allProjects; + } + + protected get _searchKey() { + return 'name'; } public get noData() { - return this.appStateService.allProjects?.length === 0; + return this.allEntities.length === 0; } - public resetFilters() { - this._statusFilterComponent.deactivateAllFilters(); - this._peopleFilterComponent.deactivateAllFilters(); - this._needsWorkFilterComponent.deactivateAllFilters(); - this._ruleSetFilterComponent.deactivateAllFilters(); - this.filtersChanged(); - this.searchForm.reset({ query: '' }); + protected get filterComponents(): FilterComponent[] { + return [this._statusFilterComponent, this._peopleFilterComponent, this._needsWorkFilterComponent, this._ruleSetFilterComponent]; } private _calculateData() { this._computeAllFilters(); - this._filterProjects(); + this._filterEntities(); this.projectsChartData = [ - { value: this.activeProjects, color: 'ACTIVE', label: 'active' }, - { value: this.inactiveProjects, color: 'DELETED', label: 'archived' } + { value: this.activeProjectsCount, color: 'ACTIVE', label: 'active' }, + { value: this.inactiveProjectsCount, color: 'DELETED', label: 'archived' } ]; - const groups = groupBy(this.appStateService.aggregatedFiles, 'status'); + const groups = groupBy(this._appStateService.aggregatedFiles, 'status'); this.documentsChartData = []; for (const key of Object.keys(groups)) { this.documentsChartData.push({ @@ -150,12 +136,12 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy { return this.sortingService.getSortingOption('project-listing'); } - public get activeProjects() { - return this.appStateService.allProjects.reduce((i, p) => i + (p.project.status === Project.StatusEnum.ACTIVE ? 1 : 0), 0); + public get activeProjectsCount() { + return this.allEntities.filter((p) => p.project.status === Project.StatusEnum.ACTIVE).length; } - public get inactiveProjects() { - return this.appStateService.allProjects.length - this.activeProjects; + public get inactiveProjectsCount() { + return this.allEntities.length - this.activeProjectsCount; } public documentCount(project: ProjectWrapper) { @@ -171,7 +157,7 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy { } public getRuleSet(pw: ProjectWrapper): RuleSetModel { - return this.appStateService.getRuleSetById(pw.project.ruleSetId); + return this._appStateService.getRuleSetById(pw.project.ruleSetId); } public openAddProjectDialog(): void { @@ -193,7 +179,7 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy { const allDistinctPeople = new Set(); const allDistinctNeedsWork = new Set(); const allDistinctRuleSets = new Set(); - this.appStateService.allProjects.forEach((entry) => { + this.allEntities.forEach((entry) => { // all people entry.project.memberIds.forEach((memberId) => allDistinctPeople.add(memberId)); // file statuses @@ -248,25 +234,14 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy { allDistinctRuleSets.forEach((ruleSetId) => { ruleSetFilters.push({ key: ruleSetId, - label: this.appStateService.getRuleSetById(ruleSetId).name + label: this._appStateService.getRuleSetById(ruleSetId).name }); }); this.ruleSetFilters = processFilters(this.ruleSetFilters, ruleSetFilters); } - filtersChanged(filters?: { [key: string]: FilterModel[] }): void { - if (filters) { - for (const key of Object.keys(filters)) { - for (let idx = 0; idx < this[key].length; ++idx) { - this[key][idx] = filters[key][idx]; - } - } - } - this._filterProjects(); - } - - private get _filteredProjects(): ProjectWrapper[] { - const filters = [ + protected get filters(): { values: FilterModel[]; checker: Function; matchAll?: boolean; checkerArgs?: any }[] { + return [ { values: this.statusFilters, checker: projectStatusChecker }, { values: this.peopleFilters, checker: projectMemberChecker }, { @@ -277,25 +252,15 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy { }, { values: this.ruleSetFilters, checker: ruleSetChecker } ]; - return getFilteredEntities(this.appStateService.allProjects, filters); } - private _filterProjects() { + protected preFilter() { this.detailsContainerFilters = { statusFilters: this.statusFilters.map((f) => ({ ...f })) }; - this.displayedProjects = this._filteredProjects.filter((project) => - project.name.toLowerCase().includes(this.searchForm.get('query').value.toLowerCase()) - ); - this._changeDetectorRef.detectChanges(); } - @debounce(200) - private _executeSearch(value: { query: string }) { - this.displayedProjects = this._filteredProjects.filter((project) => project.name.toLowerCase().includes(value.query.toLowerCase())); - } - - actionPerformed(pw: ProjectWrapper) { + public actionPerformed(pw: ProjectWrapper) { this._calculateData(); } } diff --git a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html index c4f6ba38c..f8c08808d 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html @@ -1,4 +1,4 @@ -
+
@@ -53,8 +53,7 @@ icon="red:assign" > - - +
- + - {{ 'project-overview.table-header.title' | translate: { length: displayedFiles.length || 0 } }} + {{ 'project-overview.table-header.title' | translate: { length: displayedEntities.length || 0 } }}
-
+
@@ -162,30 +161,26 @@
- +
-
-
- +
+
+
diff --git a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts index db759f691..a5519513b 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts +++ b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core'; +import { Component, HostListener, Injector, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { NotificationService, NotificationType } from '../../../../services/notification.service'; import { AppStateService } from '../../../../state/app-state.service'; @@ -12,7 +12,7 @@ import { FilterModel } from '../../../shared/components/filter/model/filter.mode import * as moment from 'moment'; import { ProjectDetailsComponent } from '../../components/project-details/project-details.component'; import { FileStatusWrapper } from '../../../../models/file/file-status.wrapper'; -import { annotationFilterChecker, getFilteredEntities, keyChecker, processFilters } from '../../../shared/components/filter/utils/filter-utils'; +import { annotationFilterChecker, keyChecker, processFilters } from '../../../shared/components/filter/utils/filter-utils'; import { SortingOption, SortingService } from '../../../../services/sorting.service'; import { PermissionsService } from '../../../../services/permissions.service'; import { UserService } from '../../../../services/user.service'; @@ -21,27 +21,25 @@ import { Subscription, timer } from 'rxjs'; import { tap } from 'rxjs/operators'; import { RedactionFilterSorter } from '../../../../utils/sorters/redaction-filter-sorter'; import { StatusSorter } from '../../../../utils/sorters/status-sorter'; -import { FormBuilder, FormGroup } from '@angular/forms'; -import { debounce } from '../../../../utils/debounce'; +import { FormGroup } from '@angular/forms'; import { convertFiles, handleFileDrop } from '../../../../utils/file-drop-utils'; import { FilterComponent } from '../../../shared/components/filter/filter.component'; import { ProjectsDialogService } from '../../services/projects-dialog.service'; +import { BaseListingComponent } from '../../../shared/base/base-listing.component'; +import { ProjectWrapper } from '../../../../state/model/project.wrapper'; @Component({ selector: 'redaction-project-overview-screen', templateUrl: './project-overview-screen.component.html', styleUrls: ['./project-overview-screen.component.scss'] }) -export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { - public selectedFileIds: string[] = []; +export class ProjectOverviewScreenComponent extends BaseListingComponent implements OnInit, OnDestroy { public statusFilters: FilterModel[]; public peopleFilters: FilterModel[]; public needsWorkFilters: FilterModel[]; public collapsedDetails = false; public searchForm: FormGroup; - displayedFiles: FileStatusWrapper[] = []; - detailsContainerFilters: { needsWorkFilters: FilterModel[]; statusFilters: FilterModel[]; @@ -56,7 +54,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { @ViewChild('needsWorkFilter') private _needsWorkFilterComponent: FilterComponent; constructor( - public readonly appStateService: AppStateService, + private readonly _appStateService: AppStateService, public readonly userService: UserService, private readonly _sortingService: SortingService, public readonly permissionsService: PermissionsService, @@ -67,23 +65,19 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { private readonly _fileUploadService: FileUploadService, private readonly _statusOverlayService: StatusOverlayService, private readonly _router: Router, - private readonly _changeDetectorRef: ChangeDetectorRef, private readonly _translateService: TranslateService, private readonly _fileDropOverlayService: FileDropOverlayService, - private readonly _formBuilder: FormBuilder, - private readonly _fileManagementControllerService: FileManagementControllerService + private readonly _fileManagementControllerService: FileManagementControllerService, + protected readonly _injector: Injector ) { - this.searchForm = this._formBuilder.group({ - query: [''] - }); - - this.searchForm.valueChanges.subscribe((value) => this._executeSearch(value)); + super(_injector); this._activatedRoute.params.subscribe((params) => { - this.appStateService.activateProject(params.projectId); + this._appStateService.activateProject(params.projectId); + this._loadEntitiesFromState(); }); - this.appStateService.fileChanged.subscribe(() => { + this._appStateService.fileChanged.subscribe(() => { this.calculateData(); }); } @@ -92,7 +86,8 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { this.filesAutoUpdateTimer = timer(0, 7500) .pipe( tap(async () => { - await this.appStateService.reloadActiveProjectFilesIfNecessary(); + await this._appStateService.reloadActiveProjectFilesIfNecessary(); + this._loadEntitiesFromState(); }) ) .subscribe(); @@ -105,14 +100,20 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { this.filesAutoUpdateTimer.unsubscribe(); } - @debounce(200) - private _executeSearch(value: { query: string }) { - this.displayedFiles = this._filteredFiles.filter((file) => file.filename.toLowerCase().includes(value.query.toLowerCase())); - this.selectedFileIds = this.displayedFiles.map((d) => d.fileId).filter((x) => this.selectedFileIds.includes(x)); + protected get _searchKey() { + return 'filename'; + } + + protected get _selectionKey() { + return 'fileId'; + } + + public get activeProject(): ProjectWrapper { + return this._appStateService.activeProject; } public reanalyseProject() { - return this.appStateService + return this._appStateService .reanalyzeProject() .then(() => { this.reloadProjects(); @@ -151,76 +152,38 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { this._sortingService.toggleSort('project-overview', $event); } - public get hasActiveFilters() { - return ( - this._statusFilterComponent?.hasActiveFilters || - this._peopleFilterComponent?.hasActiveFilters || - this._needsWorkFilterComponent?.hasActiveFilters || - this.searchForm.get('query').value - ); + protected get filterComponents(): FilterComponent[] { + return [this._statusFilterComponent, this._peopleFilterComponent, this._needsWorkFilterComponent]; } - public resetFilters() { - this._statusFilterComponent.deactivateAllFilters(); - this._peopleFilterComponent.deactivateAllFilters(); - this._needsWorkFilterComponent.deactivateAllFilters(); - this.filtersChanged(); - this.searchForm.reset({ query: '' }); + private _loadEntitiesFromState() { + this.allEntities = this._appStateService.activeProject.files; } reloadProjects() { - this.appStateService.getFiles(this.appStateService.activeProject, false).then(() => { + this._appStateService.getFiles(this._appStateService.activeProject, false).then(() => { this.calculateData(); }); } calculateData(): void { - if (!this.appStateService.activeProjectId) { + if (!this._appStateService.activeProjectId) { return; } + this._loadEntitiesFromState(); this._computeAllFilters(); - this._filterFiles(); + this._filterEntities(); this._projectDetailsComponent?.calculateChartConfig(); this._changeDetectorRef.detectChanges(); } - toggleFileSelected($event: MouseEvent, file: FileStatusWrapper) { - $event.stopPropagation(); - const idx = this.selectedFileIds.indexOf(file.fileId); - if (idx === -1) { - this.selectedFileIds.push(file.fileId); - } else { - this.selectedFileIds.splice(idx, 1); - } - } - - public toggleSelectAll() { - if (this.areSomeFilesSelected) { - this.selectedFileIds = []; - } else { - this.selectedFileIds = this.displayedFiles.map((file) => file.fileId); - } - } - - public get areAllFilesSelected() { - return this.displayedFiles.length !== 0 && this.selectedFileIds.length === this.displayedFiles.length; - } - - public get areSomeFilesSelected() { - return this.selectedFileIds.length > 0; - } - - public isFileSelected(file: FileStatusWrapper) { - return this.selectedFileIds.indexOf(file.fileId) !== -1; - } - public fileId(index, item) { return item.fileId; } @HostListener('drop', ['$event']) onDrop(event: DragEvent) { - handleFileDrop(event, this.appStateService.activeProject, this._uploadFiles.bind(this)); + handleFileDrop(event, this.activeProject, this._uploadFiles.bind(this)); } @HostListener('dragover', ['$event']) @@ -230,7 +193,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { } async uploadFiles(files: File[] | FileList) { - await this._uploadFiles(convertFiles(files, this.appStateService.activeProject)); + await this._uploadFiles(convertFiles(files, this.activeProject)); } private async _uploadFiles(files: FileUploadModel[]) { @@ -242,7 +205,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { } private _computeAllFilters() { - if (!this.appStateService.activeProject) { + if (!this.activeProject) { return; } @@ -252,16 +215,16 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { const allDistinctNeedsWork = new Set(); // All people - this.appStateService.activeProject.files.forEach((file) => allDistinctPeople.add(file.currentReviewer)); + this.allEntities.forEach((file) => allDistinctPeople.add(file.currentReviewer)); // File statuses - this.appStateService.activeProject.files.forEach((file) => allDistinctFileStatusWrapper.add(file.status)); + this.allEntities.forEach((file) => allDistinctFileStatusWrapper.add(file.status)); // Added dates - this.appStateService.activeProject.files.forEach((file) => allDistinctAddedDates.add(moment(file.added).format('DD/MM/YYYY'))); + this.allEntities.forEach((file) => allDistinctAddedDates.add(moment(file.added).format('DD/MM/YYYY'))); // Needs work - this.appStateService.activeProject.files.forEach((file) => { + this.allEntities.forEach((file) => { if (this.permissionsService.fileRequiresReanalysis(file)) allDistinctNeedsWork.add('analysis'); if (file.hintsOnly) allDistinctNeedsWork.add('hint'); if (file.hasRedactions) allDistinctNeedsWork.add('redaction'); @@ -310,25 +273,12 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { this.needsWorkFilters = processFilters(this.needsWorkFilters, needsWorkFilters); } - filtersChanged(filters?: { [key: string]: FilterModel[] }): void { - if (filters) { - for (const key of Object.keys(filters)) { - for (let idx = 0; idx < this[key].length; ++idx) { - this[key][idx] = filters[key][idx]; - } - } - } - this._filterFiles(); - } - fileLink(fileStatus: FileStatusWrapper) { - return this.permissionsService.canOpenFile(fileStatus) - ? ['/ui/projects/' + this.appStateService.activeProject.project.projectId + '/file/' + fileStatus.fileId] - : []; + return this.permissionsService.canOpenFile(fileStatus) ? ['/ui/projects/' + this.activeProject.project.projectId + '/file/' + fileStatus.fileId] : []; } - private get _filteredFiles(): FileStatusWrapper[] { - const filters = [ + protected get filters(): { values: FilterModel[]; checker: Function; matchAll?: boolean; checkerArgs?: any }[] { + return [ { values: this.statusFilters, checker: keyChecker('status') }, { values: this.peopleFilters, checker: keyChecker('currentReviewer') }, { @@ -338,36 +288,32 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { checkerArgs: this.permissionsService } ]; - return getFilteredEntities(this.appStateService.activeProject.files, filters); } - private _filterFiles() { - this.displayedFiles = this._filteredFiles.filter((file) => file.filename.toLowerCase().includes(this.searchForm.get('query').value.toLowerCase())); - this.selectedFileIds = this.displayedFiles.map((d) => d.fileId).filter((x) => this.selectedFileIds.includes(x)); + protected preFilter() { this.detailsContainerFilters = { needsWorkFilters: this.needsWorkFilters.map((f) => ({ ...f })), statusFilters: this.statusFilters.map((f) => ({ ...f })) }; - this._changeDetectorRef.detectChanges(); } bulkActionPerformed() { - this.selectedFileIds = []; + this.selectedEntitiesIds = []; this.reloadProjects(); } public openEditProjectDialog($event: MouseEvent) { - this._dialogService.openEditProjectDialog($event, this.appStateService.activeProject); + this._dialogService.openEditProjectDialog($event, this.activeProject); } public openDeleteProjectDialog($event: MouseEvent) { - this._dialogService.openDeleteProjectDialog($event, this.appStateService.activeProject, () => { + this._dialogService.openDeleteProjectDialog($event, this.activeProject, () => { this._router.navigate(['/ui/projects']); }); } public openAssignProjectMembersDialog(): void { - this._dialogService.openAssignProjectMembersAndOwnerDialog(null, this.appStateService.activeProject, () => { + this._dialogService.openAssignProjectMembersAndOwnerDialog(null, this.activeProject, () => { this.reloadProjects(); }); } diff --git a/apps/red-ui/src/app/modules/shared/base/base-listing.component.ts b/apps/red-ui/src/app/modules/shared/base/base-listing.component.ts new file mode 100644 index 000000000..65391d1f1 --- /dev/null +++ b/apps/red-ui/src/app/modules/shared/base/base-listing.component.ts @@ -0,0 +1,132 @@ +import { ChangeDetectorRef, Component, Inject, Injector } from '@angular/core'; +import { FilterModel } from '../components/filter/model/filter.model'; +import { getFilteredEntities } from '../components/filter/utils/filter-utils'; +import { FilterComponent } from '../components/filter/filter.component'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { debounce } from '../../../utils/debounce'; + +// Filter, search, select + +@Component({ template: '' }) +export class BaseListingComponent { + public allEntities: T[] = []; + public filteredEntities: T[] = []; + public displayedEntities: T[] = []; + public selectedEntitiesIds: string[] = []; + public searchForm: FormGroup; + + protected readonly _formBuilder: FormBuilder; + protected readonly _changeDetectorRef: ChangeDetectorRef; + + // ---- + // Overwrite in child class: + protected get _searchKey(): string { + throw new Error('Not implemented.'); + } + + protected get _selectionKey(): string { + throw new Error('Not implemented.'); + } + + protected get filters(): { values: FilterModel[]; checker: Function; matchAll?: boolean; checkerArgs?: any }[] { + throw new Error('Not implemented.'); + } + + protected preFilter() { + throw new Error('Not implemented.'); + } + + protected get filterComponents(): FilterComponent[] { + throw new Error('Not implemented.'); + } + + // ---- + + constructor(protected readonly _injector: Injector) { + this._formBuilder = this._injector.get(FormBuilder); + this._changeDetectorRef = this._injector.get(ChangeDetectorRef); + this._initSearch(); + } + + private _initSearch() { + this.searchForm = this._formBuilder.group({ + query: [''] + }); + + this.searchForm.valueChanges.subscribe(() => this._executeSearch()); + } + + public filtersChanged(filters?: { [key: string]: FilterModel[] }): void { + if (filters) { + for (const key of Object.keys(filters)) { + for (let idx = 0; idx < this[key].length; ++idx) { + this[key][idx] = filters[key][idx]; + } + } + } + this._filterEntities(); + } + + private get _filteredEntities(): T[] { + const filters = this.filters; + return getFilteredEntities(this.allEntities, filters); + } + + protected _filterEntities() { + this.preFilter(); + this.filteredEntities = this._filteredEntities; + this.selectedEntitiesIds = this.displayedEntities.map((entity) => entity[this._selectionKey]).filter((id) => this.selectedEntitiesIds.includes(id)); + this._executeSearch(); + this._changeDetectorRef.detectChanges(); + } + + public resetFilters() { + for (const filterComponent of this.filterComponents) { + filterComponent.deactivateAllFilters(); + } + this.filtersChanged(); + this.searchForm.reset({ query: '' }); + } + + public get hasActiveFilters() { + return this.filterComponents.reduce((prev, component) => prev || component?.hasActiveFilters, false) || this.searchForm.get('query').value; + } + + @debounce(200) + protected _executeSearch() { + this.displayedEntities = this.filteredEntities.filter((entity) => + entity[this._searchKey].toLowerCase().includes(this.searchForm.get('query').value.toLowerCase()) + ); + } + + toggleEntitySelected($event: MouseEvent, entity: T) { + console.log({ entity, key: entity[this._selectionKey] }); + $event.stopPropagation(); + const idx = this.selectedEntitiesIds.indexOf(entity[this._selectionKey]); + if (idx === -1) { + this.selectedEntitiesIds.push(entity[this._selectionKey]); + } else { + this.selectedEntitiesIds.splice(idx, 1); + } + } + + public toggleSelectAll() { + if (this.areSomeEntitiesSelected) { + this.selectedEntitiesIds = []; + } else { + this.selectedEntitiesIds = this.displayedEntities.map((entity) => entity[this._selectionKey]); + } + } + + public get areAllEntitiesSelected() { + return this.displayedEntities.length !== 0 && this.selectedEntitiesIds.length === this.displayedEntities.length; + } + + public get areSomeEntitiesSelected() { + return this.selectedEntitiesIds.length > 0; + } + + public isEntitySelected(entity: T) { + return this.selectedEntitiesIds.indexOf(entity[this._selectionKey]) !== -1; + } +} diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts index a07531dda..1dc589b8e 100644 --- a/apps/red-ui/src/app/modules/shared/shared.module.ts +++ b/apps/red-ui/src/app/modules/shared/shared.module.ts @@ -27,6 +27,7 @@ import { HiddenActionComponent } from './components/hidden-action/hidden-action. import { ConfirmationDialogComponent } from './dialogs/confirmation-dialog/confirmation-dialog.component'; import { FilterComponent } from './components/filter/filter.component'; import { EmptyStateComponent } from './components/empty-state/empty-state.component'; +import { BaseListingComponent } from './base/base-listing.component'; const buttons = [ChevronButtonComponent, CircleButtonComponent, FileDownloadBtnComponent, IconButtonComponent, UserButtonComponent]; @@ -44,6 +45,7 @@ const components = [ FilterComponent, ConfirmationDialogComponent, EmptyStateComponent, + BaseListingComponent, ...buttons ];