From 5a6698cb8cd40f44c0d3568e7422cf460e747722 Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Thu, 29 Sep 2016 15:02:32 +0530 Subject: [PATCH] [gantt] progress resizable, today highlight --- frappe/public/css/gantt.css | 4 ++ frappe/public/js/frappe/list/doclistview.js | 13 ++-- frappe/public/js/frappe/views/gantt.js | 74 ++++++++++++++++++--- frappe/public/less/gantt.less | 4 ++ 4 files changed, 83 insertions(+), 12 deletions(-) diff --git a/frappe/public/css/gantt.css b/frappe/public/css/gantt.css index e81cef2a83..0057b84a3e 100644 --- a/frappe/public/css/gantt.css +++ b/frappe/public/css/gantt.css @@ -22,6 +22,10 @@ .gantt #grid .tick.thick { stroke-width: 0.4; } +.gantt #grid .today-highlight { + fill: #fcf8e3; + opacity: 0.5; +} .gantt #arrow { fill: none; stroke: #333; diff --git a/frappe/public/js/frappe/list/doclistview.js b/frappe/public/js/frappe/list/doclistview.js index b5846d6914..d91cd98fba 100644 --- a/frappe/public/js/frappe/list/doclistview.js +++ b/frappe/public/js/frappe/list/doclistview.js @@ -455,13 +455,18 @@ frappe.views.DocListView = frappe.ui.Listing.extend({ bar_on_click: function (task) { frappe.set_route('Form', task.doctype, task.id); }, - bar_on_datechange: function(task, start, end) { - update_date(task.id, field_map.start, start.format("YYYY-MM-DD"), function() { - update_date(task.id, field_map.end, end.format("YYYY-MM-DD"), function() { + bar_on_date_change: function(task, start, end) { + update_field(task.id, field_map.start, start.format("YYYY-MM-DD"), function() { + update_field(task.id, field_map.end, end.format("YYYY-MM-DD"), function() { show_alert("Saved", 1); }); }); }, + bar_on_progress_change: function(task, progress) { + update_field(task.id, 'progress', progress, function() { + show_alert("Saved", 1); + }); + }, on_viewmode_change: function(mode) { me.list_settings.view_mode = mode; } @@ -506,7 +511,7 @@ frappe.views.DocListView = frappe.ui.Listing.extend({ }) }); - function update_date(id, fieldname, value, callback) { + function update_field(id, fieldname, value, callback) { frappe.call({ method: "frappe.client.set_value", args: { diff --git a/frappe/public/js/frappe/views/gantt.js b/frappe/public/js/frappe/views/gantt.js index e63a6965a9..f9363399b3 100755 --- a/frappe/public/js/frappe/views/gantt.js +++ b/frappe/public/js/frappe/views/gantt.js @@ -179,6 +179,7 @@ var Gantt = Class.extend({ this.make_grid_rows(); this.make_grid_header(); this.make_grid_ticks(); + this.make_grid_highlights(); }, make_grid_background: function () { var me = this; @@ -264,6 +265,22 @@ var Gantt = Class.extend({ } }); }, + make_grid_highlights: function() { + var me = this; + //highlight today + if(me.view_mode === 'Day') { + var x = me.opts.label_width + + moment().startOf('day').diff(me.start, 'hours') + / me.opts.step * me.opts.column_width, + y = 0, //me.opts.header_height + me.opts.padding/2; + width = me.opts.column_width, + height = (me.opts.bar.height + me.opts.padding) * me.tasks.length + + me.opts.header_height + me.opts.padding/2; + me.canvas.rect(x, y, width, height) + .addClass('today-highlight') + .appendTo(me.groups.grid); + } + }, make_dates: function() { var me = this; @@ -451,7 +468,8 @@ var Gantt = Class.extend({ setup_events: function() { var me = this; this._bars.forEach(function(bar) { - bar.events.on_date_change = me.events.bar_on_datechange; + bar.events.on_date_change = me.events.bar_on_date_change; + bar.events.on_progress_change = me.events.bar_on_progress_change; bar.click(me.events.bar_on_click); }); }, @@ -586,11 +604,19 @@ var Bar = Class.extend({ 8, this.height - 2, this.corner_radius, this.corner_radius) .addClass('handle left') .appendTo(this.handle_group); + this.canvas.polygon( + bar.getX() + this.progress_width - 5, bar.getY() + bar.get("height"), + bar.getX() + this.progress_width + 5, bar.getY() + bar.get("height"), + bar.getX() + this.progress_width, bar.getY() + bar.get("height") - 8.66 + ) + .addClass('handle progress') + .appendTo(this.handle_group); }, bind: function () { // this.show_details(); this.bind_resize(); this.bind_drag(); + this.bind_resize_progress(); }, show_details: function () { var me = this; @@ -721,6 +747,27 @@ var Bar = Class.extend({ bar.finaldx = 0; } }, + bind_resize_progress: function() { + var me = this; + var bar_progress = me.group.select('.bar-progress'); + var handle = me.group.select('.handle.progress'); + handle.drag(onmove, onstart, onstop); + + function onmove(dx, dy) { + bar_progress.attr("width", bar_progress.owidth + dx); + handle.transform("t"+dx+",0"); + bar_progress.finaldx = dx; + } + function onstop() { + if(!bar_progress.finaldx) return; + me.progress_changed(); + me.set_action_completed(); + } + function onstart() { + bar_progress.owidth = bar_progress.getWidth(); + bar_progress.finaldx = 0; + } + }, view_is: function(modes) { var me = this; if (typeof modes === 'string') { @@ -758,13 +805,19 @@ var Bar = Class.extend({ }); }, date_changed: function() { - if(this.events.on_date_change) { - this.events.on_date_change( - this.task, - this.compute_start_date(), - this.compute_end_date() - ); - } + this.events.on_date_change && + this.events.on_date_change( + this.task, + this.compute_start_date(), + this.compute_end_date() + ); + }, + progress_changed: function() { + this.events.on_progress_change && + this.events.on_progress_change( + this.task, + this.compute_progress() + ); }, set_action_completed: function() { var me = this; @@ -791,6 +844,11 @@ var Bar = Class.extend({ new_end_date = this.task._end.clone().add(this.gantt.step*shift, 'hours'); return new_end_date; }, + compute_progress: function() { + var bar = this.group.select('.bar'), + bar_progress = this.group.select('.bar-progress'); + return bar_progress.getWidth() / bar.getWidth() * 100; + }, compute_x: function() { var x = this.gantt.offset + (this.task._start.diff(this.gantt.start, 'hours')/this.gantt.step diff --git a/frappe/public/less/gantt.less b/frappe/public/less/gantt.less index 81939b7984..f2ad09a938 100644 --- a/frappe/public/less/gantt.less +++ b/frappe/public/less/gantt.less @@ -26,6 +26,10 @@ stroke-width: 0.4; } } + .today-highlight { + fill: #fcf8e3; + opacity: 0.5; + } } #arrow {