fix(openchallenges): change paginator variable to dynamic rendering (#…

…2426) * make paginator element not static * fix index not chanegs on UI * apply to org search page * remove condition of org search paginator
Sage-Bionetworks · Jan 17, 2024 · cfa1cbd · cfa1cbd
1 parent 6d5cd01
commit cfa1cbd
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 11 deletions.
diff --git a/libs/openchallenges/challenge-search/src/lib/challenge-search.component.html b/libs/openchallenges/challenge-search/src/lib/challenge-search.component.html
@@ -160,7 +160,6 @@ <h3>
         />
       </div>
       <openchallenges-paginator
-        *ngIf="challenges.length > 0"
         #paginator
         [pageNumber]="selectedPageNumber || defaultPageNumber"
         [pageSize]="selectedPageSize || defaultPageSize"

diff --git a/libs/openchallenges/challenge-search/src/lib/challenge-search.component.ts b/libs/openchallenges/challenge-search/src/lib/challenge-search.component.ts
@@ -130,7 +130,7 @@ export class ChallengeSearchComponent
   defaultSortedBy: ChallengeSort = 'relevance';
   defaultPageNumber = 0;
   defaultPageSize = 24;
-  @ViewChild('paginator', { static: true }) paginator!: PaginatorComponent;
+  @ViewChild('paginator', { static: false }) paginator!: PaginatorComponent;
 
   // define filters
   sortFilters: Filter[] = challengeSortFilter;
@@ -208,7 +208,7 @@ export class ChallengeSearchComponent
       );
       this.searchedTerms = params['searchTerms'];
       this.selectedPageNumber = +params['pageNumber'] || this.defaultPageNumber;
-      this.selectedPageSize = +params['pageSize'] || this.defaultPageSize;
+      this.selectedPageSize = this.defaultPageSize; // no available pageSize options for users
       this.sortedBy = params['sort'] || this.defaultSortedBy;
 
       const defaultQuery: ChallengeSearchQuery = {

diff --git a/libs/openchallenges/org-search/src/lib/org-search.component.html b/libs/openchallenges/org-search/src/lib/org-search.component.html
@@ -70,7 +70,6 @@ <h3>
         />
       </div>
       <openchallenges-paginator
-        *ngIf="organizationCards.length > 0"
         #paginator
         [pageNumber]="selectedPageNumber || defaultPageNumber"
         [pageSize]="selectedPageSize || defaultPageSize"

diff --git a/libs/openchallenges/org-search/src/lib/org-search.component.ts b/libs/openchallenges/org-search/src/lib/org-search.component.ts
@@ -122,7 +122,7 @@ export class OrgSearchComponent implements OnInit, AfterContentInit, OnDestroy {
   defaultSortedBy: OrganizationSort = 'challenge_count';
   defaultPageNumber = 0;
   defaultPageSize = 24;
-  @ViewChild('paginator', { static: true }) paginator!: PaginatorComponent;
+  @ViewChild('paginator', { static: false }) paginator!: PaginatorComponent;
 
   // define filters
   sortFilters: Filter[] = organizationSortFilter;
@@ -163,7 +163,7 @@ export class OrgSearchComponent implements OnInit, AfterContentInit, OnDestroy {
       this.selectedCategories = this.splitParam(params['categories']);
       this.searchedTerms = params['searchTerms'];
       this.selectedPageNumber = +params['pageNumber'] || this.defaultPageNumber;
-      this.selectedPageSize = +params['pageSize'] || this.defaultPageSize;
+      this.selectedPageSize = this.defaultPageSize; // no available pageSize options for users
       this.sortedBy = params['sort'] || this.defaultSortedBy;
 
       const defaultQuery: OrganizationSearchQuery = {

diff --git a/libs/openchallenges/ui/src/lib/paginator/paginator.component.html b/libs/openchallenges/ui/src/lib/paginator/paginator.component.html
@@ -8,4 +8,5 @@
   [showCurrentPageReport]="true"
   currentPageReportTemplate="Showing {first} to {last} of {totalRecords} results"
   (onPageChange)="onPageChange($event)"
+  [alwaysShow]="false"
 ></p-paginator>
diff --git a/libs/openchallenges/ui/src/lib/paginator/paginator.component.ts b/libs/openchallenges/ui/src/lib/paginator/paginator.component.ts
@@ -5,6 +5,7 @@ import {
   Output,
   EventEmitter,
   ViewChild,
+  OnInit,
 } from '@angular/core';
 import {
   Paginator,
@@ -18,7 +19,7 @@ import {
   templateUrl: './paginator.component.html',
   styleUrls: ['./paginator.component.scss'],
 })
-export class PaginatorComponent {
+export class PaginatorComponent implements OnInit {
   @Input({ required: true }) pageNumber = 0; // index of the new page
   @Input({ required: false }) pageLinkSize = 5;
   @Input({ required: true }) pageSize = 0; // number of items to display in new page
@@ -29,10 +30,9 @@ export class PaginatorComponent {
 
   itemIndex = 0; // index of the first item in the new page
 
-  // change itemIndex's value will not dynamically trigger selection updates - seems a primeng issue
-  // ngOnInit(): void {
-  //   this.itemIndex = this.pageNumber * this.pageSize;
-  // }
+  ngOnInit(): void {
+    this.itemIndex = this.pageNumber * this.pageSize;
+  }
 
   onPageChange(event: any): void {
     this.pageChange.emit(event);