Merge pull request #6567 from opf/fix/embedded-table-timeline-config

[28303][28169] Fix configuration gantt chart and allow zoom level

[ci skip]

config/locales/js-en.yml

@@ -131,6 +131,7 @@ en:
       internal: "An internal error has occurred."
       cannot_save_changes_with_message: "Cannot save your changes due to the following error: %{error}"
       query_saving: "The view could not be saved."
+      embedded_table_loading: "The embedded view could not be loaded: %{message}"
     filter:
       description:
         text_open_filter: "Open this filter with 'ALT' and arrow keys."
@@ -470,6 +471,9 @@ en:
         quarters: "Quarters"
         years: "Years"
         slider: "Zoom slider"
+        description: >
+          Either select the initial zoom level that should be shown or check the auto zoom box to adjust the gantt chart
+          to fit the visible area.
     tl_toolbar:
       zooms: "Zoom level"
       outlines: "Hierarchy level"

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

@@ -139,8 +139,8 @@ export class WorkPackageTableTimelineService extends WorkPackageTableBaseService
     }
   }
 
-  public toggleAutoZoom() {
-    this.tableState.timelineAutoZoom.putValue(!this.tableState.timelineAutoZoom.value);
+  public toggleAutoZoom(value = !this.tableState.timelineAutoZoom.value) {
+    this.tableState.timelineAutoZoom.putValue(value);
   }
 
   public isAutoZoomEnabled():boolean {

frontend/src/app/components/wp-query/url-params-helper.spec.ts

@@ -189,6 +189,7 @@ describe('UrlParamsHelper', function() {
         id: 1,
         name: 'knoblauch soße',
         timelineZoomLevel: 0,
+        timelineLabels: { left: 'foo', right: 'bar', farRight: 'asdf' },
         sums: true,
         columns: [{ id: 'type' }, { id: 'status' }, { id: 'soße' }],
         groupBy: {
@@ -231,7 +232,6 @@ describe('UrlParamsHelper', function() {
           }
         ]),
         sortBy: JSON.stringify([['type', 'desc'], ['status', 'asc']]),
-        timelineZoomLevel: 0,
         timelineVisible: false,
         showHierarchies: false,
         offset: 10,
@@ -288,7 +288,6 @@ describe('UrlParamsHelper', function() {
         ]),
         groupBy: '',
         showSums: false,
-        timelineZoomLevel: 0,
         timelineVisible: false,
         showHierarchies: false,
 

frontend/src/app/components/wp-query/url-params-helper.ts

@@ -74,13 +74,14 @@ export class UrlParamsHelperService {
 
     if (!!query.timelineVisible) {
       paramsData.tv = query.timelineVisible;
-    }
 
-    if (!_.isEmpty(query.timelineLabels)) {
-      paramsData.tll = JSON.stringify(query.timelineLabels);
+      if (!_.isEmpty(query.timelineLabels)) {
+        paramsData.tll = JSON.stringify(query.timelineLabels);
+      }
+
+      paramsData.tzl = query.timelineZoomLevel;
     }
 
-    paramsData.tzl = query.timelineZoomLevel;
     paramsData.hi = !!query.showHierarchies;
     paramsData.g = _.get(query.groupBy, 'id', '');
     if (query.sortBy) {
@@ -134,13 +135,14 @@ export class UrlParamsHelperService {
     }
     if (!!properties.tv) {
       queryData.timelineVisible = properties.tv;
-    }
-    if (!!properties.tll) {
-      queryData.timelineLabels = properties.tll;
-    }
 
-    if (properties.tzl) {
-      queryData.timelineZoomLevel = properties.tzl;
+      if (!!properties.tll) {
+        queryData.timelineLabels = properties.tll;
+      }
+
+      if (properties.tzl) {
+        queryData.timelineZoomLevel = properties.tzl;
+      }
     }
 
     if (properties.hi === false || properties.hi === true) {
@@ -192,7 +194,12 @@ export class UrlParamsHelperService {
     queryData["columns[]"] = this.buildV3GetColumnsFromQueryResource(query);
     queryData.showSums = query.sums;
     queryData.timelineVisible = !!query.timelineVisible;
-    queryData.timelineZoomLevel = query.timelineZoomLevel;
+
+    if (!!query.timelineVisible) {
+      queryData.timelineZoomLevel = query.timelineZoomLevel;
+      queryData.timelineLabels = JSON.stringify(query.timelineLabels);
+    }
+
     queryData.showHierarchies = !!query.showHierarchies;
     queryData.groupBy = _.get(query.groupBy, 'id', '');
 

frontend/src/app/components/wp-table/configuration-modal/tabs/timelines-tab.component.html

@@ -7,42 +7,67 @@
             <input type="checkbox"
                    (change)="timelineVisible = !timelineVisible"
                    [checked]="timelineVisible"
+                   [textContent]="text.display_timelines"
                    name="display_timelines_switch">
-            {{ text.display_timelines }}
           </label>
         </div>
       </div>
       <p [textContent]="text.display_timelines_hint"></p>
     </div>
-    <hr/>
-    <fieldset *ngIf="timelineVisible"
-              class="form--fieldset">
-      <legend class="form--fieldset-legend"
-              [textContent]="text.labels.title">
-      </legend>
-      <p [textContent]="text.labels.description"></p>
-      <div class="form--row" *ngFor="let key of availableLabels">
+    <ng-container *ngIf="timelineVisible">
+      <fieldset class="form--fieldset">
+        <legend class="form--fieldset-legend"
+                [textContent]="text.zoom.level">
+        </legend>
+        <p [textContent]="text.zoom.description"></p>
+
         <div class="form--field">
-          <label
-            for="modal-timelines-label-{{key}}"
-            class="form--label">
-            {{ text.labels[key] }}
-          </label>
           <div class="form--field-container">
-            <div class="form--select-container">
+            <div class="form--text-select-container -slim">
+
               <select
-                id="modal-timelines-label-{{key}}"
-                (change)="updateLabels(key, $event.target.value)"
-                class="form--select">
-                <option *ngFor="let column of availableAttributes"
-                        [textContent]="column.name"
-                        [value]="column.id"
-                        [selected]="labels[key] === column.id"></option>
+                  id="modal-timelines-zoomlevel"
+                  [attr.disabled]="autoZoom === true ? 'disabled' : undefined"
+                  (change)="zoomLevel = $event.target.value"
+                  class="form--select">
+                <option *ngFor="let level of availableZoomLevels"
+                        [textContent]="text.zoom[level]"
+                        [value]="level"
+                        [selected]="zoomLevel === level"></option>
               </select>
             </div>
           </div>
         </div>
-      </div>
-    </fieldset>
+      </fieldset>
+
+      <fieldset class="form--fieldset">
+        <legend class="form--fieldset-legend"
+                [textContent]="text.labels.title">
+        </legend>
+        <p [textContent]="text.labels.description"></p>
+        <div class="form--row" *ngFor="let key of availableLabels">
+          <div class="form--field">
+            <label
+              for="modal-timelines-label-{{key}}"
+              class="form--label">
+              {{ text.labels[key] }}
+            </label>
+            <div class="form--field-container">
+              <div class="form--select-container">
+                <select
+                  id="modal-timelines-label-{{key}}"
+                  (change)="updateLabels(key, $event.target.value)"
+                  class="form--select">
+                  <option *ngFor="let column of availableAttributes"
+                          [textContent]="column.name"
+                          [value]="column.id"
+                          [selected]="labels[key] === column.id"></option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    </ng-container>
   </form>
 </div>

frontend/src/app/components/wp-table/configuration-modal/tabs/timelines-tab.component.ts

@@ -2,9 +2,10 @@ import {Component, Inject, Injector} from '@angular/core';
 import {I18nService} from 'core-app/modules/common/i18n/i18n.service';
 import {TabComponent} from 'core-components/wp-table/configuration-modal/tab-portal-outlet';
 import {WorkPackageTableTimelineService} from 'core-components/wp-fast-table/state/wp-table-timeline.service';
-import {TimelineLabels} from 'core-app/modules/hal/resources/query-resource';
+import {TimelineLabels, TimelineZoomLevel} from 'core-app/modules/hal/resources/query-resource';
 import {WorkPackageTableColumnsService} from 'core-components/wp-fast-table/state/wp-table-columns.service';
 import {QueryColumn} from 'core-components/wp-query/query-column';
+import {zoomLevelOrder} from "core-components/wp-table/timeline/wp-timeline";
 
 @Component({
   templateUrl: './timelines-tab.component.html'
@@ -17,10 +18,23 @@ export class WpTableConfigurationTimelinesTab implements TabComponent {
   public labels:TimelineLabels;
   public availableLabels:string[];
 
+  public zoomLevel:TimelineZoomLevel;
+  public availableZoomLevels = zoomLevelOrder;
+
   public text = {
     title: this.I18n.t('js.timelines.gantt_chart'),
     display_timelines: this.I18n.t('js.timelines.button_activate'),
     display_timelines_hint: this.I18n.t('js.work_packages.table_configuration.show_timeline_hint'),
+    zoom: {
+      level: this.I18n.t('js.tl_toolbar.zooms'),
+      description: this.I18n.t('js.timelines.zoom.description'),
+      days: this.I18n.t('js.timelines.zoom.days'),
+      weeks: this.I18n.t('js.timelines.zoom.weeks'),
+      months: this.I18n.t('js.timelines.zoom.months'),
+      quarters: this.I18n.t('js.timelines.zoom.quarters'),
+      years: this.I18n.t('js.timelines.zoom.years'),
+      autozoom: this.I18n.t('js.timelines.zoom.auto')
+    },
     labels: {
       title: this.I18n.t('js.timelines.labels.title'),
       description: this.I18n.t('js.timelines.labels.description'),
@@ -39,8 +53,12 @@ export class WpTableConfigurationTimelinesTab implements TabComponent {
   }
 
   public onSave() {
-    this.wpTableTimeline.setVisible(this.timelineVisible);
-    this.wpTableTimeline.updateLabels(this.labels);
+    this.wpTableTimeline.toggleAutoZoom(false);
+    let current = this.wpTableTimeline.current;
+    current.visible = this.timelineVisible
+    current.labels = this.labels;
+    current.zoomLevel = this.zoomLevel;
+    this.wpTableTimeline.state.putValue(current);
   }
 
   public updateLabels(key:keyof TimelineLabels, value:string|null) {
@@ -54,6 +72,9 @@ export class WpTableConfigurationTimelinesTab implements TabComponent {
   ngOnInit() {
     this.timelineVisible = this.wpTableTimeline.isVisible;
 
+    // Current zoom level
+    this.zoomLevel = this.wpTableTimeline.zoomLevel;
+
     // Current label models
     const labels = this.wpTableTimeline.labels;
     this.labels = _.clone(labels);

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

@@ -29,6 +29,7 @@ import {WorkPackageCollectionResource} from 'core-app/modules/hal/resources/wp-c
 import {UrlParamsHelperService} from 'core-components/wp-query/url-params-helper';
 import {WpTableConfigurationModalComponent} from 'core-components/wp-table/configuration-modal/wp-table-configuration.modal';
 import {OpModalService} from 'core-components/op-modals/op-modal.service';
+import {I18nService} from "core-app/modules/common/i18n/i18n.service";
 
 @Component({
   selector: 'wp-embedded-table',
@@ -64,11 +65,13 @@ export class WorkPackageEmbeddedTableComponent implements OnInit, AfterViewInit,
   public tableInformationLoaded = false;
   public showTablePagination = false;
   public configuration:WorkPackageTableConfiguration;
+  public error:string|null = null;
 
   constructor(readonly QueryDm:QueryDmService,
               readonly tableState:TableState,
               readonly injector:Injector,
               readonly opModalService:OpModalService,
+              readonly I18n:I18nService,
               readonly urlParamsHelper:UrlParamsHelperService,
               readonly loadingIndicatorService:LoadingIndicatorService,
               readonly tableActionsService:OpTableActionsService,
@@ -185,13 +188,20 @@ export class WorkPackageEmbeddedTableComponent implements OnInit, AfterViewInit,
       this.queryProps.pageSize = 1;
     }
 
+    this.error = null;
     const promise = this.QueryDm
       .find(
         this.queryProps,
         this.queryId,
         this.queryProjectScope
       )
-      .then((query:QueryResource) => this.initializeStates(query, query.results));
+      .then((query:QueryResource) => this.initializeStates(query, query.results))
+      .catch((error) => {
+        this.error = this.I18n.t(
+          'js.error.embedded_table_loading',
+          { message: _.get(error, 'message', error) }
+        );
+      });
 
     if (visible) {
       this.loadingIndicator = promise;

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

@@ -12,4 +12,7 @@
       <wp-table-pagination [hideForSinglePageResults]="true"></wp-table-pagination>
     </div>
   </ng-container>
+  <div class="notification-box -error" *ngIf="error">
+    <span [textContent]="error.message || error"></span>
+  </div>
 </div>

frontend/src/app/components/wp-table/timeline/container/wp-timeline-container.directive.ts

@@ -236,7 +236,7 @@ export class WorkPackageTimelineTableController implements AfterViewInit, OnDest
       // Reset the width of the outer container if its content shrinks
       this.outerContainer.css('width', 'auto');
 
-      if (this.tableState.timelineAutoZoom.value!) {
+      if (!this.workPackageTable.configuration.isEmbedded && this.tableState.timelineAutoZoom.value) {
         this.applyAutoZoomLevel();
       }