Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

use querylist to get popup filters

Browse Source
This commit is contained in:
Dan Percic 2021-06-29 23:55:40 +03:00
parent 220a2c6be9
commit 57d1b2c3d2
6 changed files with 53 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.html
View File

@ -5,8 +5,7 @@
icon="red:trash"
tooltip="dossier-templates-listing.action.delete"
type="dark-bg"
>
</redaction-circle-button>
></redaction-circle-button>
<redaction-circle-button
(action)="openEditDossierTemplateDialog($event)"
@ -14,6 +13,5 @@
icon="red:edit"
tooltip="dossier-templates-listing.action.edit"
type="dark-bg"
>
</redaction-circle-button>
></redaction-circle-button>
</div>

4
apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html
View File

@ -3,21 +3,18 @@
<div class="filters">
<div translate="filters.filter-by"></div>
<redaction-popup-filter
#statusFilter
(filtersChanged)="filtersChanged()"
[filterLabel]="'filters.status'"
[icon]="'red:status'"
[primaryFilters]="statusFilters"
></redaction-popup-filter>
<redaction-popup-filter
#peopleFilter
(filtersChanged)="filtersChanged()"
[filterLabel]="'filters.people'"
[icon]="'red:user'"
[primaryFilters]="peopleFilters"
></redaction-popup-filter>
<redaction-popup-filter
#needsWorkFilter
(filtersChanged)="filtersChanged()"
[filterLabel]="'filters.needs-work'"
[filterTemplate]="needsWorkTemplate"
@ -25,7 +22,6 @@
[primaryFilters]="needsWorkFilters"
></redaction-popup-filter>
<redaction-popup-filter
#dossierTemplateFilter
(filtersChanged)="filtersChanged()"
*ngIf="dossierTemplateFilters.length > 1"
[filterLabel]="'filters.dossier-templates'"

35
apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts
View File

@ -1,4 +1,12 @@
import { Component, Injector, OnDestroy, OnInit, ViewChild } from '@angular/core';
import {
Component,
Injector,
OnDestroy,
OnInit,
QueryList,
ViewChild,
ViewChildren
} from '@angular/core';
import { Dossier, DossierTemplateModel } from '@redaction/red-ui-http';
import { AppStateService } from '@state/app-state.service';
import { UserService } from '@services/user.service';
@ -50,19 +58,21 @@ export class DossierListingScreenComponent
};
quickFilters: FilterModel[];
readonly itemSize = 85;
@ViewChild(CdkVirtualScrollViewport) readonly scrollBar: CdkVirtualScrollViewport;
protected readonly _searchKey = 'name';
protected readonly _sortKey = 'dossier-listing';
@ViewChild(QuickFiltersComponent) protected _quickFiltersComponent: QuickFiltersComponent;
private _dossierAutoUpdateTimer: Subscription;
private _lastScrollPosition: number;
@ViewChild('statusFilter') private _statusFilterComponent: PopupFilterComponent;
@ViewChild('peopleFilter') private _peopleFilterComponent: PopupFilterComponent;
@ViewChild('needsWorkFilter') private _needsWorkFilterComponent: PopupFilterComponent;
@ViewChild('dossierTemplateFilter')
private _dossierTemplateFilterComponent: PopupFilterComponent;
private _routerEventsScrollPositionSub: Subscription;
private _fileChangedSub: Subscription;
@ViewChildren(PopupFilterComponent)
private readonly _filterList: QueryList<PopupFilterComponent>;
@ViewChild(QuickFiltersComponent)
protected readonly _quickFiltersComponent: QuickFiltersComponent;
constructor(
readonly permissionsService: PermissionsService,
private readonly _translateChartService: TranslateChartService,
@ -95,16 +105,6 @@ export class DossierListingScreenComponent
return this.allEntities.length - this.activeDossiersCount;
}
protected get _filterComponents(): (PopupFilterComponent | QuickFiltersComponent)[] {
return [
this._statusFilterComponent,
this._peopleFilterComponent,
this._needsWorkFilterComponent,
this._dossierTemplateFilterComponent,
this._quickFiltersComponent
];
}
protected get _filters(): {
values: FilterModel[];
checker: Function;
@ -156,6 +156,7 @@ export class DossierListingScreenComponent
this._lastScrollPosition = this.scrollViewport.measureScrollOffset('top');
}
});
this._filterComponents = [...this._filterList.toArray(), this._quickFiltersComponent];
}
ngOnAttach() {

4
apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
View File

@ -3,21 +3,18 @@
<div class="filters">
<div translate="filters.filter-by"></div>
<redaction-popup-filter
#statusFilter
(filtersChanged)="filtersChanged()"
[filterLabel]="'filters.status'"
[icon]="'red:status'"
[primaryFilters]="statusFilters"
></redaction-popup-filter>
<redaction-popup-filter
#peopleFilter
(filtersChanged)="filtersChanged()"
[filterLabel]="'filters.assigned-people'"
[icon]="'red:user'"
[primaryFilters]="peopleFilters"
></redaction-popup-filter>
<redaction-popup-filter
#needsWorkFilter
(filtersChanged)="filtersChanged()"
[filterLabel]="'filters.needs-work'"
[filterTemplate]="needsWorkTemplate"
@ -318,7 +315,6 @@
<div [class.collapsed]="collapsedDetails" class="right-container" redactionHasScrollbar>
<redaction-dossier-details
#dossierDetailsComponent
(filtersChanged)="filtersChanged($event)"
(openAssignDossierMembersDialog)="openAssignDossierMembersDialog()"
(openDossierDictionaryDialog)="openDossierDictionaryDialog()"

84
apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
View File

@ -5,7 +5,9 @@ import {
Injector,
OnDestroy,
OnInit,
ViewChild
QueryList,
ViewChild,
ViewChildren
} from '@angular/core';
import { NavigationStart, Router } from '@angular/router';
import { NotificationService, NotificationType } from '@services/notification.service';
@ -60,19 +62,25 @@ export class DossierOverviewScreenComponent
readonly itemSize = 80;
quickFilters: FilterModel[];
@ViewChild(QuickFiltersComponent) protected _quickFiltersComponent: QuickFiltersComponent;
@ViewChild(CdkVirtualScrollViewport) readonly scrollBar: CdkVirtualScrollViewport;
protected readonly _searchKey = 'searchField';
protected readonly _selectionKey = 'fileId';
protected readonly _sortKey = 'dossier-overview';
@ViewChild('dossierDetailsComponent', { static: false })
private _dossierDetailsComponent: DossierDetailsComponent;
@ViewChild(DossierDetailsComponent, { static: false })
private readonly _dossierDetailsComponent: DossierDetailsComponent;
private _filesAutoUpdateTimer: Subscription;
private _routerEventsScrollPositionSub: Subscription;
private _fileChangedSub: Subscription;
private _lastScrollPosition: number;
private _lastOpenedFileId = '';
@ViewChild('statusFilter') private _statusFilterComponent: PopupFilterComponent;
@ViewChild('peopleFilter') private _peopleFilterComponent: PopupFilterComponent;
@ViewChild('needsWorkFilter') private _needsWorkFilterComponent: PopupFilterComponent;
@ViewChildren(PopupFilterComponent)
private readonly _filterList: QueryList<PopupFilterComponent>;
@ViewChild(QuickFiltersComponent)
protected readonly _quickFiltersComponent: QuickFiltersComponent;
@ViewChild('fileInput') private _fileInput: ElementRef;
constructor(
@ -110,15 +118,6 @@ export class DossierOverviewScreenComponent
return this.quickFilters.filter(f => !f.required && f.checked);
}
protected get _filterComponents(): (PopupFilterComponent | QuickFiltersComponent)[] {
return [
this._statusFilterComponent,
this._peopleFilterComponent,
this._needsWorkFilterComponent,
this._quickFiltersComponent
];
}
protected get _filters(): {
values: FilterModel[];
checker: Function;
@ -184,6 +183,8 @@ export class DossierOverviewScreenComponent
this._lastScrollPosition = this.scrollViewport.measureScrollOffset('top');
}
});
this._filterComponents = [...this._filterList.toArray(), this._quickFiltersComponent];
}
ngOnDestroy(): void {
@ -223,10 +224,6 @@ export class DossierOverviewScreenComponent
});
}
isPending(fileStatusWrapper: FileStatusWrapper) {
return fileStatusWrapper.status === FileStatus.StatusEnum.UNPROCESSED;
}
isError(fileStatusWrapper: FileStatusWrapper) {
return fileStatusWrapper.status === FileStatus.StatusEnum.ERROR;
}
@ -278,12 +275,7 @@ export class DossierOverviewScreenComponent
fileLink(fileStatus: FileStatusWrapper) {
return this.permissionsService.canOpenFile(fileStatus)
? [
'/main/dossiers/' +
this.activeDossier.dossier.dossierId +
'/file/' +
fileStatus.fileId
]
? [`/main/dossiers/${this.activeDossier.dossierId}/file/${fileStatus.fileId}`]
: [];
}
@ -347,28 +339,18 @@ export class DossierOverviewScreenComponent
}
private _computeAllFilters() {
if (!this.activeDossier) {
return;
}
if (!this.activeDossier) return;
const allDistinctFileStatusWrapper = new Set<string>();
const allDistinctPeople = new Set<string>();
const allDistinctAddedDates = new Set<string>();
const allDistinctNeedsWork = new Set<string>();
// All people
this.allEntities.forEach(file => allDistinctPeople.add(file.currentReviewer));
// File statuses
this.allEntities.forEach(file => allDistinctFileStatusWrapper.add(file.status));
// Added dates
this.allEntities.forEach(file =>
allDistinctAddedDates.add(moment(file.added).format('DD/MM/YYYY'))
);
// Needs work
this.allEntities.forEach(file => {
allDistinctPeople.add(file.currentReviewer);
allDistinctFileStatusWrapper.add(file.status);
allDistinctAddedDates.add(moment(file.added).format('DD/MM/YYYY'));
if (this.permissionsService.fileRequiresReanalysis(file))
allDistinctNeedsWork.add('analysis');
if (file.hintsOnly) allDistinctNeedsWork.add('hint');
@ -379,13 +361,10 @@ export class DossierOverviewScreenComponent
if (file.hasNone) allDistinctNeedsWork.add('none');
});
const statusFilters = [];
allDistinctFileStatusWrapper.forEach(status => {
statusFilters.push({
key: status,
label: this._translateService.instant(status)
});
});
const statusFilters = [...allDistinctFileStatusWrapper].map(item => ({
key: item,
label: this._translateService.instant(item)
}));
statusFilters.sort((a, b) => StatusSorter[a.key] - StatusSorter[b.key]);
this.statusFilters = processFilters(this.statusFilters, statusFilters);
@ -407,13 +386,10 @@ export class DossierOverviewScreenComponent
});
this.peopleFilters = processFilters(this.peopleFilters, peopleFilters);
const needsWorkFilters = [];
allDistinctNeedsWork.forEach(type => {
needsWorkFilters.push({
key: type,
label: `filter.${type}`
});
});
const needsWorkFilters = [...allDistinctNeedsWork].map(item => ({
key: item,
label: this._translateService.instant('filter.' + item)
}));
needsWorkFilters.sort(
(a, b) => RedactionFilterSorter[a.key] - RedactionFilterSorter[b.key]
);

8
apps/red-ui/src/app/modules/shared/base/base-listing.component.ts
View File

@ -30,6 +30,8 @@ export abstract class BaseListingComponent<T = any> {
protected readonly _searchKey: string;
protected readonly _selectionKey: string;
protected readonly _sortKey: ScreenName;
// Overwrite this in ngOnInit
protected _filterComponents: (PopupFilterComponent | QuickFiltersComponent)[] = [];
protected constructor(protected readonly _injector: Injector) {
this._formBuilder = this._injector.get<FormBuilder>(FormBuilder);
@ -41,7 +43,7 @@ export abstract class BaseListingComponent<T = any> {
get hasActiveFilters() {
return (
this._filterComponents
.filter(f => !!f)
?.filter(f => !!f)
.reduce((prev, component) => prev || component?.hasActiveFilters, false) ||
this.searchForm.get('query').value
);
@ -71,10 +73,6 @@ export abstract class BaseListingComponent<T = any> {
return [];
}
protected get _filterComponents(): (PopupFilterComponent | QuickFiltersComponent)[] {
return [];
}
// ----
private get _getSearchKey(): string {