ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improves the layout of motion-block-list

Browse Source 
- 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/core/ui-services/base-sort-list.service.ts
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';
}
/**

1
client/src/app/shared/components/list-view-table/list-view-table.component.html
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"

7
client/src/app/shared/components/list-view-table/list-view-table.component.ts
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`
*/

4
client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html
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>

21
client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.ts
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 {

25
client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.html
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"
[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 motionBlock; rowContext as rowContext" class="cell-slot fill">
<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]="motionBlock.id"
[routerLink]="block.id"
*ngIf="!isMultiSelect"
></a>
<div>
<mat-icon matTooltip="Internal" *ngIf="motionBlock.internal">lock</mat-icon>
<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 *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>
</mat-card>
<!-- Template for new motion block dialog -->
<ng-template #newMotionBlockDialog>

9
client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.ts
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
}
];

13
client/src/app/site/motions/services/motion-block-sort.service.ts
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);

10
client/src/app/site/tags/components/tag-list/tag-list.component.html
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>

2
client/src/app/site/tags/components/tag-list/tag-list.component.ts
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]]
});