Render date columns in timeline table

pull/913/head
Till Breuer 11 years ago
parent 075debb280
commit 26f4730e4b
  1. 15
      app/assets/javascripts/angular/directives/timelines/option_column_directive.js
  2. 28
      app/assets/javascripts/angular/directives/timelines/timeline_directive.js
  3. 21
      app/assets/javascripts/angular/filters/column_filters.js
  4. 97
      app/assets/javascripts/angular/resources/timeline_components/ui.js
  5. 41
      public/templates/timelines/tree.html

@ -0,0 +1,15 @@
timelinesApp.directive('optionColumn', [function() {
return {
restrict: 'A',
scope: true,
compile: function(tElement, tAttrs, transclude) {
return{
pre: function(scope, iElement, iAttrs, controller) {
scope.isDateOption = function(option) {
return (option === 'start_date' || option === 'due_date');
};
}
};
}
};
}]);

@ -47,21 +47,6 @@ timelinesApp.directive('timeline', function() {
});
};
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(root) {
nodes = [];
@ -76,6 +61,19 @@ timelinesApp.directive('timeline', function() {
return nodes;
};
buildTree = function(timeline){
if (timeline.isGrouping() && timeline.options.grouping_two_enabled) {
timeline.secondLevelGroupingAdjustments();
}
tree = timeline.getLefthandTree();
scope.nodes = flattenTree(tree);
scope.nodes.unshift(tree);
return tree;
};
drawTree = function(tree) {
timeline = scope.timeline;

@ -1,4 +1,16 @@
timelinesApp
.filter('historicalDateKind', function() {
return function(nodeData, dateOption) {
var newDate = nodeData[dateOption];
var oldDate = nodeData.historical()[dateOption];
if (oldDate && newDate) {
return (newDate < oldDate ? 'postponed' : 'preponed');
}
return "changed";
};
})
.filter('getOptionColumn', function() {
var map = {
"type": "getTypeName",
@ -9,6 +21,13 @@ timelinesApp
};
return function(nodeData, option) {
return nodeData[map[option]]();
switch(option) {
case 'start_date':
return nodeData.start_date;
case 'due_date':
return nodeData.due_date;
default:
return nodeData[map[option]]();
}
};
});

@ -276,103 +276,6 @@ timelinesApp.factory('UI', [function() {
overrides: ['actualDays', 'weekDays', 'months', 'quarters']
}};
},
getAvailableRows: function() {
function renderHistoricalKind(data, val, diff) {
if (!data.does_historical_differ(val)) {
return "";
}
if (typeof diff === "function") {
return diff(data[val], data.historical()[val]);
}
return "changed";
}
function historicalHtml(data, val) {
var kind = renderHistoricalKind(data, val);
return renderHistoricalHtml(data, val, kind);
}
function renderHistoricalHtml(data, val, kind) {
var result = "", theVal;
if (data.does_historical_differ(val)) {
theVal = data.historical().getAttribute(val);
if (!theVal) {
theVal = timeline.i18n('timelines.empty');
}
result += '<span class="tl-historical">';
result += timeline.escape(theVal);
result += '<a href="javascript://" title="%t" class="%c"/>'
.replace(/%t/, timeline.i18n('timelines.change'))
.replace(/%c/, 'icon tl-icon-' + kind);
result += '</span><br/>';
}
return result;
}
function historicalKindDate(oldVal, newVal) {
if (oldVal && newVal) {
return (newVal < oldVal ? 'postponed' : 'preponed');
}
return "changed";
}
var map = {
"type": "getTypeName",
"status": "getStatusName",
"responsible": "getResponsibleName",
"assigned_to": "getAssignedName",
"project": "getProjectName"
};
var timeline = this;
return {
all: ['due_date', 'type', 'status', 'responsible', 'start_date'],
general: function (data, val) {
if (!map[val]) {
return;
}
val = map[val];
var result = "";
var theVal = data.getAttribute(val);
result += historicalHtml(data, val);
return jQuery(result + '<span class="tl-column">' + timeline.escape(theVal) + '</span>');
},
start_date: function(data) {
var kind = renderHistoricalKind(data, "start_date", historicalKindDate),
result = '';
result += renderHistoricalHtml(data, "start_date", kind);
if (data.start_date !== undefined) {
result += '<span class="tl-column tl-current tl-' + kind + '">' + timeline.escape(data.start_date) + '</span>';
}
return jQuery(result);
},
due_date: function(data) {
var kind = renderHistoricalKind(data, "due_date", historicalKindDate),
result = '';
result += renderHistoricalHtml(data, "due_date", kind);
if (data.due_date !== undefined) {
result += '<span class="tl-column tl-current tl-' + kind + '">' +
timeline.escape(data.due_date) + '</span>';
}
return jQuery(result);
}
};
},
getUiRoot: function() {
return this.uiRoot;
},

@ -1,4 +1,11 @@
<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)}" ng-show="node.ancestors | ancestorsExpanded">
<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)
}"
ng-show="node.ancestors | ancestorsExpanded">
<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">
@ -6,10 +13,17 @@
</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.expanded = !node.expanded" ng-show="node.childNodes.length > 0">{{node.expanded && '-' || '+'}}</a>
<span class="tl-word-ellipsis">
<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.expanded = !node.expanded" ng-show="node.childNodes.length > 0">
{{node.expanded && '-' || '+'}}
</a>
<span class="tl-word-ellipsis">
<span>
<a title="{{timeline.i18n('timelines.change')}}"
ng-class="{
@ -27,8 +41,23 @@
</span>
</td>
<td ng-repeat="option in timeline.options.columns">
<span class="tl-column">
<td option-column ng-repeat="option in timeline.options.columns">
<span class="tl-historical" ng-show="isDateOption(option) && node.payload.does_historical_differ(option)">
<a href="javascript://" title="{{timeline.i18n('timelines.change')}}"
ng-class="[
'icon',
'tl-icon-' + (node.payload | historicalDateKind:option)
]">
{{node.payload.historical()[option] || timeline.i18n('timelines.empty')}}
</a>
<br/>
</span>
<span ng-class="[
'tl-column',
isDateOption(option) && 'tl-current',
isDateOption(option) && node.payload.does_historical_differ(option) && 'tl-' + (node.payload | historicalDateKind:option)
]">
{{node.payload | getOptionColumn:option}}
</span>
</td>

Loading…
Cancel
Save