Merge pull request #377 from atmire/home-pagination-issue-fix

Home pagination issue fix

resources/i18n/en.json

@@ -289,7 +289,7 @@
     "results-per-page": "Results Per Page",
     "sort-direction": "Sort Options",
     "showing": {
-      "label": "Now showing items ",
+      "label": "Now showing ",
       "detail": "{{ range }} of {{ total }}"
     }
   },

resources/i18n/nl.json

@@ -54,8 +54,8 @@
     "results-per-page": "Resultaten per pagina",
     "sort-direction": "Sorteermogelijkheden",
     "showing": {
-      "label": "Getoonde items ",
-      "detail": "{{ range }} tot {{ total }}"
+      "label": "Resultaten ",
+      "detail": "{{ range }} van {{ total }}"
     }
   },
   "sorting": {
@@ -229,7 +229,7 @@
     "validation": {
       "pattern": "Deze invoer is niet toegelaten volgens dit patroon: {{ pattern }}.",
       "license": {
-        "notgranted": "U moet de invoerlicentie goedkeuren om de invoer af te werken. Indien u deze licentie momenteel niet kan of mag goedkeuren, kan u uw werk opslaan en de invoer later afwerken. U kan dit nieuwe item ook verwijderen indien u niet voldoet aan de vereisten van de invoer licentie."
+        "notgranted": "U moet de invoerlicentie goedkeuren om de invoer af te werken. Indien u deze licentie momenteel niet kan of mag goedkeuren, kan u uw werk opslaan en de invoer later afwerken. U kunt dit nieuwe item ook verwijderen indien u niet voldoet aan de vereisten van de invoerlicentie."
       }
     }
   },
@@ -271,7 +271,7 @@
       "expired": "Uw sessie is vervallen. Gelieve opnieuw aan te melden."
     },
     "errors": {
-      "invalid-user": "Ongeldig email adres of wachtwoord."
+      "invalid-user": "Ongeldig e-mailadres of wachtwoord."
     }
   }
 }

src/app/+home-page/top-level-community-list/top-level-community-list.component.html

@@ -1,12 +1,13 @@
-<ng-container *ngVar="(communitiesRDObs | async) as communitiesRD">
-  <div *ngIf="communitiesRD?.hasSucceeded " @fadeInOut>
+<ng-container *ngVar="(communitiesRD$ | async) as communitiesRD">
+  <div *ngIf="communitiesRD?.hasSucceeded ">
   <h2>{{'home.top-level-communities.head' | translate}}</h2>
   <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
   <ds-viewable-collection
     [config]="config"
     [sortConfig]="sortConfig"
-    [objects]="communitiesRD"
-    (paginationChange)="updatePage($event)">
+    [objects]="communitiesRD$ | async"
+    [hideGear]="true"
+    (paginationChange)="onPaginationChange($event)">
   </ds-viewable-collection>
 </div>
 <ds-error *ngIf="communitiesRD?.hasFailed " message="{{'error.top-level-communites' | translate}}"></ds-error>

src/app/+home-page/top-level-community-list/top-level-community-list.component.ts

@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { Observable } from 'rxjs';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
 import { CommunityDataService } from '../../core/data/community-data.service';
 import { PaginatedList } from '../../core/data/paginated-list';
@@ -9,7 +9,11 @@ import { Community } from '../../core/shared/community.model';
 
 import { fadeInOut } from '../../shared/animations/fade';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
+import { take } from 'rxjs/operators';
 
+/**
+ * this component renders the Top-Level Community list
+ */
 @Component({
   selector: 'ds-top-level-community-list',
   styleUrls: ['./top-level-community-list.component.scss'],
@@ -18,9 +22,20 @@ import { PaginationComponentOptions } from '../../shared/pagination/pagination-c
   animations: [fadeInOut]
 })
 
-export class TopLevelCommunityListComponent {
-  communitiesRDObs: Observable<RemoteData<PaginatedList<Community>>>;
+export class TopLevelCommunityListComponent implements OnInit {
+  /**
+   * A list of remote data objects of all top communities
+   */
+  communitiesRD$: BehaviorSubject<RemoteData<PaginatedList<Community>>> = new BehaviorSubject<RemoteData<PaginatedList<Community>>>({} as any);
+
+  /**
+   * The pagination configuration
+   */
   config: PaginationComponentOptions;
+
+  /**
+   * The sorting configuration
+   */
   sortConfig: SortOptions;
 
   constructor(private cds: CommunityDataService) {
@@ -29,20 +44,34 @@ export class TopLevelCommunityListComponent {
     this.config.pageSize = 5;
     this.config.currentPage = 1;
     this.sortConfig = new SortOptions('dc.title', SortDirection.ASC);
-
-    this.updatePage({
-      page: this.config.currentPage,
-      pageSize: this.config.pageSize,
-      sortField: this.sortConfig.field,
-      direction: this.sortConfig.direction
-    });
   }
 
-  updatePage(data) {
-    this.communitiesRDObs = this.cds.findTop({
-      currentPage: data.page,
-      elementsPerPage: data.pageSize,
-      sort: { field: data.sortField, direction: data.sortDirection }
+  ngOnInit() {
+    this.updatePage();
+  }
+
+  /**
+   * Called when one of the pagination settings is changed
+   * @param event The new pagination data
+   */
+  onPaginationChange(event) {
+    this.config.currentPage = event.page;
+    this.config.pageSize = event.pageSize;
+    this.sortConfig.field = event.sortField;
+    this.sortConfig.direction = event.sortDirection;
+    this.updatePage();
+  }
+
+  /**
+   * Update the list of top communities
+   */
+  updatePage() {
+    this.cds.findTop({
+      currentPage: this.config.currentPage,
+      elementsPerPage: this.config.pageSize,
+      sort: { field: this.sortConfig.field, direction: this.sortConfig.direction }
+    }).pipe(take(1)).subscribe((results) => {
+      this.communitiesRD$.next(results);
     });
   }
 }

src/app/shared/object-collection/object-collection.component.html

@@ -2,6 +2,11 @@
                 [sortConfig]="sortConfig"
                 [objects]="objects"
                 [hideGear]="hideGear"
+                (paginationChange)="onPaginationChange($event)"
+                (pageChange)="onPageChange($event)"
+                (pageSizeChange)="onPageSizeChange($event)"
+                (sortDirectionChange)="onSortDirectionChange($event)"
+                (sortFieldChange)="onSortFieldChange($event)"
                 *ngIf="getViewMode()===viewModeEnum.List">
 </ds-object-list>
 
@@ -9,6 +14,11 @@
                 [sortConfig]="sortConfig"
                 [objects]="objects"
                 [hideGear]="hideGear"
+                (paginationChange)="onPaginationChange($event)"
+                (pageChange)="onPageChange($event)"
+                (pageSizeChange)="onPageSizeChange($event)"
+                (sortDirectionChange)="onSortDirectionChange($event)"
+                (sortFieldChange)="onSortFieldChange($event)"
                 *ngIf="getViewMode()===viewModeEnum.Grid">
 </ds-object-grid>