move pagination handling to wp-table-pagination component

frontend/src/app/components/wp-table/table-pagination/wp-table-pagination.component.spec.ts

@@ -40,6 +40,8 @@ import {HalResourceService} from 'core-app/modules/hal/services/hal-resource.ser
 import {PathHelperService} from 'core-app/modules/common/path-helper/path-helper.service';
 import {I18nService} from "core-app/modules/common/i18n/i18n.service";
 import {OpenProject} from "core-app/globals/openproject";
+import {OpIcon} from "core-app/modules/common/icon/op-icon";
+import {WorkPackageViewSortByService} from "core-app/modules/work_packages/routing/wp-view-base/view-services/wp-view-sort-by.service";
 
 function setupMocks(paginationService:PaginationService) {
   spyOn(paginationService, 'loadPaginationOptions').and.callFake(() => {
@@ -69,11 +71,13 @@ describe('wpTablePagination Directive', () => {
         HttpClientModule
       ],
       declarations: [
-        WorkPackageTablePaginationComponent
+        WorkPackageTablePaginationComponent,
+        OpIcon
       ],
       providers: [
         States,
         PaginationService,
+        WorkPackageViewSortByService,
         PathHelperService,
         WorkPackageViewPaginationService,
         HalResourceService,
@@ -102,7 +106,6 @@ describe('wpTablePagination Directive', () => {
         app.update();
         fixture.detectChanges();
         expect(pageString(element)).toEqual('(1 - 10/11)');
-
       }));
 
     describe('"next" link', function() {

frontend/src/app/components/wp-table/table-pagination/wp-table-pagination.component.ts

@@ -33,6 +33,11 @@ import {I18nService} from 'core-app/modules/common/i18n/i18n.service';
 import {IPaginationOptions, PaginationService} from 'core-components/table-pagination/pagination-service';
 import {WorkPackageViewPaginationService} from "core-app/modules/work_packages/routing/wp-view-base/view-services/wp-view-pagination.service";
 import {WorkPackageViewPagination} from "core-app/modules/work_packages/routing/wp-view-base/view-services/wp-table-pagination";
+import {WorkPackageViewSortByService} from "core-app/modules/work_packages/routing/wp-view-base/view-services/wp-view-sort-by.service";
+import {wpDisplayCardRepresentation} from "core-app/modules/work_packages/routing/wp-view-base/view-services/wp-view-display-representation.service";
+import {IsolatedQuerySpace} from "core-app/modules/work_packages/query-space/isolated-query-space";
+import { combineLatest } from 'rxjs';
+import {WorkPackageCollectionResource} from "core-app/modules/hal/resources/wp-collection-resource";
 
 @Component({
   templateUrl: '../../table-pagination/table-pagination.component.html',
@@ -44,6 +49,8 @@ export class WorkPackageTablePaginationComponent extends TablePaginationComponen
   constructor(protected paginationService:PaginationService,
               protected cdRef:ChangeDetectorRef,
               protected wpTablePagination:WorkPackageViewPaginationService,
+              readonly querySpace:IsolatedQuerySpace,
+              readonly wpTableSortBy:WorkPackageViewSortByService,
               readonly I18n:I18nService) {
     super(paginationService, cdRef, I18n);
 
@@ -66,6 +73,19 @@ export class WorkPackageTablePaginationComponent extends TablePaginationComponen
         this.pagination = wpPagination.current;
         this.update();
     });
+
+    // hide/show pagination options depending on the sort mode
+    combineLatest([
+      this.querySpace.query.values$(),
+      this.wpTableSortBy.live$()
+    ]).pipe(
+      untilComponentDestroyed(this)
+    ).subscribe(([query, sort]) => {
+      this.showPerPage = this.showPageSelections = !this.isManualSortingMode;
+      this.infoText = this.paginationInfoText(query.results);
+
+      this.update();
+    });
   }
 
   ngOnDestroy():void {
@@ -80,4 +100,17 @@ export class WorkPackageTablePaginationComponent extends TablePaginationComponen
   public showPage(pageNumber:number) {
     this.wpTablePagination.updateFromObject({page: pageNumber});
   }
+
+  private get isManualSortingMode() {
+    return this.wpTableSortBy.isManualSortingMode;
+  }
+
+  public paginationInfoText(work_packages:WorkPackageCollectionResource) {
+    if (this.isManualSortingMode && (work_packages.count < work_packages.total)) {
+      return I18n.t('js.work_packages.limited_results',
+        {count: work_packages.count});
+    } else {
+      return undefined;
+    }
+  }
 }

frontend/src/app/modules/work_packages/routing/wp-list/wp-list.component.ts

@@ -218,19 +218,6 @@ export class WorkPackagesListComponent extends WorkPackagesViewBase implements O
     return this.bcfDetectorService.isBcfActivated;
   }
 
-  public get isManualSortingMode() {
-    return this.wpTableSortBy.isManualSortingMode;
-  }
-
-  public get paginationInfoText() {
-    if (this.isManualSortingMode && (this.currentQuery.results.count < this.currentQuery.results.total)) {
-      return I18n.t('js.work_packages.limited_results',
-                    {count: this.currentQuery.results.count});
-    } else {
-      return null;
-    }
-  }
-
   protected updateQueryOnParamsChanges() {
     // Listen for param changes
     this.removeTransitionSubscription = this.$transitions.onSuccess({}, (transition):any => {

frontend/src/app/modules/work_packages/routing/wp-list/wp.list.component.html

@@ -91,10 +91,7 @@
       <!-- Footer -->
       <div class="work-packages-split-view--tabletimeline-footer hide-when-print"
            *ngIf="tableInformationLoaded">
-        <wp-table-pagination [showPerPage]="!isManualSortingMode"
-                             [showPageSelections]="!isManualSortingMode"
-                             [infoText]="paginationInfoText">
-        </wp-table-pagination>
+        <wp-table-pagination></wp-table-pagination>
       </div>
     </div>