[IMP] Enable events like Draggable and Resizable

addons/web/static/lib/jquery.ganttView/jquery.ganttView.css

@@ -29,7 +29,6 @@ div.ganttview {
     border: 1px solid #999;
 }
 
-
 /* Horizontal Header */
 
 div.ganttview-hzheader-month {
@@ -48,7 +47,6 @@ div.ganttview-hzheader-day {
     color: #777;
 }
 
-
 /* Vertical Header */
 
 div.ganttview-vtheader {
@@ -78,7 +76,6 @@ div.ganttview-vtheader-series-name {
     padding-left: 5px;
 }
 
-
 /* Slider */
 
 div.ganttview-slide-container {
@@ -86,7 +83,6 @@ div.ganttview-slide-container {
     border-left: 1px solid #999;
 }
 
-
 /* Grid */
 
 div.ganttview-grid-row-cell {
@@ -134,22 +130,8 @@ div.ganttview-block-text {
     padding: 2px 3px;
 }
 
-
 /* Adjustments for jQuery UI Styling */
 
 div.ganttview-block div.ui-resizable-handle.ui-resizable-s {
     bottom: -0;
 }
-
-/* bootstrap css fix - begin */
-/* Uncomment if bootstrap.js is giving you issues */
-/* https://github.com/thegrubbsian/jquery.ganttView/issues/29 */
-/*
-#ganttChart div,
-#ganttChart div:before,
-#ganttChart div:after {
--webkit-box-sizing: initial;
--moz-box-sizing: initial;
-box-sizing: initial;
-}
-*/

addons/web/static/lib/jquery.ganttView/jquery.ganttView.js

@@ -229,11 +229,11 @@ behavior: {
             for (var i = 0; i < data.length; i++) {
                 for (var j = 0; j < data[i].series.length; j++) {
                     var series = data[i].series[j];
-                    var size = DateUtils.daysBetween(series.start, series.end) ? DateUtils.daysBetween(series.start, series.end) : 1;
+                    var size = DateUtils.daysBetween(series.start, series.end) + 1;
-					var offset = DateUtils.daysBetween(start, series.start) == 0 ? DateUtils.daysBetween(start, series.start) : DateUtils.daysBetween(start, series.start) - 1;
+					var offset = DateUtils.daysBetween(start, series.start);
 					var block = jQuery("<div>", {
                         "class": "ganttview-block",
-                        "title": series.name + ", " + size + " days",
+                        "title": series.name + ", " + size + " days \n"+ series.start +" to "+ series.end,
                         "css": {
                             "width": ((size * cellWidth) - 7) + "px",
                             "margin-left": ((offset * cellWidth) + 3) + "px"

addons/web/static/src/js/views/gantt/gantt_controller.js

@@ -5,24 +5,21 @@ flectra.define('web.GanttController', function (require) {
  *---------------------------------------------------------*/
 
 var AbstractController = require('web.AbstractController');
-var core = require('web.core');
 
-var qweb = core.qweb;
+return AbstractController.extend({
-
+    custom_events: _.extend({}, AbstractController.prototype.custom_events, {
-var GanttController = AbstractController.extend({
+        updateRecord: '_onUpdateRecord',
-    template: "GanttView",
+    }),
-    /**
+    _onUpdateRecord: function (record) {
-     * @override
+        this._rpc({
-     * @param {Widget} parent
+            model: this.model.modelName,
-     * @param {GanttModel} model
+            method: 'write',
-     * @param {AbstractRenderer} renderer
+            args: [record.data.id, {
-     * @param {Object} params
+                [this.model.data.arch['date_start']]: record.data.start.toString('yyyy-M-d'),
-     */
+                [this.model.data.arch['date_stop']]: record.data.end.toString('yyyy-M-d'),
-    init: function(parent, model, renderer, params) {
+            }],
-        this._super.apply(this, arguments);
+        }).then(this.reload.bind(this));
     },
 });
 
-return GanttController;
-
 });

addons/web/static/src/js/views/gantt/gantt_model.js

@@ -6,169 +6,139 @@ flectra.define('web.GanttModel', function (require) {
  * server.  It basically just do a search_read and format/normalize data.
  */
 
-var core = require('web.core');
 var AbstractModel = require('web.AbstractModel');
 
-var _t = core._t;
-
 return AbstractModel.extend({
     /**
      * @override
+     * @param {Object} params
      */
     init: function () {
         this._super.apply(this, arguments);
+        this.data = null;
     },
     /**
      * @override
-     * @param {any} params
+     * @param {Object} params
+     * @param {string[]} params.groupedBy a list of valid field names
+     * @param {Object} params.context
+     * @param {string[]} params.domain
      * @returns {Deferred}
      */
     load: function (params) {
-        var self = this;
         this.modelName = params.modelName;
-        this.gantt = {
+        this.data = {
-            data: [],
+            records: [],
             domain: params.domain,
-            groupBy: params.groupedBy,
             context: params.context,
+            groupedBy: params.groupedBy || [],
             arch: params.arch.attrs,
         };
-        return this._loadGantt();
+        return this._loadData();
     },
     /**
      * @override
-     * @param {any} handle ignored!
      * @param {Object} params
-     * @param {string[]} [params.domain]
+     * @param {string[]} params.groupedBy a list of valid field names
-     * @param {string[]} [params.groupBy]
+     * @param {Object} params.context
+     * @param {string[]} params.domain
      * @returns {Deferred}
      */
     reload: function (handle, params) {
         if (params.domain) {
-            this.gantt.domain = params.domain;
+            this.data.domain = params.domain;
+        }
+        if (params.context) {
+            this.data.context = params.context;
         }
         if (params.groupBy) {
-            this.gantt.groupBy = params.groupBy;
+            this.data.groupedBy = params.groupBy;
         }
-        return this._loadGantt();
+        return this._loadData();
     },
     /**
-     * Fetch and process gantt data. It is basically a read_group with correct
-     * fields.
-     *
      * @returns {Deferred}
      */
-    _loadGantt: function() {
+    _loadData: function () {
         var self = this;
-        this.gantt.data = [];
         return this._rpc({
             model: this.modelName,
             method: 'search_read',
-            context: this.gantt.context,
+            context: this.data.context,
-            domain: this.gantt.domain,
+            domain: this.data.domain,
-            groupBy: this.gantt.groupBy,
+        })
-        }).then(function(raw_datas) {
+            .then(function (records) {
+                self.data.records = self._processData(records);
+            });
+    },
+    _processData: function (raw_datas) {
         /**
          * GroupBy is only supported till 1st level !
          * @todo Flectra: Support Multi level GroupBy
          */
-            if(self.gantt.groupBy.length) {
+        var self = this;
+        var ganttData = [];
+        if (self.data.groupedBy.length) {
             _.each(raw_datas, function (raw_data) {
-                    var grpByStr = raw_data[self.gantt.groupBy[0]] ? raw_data[self.gantt.groupBy[0]] : 'Undefined';
+                var grpByStr = raw_data[self.data.groupedBy[0]] ? raw_data[self.data.groupedBy[0]] : 'Undefined';
                 if (grpByStr && grpByStr instanceof Array) {
-                        grpByStr = raw_data[self.gantt.groupBy[0]] ? raw_data[self.gantt.groupBy[0]][1] : 'Undefined';
+                    grpByStr = raw_data[self.data.groupedBy[0]] ? raw_data[self.data.groupedBy[0]][1] : 'Undefined';
                 }
-                    var keyCheck = _.findKey(self.gantt.data, {name: grpByStr});
+                var keyCheck = _.findKey(ganttData, {name: grpByStr});
                 if (!keyCheck) {
-                        self.gantt.data.push({
+                    ganttData.push({
                         name: grpByStr,
                         series: [],
                     });
                 }
-                    keyCheck = _.findKey(self.gantt.data, {name: grpByStr});
+                keyCheck = _.findKey(ganttData, {name: grpByStr});
-                    if(self.gantt.data[keyCheck]) {
+                if (ganttData[keyCheck]) {
-                        if(raw_data[self.gantt.arch['date_stop']]) {
+                    if (raw_data[self.data.arch['date_stop']]) {
-                            self.gantt.data[keyCheck].series.push({
+                        ganttData[keyCheck].series.push({
-                                id: raw_data['id'], name: raw_data['display_name'],
+                            id: raw_data['id'],
-                                start: raw_data[self.gantt.arch['date_start']], end: raw_data[self.gantt.arch['date_stop']]
+                            name: raw_data['display_name'],
+                            start: raw_data[self.data.arch['date_start']].split(' ')[0],
+                            end: raw_data[self.data.arch['date_stop']].split(' ')[0]
                         });
                     } else {
-                            self.gantt.data[keyCheck].series.push({
+                        ganttData[keyCheck].series.push({
-                                id: raw_data['id'], name: raw_data['display_name'],
+                            id: raw_data['id'],
-                                start: raw_data[self.gantt.arch['date_start']], end: raw_data[self.gantt.arch['date_start']]
+                            name: raw_data['display_name'],
+                            start: raw_data[self.data.arch['date_start']].split(' ')[0],
+                            end: raw_data[self.data.arch['date_start']].split(' ')[0]
                         });
                     }
                 }
             });
         } else {
             _.each(raw_datas, function (raw_data) {
-                    if(raw_data[self.gantt.arch['date_stop']]) {
+                if (raw_data[self.data.arch['date_stop']]) {
-                        self.gantt.data.push({
+                    ganttData.push({
                         series: [
-                                {id: raw_data['id'], name: raw_data['display_name'],
+                            {
-                                start: raw_data[self.gantt.arch['date_start']], end: raw_data[self.gantt.arch['date_stop']]},
+                                id: raw_data['id'],
+                                name: raw_data['display_name'],
+                                start: raw_data[self.data.arch['date_start']].split(' ')[0],
+                                end: raw_data[self.data.arch['date_stop']].split(' ')[0]
+                            },
                         ],
                     });
                 } else {
-                        self.gantt.data.push({
+                    ganttData.push({
                         series: [
-                                {id: raw_data['id'], name: raw_data['display_name'],
+                            {
-                                start: raw_data[self.gantt.arch['date_start']], end: raw_data[self.gantt.arch['date_start']]},
+                                id: raw_data['id'],
+                                name: raw_data['display_name'],
+                                start: raw_data[self.data.arch['date_start']].split(' ')[0],
+                                end: raw_data[self.data.arch['date_start']].split(' ')[0]
+                            },
                         ],
                     });
                 }
             });
         }
-
+        return ganttData;
-            /**
-             * Render the Gantt view.
-             *
-             * Note that This method is synchronous, but the actual rendering is done
-             * asynchronously (in a setTimeout).
-             *
-             */
-            setTimeout(function() {
-                $(".o_gantt_view_container").empty();
-                $(".o_gantt_view_container").ganttView({
-                    data: self.gantt.data,
-                    slideWidth: 'auto',
-                    cellWidth: 20,
-                    behavior: {
-                        clickable: false,
-                        draggable: false,
-                        resizable: false,
-                        /**
-                         * @todo Flectra:
-                         * Turn-On below events & related behavior/functions
-                         */
-//                         onClick: function(data) {},
-//
-//                         onResize: function(data) {
-//                            self.updateRecord(data);
-//                         },
-//
-//                         onDrag: function(data) {
-//                            self.updateRecord(data);
-//                         },
-                    }
-                });
-            }, 0);
-        });
     },
-
-//    updateRecord: function(data) {
-//        var self = this;
-//        return this._rpc({
-//            model: self.modelName,
-//            method: 'write',
-//            args: [[data.id], {
-//                [self.gantt.arch['date_start']]: data.start,
-//                [self.gantt.arch['date_stop']]: data.end,
-//            }],
-//            context: self.gantt.context,
-//        });
-//    },
-
 });
 
 });

addons/web/static/src/js/views/gantt/gantt_renderer.js

@@ -0,0 +1,122 @@
+flectra.define('web.GanttRenderer', function (require) {
+"use strict";
+
+/**
+ * The graph renderer turns the data from the graph model into a nice looking
+ * svg chart.  This code uses the nvd3 library.
+ *
+ * Note that we use a custom build for the nvd3, with only the model we actually
+ * use.
+ */
+
+var core = require('web.core');
+var AbstractRenderer = require('web.AbstractRenderer');
+var Dialog = require('web.Dialog');
+
+var _t = core._t;
+var QWeb = core.qweb;
+
+return AbstractRenderer.extend({
+    template: "GanttView",
+    /**
+     * @override
+     * @param {Widget} parent
+     * @param {Object} state
+     * @param {Object} params
+     * @param {boolean} params.stacked
+     */
+    init: function (parent, state, params) {
+        this.parent = parent;
+        this._super.apply(this, arguments);
+    },
+
+    /**
+     * Render the chart.
+     *
+     * Note that This method is synchronous, but the actual rendering is done
+     * asynchronously (in a setTimeout).  The reason for that is that nvd3/d3
+     * needs to be in the DOM to correctly render itself.  So, we trick Flectra by
+     * returning immediately, then wait a tiny interval before actually
+     * displaying the data.
+     *
+     * @returns {Deferred} The _super deferred is actually resolved immediately
+     */
+    _render: function () {
+        this.data = this.parent.active_view.controller.model.data;
+        this._loadGanttView();
+        return $.when();
+    },
+    _loadGanttView: function () {
+        var self = this;
+        this.$el.empty().ganttView({
+            data: self.data.records,
+            slideWidth: 'auto',
+            cellWidth: 20,
+            behavior: {
+                onClick: function (data) {
+                    var dialog = new Dialog(self, {
+                        title: _t(data.name),
+                        $content: $(QWeb.render('GanttViewWizard')),
+                        size: 'small',
+                        buttons: [
+                            {text: _t("Save"), classes: 'btn-success', click: _.bind(_callSave, self)},
+                            {text: _t("Cancel"), classes: 'btn-danger', close: true}
+                        ]
+                    }).open();
+
+                    dialog.opened().then(function () {
+                        var datepickers_options = {
+                            keepOpen: true,
+                            minDate: moment({y: 1900}),
+                            maxDate: moment().add(200, "y"),
+                            calendarWeeks: true,
+                            icons: {
+                                time: 'fa fa-clock-o',
+                                date: 'fa fa-calendar',
+                                next: 'fa fa-chevron-right',
+                                previous: 'fa fa-chevron-left',
+                                up: 'fa fa-chevron-up',
+                                down: 'fa fa-chevron-down',
+                            },
+                            locale: moment.locale(),
+                            format: "YYYY-MM-DD",
+                            ignoreReadonly: true
+                        };
+                        dialog.$el.find('input#start_date').val(data.start);
+                        dialog.$el.find('input#end_date').val(data.end);
+                        dialog.$el.find('input#start_date, input#end_date').datetimepicker(datepickers_options);
+                    });
+
+                    function _callSave(event) {
+                        var newData = {
+                            start: dialog.$el.find('input#start_date').val().toString(),
+                            end: dialog.$el.find('input#end_date').val().toString(),
+                            id: data.id
+                        };
+                        if (data.start !== newData.start || data.end !== newData.end) {
+                            var start_data = new Date(dialog.$el.find('input#start_date').val().toString()).getTime();
+                            var end_data = new Date(dialog.$el.find('input#end_date').val().toString()).getTime();
+                            if(start_data <= end_data){
+                                self.trigger_up('updateRecord', newData);
+                                dialog.close();
+                            }else {
+                                self.do_warn(_t("Warning"), _t("Start date should be less than or equal to End date"));
+                            }
+                        }
+                    }
+                },
+
+                onResize: function (data) {
+                    self.trigger_up('updateRecord', data);
+                },
+
+                onDrag: function (data) {
+                    self.trigger_up('updateRecord', data);
+                },
+            }
+        });
+        this.$el.removeAttr('style');
+    },
+});
+
+});

addons/web/static/src/js/views/gantt/gantt_view.js

@@ -4,10 +4,9 @@ flectra.define('web.GanttView', function (require) {
 var AbstractView = require('web.AbstractView');
 var core = require('web.core');
 var GanttModel = require('web.GanttModel');
+var GanttRenderer = require('web.GanttRenderer');
 var Controller = require('web.GanttController');
-var AbstractRenderer = require('web.AbstractRenderer');
 
-var _t = core._t;
 var _lt = core._lt;
 
 var GanttView = AbstractView.extend({
@@ -16,7 +15,7 @@ var GanttView = AbstractView.extend({
     config: {
         Model: GanttModel,
         Controller: Controller,
-        Renderer: AbstractRenderer,
+        Renderer: GanttRenderer,
     },
     /**
      * @override
@@ -24,7 +23,6 @@ var GanttView = AbstractView.extend({
     init: function(viewInfo) {
         this._super.apply(this, arguments);
         var arch = viewInfo.arch;
-        var fields = viewInfo.fields;
         this.loadParams.arch = arch;
     },
 });

addons/web/static/src/xml/base.xml

@@ -532,6 +532,35 @@
     <div class="o_gantt_view_container"/>
 </t>
 
+<t t-name="GanttViewWizard">
+    <table class="o_group o_inner_group" style="width: 100%;">
+        <tbody>
+            <tr>
+                <td class="o_td_label" style="padding: 10px 10px 10px 20px;">
+                    <label class="o_form_label" for="start_date">Start Date</label>
+                </td>
+                <td style="width: 65%; padding: 10px 10px 10px 20px;">
+                    <div class="o_datepicker o_field_date o_field_widget" name="date_from">
+                        <input class="o_datepicker_input o_input"
+                               type="text" name="date_from" id="start_date"/>
+                    </div>
+                </td>
+            </tr>
+            <tr>
+                <td class="o_td_label" style="padding: 10px 10px 10px 20px;">
+                    <label class="o_form_label" for="end_date">End Date</label>
+                </td>
+                <td style="width: 65%; padding: 10px 10px 10px 20px;">
+                    <div class="o_datepicker o_field_date o_field_widget" name="date_to">
+                        <input class="o_datepicker_input o_input"
+                               type="text" name="date_to" id="end_date"/>
+                    </div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</t>
+
 <div t-name="PivotView" class="o_pivot">
     <div class="o_field_selection"/>
 </div>

addons/web/views/webclient_templates.xml

@@ -242,9 +242,10 @@
         <link rel="stylesheet" type="text/css" href="/web/static/lib/jquery.ganttView/jquery.ganttView.css"/>
         <script type="text/javascript" src="/web/static/lib/jquery.ganttView/jquery.ganttView.js"/>
 
-        <script type="text/javascript" src="/web/static/src/js/views/gantt/gantt_controller.js"/>
-        <script type="text/javascript" src="/web/static/src/js/views/gantt/gantt_view.js"/>
         <script type="text/javascript" src="/web/static/src/js/views/gantt/gantt_model.js"/>
+        <script type="text/javascript" src="/web/static/src/js/views/gantt/gantt_controller.js"/>
+        <script type="text/javascript" src="/web/static/src/js/views/gantt/gantt_renderer.js"/>
+        <script type="text/javascript" src="/web/static/src/js/views/gantt/gantt_view.js"/>
         <!-- @Flectra: Gantt View Assets ::: End -->
 
     </template>