acknowledge string filter

- display correct number of show entries
- all bulk actions should only apply to filtered data
- fix user group filter
This commit is contained in:
Maximilian Krambach 2019-01-29 12:11:11 +01:00
parent 00b15228f7
commit 6a969883ad
13 changed files with 49 additions and 15 deletions

View File

@ -67,7 +67,7 @@ export abstract class FilterListService<M extends BaseModel, V extends BaseViewM
} }
/** /**
* @returns the amount of items that pass the current filters * @returns the amount of items that pass the filter service's filters
*/ */
public get filteredCount(): number { public get filteredCount(): number {
return this.filteredData ? this.filteredData.length : 0; return this.filteredData ? this.filteredData.length : 0;

View File

@ -1,6 +1,6 @@
<div class="custom-table-header flex-spaced on-transition-fade"> <div class="custom-table-header flex-spaced on-transition-fade">
<div class="filter-count" *ngIf="filterService"> <div class="filter-count" *ngIf="filterService">
<span>{{ filterService.filteredCount }}&nbsp;</span><span translate>of</span> <span>{{ displayedCount }}&nbsp;</span><span translate>of</span>
<span>&nbsp;{{ filterService.totalCount }}</span> <span>&nbsp;{{ filterService.totalCount }}</span>
</div> </div>
<div class="current-filters" *ngIf="filterService && filterService.activeFilterCount"> <div class="current-filters" *ngIf="filterService && filterService.activeFilterCount">

View File

@ -19,7 +19,7 @@ import { ViewportService } from '../../../core/services/viewport.service';
* *
* ```html * ```html
* <os-sort-filter-bar [sortService]="sortService" [filterService]="filterService" * <os-sort-filter-bar [sortService]="sortService" [filterService]="filterService"
* (searchFieldChange)="searchFilter($event)"> * (searchFieldChange)="searchFilter($event)" [filterCount]="filteredCount">
* </os-sort-filter-bar> * </os-sort-filter-bar>
* ``` * ```
*/ */
@ -35,6 +35,12 @@ export class OsSortFilterBarComponent<V extends BaseViewModel> {
@Input() @Input()
public sortService: SortListService<V>; public sortService: SortListService<V>;
/** Optional number to overwrite the display of the filtered data count, if any additional filters
* (e.g. the angular search bar) are applied on top of these filters
*/
@Input()
public filterCount: number;
/** /**
* The currently active filter service for the list view. It is supposed to * The currently active filter service for the list view. It is supposed to
* be a FilterListService extendingFilterListService. * be a FilterListService extendingFilterListService.
@ -61,6 +67,18 @@ export class OsSortFilterBarComponent<V extends BaseViewModel> {
*/ */
public isSearchBar = false; public isSearchBar = false;
/**
* Return the amount of data passing filters. Priorizes the override in {@link filterCount} over
* the information from the filterService
*/
public get displayedCount(): number {
if (this.filterCount === undefined || this.filterCount === null) {
return this.filterService.filterCount;
} else {
return this.filterCount;
}
}
/** /**
* Constructor. Also creates a filtermenu component and a bottomSheet * Constructor. Also creates a filtermenu component and a bottomSheet
* @param translate * @param translate

View File

@ -13,8 +13,7 @@
</div> </div>
</os-head-bar> </os-head-bar>
<mat-drawer-container class="on-transition-fade"> <mat-drawer-container class="on-transition-fade">
<os-sort-filter-bar [filterService]="filterService" (searchFieldChange)="searchFilter($event)"></os-sort-filter-bar> <os-sort-filter-bar [filterCount]="filteredCount" [filterService]="filterService" (searchFieldChange)="searchFilter($event)"></os-sort-filter-bar>
<mat-table class="os-listview-table on-transition-fade" [dataSource]="dataSource" matSort> <mat-table class="os-listview-table on-transition-fade" [dataSource]="dataSource" matSort>
<!-- selector column --> <!-- selector column -->
<ng-container matColumnDef="selector"> <ng-container matColumnDef="selector">

View File

@ -225,6 +225,6 @@ export class AgendaListComponent extends ListViewBaseComponent<ViewItem> impleme
* Export all items as CSV * Export all items as CSV
*/ */
public csvExportItemList(): void { public csvExportItemList(): void {
this.csvExport.exportItemList(this.dataSource.data); this.csvExport.exportItemList(this.dataSource.filteredData);
} }
} }

View File

@ -16,7 +16,7 @@
</os-head-bar> </os-head-bar>
<mat-drawer-container class="on-transition-fade"> <mat-drawer-container class="on-transition-fade">
<os-sort-filter-bar [filterService]="filterService" [sortService]="sortService" <os-sort-filter-bar [filterCount]="filteredCount" [filterService]="filterService" [sortService]="sortService"
(searchFieldChange)="searchFilter($event)"> (searchFieldChange)="searchFilter($event)">
</os-sort-filter-bar> </os-sort-filter-bar>
<mat-table class="os-listview-table on-transition-fade" [dataSource]="dataSource" matSort> <mat-table class="os-listview-table on-transition-fade" [dataSource]="dataSource" matSort>

View File

@ -46,6 +46,13 @@ export abstract class ListViewBaseComponent<V extends BaseViewModel> extends Bas
@ViewChild(MatSort) @ViewChild(MatSort)
protected sort: MatSort; protected sort: MatSort;
/**
* @returns the amount of currently dispalyed items (only showing items that pass all filters)
*/
public get filteredCount(): number {
return this.dataSource.filteredData.length;
}
/** /**
* Constructor for list view bases * Constructor for list view bases
* @param titleService the title serivce * @param titleService the title serivce
@ -132,7 +139,7 @@ export abstract class ListViewBaseComponent<V extends BaseViewModel> extends Bas
* Select all files in the current data source * Select all files in the current data source
*/ */
public selectAll(): void { public selectAll(): void {
this.selectedRows = this.dataSource.data; this.selectedRows = this.dataSource.filteredData;
} }
public deselectAll(): void { public deselectAll(): void {
@ -175,7 +182,7 @@ export abstract class ListViewBaseComponent<V extends BaseViewModel> extends Bas
protected checkSelection(): void { protected checkSelection(): void {
const newSelection = []; const newSelection = [];
this.selectedRows.forEach(selectedrow => { this.selectedRows.forEach(selectedrow => {
const newrow = this.dataSource.data.find(item => item.id === selectedrow.id); const newrow = this.dataSource.filteredData.find(item => item.id === selectedrow.id);
if (newrow) { if (newrow) {
newSelection.push(newrow); newSelection.push(newrow);
} }

View File

@ -49,7 +49,7 @@
</os-head-bar> </os-head-bar>
<mat-drawer-container class="on-transition-fade"> <mat-drawer-container class="on-transition-fade">
<os-sort-filter-bar [sortService]="sortService" [filterService]="filterService" <os-sort-filter-bar [filterCount]="filteredCount" [sortService]="sortService" [filterService]="filterService"
(searchFieldChange)="searchFilter($event)"> (searchFieldChange)="searchFilter($event)">
</os-sort-filter-bar> </os-sort-filter-bar>
<mat-table class="os-listview-table on-transition-fade" [dataSource]="dataSource" matSort> <mat-table class="os-listview-table on-transition-fade" [dataSource]="dataSource" matSort>

View File

@ -18,6 +18,7 @@
<mat-drawer-container class="on-transition-fade"> <mat-drawer-container class="on-transition-fade">
<os-sort-filter-bar <os-sort-filter-bar
[filterCount]="filteredCount"
[filterService]="filterService" [filterService]="filterService"
[sortService]="sortService" [sortService]="sortService"
(searchFieldChange)="searchFilter($event)" (searchFieldChange)="searchFilter($event)"

View File

@ -205,14 +205,18 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion> imple
if (result && result.format) { if (result && result.format) {
if (result.format === 'pdf') { if (result.format === 'pdf') {
this.pdfExport.exportMotionCatalog( this.pdfExport.exportMotionCatalog(
this.dataSource.data, this.dataSource.filteredData,
result.lnMode, result.lnMode,
result.crMode, result.crMode,
result.content, result.content,
result.metaInfo result.metaInfo
); );
} else if (result.format === 'csv') { } else if (result.format === 'csv') {
this.motionCsvExport.exportMotionList(this.dataSource.data, result.content, result.metaInfo); this.motionCsvExport.exportMotionList(
this.dataSource.filteredData,
result.content,
result.metaInfo
);
} }
} }
}); });

View File

@ -16,6 +16,7 @@
<mat-drawer-container class="on-transition-fade"> <mat-drawer-container class="on-transition-fade">
<os-sort-filter-bar <os-sort-filter-bar
[filterCount]="filteredCount"
[sortService]="sortService" [sortService]="sortService"
[filterService]="filterService" [filterService]="filterService"
(searchFieldChange)="searchFilter($event)" (searchFieldChange)="searchFilter($event)"

View File

@ -132,7 +132,7 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser> implement
*/ */
public csvExportUserList(): void { public csvExportUserList(): void {
this.csvExport.export( this.csvExport.export(
this.dataSource.data, this.dataSource.filteredData,
[ [
{ property: 'title' }, { property: 'title' },
{ property: 'first_name', label: 'Given name' }, { property: 'first_name', label: 'Given name' },

View File

@ -15,7 +15,7 @@ export class UserFilterListService extends FilterListService<User, ViewUser> {
private userGroupFilterOptions = { private userGroupFilterOptions = {
isActive: false, isActive: false,
property: 'group', property: 'groups_id',
label: 'User Group', label: 'User Group',
options: [] options: []
}; };
@ -60,12 +60,16 @@ export class UserFilterListService extends FilterListService<User, ViewUser> {
this.subscribeGroups(); this.subscribeGroups();
} }
/**
* Updates the filter according to existing groups.
* TODO: Users with only the 'standard' group set appear in the model as items without groups_id. 'Standard' filter is broken
*/
public subscribeGroups(): void { public subscribeGroups(): void {
this.groupRepo.getViewModelListObservable().subscribe(groups => { this.groupRepo.getViewModelListObservable().subscribe(groups => {
const groupOptions = []; const groupOptions = [];
groups.forEach(group => { groups.forEach(group => {
groupOptions.push({ groupOptions.push({
condition: group.name, condition: group.id,
label: group.name, label: group.name,
isActive: false isActive: false
}); });