Merge pull request #4524 from GabrielInTheWorld/util-fixes

Adds listener to the pagination

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

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

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

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

client/src/app/site/base/list-view-base.ts

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

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

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

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

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

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

@@ -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,
         protected 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);
     }
 
     /**

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

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

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

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

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

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

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

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

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

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