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
This commit is contained in:
Sean Engelhardt 2019-04-04 11:46:30 +02:00
parent 6364a04d22
commit 8236d1bf5b
8 changed files with 94 additions and 80 deletions

View File

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

View File

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

View File

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

View File

@ -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()">

View File

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

View File

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

View File

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

View File

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