jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

update details popup on change, compute_date refactor

Browse Source
This commit is contained in:
Faris Ansari 2017-01-28 13:58:35 +05:30
parent 5ab94156dd
commit 32c1ca9129
4 changed files with 93 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
dist/frappe-gantt.js vendored
View File

@ -709,7 +709,9 @@ return /******/ (function(modules) { // webpackBootstrap
function bind_grid_click() { function bind_grid_click() {
self.element_groups.grid.click(function () { self.element_groups.grid.click(function () {
unselect_all(); unselect_all();
self.element_groups.details.addClass('hide'); self.element_groups.details.selectAll('.details-wrapper').forEach(function (el) {
return el.addClass('hide');
});
}); });
} }
@ -1259,16 +1261,16 @@ return /******/ (function(modules) { // webpackBootstrap
function show_details() { function show_details() {
var popover_group = gt.element_groups.details; var popover_group = gt.element_groups.details;
var details_box = popover_group.select('.details-wrapper'); self.details_box = popover_group.select('.details-wrapper[data-task=\'' + self.task.id + '\']');
if (!details_box) { if (!self.details_box) {
details_box = gt.canvas.group().addClass('details-wrapper').appendTo(popover_group); self.details_box = gt.canvas.group().addClass('details-wrapper').attr('data-task', self.task.id).appendTo(popover_group);
gt.canvas.rect(0, 0, 0, 110, 2, 2).addClass('details-container').appendTo(details_box); gt.canvas.rect(0, 0, 0, 110, 2, 2).addClass('details-container').appendTo(self.details_box);
gt.canvas.text(0, 0, '').attr({ dx: 10, dy: 30 }).addClass('details-heading').appendTo(details_box); gt.canvas.text(0, 0, '').attr({ dx: 10, dy: 30 }).addClass('details-heading').appendTo(self.details_box);
gt.canvas.text(0, 0, '').attr({ dx: 10, dy: 65 }).addClass('details-body').appendTo(details_box); gt.canvas.text(0, 0, '').attr({ dx: 10, dy: 65 }).addClass('details-body').appendTo(self.details_box);
gt.canvas.text(0, 0, '').attr({ dx: 10, dy: 90 }).addClass('details-body').appendTo(details_box); gt.canvas.text(0, 0, '').attr({ dx: 10, dy: 90 }).addClass('details-body').appendTo(self.details_box);
var f = gt.canvas.filter(Snap.filter.shadow(0, 1, 1, '#666', 0.6)); var f = gt.canvas.filter(Snap.filter.shadow(0, 1, 1, '#666', 0.6));
details_box.attr({ self.details_box.attr({
filter: f filter: f
}); });
} }
@ -1278,33 +1280,35 @@ return /******/ (function(modules) { // webpackBootstrap
// just finished a move action, wait for a few seconds // just finished a move action, wait for a few seconds
return; return;
} }
popover_group.removeClass('hide'); popover_group.selectAll('.details-wrapper').forEach(function (el) {
return el.addClass('hide');
var pos = get_details_position(); });
details_box.transform('t' + pos.x + ',' + pos.y);
render_details(); render_details();
self.details_box.removeClass('hide');
}); });
} }
function render_details() { function render_details() {
var popover_group = gt.element_groups.details; var _get_details_position = get_details_position(),
var details_box = popover_group.select('.details-wrapper'); x = _get_details_position.x,
y = _get_details_position.y;
self.details_box.transform('t' + x + ',' + y);
var start_date = self.task._start.format('MMM D'), var start_date = self.task._start.format('MMM D'),
end_date = self.task._end.format('MMM D'), end_date = self.task._end.format('MMM D'),
heading = self.task.name + ': ' + start_date + ' - ' + end_date; heading = self.task.name + ': ' + start_date + ' - ' + end_date;
var $heading = popover_group.select('.details-heading').attr('text', heading); var $heading = self.details_box.select('.details-heading').attr('text', heading);
var bbox = $heading.getBBox(); var bbox = $heading.getBBox();
details_box.select('.details-container').attr({ width: bbox.width + 20 }); self.details_box.select('.details-container').attr({ width: bbox.width + 20 });
var duration = self.task._end.diff(self.task._start, 'days'), var duration = self.task._end.diff(self.task._start, 'days'),
body1 = 'Duration: ' + duration + ' days', body1 = 'Duration: ' + (duration + 1) + ' days',
body2 = self.task.progress ? 'Progress: ' + self.task.progress : ''; body2 = self.task.progress ? 'Progress: ' + self.task.progress : '';
var $body = popover_group.selectAll('.details-body'); var $body = self.details_box.selectAll('.details-body');
$body[0].attr('text', body1); $body[0].attr('text', body1);
$body[1].attr('text', body2); $body[1].attr('text', body2);
} }
@ -1517,11 +1521,21 @@ return /******/ (function(modules) { // webpackBootstrap
} }
function date_changed() { function date_changed() {
gt.trigger_event('date_change', [self.task, compute_start_date(), compute_end_date()]); var _compute_start_end_da = compute_start_end_date(),
new_start_date = _compute_start_end_da.new_start_date,
new_end_date = _compute_start_end_da.new_end_date;
self.task._start = new_start_date;
self.task._end = new_end_date;
render_details();
gt.trigger_event('date_change', [self.task, new_start_date, new_end_date]);
} }
function progress_changed() { function progress_changed() {
gt.trigger_event('progress_change', [self.task, compute_progress()]); var new_progress = compute_progress();
self.task.progress = new_progress;
render_details();
gt.trigger_event('progress_change', [self.task, new_progress]);
} }
function set_action_completed() { function set_action_completed() {
@ -1531,24 +1545,18 @@ return /******/ (function(modules) { // webpackBootstrap
}, 2000); }, 2000);
} }
function compute_start_date() { function compute_start_end_date() {
var bar = self.$bar, var bar = self.$bar;
shift = (bar.getX() - compute_x()) / gt.config.column_width, var x_in_units = bar.getX() / gt.config.column_width;
new_start_date = self.task._start.clone().add(gt.config.step * shift, 'hours'); var new_start_date = gt.gantt_start.clone().add(x_in_units * gt.config.step, 'hours');
return new_start_date; var width_in_units = bar.getWidth() / gt.config.column_width;
} var new_end_date = new_start_date.clone().add(width_in_units * gt.config.step, 'hours');
return { new_start_date: new_start_date, new_end_date: new_end_date };
function compute_end_date() {
var bar = self.$bar,
og_x = compute_x() + self.duration * gt.config.column_width,
final_x = bar.getEndX(),
shift = (final_x - og_x) / gt.config.column_width,
new_end_date = self.task._end.clone().add(gt.config.step * shift, 'hours');
return new_end_date;
} }
function compute_progress() { function compute_progress() {
return self.$bar_progress.getWidth() / self.$bar.getWidth() * 100; var progress = self.$bar_progress.getWidth() / self.$bar.getWidth() * 100;
return parseInt(progress, 10);
} }
function compute_x() { function compute_x() {
@ -1644,9 +1652,11 @@ return /******/ (function(modules) { // webpackBootstrap
} }
function update_details_position() { function update_details_position() {
var details_box = gt.element_groups.details.select('.details-wrapper'); var _get_details_position2 = get_details_position(),
var pos = get_details_position(); x = _get_details_position2.x,
details_box && details_box.transform('t' + pos.x + ',' + pos.y); y = _get_details_position2.y;
self.details_box && self.details_box.transform('t' + x + ',' + y);
} }
init(); init();

2
dist/frappe-gantt.js.map vendored
View File

File diff suppressed because one or more lines are too long

78
src/Bar.js
View File

@ -140,30 +140,32 @@ export default function Bar(gt, task) {
function show_details() { function show_details() {
const popover_group = gt.element_groups.details; const popover_group = gt.element_groups.details;
let details_box = popover_group.select('.details-wrapper'); self.details_box = popover_group
.select(`.details-wrapper[data-task='${self.task.id}']`);
if (!details_box) { if (!self.details_box) {
details_box = gt.canvas.group() self.details_box = gt.canvas.group()
.addClass('details-wrapper') .addClass('details-wrapper')
.attr('data-task', self.task.id)
.appendTo(popover_group); .appendTo(popover_group);
gt.canvas.rect(0, 0, 0, 110, 2, 2) gt.canvas.rect(0, 0, 0, 110, 2, 2)
.addClass('details-container') .addClass('details-container')
.appendTo(details_box); .appendTo(self.details_box);
gt.canvas.text(0, 0, '') gt.canvas.text(0, 0, '')
.attr({ dx: 10, dy: 30 }) .attr({ dx: 10, dy: 30 })
.addClass('details-heading') .addClass('details-heading')
.appendTo(details_box); .appendTo(self.details_box);
gt.canvas.text(0, 0, '') gt.canvas.text(0, 0, '')
.attr({ dx: 10, dy: 65 }) .attr({ dx: 10, dy: 65 })
.addClass('details-body') .addClass('details-body')
.appendTo(details_box); .appendTo(self.details_box);
gt.canvas.text(0, 0, '') gt.canvas.text(0, 0, '')
.attr({ dx: 10, dy: 90 }) .attr({ dx: 10, dy: 90 })
.addClass('details-body') .addClass('details-body')
.appendTo(details_box); .appendTo(self.details_box);
const f = gt.canvas.filter( const f = gt.canvas.filter(
Snap.filter.shadow(0, 1, 1, '#666', 0.6)); Snap.filter.shadow(0, 1, 1, '#666', 0.6));
details_box.attr({ self.details_box.attr({
filter: f filter: f
}); });
} }
@ -173,37 +175,35 @@ export default function Bar(gt, task) {
// just finished a move action, wait for a few seconds // just finished a move action, wait for a few seconds
return; return;
} }
popover_group.removeClass('hide'); popover_group.selectAll('.details-wrapper')
.forEach(el => el.addClass('hide'));
const pos = get_details_position();
details_box.transform(`t${pos.x},${pos.y}`);
render_details(); render_details();
self.details_box.removeClass('hide');
}); });
} }
function render_details() { function render_details() {
const popover_group = gt.element_groups.details; const {x, y} = get_details_position();
let details_box = popover_group.select('.details-wrapper'); self.details_box.transform(`t${x},${y}`);
const start_date = self.task._start.format('MMM D'), const start_date = self.task._start.format('MMM D'),
end_date = self.task._end.format('MMM D'), end_date = self.task._end.format('MMM D'),
heading = `${self.task.name}: ${start_date} - ${end_date}`; heading = `${self.task.name}: ${start_date} - ${end_date}`;
const $heading = popover_group const $heading = self.details_box
.select('.details-heading') .select('.details-heading')
.attr('text', heading); .attr('text', heading);
const bbox = $heading.getBBox(); const bbox = $heading.getBBox();
details_box.select('.details-container') self.details_box.select('.details-container')
.attr({ width: bbox.width + 20 }); .attr({ width: bbox.width + 20 });
const duration = self.task._end.diff(self.task._start, 'days'), const duration = self.task._end.diff(self.task._start, 'days'),
body1 = `Duration: ${duration} days`, body1 = `Duration: ${duration + 1} days`,
body2 = self.task.progress ? body2 = self.task.progress ?
`Progress: ${self.task.progress}` : ''; `Progress: ${self.task.progress}` : '';
const $body = popover_group.selectAll('.details-body'); const $body = self.details_box.selectAll('.details-body');
$body[0].attr('text', body1); $body[0].attr('text', body1);
$body[1].attr('text', body2); $body[1].attr('text', body2);
} }
@ -388,13 +388,20 @@ export default function Bar(gt, task) {
} }
function date_changed() { function date_changed() {
const { new_start_date, new_end_date } = compute_start_end_date();
self.task._start = new_start_date;
self.task._end = new_end_date;
render_details();
gt.trigger_event('date_change', gt.trigger_event('date_change',
[self.task, compute_start_date(), compute_end_date()]); [self.task, new_start_date, new_end_date]);
} }
function progress_changed() { function progress_changed() {
const new_progress = compute_progress();
self.task.progress = new_progress;
render_details();
gt.trigger_event('progress_change', gt.trigger_event('progress_change',
[self.task, compute_progress()]); [self.task, new_progress]);
} }
function set_action_completed() { function set_action_completed() {
@ -402,24 +409,18 @@ export default function Bar(gt, task) {
setTimeout(() => self.action_completed = false, 2000); setTimeout(() => self.action_completed = false, 2000);
} }
function compute_start_date() { function compute_start_end_date() {
const bar = self.$bar, const bar = self.$bar;
shift = (bar.getX() - compute_x()) / gt.config.column_width, const x_in_units = bar.getX() / gt.config.column_width;
new_start_date = self.task._start.clone().add(gt.config.step * shift, 'hours'); const new_start_date = gt.gantt_start.clone().add(x_in_units * gt.config.step, 'hours');
return new_start_date; const width_in_units = bar.getWidth() / gt.config.column_width;
} const new_end_date = new_start_date.clone().add(width_in_units * gt.config.step, 'hours');
return { new_start_date, new_end_date };
function compute_end_date() {
const bar = self.$bar,
og_x = compute_x() + self.duration * gt.config.column_width,
final_x = bar.getEndX(),
shift = (final_x - og_x) / gt.config.column_width,
new_end_date = self.task._end.clone().add(gt.config.step * shift, 'hours');
return new_end_date;
} }
function compute_progress() { function compute_progress() {
return self.$bar_progress.getWidth() / self.$bar.getWidth() * 100; const progress = self.$bar_progress.getWidth() / self.$bar.getWidth() * 100;
return parseInt(progress, 10);
} }
function compute_x() { function compute_x() {
@ -500,9 +501,8 @@ export default function Bar(gt, task) {
} }
function update_details_position() { function update_details_position() {
const details_box = gt.element_groups.details.select('.details-wrapper'); const {x, y} = get_details_position();
const pos = get_details_position(); self.details_box && self.details_box.transform(`t${x},${y}`);
details_box && details_box.transform(`t${pos.x},${pos.y}`);
} }
init(); init();

4
src/Gantt.js
View File

@ -479,7 +479,9 @@ export default function Gantt(element, tasks, config) {
function bind_grid_click() { function bind_grid_click() {
self.element_groups.grid.click(() => { self.element_groups.grid.click(() => {
unselect_all(); unselect_all();
self.element_groups.details.addClass('hide'); self.element_groups.details
.selectAll('.details-wrapper')
.forEach(el => el.addClass('hide'));
}); });
} }