feat(*): save and remember selected page size of lists for each user (#…

…464)

see #381

Co-authored-by: Sebastian <sebastian.leidig@gmail.com>

src/app/child-dev-project/children/child-details/child-details.component.spec.ts

@@ -19,6 +19,7 @@ import { ChildPhotoService } from "../child-photo-service/child-photo.service";
 import { ChildrenModule } from "../children.module";
 import { FormDialogModule } from "../../../core/form-dialog/form-dialog.module";
 import { MatNativeDateModule } from "@angular/material/core";
+import { User } from "app/core/user/user";
 
 describe("ChildDetailsComponent", () => {
   let component: ChildDetailsComponent;
@@ -53,7 +54,7 @@ describe("ChildDetailsComponent", () => {
   };
   const mockedDatabase = new MockDatabase();
   const mockedSession = {
-    getCurrentUser: () => "testUser",
+    getCurrentUser: () => new User("test1"),
     getDatabase: () => mockedDatabase,
   };
   let mockChildPhotoService: jasmine.SpyObj<ChildPhotoService>;

src/app/child-dev-project/children/children-list/children-list.component.html

@@ -221,5 +221,5 @@ <h1>Children List</h1>
         style="cursor:pointer;" class="table-list-item"></tr>
 
   </table>
-  <mat-paginator [pageSize]="20" [pageSizeOptions]="[3, 10, 20, 50]" [showFirstLastButtons]="true"></mat-paginator>
+  <mat-paginator (page)="onPaginateChange($event)" [pageSize]="paginatorPageSize" [pageIndex]="paginatorPageIndex" [pageSizeOptions]="[3, 10, 20, 50]" [showFirstLastButtons]="true"></mat-paginator>
 </div>

src/app/child-dev-project/children/children-list/children-list.component.spec.ts

@@ -30,12 +30,17 @@ import { AttendanceDayBlockComponent } from "../../attendance/attendance-days/at
 import { EntitySchemaService } from "../../../core/entity/schema/entity-schema.service";
 import { ExportDataComponent } from "../../../core/admin/export-data/export-data.component";
 import { ChildPhotoService } from "../child-photo-service/child-photo.service";
+import { SessionService } from "../../../core/session/session-service/session.service";
+import { MatPaginatorModule } from "@angular/material/paginator";
+import { User } from "app/core/user/user";
 
 describe("ChildrenListComponent", () => {
   let component: ChildrenListComponent;
   let fixture: ComponentFixture<ChildrenListComponent>;
 
   beforeEach(async(() => {
+    const mockSessionService = jasmine.createSpyObj(["getCurrentUser"]);
+    mockSessionService.getCurrentUser.and.returnValue(new User("test1"));
     TestBed.configureTestingModule({
       declarations: [
         ChildBlockComponent,
@@ -60,6 +65,7 @@ describe("ChildrenListComponent", () => {
         MatButtonToggleModule,
         MatIconModule,
         MatTooltipModule,
+        MatPaginatorModule,
         NoopAnimationsModule,
         FormsModule,
         FilterPipeModule,
@@ -72,6 +78,10 @@ describe("ChildrenListComponent", () => {
         ChildrenService,
         EntityMapperService,
         EntitySchemaService,
+        {
+          provide: SessionService,
+          useValue: mockSessionService,
+        },
         { provide: Database, useClass: MockDatabase },
         {
           provide: ChildPhotoService,

src/app/child-dev-project/children/children-list/children-list.component.ts

@@ -7,8 +7,11 @@ import { ChildrenService } from "../children.service";
 import { AttendanceMonth } from "../../attendance/model/attendance-month";
 import { FilterSelection } from "../../../core/filter/filter-selection/filter-selection";
 import { MediaChange, MediaObserver } from "@angular/flex-layout";
-import { MatPaginator } from "@angular/material/paginator";
+import { MatPaginator, PageEvent } from "@angular/material/paginator";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { SessionService } from "../../../core/session/session-service/session.service";
+import { User } from "../../../core/user/user";
+import { EntityMapperService } from "../../../core/entity/entity-mapper.service";
 
 export interface ColumnGroup {
   name: string;
@@ -111,16 +114,25 @@ export class ChildrenListComponent implements OnInit, AfterViewInit {
   columnsToDisplay = ["projectNumber", "name"];
   filterString = "";
 
+  public paginatorPageSize: number;
+  public paginatorPageIndex: number;
+  private user: User;
+
   constructor(
     private childrenService: ChildrenService,
     private router: Router,
     private route: ActivatedRoute,
-    private media: MediaObserver
+    private media: MediaObserver,
+    private sessionService: SessionService,
+    private entityMapperService: EntityMapperService
   ) {}
 
   ngOnInit() {
     this.loadData();
     this.loadUrlParams();
+    this.user = this.sessionService.getCurrentUser();
+    this.paginatorPageSize = this.user.paginatorSettingsPageSize.childrenList;
+    this.paginatorPageIndex = this.user.paginatorSettingsPageIndex.childrenList;
     this.media.media$
       .pipe(untilDestroyed(this))
       .subscribe((change: MediaChange) => {
@@ -150,6 +162,22 @@ export class ChildrenListComponent implements OnInit, AfterViewInit {
   ngAfterViewInit() {
     this.childrenDataSource.sort = this.sort;
     this.childrenDataSource.paginator = this.paginator;
+    setTimeout(() => {
+      this.paginator.pageIndex = this.paginatorPageIndex;
+      this.paginator.page.next({
+        pageIndex: this.paginator.pageIndex,
+        pageSize: this.paginator.pageSize,
+        length: this.paginator.length,
+      });
+    });
+  }
+
+  onPaginateChange(event: PageEvent) {
+    this.paginatorPageSize = event.pageSize;
+    this.paginatorPageIndex = event.pageIndex;
+    this.user.paginatorSettingsPageSize.childrenList = this.paginatorPageSize;
+    this.user.paginatorSettingsPageIndex.childrenList = this.paginatorPageIndex;
+    this.entityMapperService.save<User>(this.user);
   }
 
   private loadData(replaceUrl: boolean = false) {

src/app/child-dev-project/notes/notes-manager/notes-manager.component.html

@@ -94,8 +94,5 @@ <h1>Notes &amp; Reports</h1>
     <tr mat-row *matRowDef="let note; columns: columnsToDisplay" (click)="showDetails(note)"
         style="cursor:pointer;" [ngStyle]="{'background-color': note.getColor()}"></tr>
   </table>
-
-  <mat-paginator [pageSize]="50"
-                [pageSizeOptions]="[3, 10, 20, 50]">
-  </mat-paginator>
+  <mat-paginator (page)="onPaginateChange($event)" [pageSize]="paginatorPageSize" [pageIndex]="paginatorPageIndex" [pageSizeOptions]="[3, 10, 20, 50]" [showFirstLastButtons]="true"></mat-paginator>
 </div>

src/app/child-dev-project/notes/notes-manager/notes-manager.component.spec.ts

@@ -16,6 +16,8 @@ import { EntitySchemaService } from "../../../core/entity/schema/entity-schema.s
 import { EntityMapperService } from "../../../core/entity/entity-mapper.service";
 import { ConfirmationDialogService } from "../../../core/confirmation-dialog/confirmation-dialog.service";
 import { SessionService } from "../../../core/session/session-service/session.service";
+import { MatPaginatorModule } from "@angular/material/paginator";
+import { User } from "app/core/user/user";
 
 function generateNewNotes(): Array<Note> {
   let i;
@@ -35,16 +37,18 @@ describe("NotesManagerComponent", () => {
   let fixture: ComponentFixture<NotesManagerComponent>;
 
   beforeEach(() => {
+    const mockSessionService = jasmine.createSpyObj(["getCurrentUser"]);
+    mockSessionService.getCurrentUser.and.returnValue(new User("test1"));
     TestBed.configureTestingModule({
       declarations: [],
-      imports: [NotesModule, MatNativeDateModule],
+      imports: [NotesModule, MatNativeDateModule, MatPaginatorModule],
       providers: [
         EntitySchemaService,
         EntityMapperService,
         ConfirmationDialogService,
         ChildrenService,
         FormBuilder,
-        SessionService,
+        { provide: SessionService, useValue: mockSessionService },
         { provide: Database, useValue: database },
       ],
     }).compileComponents();

src/app/child-dev-project/notes/notes-manager/notes-manager.component.ts

@@ -5,13 +5,14 @@ import { MatSort } from "@angular/material/sort";
 import { MediaChange, MediaObserver } from "@angular/flex-layout";
 import { NoteDetailsComponent } from "../note-details/note-details.component";
 import { InteractionTypes } from "../interaction-types.enum";
-import { MatPaginator } from "@angular/material/paginator";
+import { MatPaginator, PageEvent } from "@angular/material/paginator";
 import { WarningLevel } from "../../warning-level";
 import { EntityMapperService } from "../../../core/entity/entity-mapper.service";
 import { FilterSelection } from "../../../core/filter/filter-selection/filter-selection";
 import { SessionService } from "../../../core/session/session-service/session.service";
 import { FormDialogService } from "../../../core/form-dialog/form-dialog.service";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { User } from "app/core/user/user";
 
 @UntilDestroy()
 @Component({
@@ -70,6 +71,10 @@ export class NotesManagerComponent implements OnInit, AfterViewInit {
   categoryFS = new FilterSelection<Note>("category", []);
   filterSelectionsDropdown = [this.categoryFS];
 
+  public paginatorPageSize: number;
+  public paginatorPageIndex: number;
+  private user: User;
+
   constructor(
     private formDialog: FormDialogService,
     private sessionService: SessionService,
@@ -78,6 +83,10 @@ export class NotesManagerComponent implements OnInit, AfterViewInit {
   ) {}
 
   ngOnInit() {
+    this.user = this.sessionService.getCurrentUser();
+    this.paginatorPageSize = this.user.paginatorSettingsPageSize.notesList;
+    this.paginatorPageIndex = this.user.paginatorSettingsPageIndex.notesList;
+
     // activate default filter to current week
     this.dateFS.selectedOption = this.dateFS.options[0].key;
 
@@ -96,7 +105,14 @@ export class NotesManagerComponent implements OnInit, AfterViewInit {
       });
 
     this.initCategoryFilter();
-    this.notesDataSource.paginator = this.paginator;
+  }
+
+  onPaginateChange(event: PageEvent) {
+    this.paginatorPageSize = event.pageSize;
+    this.paginatorPageIndex = event.pageIndex;
+    this.user.paginatorSettingsPageSize.notesList = this.paginatorPageSize;
+    this.user.paginatorSettingsPageIndex.notesList = this.paginatorPageIndex;
+    this.entityMapperService.save<User>(this.user);
   }
 
   private sortAndAdd(newNotes: Note[]) {
@@ -134,6 +150,15 @@ export class NotesManagerComponent implements OnInit, AfterViewInit {
 
   ngAfterViewInit() {
     this.notesDataSource.sort = this.sort;
+    this.notesDataSource.paginator = this.paginator;
+    setTimeout(() => {
+      this.paginator.pageIndex = this.paginatorPageIndex;
+      this.paginator.page.next({
+        pageIndex: this.paginator.pageIndex,
+        pageSize: this.paginator.pageSize,
+        length: this.paginator.length,
+      });
+    });
   }
 
   private getPreviousSunday(weeksBack: number) {

src/app/child-dev-project/schools/schools-list/schools-list.component.html

@@ -82,5 +82,5 @@ <h1>Schools List</h1>
     <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
     <tr mat-row *matRowDef="let school; columns: columnsToDisplay" (click)="showSchoolDetails(school)" style="cursor:pointer;"></tr>
   </table>
-  <mat-paginator [pageSize]="20" [pageSizeOptions]="[3, 10, 20, 50]" [showFirstLastButtons]="true"></mat-paginator>
+  <mat-paginator (page)="onPaginateChange($event)" [pageSize]="paginatorPageSize" [pageIndex]="paginatorPageIndex" [pageSizeOptions]="[3, 10, 20, 50]" [showFirstLastButtons]="true"></mat-paginator>
 </div>

src/app/child-dev-project/schools/schools-list/schools-list.component.spec.ts

@@ -19,13 +19,18 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { EntitySchemaService } from "../../../core/entity/schema/entity-schema.service";
 import { ChildrenService } from "app/child-dev-project/children/children.service";
 import { CloudFileService } from "../../../core/webdav/cloud-file-service.service";
+import { SessionService } from "../../../core/session/session-service/session.service";
+import { MatPaginatorModule } from "@angular/material/paginator";
+import { User } from "app/core/user/user";
 
 describe("SchoolsListComponent", () => {
   let component: SchoolsListComponent;
   let fixture: ComponentFixture<SchoolsListComponent>;
   const mockedRouter = { navigate: () => null };
 
   beforeEach(async(() => {
+    const mockSessionService = jasmine.createSpyObj(["getCurrentUser"]);
+    mockSessionService.getCurrentUser.and.returnValue(new User("test1"));
     TestBed.configureTestingModule({
       declarations: [SchoolsListComponent],
       imports: [
@@ -37,6 +42,7 @@ describe("SchoolsListComponent", () => {
         MatButtonToggleModule,
         MatExpansionModule,
         FormsModule,
+        MatPaginatorModule,
         BrowserAnimationsModule,
         MatSelectModule,
       ],
@@ -46,6 +52,7 @@ describe("SchoolsListComponent", () => {
         { provide: Database, useClass: MockDatabase },
         EntityMapperService,
         EntitySchemaService,
+        { provide: SessionService, useValue: mockSessionService },
         { provide: Router, useValue: mockedRouter },
         {
           provide: CloudFileService,

src/app/child-dev-project/schools/schools-list/schools-list.component.ts

@@ -5,8 +5,11 @@ import { School } from "../model/school";
 import { SchoolsService } from "../schools.service";
 import { Router } from "@angular/router";
 import { FilterSelection } from "../../../core/filter/filter-selection/filter-selection";
-import { MatPaginator } from "@angular/material/paginator";
+import { MatPaginator, PageEvent } from "@angular/material/paginator";
+import { SessionService } from "../../../core/session/session-service/session.service";
+import { User } from "../../../core/user/user";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { EntityMapperService } from "../../../core/entity/entity-mapper.service";
 
 @UntilDestroy()
 @Component({
@@ -47,9 +50,21 @@ export class SchoolsListComponent implements OnInit, AfterViewInit {
   ]);
   filterSelections = [this.mediumFS, this.privateFS];
 
-  constructor(private schoolService: SchoolsService, private router: Router) {}
+  public paginatorPageSize: number;
+  public paginatorPageIndex: number;
+  private user: User;
+
+  constructor(
+    private schoolService: SchoolsService,
+    private router: Router,
+    private sessionService: SessionService,
+    private entityMapperService: EntityMapperService
+  ) {}
 
   ngOnInit() {
+    this.user = this.sessionService.getCurrentUser();
+    this.paginatorPageSize = this.user.paginatorSettingsPageSize.schoolsList;
+    this.paginatorPageIndex = this.user.paginatorSettingsPageIndex.schoolsList;
     this.schoolService
       .getSchools()
       .pipe(untilDestroyed(this))
@@ -67,6 +82,22 @@ export class SchoolsListComponent implements OnInit, AfterViewInit {
   ngAfterViewInit() {
     this.schoolDataSource.sort = this.sort;
     this.schoolDataSource.paginator = this.paginator;
+    setTimeout(() => {
+      this.paginator.pageIndex = this.paginatorPageIndex;
+      this.paginator.page.next({
+        pageIndex: this.paginator.pageIndex,
+        pageSize: this.paginator.pageSize,
+        length: this.paginator.length,
+      });
+    });
+  }
+
+  onPaginateChange(event: PageEvent) {
+    this.paginatorPageSize = event.pageSize;
+    this.paginatorPageIndex = event.pageIndex;
+    this.user.paginatorSettingsPageSize.schoolsList = this.paginatorPageSize;
+    this.user.paginatorSettingsPageIndex.schoolsList = this.paginatorPageIndex;
+    this.entityMapperService.save<User>(this.user);
   }
 
   applyFilter(filterValue: string) {

src/app/core/user/user.spec.ts

@@ -54,6 +54,11 @@ describe("User", () => {
       password: undefined,
       cloudPasswordEnc: undefined,
       cloudBaseFolder: "/aam-digital/",
+      paginatorSettingsPageSize: {
+        childrenList: 10,
+        schoolsList: 10,
+        notesList: 10,
+      },
 
       searchIndices: [],
     };

src/app/core/user/user.ts

@@ -38,6 +38,22 @@ export class User extends Entity {
   /** password object (encrypted) */
   @DatabaseField() private password: any;
 
+  /** settings for the mat-paginator for tables
+   * pageSizeOptions is set in the corresponding html of the component,
+   * pageSize is stored persistently in the database and
+   * pageIndex is saved only temporarily for the session
+   */
+  @DatabaseField() paginatorSettingsPageSize: PaginatorSettings = {
+    childrenList: 10,
+    schoolsList: 10,
+    notesList: 10,
+  };
+  public paginatorSettingsPageIndex: PaginatorSettings = {
+    childrenList: 0,
+    schoolsList: 0,
+    notesList: 0,
+  };
+
   /** password for webdav account (encrypted with user.password) */
   @DatabaseField() private cloudPasswordEnc: any;
 
@@ -149,3 +165,12 @@ export class User extends Entity {
     this.admin = admin;
   }
 }
+
+/** Interface for the PaginatorSettings for the three components
+ * childrenList, schoolsList and notesList.
+ */
+export interface PaginatorSettings {
+  childrenList: number;
+  schoolsList: number;
+  notesList: number;
+}

src/polyfills.ts

@@ -36,9 +36,8 @@
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 /** IE10 and IE11 requires the following to support `@angular/animation`. */
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-/** Evergreen browsers require these. **/
-import "core-js/es6/reflect";
-import "core-js/es7/reflect";
+/** Evergreen browsers require thesnpme. **/
+import "core-js/es/reflect";
 /** ALL Firefox browsers require the following to support `@angular/animation`. **/
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 /***************************************************************************************************