Let WP list widgets calculate the number of shown WPs based on the available height

frontend/src/app/modules/grids/grid/grid.component.html

@@ -51,6 +51,7 @@
            (click)="remove.widget(area)">
       </div>
       <ndc-dynamic [ndcDynamicComponent]="widgetComponent(area.widget)"
+                   [ndcDynamicInputs]="{ resource: area.widget }"
                    [ndcDynamicOutputs]="{}">
       </ndc-dynamic>
     </div>

frontend/src/app/modules/grids/widgets/wp-accountable/wp-accountable.component.ts

@@ -1,20 +1,18 @@
 import {Component, OnInit} from "@angular/core";
-import {AbstractWidgetComponent} from "app/modules/grids/widgets/abstract-widget.component";
 import {ApiV3FilterBuilder} from "core-components/api/api-v3/api-v3-filter-builder";
+import {WidgetWpListComponent} from "core-app/modules/grids/widgets/wp-widget/wp-widget.component";
 
 @Component({
   templateUrl: '../wp-widget/wp-widget.component.html',
   styleUrls: ['../wp-widget/wp-widget.component.css']
 })
 
-export class WidgetWpAccountableComponent extends AbstractWidgetComponent implements OnInit {
+export class WidgetWpAccountableComponent extends WidgetWpListComponent implements OnInit {
   public text = { title: this.i18n.t('js.grid.widgets.work_packages_accountable.title') };
   public queryProps:any;
-  public configuration = { "actionsColumnEnabled": false,
-                           "columnMenuEnabled": false,
-                           "contextMenuEnabled": false };
 
   ngOnInit() {
+    super.ngOnInit();
     let filters = new ApiV3FilterBuilder();
     filters.add('responsible', '=', ["me"]);
     filters.add('status', 'o', []);

frontend/src/app/modules/grids/widgets/wp-assigned/wp-assigned.component.ts

@@ -1,20 +1,18 @@
 import {Component, OnInit} from "@angular/core";
-import {AbstractWidgetComponent} from "app/modules/grids/widgets/abstract-widget.component";
 import {ApiV3FilterBuilder} from "core-components/api/api-v3/api-v3-filter-builder";
+import {WidgetWpListComponent} from "core-app/modules/grids/widgets/wp-widget/wp-widget.component";
 
 @Component({
   templateUrl: '../wp-widget/wp-widget.component.html',
   styleUrls: ['../wp-widget/wp-widget.component.css']
 })
 
-export class WidgetWpAssignedComponent extends AbstractWidgetComponent implements OnInit {
+export class WidgetWpAssignedComponent extends WidgetWpListComponent implements OnInit {
   public text = { title: this.i18n.t('js.grid.widgets.work_packages_assigned.title') };
   public queryProps:any;
-  public configuration = { "actionsColumnEnabled": false,
-                           "columnMenuEnabled": false,
-                           "contextMenuEnabled": false };
 
   ngOnInit() {
+    super.ngOnInit();
     let filters = new ApiV3FilterBuilder();
     filters.add('assignee', '=', ["me"]);
     filters.add('status', 'o', []);

frontend/src/app/modules/grids/widgets/wp-created/wp-created.component.ts

@@ -1,19 +1,17 @@
 import {Component, OnInit} from "@angular/core";
-import {AbstractWidgetComponent} from "app/modules/grids/widgets/abstract-widget.component";
 import {ApiV3FilterBuilder} from "core-components/api/api-v3/api-v3-filter-builder";
+import {WidgetWpListComponent} from "core-app/modules/grids/widgets/wp-widget/wp-widget.component";
 
 @Component({
   templateUrl: '../wp-widget/wp-widget.component.html',
   styleUrls: ['../wp-widget/wp-widget.component.css']
 })
-export class WidgetWpCreatedComponent extends AbstractWidgetComponent implements OnInit {
+export class WidgetWpCreatedComponent extends WidgetWpListComponent implements OnInit {
   public text = { title: this.i18n.t('js.grid.widgets.work_packages_created.title') };
   public queryProps:any;
-  public configuration = { "actionsColumnEnabled": false,
-                           "columnMenuEnabled": false,
-                           "contextMenuEnabled": false };
 
   ngOnInit() {
+    super.ngOnInit();
     let filters = new ApiV3FilterBuilder();
     filters.add('author', '=', ["me"]);
     filters.add('status', 'o', []);

frontend/src/app/modules/grids/widgets/wp-watched/wp-watched.component.ts

@@ -1,19 +1,17 @@
 import {Component, OnInit} from "@angular/core";
-import {AbstractWidgetComponent} from "app/modules/grids/widgets/abstract-widget.component";
 import {ApiV3FilterBuilder} from "core-components/api/api-v3/api-v3-filter-builder";
+import {WidgetWpListComponent} from "core-app/modules/grids/widgets/wp-widget/wp-widget.component";
 
 @Component({
   templateUrl: '../wp-widget/wp-widget.component.html',
   styleUrls: ['../wp-widget/wp-widget.component.css']
 })
-export class WidgetWpWatchedComponent extends AbstractWidgetComponent implements OnInit {
+export class WidgetWpWatchedComponent extends WidgetWpListComponent implements OnInit {
   public text = { title: this.i18n.t('js.grid.widgets.work_packages_watched.title') };
   public queryProps:any;
-  public configuration = { "actionsColumnEnabled": false,
-                           "columnMenuEnabled": false,
-                           "contextMenuEnabled": false };
 
   ngOnInit() {
+    super.ngOnInit();
     let filters = new ApiV3FilterBuilder();
     filters.add('watcher', '=', ["me"]);
     filters.add('status', 'o', []);

frontend/src/app/modules/grids/widgets/wp-widget/wp-widget.component.ts

@@ -1,4 +1,33 @@
 import {AbstractWidgetComponent} from "app/modules/grids/widgets/abstract-widget.component";
+import {OnInit} from "@angular/core";
 
-export class WidgetWpListComponent extends AbstractWidgetComponent {
+export class WidgetWpListComponent extends AbstractWidgetComponent implements OnInit {
+  // An heuristic based on paddings, margins, the widget header height and the pagination height
+  private static widgetSpaceOutsideTable:number = 230;
+  private static wpLineHeight:number = 40;
+  private static gridAreaHeight:number = 100;
+  private static gridAreaSpace:number = 20;
+
+  public configuration:any = {
+    "actionsColumnEnabled": false,
+    "columnMenuEnabled": false,
+    "contextMenuEnabled": false
+  };
+
+  ngOnInit() {
+    this.configuration.forcePerPageOption = this.calculatePerPageOption();
+  }
+
+  private calculatePerPageOption() {
+    if (this.resource) {
+      let numberOfRows = this.resource.height;
+      let availableHeight = numberOfRows * WidgetWpListComponent.gridAreaHeight +
+        (numberOfRows - 1) * WidgetWpListComponent.gridAreaSpace;
+      let perPageOption = Math.floor((availableHeight - WidgetWpListComponent.widgetSpaceOutsideTable) / WidgetWpListComponent.wpLineHeight);
+
+      return perPageOption < 1 ? 1 : perPageOption
+    } else {
+      return false
+    }
+  }
 }