Merge pull request #4909 from GabrielInTheWorld/layoutMotionBlock

Improves the layout of motion-block-list
This commit is contained in:
Sean 2019-08-14 11:51:47 +02:00 committed by GitHub
commit 1c7b910a4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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) { if (this.sortProperty !== option.property) {
return ''; 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"> <mat-drawer-container *ngIf="columns && columnSet">
<os-sort-filter-bar <os-sort-filter-bar
*ngIf="showFilterBar" *ngIf="showFilterBar"
[totalCount]="totalCount"
[filterCount]="countFilter" [filterCount]="countFilter"
[filterService]="filterService" [filterService]="filterService"
[sortService]="sortService" [sortService]="sortService"

View File

@ -232,6 +232,13 @@ export class ListViewTableComponent<V extends BaseViewModel, M extends BaseModel
return this.dataSource.filteredData.length; 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` * @returns the repositories `viewModelListObservable`
*/ */

View File

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

View File

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

View File

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

View File

@ -46,6 +46,11 @@ export class MotionBlockListComponent extends BaseListViewComponent<ViewMotionBl
*/ */
public defaultVisibility: number; public defaultVisibility: number;
/**
* Defines the properties the `sort-filter-bar` can search for.
*/
public filterProps = ['title'];
/** /**
* helper for permission checks * helper for permission checks
* *
@ -67,6 +72,10 @@ export class MotionBlockListComponent extends BaseListViewComponent<ViewMotionBl
{ {
prop: 'amount', prop: 'amount',
label: this.translate.instant('Motions') 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' providedIn: 'root'
}) })
export class MotionBlockSortService extends BaseSortListService<ViewMotionBlock> { 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) { public constructor(translate: TranslateService, store: StorageService, OSStatus: OpenSlidesStatusService) {
super('Motion block', translate, store, OSStatus); super('Motion block', translate, store, OSStatus);

View File

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

View File

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