Improves the layout of motion-block-list

- Full size
- Adds the `sort-filter-bar.component`.
- `sort-filter-bar.component` displays the current and total count of filtered items by default, now.
This commit is contained in:
GabrielMeyer 2019-08-14 11:36:30 +02:00 committed by Sean Engelhardt
parent 8555516a53
commit 5106b9dc71
10 changed files with 85 additions and 51 deletions

View File

@ -187,7 +187,7 @@ export abstract class BaseSortListService<V extends BaseViewModel> {
if (this.sortProperty !== option.property) {
return '';
}
return this.ascending ? 'arrow_downward' : 'arrow_upward';
return this.ascending ? 'arrow_upward' : 'arrow_downward';
}
/**

View File

@ -1,6 +1,7 @@
<mat-drawer-container *ngIf="columns && columnSet">
<os-sort-filter-bar
*ngIf="showFilterBar"
[totalCount]="totalCount"
[filterCount]="countFilter"
[filterService]="filterService"
[sortService]="sortService"

View File

@ -232,6 +232,13 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
return this.dataSource.filteredData.length;
}
/**
* @returns The total length of the data-source.
*/
public get totalCount(): number {
return this.dataSource.length;
}
/**
* @returns the repositories `viewModelListObservable`
*/

View File

@ -1,7 +1,7 @@
<div class="custom-table-header flex-spaced">
<!-- Amount of filters -->
<div class="filter-count" *ngIf="filterService">
<span>{{ displayedCount }}&nbsp;</span><span translate>of</span>
<div class="filter-count">
<span>{{ filterCount }}&nbsp;</span><span translate>of</span>
<span>&nbsp;{{ totalCount }}</span>
<span *ngIf="extraItemInfo">&nbsp;·&nbsp;{{ extraItemInfo }}</span>
</div>

View File

@ -94,16 +94,9 @@ export class SortFilterBarComponent<V extends BaseViewModel> {
private _showFilterSort = true;
/**
* Return the amount of data passing filters. Priorizes the override in {@link filterCount} over
* the information from the filterService
* Holds the total amount of data.
*/
public get displayedCount(): number {
if (this.filterCount === undefined || this.filterCount === null) {
return this.filterService.filteredCount;
} else {
return this.filterCount;
}
}
private _totalCount: number;
/**
* Setter for `showFilterSort`
@ -120,11 +113,19 @@ export class SortFilterBarComponent<V extends BaseViewModel> {
return this._showFilterSort;
}
/**
* Overwrites the total-count. If there is no filter-service set, this is used by default.
*/
@Input()
public set totalCount(count: number) {
this._totalCount = count;
}
/**
* Return the total count of potential filters
*/
public get totalCount(): number {
return this.filterService.unfilteredCount;
return this.filterService ? this.filterService.unfilteredCount : this._totalCount;
}
public get sortOptions(): any {

View File

@ -3,37 +3,46 @@
<div class="title-slot"><h2 translate>Motion blocks</h2></div>
</os-head-bar>
<mat-card class="os-card">
<os-list-view-table
class="block-list"
[repo]="repo"
[showFilterBar]="false"
[columns]="tableColumnDefinition"
[multiSelect]="isMultiSelect"
listStorageKey="motionBlock"
[(selectedRows)]="selectedRows"
(dataSourceChange)="onDataSourceChange($event)"
>
<!-- Title column -->
<div *pblNgridCellDef="'title'; value as title; row as motionBlock; rowContext as rowContext" class="cell-slot fill">
<a
class="detail-link"
(click)="saveScrollIndex('motionBlock', rowContext.identity)"
[routerLink]="motionBlock.id"
*ngIf="!isMultiSelect"
></a>
<div>
<mat-icon matTooltip="Internal" *ngIf="motionBlock.internal">lock</mat-icon>
{{ title }}
</div>
<os-list-view-table
class="block-list"
[repo]="repo"
[showFilterBar]="true"
[columns]="tableColumnDefinition"
[sortService]="sortService"
[multiSelect]="isMultiSelect"
listStorageKey="motionBlock"
[(selectedRows)]="selectedRows"
[filterProps]="filterProps"
(dataSourceChange)="onDataSourceChange($event)"
>
<!-- Title column -->
<div *pblNgridCellDef="'title'; value as title; row as block; rowContext as rowContext" class="cell-slot fill">
<a
class="detail-link"
(click)="saveScrollIndex('motionBlock', rowContext.identity)"
[routerLink]="block.id"
*ngIf="!isMultiSelect"
></a>
<div>
<mat-icon matTooltip="Internal" *ngIf="block.internal">lock</mat-icon>
{{ title }}
</div>
</div>
<!-- Amount -->
<div *pblNgridCellDef="'amount'; row as motionBlock" class="cell-slot fill">
<span class="os-amount-chip">{{ motionBlock.motions.length }}</span>
</div>
</os-list-view-table>
</mat-card>
<!-- Amount -->
<div *pblNgridCellDef="'amount'; row as block" class="cell-slot fill">
<span class="os-amount-chip" matTooltip="{{ 'Motions' | translate }}">{{ block.motions.length }}</span>
</div>
<!-- Speaker column-->
<div *pblNgridCellDef="'speaker'; row as block; rowContext as rowContext" class="fill">
<os-speaker-button
[object]="block"
[disabled]="isMultiSelect"
(click)="saveScrollIndex('motionBlock', rowContext.identity)"
></os-speaker-button>
</div>
</os-list-view-table>
<!-- Template for new motion block dialog -->
<ng-template #newMotionBlockDialog>

View File

@ -46,6 +46,11 @@ export class MotionBlockListComponent extends BaseListViewComponent<ViewMotionBl
*/
public defaultVisibility: number;
/**
* Defines the properties the `sort-filter-bar` can search for.
*/
public filterProps = ['title'];
/**
* helper for permission checks
*
@ -67,6 +72,10 @@ export class MotionBlockListComponent extends BaseListViewComponent<ViewMotionBl
{
prop: 'amount',
label: this.translate.instant('Motions')
},
{
prop: 'speaker',
width: this.badgeButtonWidth
}
];

View File

@ -11,7 +11,18 @@ import { ViewMotionBlock } from '../models/view-motion-block';
providedIn: 'root'
})
export class MotionBlockSortService extends BaseSortListService<ViewMotionBlock> {
public sortOptions: OsSortingOption<ViewMotionBlock>[] = [{ property: 'title' }];
public sortOptions: OsSortingOption<ViewMotionBlock>[] = [
{ property: 'title' },
{
property: 'motions',
label: 'Amount of motions',
sortFn: (aBlock, bBlock, ascending) => {
return ascending
? aBlock.motions.length - bBlock.motions.length
: bBlock.motions.length - aBlock.motions.length;
}
}
];
public constructor(translate: TranslateService, store: StorageService, OSStatus: OpenSlidesStatusService) {
super('Motion block', translate, store, OSStatus);

View File

@ -1,9 +1,4 @@
<os-head-bar
[mainButton]="true"
[nav]="true"
(mainEvent)="openTagDialog()"
[multiSelectMode]="isMultiSelect"
>
<os-head-bar [mainButton]="true" [nav]="true" (mainEvent)="openTagDialog()" [multiSelectMode]="isMultiSelect">
<div class="title-slot"><h2 translate>Tags</h2></div>
</os-head-bar>
@ -13,6 +8,7 @@
[allowProjector]="false"
[(selectedRows)]="selectedRows"
(dataSourceChange)="onDataSourceChange($event)"
[filterProps]="['name']"
>
<!-- Name column -->
<div *pblNgridCellDef="'name'; value as name" class="cell-slot fill">
@ -43,7 +39,7 @@
<div class="os-form-card-mobile" mat-dialog-content>
<form [formGroup]="tagForm" (keydown)="onKeyDown($event)">
<mat-form-field>
<input required type="text" matInput formControlName="name" placeholder="{{ 'Name' | translate }}">
<input required type="text" matInput formControlName="name" placeholder="{{ 'Name' | translate }}" />
</mat-form-field>
</form>
</div>

View File

@ -30,7 +30,7 @@ export class TagListComponent extends BaseListViewComponent<ViewTag> implements
@ViewChild('tagDialog', { static: true })
private tagDialog: TemplateRef<string>;
private tagForm: FormGroup = this.formBuilder.group({
public tagForm: FormGroup = this.formBuilder.group({
name: ['', [Validators.required]]
});