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

Adds listener to the pagination

Browse Source 
- Subscription to change events from pagination are used to set the made settings initial.
This commit is contained in:
GabrielMeyer 2019-03-21 16:16:19 +01:00
parent 5c0be51c7e
commit 6e628ea4cd
11 changed files with 94 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/app/site/agenda/components/agenda-list/agenda-list.component.ts
View File

@ -20,6 +20,7 @@ import { ViewportService } from 'app/core/ui-services/viewport.service';
import { ViewItem } from '../../models/view-item';
import { ProjectorElementBuildDeskriptor } from 'app/site/base/projectable';
import { _ } from 'app/core/translate/translation-marker';
import { StorageService } from 'app/core/core-services/storage.service';
/**
* List view for the agenda.
@ -90,8 +91,9 @@ export class AgendaListComponent extends ListViewBaseComponent<ViewItem, Item> i
titleService: Title,
protected translate: TranslateService, // protected required for ng-translate-extract
matSnackBar: MatSnackBar,
storage: StorageService,
private operator: OperatorService,
private route: ActivatedRoute,
protected route: ActivatedRoute,
private router: Router,
private repo: ItemRepositoryService,
private promptService: PromptService,
@ -104,7 +106,7 @@ export class AgendaListComponent extends ListViewBaseComponent<ViewItem, Item> i
private agendaPdfService: AgendaPdfService,
private pdfService: PdfDocumentService
) {
super(titleService, translate, matSnackBar, filterService);
super(titleService, translate, matSnackBar, route, storage, filterService);
// activate multiSelect mode for this listview
this.canMultiSelect = true;

6
client/src/app/site/assignments/assignment-list/assignment-list.component.ts
View File

@ -10,6 +10,8 @@ import { AssignmentRepositoryService } from 'app/core/repositories/assignments/a
import { ListViewBaseComponent } from '../../base/list-view-base';
import { PromptService } from 'app/core/ui-services/prompt.service';
import { ViewAssignment } from '../models/view-assignment';
import { StorageService } from 'app/core/core-services/storage.service';
import { ActivatedRoute } from '@angular/router';
/**
* Listview for the assignments
@ -33,6 +35,8 @@ export class AssignmentListComponent extends ListViewBaseComponent<ViewAssignmen
*/
public constructor(
titleService: Title,
storage: StorageService,
route: ActivatedRoute,
protected translate: TranslateService, // protected required for ng-translate-extract
matSnackBar: MatSnackBar,
public repo: AssignmentRepositoryService,
@ -40,7 +44,7 @@ export class AssignmentListComponent extends ListViewBaseComponent<ViewAssignmen
public filterService: AssignmentFilterListService,
public sortService: AssignmentSortListService
) {
super(titleService, translate, matSnackBar, filterService, sortService);
super(titleService, translate, matSnackBar, route, storage, filterService, sortService);
// activate multiSelect mode for this listview
this.canMultiSelect = true;
}

59
client/src/app/site/base/list-view-base.ts
View File

@ -1,15 +1,18 @@
import { MatTableDataSource, MatTable, MatSort, MatPaginator, MatSnackBar } from '@angular/material';
import { MatTableDataSource, MatTable, MatSort, MatPaginator, MatSnackBar, PageEvent } from '@angular/material';
import { Title } from '@angular/platform-browser';
import { TranslateService } from '@ngx-translate/core';
import { ViewChild } from '@angular/core';
import { ViewChild, Type, OnDestroy } from '@angular/core';
import { BaseViewComponent } from './base-view';
import { BaseViewModel } from './base-view-model';
import { BaseSortListService } from 'app/core/ui-services/base-sort-list.service';
import { BaseFilterListService } from 'app/core/ui-services/base-filter-list.service';
import { BaseModel } from 'app/shared/models/base/base-model';
import { ActivatedRoute } from '@angular/router';
import { StorageService } from 'app/core/core-services/storage.service';
export abstract class ListViewBaseComponent<V extends BaseViewModel, M extends BaseModel> extends BaseViewComponent {
export abstract class ListViewBaseComponent<V extends BaseViewModel, M extends BaseModel> extends BaseViewComponent
implements OnDestroy {
/**
* The data source for a table. Requires to be initialized with a BaseViewModel
*/
@ -31,6 +34,17 @@ export abstract class ListViewBaseComponent<V extends BaseViewModel, M extends B
*/
public selectedRows: V[];
/**
* Holds the key for the storage.
* This is by default the component's name.
*/
private storageKey: string;
/**
* Holds the value from local storage with the 'Paginator' key.
*/
private storageObject = {};
/**
* The table itself
*/
@ -68,11 +82,18 @@ export abstract class ListViewBaseComponent<V extends BaseViewModel, M extends B
titleService: Title,
translate: TranslateService,
matSnackBar: MatSnackBar,
protected route: ActivatedRoute,
private storage: StorageService,
public filterService?: BaseFilterListService<M, V>,
public sortService?: BaseSortListService<V>
) {
super(titleService, translate, matSnackBar);
this.selectedRows = [];
try {
this.storageKey = (<Type<any>>route.component).name;
} catch (e) {
this.storageKey = '';
}
}
/**
@ -80,10 +101,12 @@ export abstract class ListViewBaseComponent<V extends BaseViewModel, M extends B
* Calling these three functions in the constructor of this class
* would be too early, resulting in non-paginated tables
*/
public initTable(): void {
public async initTable(): Promise<void> {
this.dataSource = new MatTableDataSource();
this.dataSource.paginator = this.paginator;
// Set the initial page settings.
if (this.dataSource.paginator) {
this.initializePagination();
this.dataSource.paginator._intl.itemsPerPageLabel = this.translate.instant('items per page');
}
if (this.filterService) {
@ -144,6 +167,34 @@ export abstract class ListViewBaseComponent<V extends BaseViewModel, M extends B
this.dataSource.filter = event;
}
/**
* Initialize the settings for the paginator in every list view.
*/
private async initializePagination(): Promise<void> {
// If the storage is not available - like in history mode - do nothing.
if (this.storage) {
this.storageObject = (await this.storage.get('Pagination')) || {};
// Set the number of items per page -- by default to 25.
this.paginator.pageSize = this.storageObject[this.storageKey] || 25;
// Subscription to page change events, like size, index.
this.subscriptions.push(
this.paginator.page.subscribe(async (event: PageEvent) => {
await this.setPageSettings(event.pageSize);
})
);
}
}
/**
* Function to set the new selected page size in the browser's local storage.
*
* @param size is the new page size.
*/
public async setPageSettings(size: number): Promise<void> {
this.storageObject[this.storageKey] = size;
await this.storage.set('Pagination', this.storageObject);
}
/**
* Default click action on selecting an item. In multiselect modus,
* this just adds/removes from a selection, else it performs a {@link singleSelectAction}

2
client/src/app/site/history/components/history-list/history-list.component.ts
View File

@ -51,7 +51,7 @@ export class HistoryListComponent extends ListViewBaseComponent<ViewHistory, His
private router: Router,
private operator: OperatorService
) {
super(titleService, translate, matSnackBar);
super(titleService, translate, matSnackBar, null, null);
}
/**

6
client/src/app/site/mediafiles/components/mediafile-list/mediafile-list.component.ts
View File

@ -16,6 +16,7 @@ import { MediafileFilterListService } from '../../services/mediafile-filter.serv
import { MediafilesSortListService } from '../../services/mediafiles-sort-list.service';
import { ViewportService } from 'app/core/ui-services/viewport.service';
import { OperatorService } from 'app/core/core-services/operator.service';
import { StorageService } from 'app/core/core-services/storage.service';
/**
* Lists all the uploaded files.
@ -88,9 +89,10 @@ export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile,
public constructor(
titleService: Title,
matSnackBar: MatSnackBar,
storage: StorageService,
protected translate: TranslateService,
private router: Router,
private route: ActivatedRoute,
protected route: ActivatedRoute,
private repo: MediafileRepositoryService,
private mediaManage: MediaManageService,
private promptService: PromptService,
@ -99,7 +101,7 @@ export class MediafileListComponent extends ListViewBaseComponent<ViewMediafile,
public sortService: MediafilesSortListService,
private operator: OperatorService
) {
super(titleService, translate, matSnackBar, filterService, sortService);
super(titleService, translate, matSnackBar, route, storage, filterService, sortService);
// enables multiSelection for this listView
this.canMultiSelect = true;

6
client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.ts
View File

@ -14,6 +14,7 @@ import { OperatorService } from 'app/core/core-services/operator.service';
import { PromptService } from 'app/core/ui-services/prompt.service';
import { ViewMotion } from 'app/site/motions/models/view-motion';
import { ViewMotionBlock } from 'app/site/motions/models/view-motion-block';
import { StorageService } from 'app/core/core-services/storage.service';
/**
* Detail component to display one motion block
@ -62,14 +63,15 @@ export class MotionBlockDetailComponent extends ListViewBaseComponent<ViewMotion
titleService: Title,
translate: TranslateService,
matSnackBar: MatSnackBar,
storage: StorageService,
private operator: OperatorService,
private router: Router,
private route: ActivatedRoute,
protected route: ActivatedRoute,
private repo: MotionBlockRepositoryService,
private motionRepo: MotionRepositoryService,
private promptService: PromptService
) {
super(titleService, translate, matSnackBar);
super(titleService, translate, matSnackBar, route, storage);
}
/**

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

@ -16,6 +16,7 @@ import { OperatorService } from 'app/core/core-services/operator.service';
import { PromptService } from 'app/core/ui-services/prompt.service';
import { ViewItem } from 'app/site/agenda/models/view-item';
import { ViewMotionBlock } from 'app/site/motions/models/view-motion-block';
import { StorageService } from 'app/core/core-services/storage.service';
/**
* Table for the motion blocks
@ -80,8 +81,9 @@ export class MotionBlockListComponent extends ListViewBaseComponent<ViewMotionBl
titleService: Title,
translate: TranslateService,
matSnackBar: MatSnackBar,
storage: StorageService,
private router: Router,
private route: ActivatedRoute,
protected route: ActivatedRoute,
private repo: MotionBlockRepositoryService,
private agendaRepo: ItemRepositoryService,
private formBuilder: FormBuilder,
@ -89,7 +91,7 @@ export class MotionBlockListComponent extends ListViewBaseComponent<ViewMotionBl
private itemRepo: ItemRepositoryService,
private operator: OperatorService
) {
super(titleService, translate, matSnackBar);
super(titleService, translate, matSnackBar, route, storage);
this.createBlockForm = this.formBuilder.group({
title: ['', Validators.required],

6
client/src/app/site/motions/modules/motion-list/components/motion-list/motion-list.component.ts
View File

@ -28,6 +28,7 @@ import { MotionCsvExportService } from 'app/site/motions/services/motion-csv-exp
import { MotionPdfExportService } from 'app/site/motions/services/motion-pdf-export.service';
import { MotionMultiselectService } from 'app/site/motions/services/motion-multiselect.service';
import { LocalPermissionsService } from 'app/site/motions/services/local-permissions.service';
import { StorageService } from 'app/core/core-services/storage.service';
/**
* Component that displays all the motions in a Table using DataSource.
@ -90,8 +91,9 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion, Motio
matSnackBar: MatSnackBar,
sortService: MotionSortListService,
filterService: MotionFilterListService,
storage: StorageService,
private router: Router,
private route: ActivatedRoute,
protected route: ActivatedRoute,
private configService: ConfigService,
private tagRepo: TagRepositoryService,
private motionBlockRepo: MotionBlockRepositoryService,
@ -106,7 +108,7 @@ export class MotionListComponent extends ListViewBaseComponent<ViewMotion, Motio
public multiselectService: MotionMultiselectService,
public perms: LocalPermissionsService
) {
super(titleService, translate, matSnackBar, filterService, sortService);
super(titleService, translate, matSnackBar, route, storage, filterService, sortService);
// enable multiSelect for this listView
this.canMultiSelect = true;

6
client/src/app/site/motions/modules/motion-workflow/components/workflow-list/workflow-list.component.ts
View File

@ -10,6 +10,7 @@ import { Router, ActivatedRoute } from '@angular/router';
import { ViewWorkflow } from 'app/site/motions/models/view-workflow';
import { WorkflowRepositoryService } from 'app/core/repositories/motions/workflow-repository.service';
import { Workflow } from 'app/shared/models/motions/workflow';
import { StorageService } from 'app/core/core-services/storage.service';
/**
* List view for workflows
@ -45,14 +46,15 @@ export class WorkflowListComponent extends ListViewBaseComponent<ViewWorkflow, W
public constructor(
titleService: Title,
matSnackBar: MatSnackBar,
storage: StorageService,
protected translate: TranslateService,
private dialog: MatDialog,
private router: Router,
private route: ActivatedRoute,
protected route: ActivatedRoute,
private workflowRepo: WorkflowRepositoryService,
private promptService: PromptService
) {
super(titleService, translate, matSnackBar);
super(titleService, translate, matSnackBar, route, storage);
}
/**

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

@ -8,6 +8,8 @@ import { ViewTag } from '../../models/view-tag';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { PromptService } from 'app/core/ui-services/prompt.service';
import { MatSnackBar } from '@angular/material';
import { StorageService } from 'app/core/core-services/storage.service';
import { ActivatedRoute } from '@angular/router';
/**
* Listview for the complete lsit of available Tags
@ -41,10 +43,12 @@ export class TagListComponent extends ListViewBaseComponent<ViewTag, Tag> implem
titleService: Title,
protected translate: TranslateService, // protected required for ng-translate-extract
matSnackBar: MatSnackBar,
storage: StorageService,
route: ActivatedRoute,
private repo: TagRepositoryService,
private promptService: PromptService
) {
super(titleService, translate, matSnackBar);
super(titleService, translate, matSnackBar, route, storage);
}
/**

6
client/src/app/site/users/components/user-list/user-list.component.ts
View File

@ -20,6 +20,7 @@ import { ViewUser } from '../../models/view-user';
import { ViewGroup } from '../../models/view-group';
import { genders, User } from 'app/shared/models/users/user';
import { _ } from 'app/core/translate/translation-marker';
import { StorageService } from 'app/core/core-services/storage.service';
/**
* Interface for the short editing dialog.
@ -133,11 +134,12 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser, User> imp
titleService: Title,
protected translate: TranslateService, // protected required for ng-translate-extract
matSnackBar: MatSnackBar,
storage: StorageService,
private repo: UserRepositoryService,
private groupRepo: GroupRepositoryService,
private choiceService: ChoiceService,
private router: Router,
private route: ActivatedRoute,
protected route: ActivatedRoute,
private operator: OperatorService,
private vp: ViewportService,
protected csvExport: CsvExportService,
@ -148,7 +150,7 @@ export class UserListComponent extends ListViewBaseComponent<ViewUser, User> imp
private userPdf: UserPdfExportService,
private dialog: MatDialog
) {
super(titleService, translate, matSnackBar, filterService, sortService);
super(titleService, translate, matSnackBar, route, storage, filterService, sortService);
// enable multiSelect for this listView
this.canMultiSelect = true;