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

@@ -40,8 +40,8 @@
         "description": "Beschrijving:"
       },
       "link": {
-        "simple": "Eenvoudige item weergave",
-        "full": "Volledige item weergave"
+        "simple": "Eenvoudige itemweergave",
+        "full": "Volledige itemweergave"
       }
     }
   },
@@ -52,10 +52,10 @@
   },
   "pagination": {
     "results-per-page": "Resultaten per pagina",
-    "sort-direction": "Sorteer mogelijkheden",
+    "sort-direction": "Sorteermogelijkheden",
     "showing": {
-      "label": "Getoonde items ",
-      "detail": "{{ range }} tot {{ total }}"
+      "label": "Resultaten ",
+      "detail": "{{ range }} van {{ total }}"
     }
   },
   "sorting": {
@@ -116,8 +116,8 @@
       "reset": "Filters verwijderen",
       "applied": {
         "f.author": "Auteur",
-        "f.dateIssued.min": "Start datum",
-        "f.dateIssued.max": "Eind datum",
+        "f.dateIssued.min": "Startdatum",
+        "f.dateIssued.max": "Einddatum",
         "f.subject": "Sleutelwoord",
         "f.has_content_in_original_bundle": "Heeft bestanden"
       },
@@ -129,7 +129,7 @@
           "head": "Auteur"
         },
         "scope": {
-          "placeholder": "Bereik filter",
+          "placeholder": "Bereikfilter",
           "head": "Bereik"
         },
         "subject": {
@@ -159,27 +159,27 @@
       "metadata": {
         "title": "DSpace Angular :: Metadata Register",
         "head": "Metadata Register",
-        "description": "Het metadata register omvat de lijst van alle metadata velden die beschikbaar zijn in het systeem. Deze velden kunnen verspreid zijn over verschillende metadata schema's. Het qualified Dublin Core schema (dc) is een verplicht schema en kan niet worden verwijderd.",
+        "description": "Het metadataregister omvat de lijst van alle metadatavelden die beschikbaar zijn in het systeem. Deze velden kunnen verspreid zijn over verschillende metadataschema's. Het qualified Dublin Core schema (dc) is een verplicht schema en kan niet worden verwijderd.",
         "schemas": {
           "table": {
             "id": "ID",
             "namespace": "Naamruimte",
             "name": "Naam"
           },
-          "no-items": "Er kunnen geen metadata schema's getoond worden."
+          "no-items": "Er kunnen geen metadataschema's getoond worden."
         }
       },
       "schema": {
         "title": "DSpace Angular :: Metadata Schema Register",
         "head": "Metadata Schema",
-        "description": "Dit is het metadata schema voor \"{{namespace}}\".",
+        "description": "Dit is het metadataschema voor \"{{namespace}}\".",
         "fields": {
-          "head": "Schema metadata velden",
+          "head": "Schema metadatavelden",
           "table": {
             "field": "Veld",
             "scopenote": "Opmerking over bereik"
           },
-          "no-items": "Er kunnen geen metadata velden getoond worden."
+          "no-items": "Er kunnen geen metadatavelden getoond worden."
         }
       },
       "bitstream-formats": {
@@ -198,7 +198,7 @@
             },
             "internal": "intern"
           },
-          "no-items": "Er kunnen geen bitstream formaten getoond worden."
+          "no-items": "Er kunnen geen bitstreamformaten getoond worden."
         }
       }
     }
@@ -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

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

-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
-    });
+  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();
   }
 
-  updatePage(data) {
-    this.communitiesRDObs = this.cds.findTop({
-      currentPage: data.page,
-      elementsPerPage: data.pageSize,
-      sort: { field: data.sortField, direction: data.sortDirection }
+  /**
+   * 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>