Implement sums display

config/locales/js-en.yml

@@ -568,6 +568,7 @@ en:
         default_mode: "Default mode"
         hierarchy_mode: "Hierarchy mode"
         hierarchy_hint: "All filtered table results will be augmented with their ancestors. Hierarchies can be expanded and collapsed."
+        display_sums_hint: "Display sums of all summable attributes in a row below the table results."
       tabs:
         overview: Overview
         activity: Activity

frontend/app/components/wp-fast-table/state/wp-table-sum.service.ts

@@ -75,6 +75,13 @@ export class WorkPackageTableSumService extends WorkPackageTableBaseService<Work
     this.state.putValue(currentState);
   }
 
+  public setEnabled(value:boolean) {
+    let currentState = this.current;
+    currentState.current = value;
+
+    this.state.putValue(currentState);
+  }
+
   public get isEnabled() {
     return this.current.isEnabled;
   }

frontend/app/components/wp-table/configuration-modal/tabs/display-settings-tab.component.html

@@ -58,5 +58,22 @@
       <h4 [textContent]="text.display_mode.hierarchy_mode"></h4>
       <p [textContent]="text.display_mode.hierarchy_hint"></p>
     </div>
+
+    <hr/>
+
+    <div>
+      <div class="form--field -full-width">
+        <div class="form--field-container">
+          <label class="option-label">
+            <input type="checkbox"
+                   (change)="displaySums = !displaySums"
+                   [checked]="displaySums"
+                   name="display_sums_switch">
+            {{ text.display_sums }}
+          </label>
+        </div>
+      </div>
+      <p [textContent]="text.display_sums_hint"></p>
+    </div>
   </form>
 </div>

frontend/app/components/wp-table/configuration-modal/tabs/display-settings-tab.component.ts

@@ -4,6 +4,7 @@ import {TabComponent} from 'core-components/wp-table/configuration-modal/tab-por
 import {WorkPackageTableGroupByService} from 'core-components/wp-fast-table/state/wp-table-group-by.service';
 import {QueryGroupByResource} from 'core-components/api/api-v3/hal-resources/query-group-by-resource.service';
 import {WorkPackageTableHierarchiesService} from 'core-components/wp-fast-table/state/wp-table-hierarchy.service';
+import {WorkPackageTableSumService} from 'core-components/wp-fast-table/state/wp-table-sum.service';
 
 @Component({
   template: require('!!raw-loader!./display-settings-tab.component.html')
@@ -13,6 +14,7 @@ export class WpTableConfigurationDisplaySettingsTab implements TabComponent {
   readonly I18n = this.injector.get(I18nToken);
   readonly wpTableGroupBy = this.injector.get(WorkPackageTableGroupByService);
   readonly wpTableHierarchies = this.injector.get(WorkPackageTableHierarchiesService);
+  readonly wpTableSums = this.injector.get(WorkPackageTableSumService);
 
   // Display mode
   public displayMode:'hierarchy'|'grouped'|'default' = 'default';
@@ -21,11 +23,16 @@ export class WpTableConfigurationDisplaySettingsTab implements TabComponent {
   public currentGroup:QueryGroupByResource|null = null;
   public availableGroups:QueryGroupByResource[] = [];
 
+  // Sums row display
+  public displaySums:boolean = false;
+
   public text = {
     label_group_by: this.I18n.t('js.label_group_by'),
     title: this.I18n.t('js.label_group_by'),
     placeholder: this.I18n.t('js.placeholders.default'),
     please_select: this.I18n.t('js.placeholders.selection'),
+    display_sums: this.I18n.t('js.work_packages.query.display_sums'),
+    display_sums_hint: this.I18n.t('js.work_packages.table_configuration.display_sums_hint'),
     display_mode: {
       default: this.I18n.t('js.work_packages.table_configuration.default_mode'),
       grouped: this.I18n.t('js.work_packages.table_configuration.grouped_mode'),
@@ -45,6 +52,9 @@ export class WpTableConfigurationDisplaySettingsTab implements TabComponent {
     // Update grouping state
     let group = this.displayMode === 'grouped' ? this.currentGroup : null;
     this.wpTableGroupBy.set(group);
+
+    // Update sums state
+    this.wpTableSums.setEnabled(this.displaySums);
   }
 
   public updateGroup(href:string) {
@@ -58,6 +68,8 @@ export class WpTableConfigurationDisplaySettingsTab implements TabComponent {
       this.displayMode = 'grouped';
     }
 
+    this.displaySums = this.wpTableSums.currentSum;
+
     this.wpTableGroupBy
       .onReady()
       .then(() => {