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.

client/src/app/core/ui-services/base-sort-list.service.ts

@@ -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';
     }
 
     /**

client/src/app/shared/components/list-view-table/list-view-table.component.html

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

client/src/app/shared/components/list-view-table/list-view-table.component.ts

@@ -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`
      */

client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html

@@ -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>

client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.ts

@@ -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 {

client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.html

@@ -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>

client/src/app/site/motions/modules/motion-block/components/motion-block-list/motion-block-list.component.ts

@@ -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
         }
     ];
 

client/src/app/site/motions/services/motion-block-sort.service.ts

@@ -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);

client/src/app/site/tags/components/tag-list/tag-list.component.html

@@ -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>

client/src/app/site/tags/components/tag-list/tag-list.component.ts

@@ -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]]
     });