From a0da1822d487913c1a459e2ddda46fa44301f8e2 Mon Sep 17 00:00:00 2001
From: Roman Roelofsen <romanroe@gmail.com>
Date: Tue, 6 Dec 2016 15:40:54 +0100
Subject: [PATCH] Timeline: - correclty enable/disable display of work package
 based on the exitence of start/due values - fixed wrong positioning of header
 after work package changes

---
 .../cell-renderer/timeline-cell-renderer.ts    | 18 ++++++++++++------
 .../timeline-milestone-cell-renderer.ts        |  8 +++++---
 .../wp-table/timeline/wp-timeline-cell.ts      | 12 ++++++++++--
 .../wp-timeline-container.directive.ts         |  1 +
 4 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/frontend/app/components/wp-table/timeline/cell-renderer/timeline-cell-renderer.ts b/frontend/app/components/wp-table/timeline/cell-renderer/timeline-cell-renderer.ts
index e746a5a392..3186714318 100644
--- a/frontend/app/components/wp-table/timeline/cell-renderer/timeline-cell-renderer.ts
+++ b/frontend/app/components/wp-table/timeline/cell-renderer/timeline-cell-renderer.ts
@@ -1,5 +1,5 @@
-import {WorkPackageResourceInterface} from './../../../api/api-v3/hal-resources/work-package-resource.service';
-import {RenderInfo, calculatePositionValueForDayCount, timelineElementCssClass} from './../wp-timeline';
+import {WorkPackageResourceInterface} from "./../../../api/api-v3/hal-resources/work-package-resource.service";
+import {RenderInfo, calculatePositionValueForDayCount, timelineElementCssClass} from "./../wp-timeline";
 
 const classNameLeftHandle = "leftHandle";
 const classNameRightHandle = "rightHandle";
@@ -83,10 +83,14 @@ export class TimelineCellRenderer {
     return dates;
   }
 
-  public update(element:HTMLDivElement, wp: WorkPackageResourceInterface, renderInfo:RenderInfo) {
+  /**
+   * @return true, if the element should still be displayed.
+   *         false, if the element must be removed from the timeline.
+   */
+  public update(element: HTMLDivElement, wp: WorkPackageResourceInterface, renderInfo: RenderInfo): boolean {
     // abort if no start or due date
     if (!wp.startDate || !wp.dueDate) {
-      return;
+      return false;
     }
 
     // general settings - bar
@@ -103,6 +107,8 @@ export class TimelineCellRenderer {
     // duration
     const duration = due.diff(start, "days") + 1;
     element.style.width = calculatePositionValueForDayCount(viewParams, duration);
+
+    return true;
   }
 
   /**
@@ -143,7 +149,7 @@ export class TimelineCellRenderer {
     right.style.maxWidth = "20%";
     right.style.height = "100%";
     right.style.cursor = "e-resize";
-    bar.appendChild(right)
+    bar.appendChild(right);
 
     return bar;
   }
@@ -170,4 +176,4 @@ export class TimelineCellRenderer {
     jQuery(".hascontextmenu").css("cursor", cursor);
     jQuery("." + timelineElementCssClass).css("cursor", cursor);
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/app/components/wp-table/timeline/cell-renderer/timeline-milestone-cell-renderer.ts b/frontend/app/components/wp-table/timeline/cell-renderer/timeline-milestone-cell-renderer.ts
index 312b312f58..5c88b29aaf 100644
--- a/frontend/app/components/wp-table/timeline/cell-renderer/timeline-milestone-cell-renderer.ts
+++ b/frontend/app/components/wp-table/timeline/cell-renderer/timeline-milestone-cell-renderer.ts
@@ -57,10 +57,10 @@ export class TimelineMilestoneCellRenderer extends TimelineCellRenderer {
     return dates;
   }
 
-  public update(element:HTMLDivElement, wp: WorkPackageResourceInterface, renderInfo:RenderInfo) {
+  public update(element:HTMLDivElement, wp: WorkPackageResourceInterface, renderInfo:RenderInfo): boolean {
     // abort if no start or due date
     if (!wp.date) {
-      return;
+      return false;
     }
 
     element.style.marginLeft = renderInfo.viewParams.scrollOffsetInPx + "px";
@@ -72,6 +72,8 @@ export class TimelineMilestoneCellRenderer extends TimelineCellRenderer {
     // offset left
     const offsetStart = date.diff(viewParams.dateDisplayStart, "days");
     element.style.left = calculatePositionValueForDayCount(viewParams, offsetStart);
+
+    return true;
   }
 
   /**
@@ -93,4 +95,4 @@ export class TimelineMilestoneCellRenderer extends TimelineCellRenderer {
 
     return el;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/app/components/wp-table/timeline/wp-timeline-cell.ts b/frontend/app/components/wp-table/timeline/wp-timeline-cell.ts
index 9df1c462c7..444ed9d0aa 100644
--- a/frontend/app/components/wp-table/timeline/wp-timeline-cell.ts
+++ b/frontend/app/components/wp-table/timeline/wp-timeline-cell.ts
@@ -66,10 +66,15 @@ export class WorkPackageTimelineCell {
 
   // TODO never called so far
   deactivate() {
-    this.timelineCell.innerHTML = "";
+    this.clear();
     this.disposable && this.disposable.dispose();
   }
 
+  private clear() {
+    this.timelineCell.innerHTML = "";
+    this.element = null;
+  }
+
   private lazyInit(renderer: TimelineCellRenderer, renderInfo: RenderInfo) {
 
     // If already rendered with correct shape, ignore
@@ -112,6 +117,9 @@ export class WorkPackageTimelineCell {
     this.lazyInit(renderer, renderInfo);
 
     // Render the upgrade from renderInfo
-    renderer.update(this.element, wp, renderInfo);
+    const shouldBeDisplayed = renderer.update(this.element, wp, renderInfo);
+    if (!shouldBeDisplayed) {
+      this.clear();
+    }
   }
 }
diff --git a/frontend/app/components/wp-table/timeline/wp-timeline-container.directive.ts b/frontend/app/components/wp-table/timeline/wp-timeline-container.directive.ts
index 702ab6ccbb..cab3e0f804 100644
--- a/frontend/app/components/wp-table/timeline/wp-timeline-container.directive.ts
+++ b/frontend/app/components/wp-table/timeline/wp-timeline-container.directive.ts
@@ -92,6 +92,7 @@ export class WorkPackageTimelineTableController {
         this.calculateViewParams(this._viewParameters);
         this.updateAllWorkPackagesSubject.onNext(true);
         this.wpTimelineHeader.refreshView(this._viewParameters);
+        this.refreshScrollOnly();
         this.refreshViewRequested = false;
       }, 30);
     }