From bee115457cacb49303b696f008261d5a0e16e6a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Wed, 22 Aug 2018 14:16:19 +0200 Subject: [PATCH 1/3] Add timelineLabels to query output --- frontend/src/app/components/wp-query/url-params-helper.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/app/components/wp-query/url-params-helper.ts b/frontend/src/app/components/wp-query/url-params-helper.ts index 3dd48c0a8c..97f4df1661 100644 --- a/frontend/src/app/components/wp-query/url-params-helper.ts +++ b/frontend/src/app/components/wp-query/url-params-helper.ts @@ -193,6 +193,7 @@ export class UrlParamsHelperService { queryData.showSums = query.sums; queryData.timelineVisible = !!query.timelineVisible; queryData.timelineZoomLevel = query.timelineZoomLevel; + queryData.timelineLabels = JSON.stringify(query.timelineLabels); queryData.showHierarchies = !!query.showHierarchies; queryData.groupBy = _.get(query.groupBy, 'id', ''); From 0ed890f5d5fc32ddd3d25ba594f1b9f6d4b38c91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Wed, 22 Aug 2018 14:16:27 +0200 Subject: [PATCH 2/3] Add error when embedded table macro is invalid --- config/locales/js-en.yml | 1 + .../wp-table/embedded/wp-embedded-table.component.ts | 12 +++++++++++- .../wp-table/embedded/wp-embedded-table.html | 3 +++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/config/locales/js-en.yml b/config/locales/js-en.yml index 05808428a3..0d59ff05e4 100644 --- a/config/locales/js-en.yml +++ b/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." diff --git a/frontend/src/app/components/wp-table/embedded/wp-embedded-table.component.ts b/frontend/src/app/components/wp-table/embedded/wp-embedded-table.component.ts index c8c4b68f9d..b31e79dfd5 100644 --- a/frontend/src/app/components/wp-table/embedded/wp-embedded-table.component.ts +++ b/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; diff --git a/frontend/src/app/components/wp-table/embedded/wp-embedded-table.html b/frontend/src/app/components/wp-table/embedded/wp-embedded-table.html index 767a09b945..c779d72344 100644 --- a/frontend/src/app/components/wp-table/embedded/wp-embedded-table.html +++ b/frontend/src/app/components/wp-table/embedded/wp-embedded-table.html @@ -12,4 +12,7 @@ +
+ +
From d5b51cf6aecd993cba8d89aef186a68dd22204b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Wed, 22 Aug 2018 14:56:36 +0200 Subject: [PATCH 3/3] [28303][28169] Fix configuration gantt chart and allow zoom level https://community.openproject.com/wp/28169 https://community.openproject.com/wp/28303 --- config/locales/js-en.yml | 3 + .../state/wp-table-timeline.service.ts | 4 +- .../wp-query/url-params-helper.spec.ts | 3 +- .../components/wp-query/url-params-helper.ts | 30 +++++--- .../tabs/timelines-tab.component.html | 73 +++++++++++++------ .../tabs/timelines-tab.component.ts | 27 ++++++- .../wp-timeline-container.directive.ts | 2 +- 7 files changed, 98 insertions(+), 44 deletions(-) diff --git a/config/locales/js-en.yml b/config/locales/js-en.yml index 0d59ff05e4..1295a79121 100644 --- a/config/locales/js-en.yml +++ b/config/locales/js-en.yml @@ -471,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" diff --git a/frontend/src/app/components/wp-fast-table/state/wp-table-timeline.service.ts b/frontend/src/app/components/wp-fast-table/state/wp-table-timeline.service.ts index b11c18db1d..f0fef0ac64 100644 --- a/frontend/src/app/components/wp-fast-table/state/wp-table-timeline.service.ts +++ b/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 { diff --git a/frontend/src/app/components/wp-query/url-params-helper.spec.ts b/frontend/src/app/components/wp-query/url-params-helper.spec.ts index 981c971ca4..27da0ab029 100644 --- a/frontend/src/app/components/wp-query/url-params-helper.spec.ts +++ b/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, diff --git a/frontend/src/app/components/wp-query/url-params-helper.ts b/frontend/src/app/components/wp-query/url-params-helper.ts index 97f4df1661..fac293331e 100644 --- a/frontend/src/app/components/wp-query/url-params-helper.ts +++ b/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,8 +194,12 @@ export class UrlParamsHelperService { queryData["columns[]"] = this.buildV3GetColumnsFromQueryResource(query); queryData.showSums = query.sums; queryData.timelineVisible = !!query.timelineVisible; - queryData.timelineZoomLevel = query.timelineZoomLevel; - queryData.timelineLabels = JSON.stringify(query.timelineLabels); + + if (!!query.timelineVisible) { + queryData.timelineZoomLevel = query.timelineZoomLevel; + queryData.timelineLabels = JSON.stringify(query.timelineLabels); + } + queryData.showHierarchies = !!query.showHierarchies; queryData.groupBy = _.get(query.groupBy, 'id', ''); diff --git a/frontend/src/app/components/wp-table/configuration-modal/tabs/timelines-tab.component.html b/frontend/src/app/components/wp-table/configuration-modal/tabs/timelines-tab.component.html index 1674c483ae..cd2114304b 100644 --- a/frontend/src/app/components/wp-table/configuration-modal/tabs/timelines-tab.component.html +++ b/frontend/src/app/components/wp-table/configuration-modal/tabs/timelines-tab.component.html @@ -7,42 +7,67 @@ - {{ text.display_timelines }}

-
-
- - -

-
+ +
+ + +

+
-
-
+
+
-
-
+
+ +
+ + +

+
+
+ +
+
+ +
+
+
+
+
+ diff --git a/frontend/src/app/components/wp-table/configuration-modal/tabs/timelines-tab.component.ts b/frontend/src/app/components/wp-table/configuration-modal/tabs/timelines-tab.component.ts index 697d5bf15d..c39e901bc9 100644 --- a/frontend/src/app/components/wp-table/configuration-modal/tabs/timelines-tab.component.ts +++ b/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); diff --git a/frontend/src/app/components/wp-table/timeline/container/wp-timeline-container.directive.ts b/frontend/src/app/components/wp-table/timeline/container/wp-timeline-container.directive.ts index 5b0f4534a0..6ac865496c 100644 --- a/frontend/src/app/components/wp-table/timeline/container/wp-timeline-container.directive.ts +++ b/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(); }