Start rendering timelines table as angular-enhanced html template (WIP)

app/assets/javascripts/angular/controllers/timelines_controller.js

@@ -23,7 +23,7 @@ timelinesApp.controller('TimelinesController', ['$scope', '$window', 'Timeline',
   $scope.currentOutlineLevel = 'level3';
   $scope.currentScaleName = 'monthly';
 
-  // Load timeline
+  // Create timeline
   $scope.timeline = Timeline.create($scope.timelineOptions);
 
   // Container for timeline rendering

app/assets/javascripts/angular/directives/timelines/timeline_directive.js

@@ -9,9 +9,6 @@ timelinesApp.directive('timeline', function() {
       };
 
       completeUI = function() {
-        // construct tree on left-hand-side.
-        scope.timeline.rebuildTree();
-
         // lift the curtain, paper otherwise doesn't show w/ VML.
         scope.underConstruction = false;
         scope.timeline.paper = new Raphael(scope.timeline.paperElement, 640, 480);
@@ -50,16 +47,41 @@ timelinesApp.directive('timeline', function() {
         });
       };
 
-      drawTimeline = function(timeline){
+      buildTree = function(timeline){
+        if (timeline.isGrouping() && timeline.options.grouping_two_enabled) {
+          timeline.secondLevelGroupingAdjustments();
+        }
+
+        tree = timeline.getLefthandTree();
+
+        scope.availableRows = timeline.getAvailableRows();
+        scope.nodes = flattenTree(tree);
+        scope.nodes.unshift(tree);
+
+        return tree;
+      };
+
+
+      flattenTree = function(tree) {
+        nodes = [];
+
+        angular.forEach(tree.childNodes, function(node){
+          nodes.push(node);
+          nodes = nodes.concat(flattenTree(node));
+        });
+
+        return nodes;
+      };
+
+      drawTree = function(tree) {
+        console.log('-------- Draw tree --------');
+
+        timeline = scope.timeline;
+
         try {
           window.clearTimeout(timeline.safetyHook);
 
-          if (timeline.isGrouping() && timeline.options.grouping_two_enabled) {
+          if (tree.containsPlanningElements() || tree.containsProjects()) {
-            timeline.secondLevelGroupingAdjustments();
-          }
-
-          treeNode = timeline.getLefthandTree();
-          if (treeNode.containsPlanningElements() || treeNode.containsProjects()) {
             timeline.adjustForPlanningElements();
             completeUI();
           } else {
@@ -68,11 +90,17 @@ timelinesApp.directive('timeline', function() {
         } catch (e) {
           timeline.die(e);
         }
+
       };
 
       // start timeline
       scope.timeline.registerTimelineContainer(element);
-      TimelineLoaderService.loadTimelineData(scope.timeline).then(drawTimeline);
+      TimelineLoaderService.loadTimelineData(scope.timeline)
+        .then(buildTree)
+        .then(drawTree)
+        .then(function(){
+          scope.dataLoaded = true;
+        });
     }
   };
 });

app/assets/javascripts/angular/directives/timelines/tree_node_directive.js

@@ -0,0 +1,9 @@
+timelinesApp.directive('treeNode', function() {
+  return {
+    restrict: 'A',
+    scope: true,
+    link: function(scope, element, attributes) {
+      scope.node.dom_element = element;
+    }
+  };
+});

app/assets/javascripts/angular/resources/timeline.js

@@ -626,7 +626,7 @@ timelinesApp.factory('Timeline', ['Constants', 'FilterQueryStringBuilder', 'Tree
         var tree = Object.create(Timeline.TreeNode);
         var parent_stack = [];
 
-        tree.setData(project);
+        tree.setData(project, 0);
 
         // there might not be any payload, due to insufficient rights and
         // the fact that some user with more rights originally created the
@@ -637,6 +637,7 @@ timelinesApp.factory('Timeline', ['Constants', 'FilterQueryStringBuilder', 'Tree
           return tree;
         }
 
+        var level = 1;
         var count = 1;
         // for the given node, appends the given planning_elements as children,
         // recursively. every node will have the planning_element as data.
@@ -657,9 +658,14 @@ timelinesApp.factory('Timeline', ['Constants', 'FilterQueryStringBuilder', 'Tree
               }
             }
             var newNode = Object.create(Timeline.TreeNode);
-            newNode.setData(e);
+
+            newNode.setData(e, level);
             node.appendChild(newNode);
+
+            level++;
             treeConstructor(newNode, newNode.getData().getSubElements());
+            level--;
+
             parent_stack.pop();
           });
           return node;

app/assets/javascripts/angular/resources/timeline_components/tree_node.js

@@ -52,8 +52,14 @@ timelinesApp.factory('TreeNode', [function() {
     getData: function() {
       return this.payload;
     },
-    setData: function(data) {
+    setData: function(data, level) {
+      this.text = data.subject || data.name;
+      if (data.is(Timeline.Project)) this.group = data.getFirstLevelGrouping();
+      this.url = data.getUrl();
+
       this.payload = data;
+      this.level = level;
+
       return this;
     },
     appendChild: function(node) {

app/assets/javascripts/angular/resources/timeline_components/ui.js

@@ -490,7 +490,6 @@ timelinesApp.factory('UI', [function() {
 
       window.clearTimeout(this.rebuildTimeout);
       this.rebuildTimeout = timeline.defer(function() {
-        timeline.rebuildTree();
 
         // The minimum width of the whole timeline should be the actual
         // width of the table added to the minimum chart width. That way,

app/assets/javascripts/angular/services/timeline_loader_service.js

@@ -1114,7 +1114,7 @@ timelinesApp.service('TimelineLoaderService', ['$q', function($q) {
         timelineLoader.registerTimelineElements();
 
         jQuery(timelineLoader).on('complete', function(e, data) {
-          jQuery.extend(timeline, data);
+          angular.extend(timeline, data);
           deferred.resolve(timeline);
         });
 

app/views/timelines/_chart_container.html

@@ -13,6 +13,7 @@
           </tr>
         </thead>
 
+        <tbody ng-include="'/templates/timelines/tree.html'" />
       </table>
 
     </div>

public/templates/timelines/tree.html

@@ -0,0 +1,28 @@
+<tr ng-repeat="node in nodes" ng-class="{'tl-first-row': $first, 'tl-last-row': $last, 'tl-grouping': timeline.isGrouping(), 'tl-project-row': node.payload.is(Timeline.Project)}">
+
+  <td ng-if="timeline.isGrouping() && node.payload.is(Timeline.Project) && node.level === 0 && node.group !== nodes[$index-1].group" class="tl-grouping" colspan="{{timeline.options.columns.length + 1}}">
+    <span class="tl-word-ellipsis">
+      {{timeline.escape(node.payload.getFirstLevelGroupingName())}}
+    </span>
+  </td>
+
+  <td tree-node ng-class="['tl-first-column', 'tl-indent-' + node.level, node.childNodes.length > 0 && (node.isExpanded() && 'tl-expanded' || 'tl-collapsed')]">
+    <a ng-click="node.toogle()" ng-show="node.childNodes.length > 0">{{node.isExpanded() && '-' || '+'}}</a>
+    <span class="tl-word-ellipsis">
+      <span>
+        <a data-modal title="{{node.text}}" ng-href"{{node.url}}" ng-class="{'tl-discreet-link': true, 'tl-project': node.payload.is(Timeline.Project)}">
+          {{node.text}}
+        </a>
+      </span>
+    </span>
+  </td>
+<!--
+  <td ng-repeat="option in timeline.options.columns">
+    (typeof availableRows[option] === 'function') && availableRows[option].call(node.payload, node.payload) || availableRows.general.call(node.payload, node.payload, option)
+  </td>
+ -->
+  <td ng-repeat="option in timeline.options.columns">
+    {{node[option]}}
+  </td>
+
+</tr>