Merge pull request #7054 from opf/feature/29467-Automatic-calculation-of-work–packages-per-pagination-based-on-widget-height

[29467] Automatic calculation of work packages per pagination based on widget height 

[ci skip]

frontend/src/app/components/table-pagination/table-pagination.component.html

@@ -71,7 +71,8 @@
     </ul>
   </nav>
 
-  <div class="pagination--options" *ngIf="perPageOptions.length > 0 && pagination.total > perPageOptions[0]">
+  <div class="pagination--options"
+       *ngIf="showPerPageOptions()">
     <ul class="pagination--items">
       <li class="pagination--label" [textContent]="text.per_page" title="{{ text.per_page }}"></li>
 

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

@@ -39,6 +39,7 @@ import {I18nService} from 'core-app/modules/common/i18n/i18n.service';
 export class TablePaginationComponent implements OnInit {
   @Input() totalEntries:string;
   @Input() hideForSinglePageResults:boolean = false;
+  @Input() calculatePerPage:boolean = false;
   @Output() updateResults = new EventEmitter<PaginationInstance>();
 
   public pagination:PaginationInstance;
@@ -57,8 +58,6 @@ export class TablePaginationComponent implements OnInit {
 
   constructor(protected paginationService:PaginationService,
               readonly I18n:I18nService) {
-
-
   }
 
   ngOnInit():void {
@@ -146,6 +145,12 @@ export class TablePaginationComponent implements OnInit {
     this.pageNumbers = pageNumbers;
   }
 
+  public showPerPageOptions() {
+    return !this.calculatePerPage &&
+           this.perPageOptions.length > 0 &&
+           this.pagination.total > this.perPageOptions[0]
+  }
+
   private truncatePageNums(pageNumbers:any, perform:any, disectFrom:any, disectLength:any, truncateFrom:any) {
     if (perform) {
       var truncationSize = this.paginationService.getOptionsTruncationSize();

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

@@ -137,6 +137,9 @@ export class WorkPackageEmbeddedTableComponent extends WorkPackageEmbeddedBaseCo
     // We should allow the backend to disable results embedding instead.
     if (!this.configuration.tableVisible) {
       this.queryProps.pageSize = 1;
+    } else if (this.configuration.forcePerPageOption) {
+      // Limit the number of visible work packages
+      this.queryProps.pageSize = this.configuration.forcePerPageOption;
     }
 
     this.error = null;

frontend/src/app/components/wp-table/embedded/wp-embedded-table.html

@@ -19,7 +19,9 @@
 
     <!-- Footer -->
     <div class="work-packages-split-view--tabletimeline-footer hide-when-print">
-      <wp-table-pagination [hideForSinglePageResults]="true"></wp-table-pagination>
+      <wp-table-pagination [hideForSinglePageResults]="true"
+                           [calculatePerPage]="configuration.forcePerPageOption">
+      </wp-table-pagination>
     </div>
   </ng-container>
   <div class="notification-box -error" *ngIf="error">

frontend/src/app/components/wp-table/wp-table-configuration.ts

@@ -57,6 +57,9 @@ export class WorkPackageTableConfiguration {
   /** Whether this table is in an embedded context*/
   public isEmbedded:boolean = false;
 
+  /** Whether the number of shown WP per page shall be calculated based on the available height */
+  public forcePerPageOption:number|false = false;
+
   /** Whether this table provides a UI for filters*/
   public withFilters:boolean = false;
 

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