From 8236d1bf5bec0ea337a5d8d31e522916cf949fd7 Mon Sep 17 00:00:00 2001
From: Sean Engelhardt <sean.f.t.engelhardt@gmail.com>
Date: Thu, 4 Apr 2019 11:46:30 +0200
Subject: [PATCH] Enlarge page size

Enlarges the page size of all list views.
Also move the declaration of the page size into the base list view component
---
 .../agenda-list/agenda-list.component.html    |   2 +-
 .../assignment-list.component.html            | 157 +++++++++---------
 client/src/app/site/base/list-view-base.ts    |   5 +
 .../history-list/history-list.component.html  |   2 +-
 .../mediafile-list.component.html             |   2 +-
 .../motion-list/motion-list.component.html    |   2 +-
 .../tag-list/tag-list.component.html          |   2 +-
 .../user-list/user-list.component.html        |   2 +-
 8 files changed, 94 insertions(+), 80 deletions(-)

diff --git a/client/src/app/site/agenda/components/agenda-list/agenda-list.component.html b/client/src/app/site/agenda/components/agenda-list/agenda-list.component.html
index 470480094..d02c5230f 100644
--- a/client/src/app/site/agenda/components/agenda-list/agenda-list.component.html
+++ b/client/src/app/site/agenda/components/agenda-list/agenda-list.component.html
@@ -112,7 +112,7 @@
             *matRowDef="let row; columns: getColumnDefinition()"
         ></mat-row>
     </mat-table>
-    <mat-paginator class="on-transition-fade" [pageSizeOptions]="[25, 50, 75, 100, 125]"></mat-paginator>
+    <mat-paginator class="on-transition-fade" [pageSizeOptions]="pageSize"></mat-paginator>
 </mat-drawer-container>
 
 <mat-menu #agendaMenu="matMenu">
diff --git a/client/src/app/site/assignments/assignment-list/assignment-list.component.html b/client/src/app/site/assignments/assignment-list/assignment-list.component.html
index 07207f1e0..b58304df5 100644
--- a/client/src/app/site/assignments/assignment-list/assignment-list.component.html
+++ b/client/src/app/site/assignments/assignment-list/assignment-list.component.html
@@ -16,82 +16,91 @@
 </os-head-bar>
 
 <mat-drawer-container class="on-transition-fade">
-        <os-sort-filter-bar [filterCount]="filteredCount" [filterService]="filterService" [sortService]="sortService"
-            (searchFieldChange)="searchFilter($event)">
-        </os-sort-filter-bar>
-<mat-table class="os-listview-table on-transition-fade" [dataSource]="dataSource" matSort>
-    <!-- slector column -->
-    <ng-container matColumnDef="selector">
-        <mat-header-cell *matHeaderCellDef mat-sort-header class="icon-cell"></mat-header-cell>
-        <mat-cell *matCellDef="let assignment" class="icon-cell">
-            <mat-icon>{{ isSelected(assignment) ? 'check_circle' : '' }}</mat-icon>
-        </mat-cell>
-    </ng-container>
-    <!-- name column -->
-    <ng-container matColumnDef="title">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>Title</mat-header-cell>
-        <mat-cell *matCellDef="let assignment">{{ assignment.getTitle() }}</mat-cell>
-    </ng-container>
-    <!-- pahse column-->
-    <ng-container matColumnDef="phase">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>Phase</mat-header-cell>
-        <mat-cell *matCellDef="let assignment">
-            <mat-chip-list>
-                <mat-chip color="primary" selected>{{ assignment.phase }}</mat-chip>
-            </mat-chip-list>
-        </mat-cell>
-        <button mat-menu-item (click)="selectAll()">
-            <mat-icon>done_all</mat-icon>
-            <span translate>Select all</span>
-        </button>
-        <button mat-menu-item (click)="deselectAll()">
-            <mat-icon>clear</mat-icon>
-            <span translate>Deselect all</span>
-        </button>
-    </ng-container>
-    <!-- candidates column -->
-    <ng-container matColumnDef="candidates">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>Candidates</mat-header-cell>
-        <mat-cell *matCellDef="let assignment">
-            <mat-chip-list>
-                <mat-chip color="accent" selected>{{ assignment.candidateAmount }}</mat-chip>
-            </mat-chip-list>
-        </mat-cell>
-    </ng-container>
-
-    <mat-header-row *matHeaderRowDef="getColumnDefintion()"></mat-header-row>
-    <mat-row
-        [ngClass]="selectedRows.indexOf(row) >= 0 ? 'selected' : ''"
-        (click)="selectItem(row, $event)"
-        *matRowDef="let row; columns: getColumnDefintion()"
+    <os-sort-filter-bar
+        [filterCount]="filteredCount"
+        [filterService]="filterService"
+        [sortService]="sortService"
+        (searchFieldChange)="searchFilter($event)"
     >
-    </mat-row>
-</mat-table>
+    </os-sort-filter-bar>
+    <mat-table class="os-listview-table on-transition-fade" [dataSource]="dataSource" matSort>
+        <!-- slector column -->
+        <ng-container matColumnDef="selector">
+            <mat-header-cell *matHeaderCellDef mat-sort-header class="icon-cell"></mat-header-cell>
+            <mat-cell *matCellDef="let assignment" class="icon-cell">
+                <mat-icon>{{ isSelected(assignment) ? 'check_circle' : '' }}</mat-icon>
+            </mat-cell>
+        </ng-container>
+        <!-- name column -->
+        <ng-container matColumnDef="title">
+            <mat-header-cell *matHeaderCellDef mat-sort-header>Title</mat-header-cell>
+            <mat-cell *matCellDef="let assignment">{{ assignment.getTitle() }}</mat-cell>
+        </ng-container>
+        <!-- pahse column-->
+        <ng-container matColumnDef="phase">
+            <mat-header-cell *matHeaderCellDef mat-sort-header>Phase</mat-header-cell>
+            <mat-cell *matCellDef="let assignment">
+                <mat-chip-list>
+                    <mat-chip color="primary" selected>{{ assignment.phase }}</mat-chip>
+                </mat-chip-list>
+            </mat-cell>
+            <button mat-menu-item (click)="selectAll()">
+                <mat-icon>done_all</mat-icon>
+                <span translate>Select all</span>
+            </button>
+            <button mat-menu-item (click)="deselectAll()">
+                <mat-icon>clear</mat-icon>
+                <span translate>Deselect all</span>
+            </button>
+        </ng-container>
+        <!-- candidates column -->
+        <ng-container matColumnDef="candidates">
+            <mat-header-cell *matHeaderCellDef mat-sort-header>Candidates</mat-header-cell>
+            <mat-cell *matCellDef="let assignment">
+                <mat-chip-list>
+                    <mat-chip color="accent" selected>{{ assignment.candidateAmount }}</mat-chip>
+                </mat-chip-list>
+            </mat-cell>
+        </ng-container>
 
-<mat-paginator class="on-transition-fade" [pageSizeOptions]="[25, 50, 75, 100, 125]"></mat-paginator>
+        <mat-header-row *matHeaderRowDef="getColumnDefintion()"></mat-header-row>
+        <mat-row
+            [ngClass]="selectedRows.indexOf(row) >= 0 ? 'selected' : ''"
+            (click)="selectItem(row, $event)"
+            *matRowDef="let row; columns: getColumnDefintion()"
+        >
+        </mat-row>
+    </mat-table>
 
-<mat-menu #assignmentMenu="matMenu">
-    <div *ngIf="!isMultiSelect">
-        <button mat-menu-item *osPerms="'assignment.can_manage'" (click)="toggleMultiSelect()">
-            <mat-icon>library_add</mat-icon>
-            <span translate>Multiselect</span>
-        </button>
-        <button mat-menu-item (click)="downloadAssignmentButton()">
-            <mat-icon>archive</mat-icon>
-            <span translate>Export ...</span>
-        </button>
-    </div>
+    <mat-paginator class="on-transition-fade" [pageSizeOptions]="pageSize"></mat-paginator>
 
-    <div *ngIf="isMultiSelect">
-        <button mat-menu-item (click)="selectAll()">
-            <mat-icon>done_all</mat-icon>
-            <span translate>Select all</span>
-        </button>
-        <mat-divider></mat-divider>
-        <button mat-menu-item class="red-warning-text" *osPerms="'assignment.can_manage'" (click)="deleteSelected()">
-            <mat-icon>delete</mat-icon>
-            <span translate>Delete</span>
-        </button>
-    </div>
-</mat-menu>
+    <mat-menu #assignmentMenu="matMenu">
+        <div *ngIf="!isMultiSelect">
+            <button mat-menu-item *osPerms="'assignment.can_manage'" (click)="toggleMultiSelect()">
+                <mat-icon>library_add</mat-icon>
+                <span translate>Multiselect</span>
+            </button>
+            <button mat-menu-item (click)="downloadAssignmentButton()">
+                <mat-icon>archive</mat-icon>
+                <span translate>Export ...</span>
+            </button>
+        </div>
+
+        <div *ngIf="isMultiSelect">
+            <button mat-menu-item (click)="selectAll()">
+                <mat-icon>done_all</mat-icon>
+                <span translate>Select all</span>
+            </button>
+            <mat-divider></mat-divider>
+            <button
+                mat-menu-item
+                class="red-warning-text"
+                *osPerms="'assignment.can_manage'"
+                (click)="deleteSelected()"
+            >
+                <mat-icon>delete</mat-icon>
+                <span translate>Delete</span>
+            </button>
+        </div>
+    </mat-menu>
 </mat-drawer-container>
diff --git a/client/src/app/site/base/list-view-base.ts b/client/src/app/site/base/list-view-base.ts
index 04a23b42a..34df8c2fd 100644
--- a/client/src/app/site/base/list-view-base.ts
+++ b/client/src/app/site/base/list-view-base.ts
@@ -45,6 +45,11 @@ export abstract class ListViewBaseComponent<V extends BaseViewModel, M extends B
      */
     private paginationStorageObject: { [key: string]: number };
 
+    /**
+     * Determine the default page size of paginated list views
+     */
+    public pageSize = [50, 100, 150, 200, 250];
+
     /**
      * The table itself
      */
diff --git a/client/src/app/site/history/components/history-list/history-list.component.html b/client/src/app/site/history/components/history-list/history-list.component.html
index 16f09edee..b97792222 100644
--- a/client/src/app/site/history/components/history-list/history-list.component.html
+++ b/client/src/app/site/history/components/history-list/history-list.component.html
@@ -55,7 +55,7 @@
     <mat-row *matRowDef="let row; columns: getRowDef()" (click)="onClickRow(row)"></mat-row>
 </mat-table>
 
-<mat-paginator class="on-transition-fade" [pageSizeOptions]="[25, 50, 75, 100, 125]"></mat-paginator>
+<mat-paginator class="on-transition-fade" [pageSizeOptions]="pageSize"></mat-paginator>
 
 <mat-menu #historyMenu="matMenu">
     <button mat-menu-item class="red-warning-text" (click)="onDeleteAllButton()">
diff --git a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html
index 75aa1b43c..b7056373d 100644
--- a/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html
+++ b/client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.html
@@ -141,7 +141,7 @@
         ></mat-row>
     </mat-table>
 
-    <mat-paginator class="on-transition-fade" [pageSizeOptions]="[25, 50, 75, 100, 125]"></mat-paginator>
+    <mat-paginator class="on-transition-fade" [pageSizeOptions]="pageSize"></mat-paginator>
 
     <mat-menu #singleFileMenu="matMenu">
         <ng-template matMenuContent let-file="file">
diff --git a/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html b/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html
index 9d51933d6..1c3e769b5 100644
--- a/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html
+++ b/client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.html
@@ -145,7 +145,7 @@
         </mat-row>
     </mat-table>
 
-    <mat-paginator class="on-transition-fade" [pageSizeOptions]="[25, 50, 75, 100, 125]"></mat-paginator>
+    <mat-paginator class="on-transition-fade" [pageSizeOptions]="pageSize"></mat-paginator>
 </mat-drawer-container>
 
 <mat-menu #motionListMenu="matMenu">
diff --git a/client/src/app/site/tags/components/tag-list/tag-list.component.html b/client/src/app/site/tags/components/tag-list/tag-list.component.html
index f91af2e71..be67cad26 100644
--- a/client/src/app/site/tags/components/tag-list/tag-list.component.html
+++ b/client/src/app/site/tags/components/tag-list/tag-list.component.html
@@ -42,4 +42,4 @@
     <mat-row (click)="selectItem(row, $event)" *matRowDef="let row; columns: ['name']"></mat-row>
 </mat-table>
 
-<mat-paginator class="on-transition-fade" [pageSizeOptions]="[25, 50, 75, 100, 125]"></mat-paginator>
+<mat-paginator class="on-transition-fade" [pageSizeOptions]="pageSize"></mat-paginator>
diff --git a/client/src/app/site/users/components/user-list/user-list.component.html b/client/src/app/site/users/components/user-list/user-list.component.html
index 873580d32..84569560e 100644
--- a/client/src/app/site/users/components/user-list/user-list.component.html
+++ b/client/src/app/site/users/components/user-list/user-list.component.html
@@ -104,7 +104,7 @@
         </mat-row>
     </mat-table>
 
-    <mat-paginator class="on-transition-fade" [pageSizeOptions]="[25, 50, 75, 100, 125]"></mat-paginator>
+    <mat-paginator class="on-transition-fade" [pageSizeOptions]="pageSize"></mat-paginator>
 
     <mat-menu #userMenu="matMenu">
         <div *ngIf="!isMultiSelect">