[IMP] Enable events like Draggable and Resizable

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

@@ -3,7 +3,7 @@
  * @author: Coolite Inc. http://www.coolite.com/
  * @date: 2008-05-13
  * @copyright: Copyright (c) 2006-2008, Coolite Inc. (http://www.coolite.com/). All rights reserved.
- * @license: Licensed under The MIT License. See license.txt and http://www.datejs.com/license/. 
+ * @license: Licensed under The MIT License. See license.txt and http://www.datejs.com/license/.
  * @website: http://www.datejs.com/
  */
 Date.CultureInfo={name:"en-US",englishName:"English (United States)",nativeName:"English (United States)",dayNames:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],abbreviatedDayNames:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],shortestDayNames:["Su","Mo","Tu","We","Th","Fr","Sa"],firstLetterDayNames:["S","M","T","W","T","F","S"],monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],abbreviatedMonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],amDesignator:"AM",pmDesignator:"PM",firstDayOfWeek:0,twoDigitYearMax:2029,dateElementOrder:"mdy",formatPatterns:{shortDate:"M/d/yyyy",longDate:"dddd, MMMM dd, yyyy",shortTime:"h:mm tt",longTime:"h:mm:ss tt",fullDateTime:"dddd, MMMM dd, yyyy h:mm:ss tt",sortableDateTime:"yyyy-MM-ddTHH:mm:ss",universalSortableDateTime:"yyyy-MM-dd HH:mm:ssZ",rfc1123:"ddd, dd MMM yyyy HH:mm:ss GMT",monthDay:"MMMM dd",yearMonth:"MMMM, yyyy"},regexPatterns:{jan:/^jan(uary)?/i,feb:/^feb(ruary)?/i,mar:/^mar(ch)?/i,apr:/^apr(il)?/i,may:/^may/i,jun:/^jun(e)?/i,jul:/^jul(y)?/i,aug:/^aug(ust)?/i,sep:/^sep(t(ember)?)?/i,oct:/^oct(ober)?/i,nov:/^nov(ember)?/i,dec:/^dec(ember)?/i,sun:/^su(n(day)?)?/i,mon:/^mo(n(day)?)?/i,tue:/^tu(e(s(day)?)?)?/i,wed:/^we(d(nesday)?)?/i,thu:/^th(u(r(s(day)?)?)?)?/i,fri:/^fr(i(day)?)?/i,sat:/^sa(t(urday)?)?/i,future:/^next/i,past:/^last|past|prev(ious)?/i,add:/^(\+|aft(er)?|from|hence)/i,subtract:/^(\-|bef(ore)?|ago)/i,yesterday:/^yes(terday)?/i,today:/^t(od(ay)?)?/i,tomorrow:/^tom(orrow)?/i,now:/^n(ow)?/i,millisecond:/^ms|milli(second)?s?/i,second:/^sec(ond)?s?/i,minute:/^mn|min(ute)?s?/i,hour:/^h(our)?s?/i,week:/^w(eek)?s?/i,month:/^m(onth)?s?/i,day:/^d(ay)?s?/i,year:/^y(ear)?s?/i,shortMeridian:/^(a|p)/i,longMeridian:/^(a\.?m?\.?|p\.?m?\.?)/i,timezone:/^((e(s|d)t|c(s|d)t|m(s|d)t|p(s|d)t)|((gmt)?\s*(\+|\-)\s*\d\d\d\d?)|gmt|utc)/i,ordinalSuffix:/^\s*(st|nd|rd|th)/i,timeContext:/^\s*(\:|a(?!u|p)|p)/i},timezones:[{name:"UTC",offset:"-000"},{name:"GMT",offset:"-000"},{name:"EST",offset:"-0500"},{name:"EDT",offset:"-0400"},{name:"CST",offset:"-0600"},{name:"CDT",offset:"-0500"},{name:"MST",offset:"-0700"},{name:"MDT",offset:"-0600"},{name:"PST",offset:"-0800"},{name:"PDT",offset:"-0700"}]};

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

@@ -11,145 +11,127 @@ div.ganttview-vtheader-item-name,
 div.ganttview-vtheader-series,
 div.ganttview-grid,
 div.ganttview-grid-row-cell {
-	float: left;
+    float: left;
 }
 
 div.ganttview-hzheader-month,
 div.ganttview-hzheader-day {
-	text-align: center;
+    text-align: center;
 }
 
 div.ganttview-grid-row-cell.last,
 div.ganttview-hzheader-day.last,
 div.ganttview-hzheader-month.last {
-	border-right: none;
+    border-right: none;
 }
 
 div.ganttview {
-	border: 1px solid #999;
+    border: 1px solid #999;
 }
 
-
 /* Horizontal Header */
 
 div.ganttview-hzheader-month {
-	width: 60px;
+    width: 60px;
-	height: 20px;
+    height: 20px;
-	border-right: 1px solid #d0d0d0;
+    border-right: 1px solid #d0d0d0;
-	line-height: 20px;
+    line-height: 20px;
 }
 
 div.ganttview-hzheader-day {
-	width: 20px;
+    width: 20px;
-	height: 20px;
+    height: 20px;
-	border-right: 1px solid #f0f0f0;
+    border-right: 1px solid #f0f0f0;
-	border-top: 1px solid #d0d0d0;
+    border-top: 1px solid #d0d0d0;
-	line-height: 20px;
+    line-height: 20px;
-	color: #777;
+    color: #777;
 }
 
-
 /* Vertical Header */
 
 div.ganttview-vtheader {
-	margin-top: 41px;
+    margin-top: 41px;
-	width: auto;
+    width: auto;
-	overflow: hidden;
+    overflow: hidden;
-	background-color: #fff;
+    background-color: #fff;
 }
 
 div.ganttview-vtheader-item {
-	overflow: hidden;
+    overflow: hidden;
-	color: #666;
+    color: #666;
 }
 
 div.ganttview-vtheader-item-name {
-	width: 100px;
+    width: 100px;
-	padding-left: 5px;
+    padding-left: 5px;
-	border-top: 1px solid #d0d0d0;
+    border-top: 1px solid #d0d0d0;
-	line-height: 16px;
+    line-height: 16px;
 }
 
 div.ganttview-vtheader-series-name {
-	width: 130px;
+    width: 130px;
-	height: 31px;
+    height: 31px;
-	border-top: 1px solid #d0d0d0;
+    border-top: 1px solid #d0d0d0;
-	line-height: 16px;
+    line-height: 16px;
-	padding-left: 5px;
+    padding-left: 5px;
 }
 
-
 /* Slider */
 
 div.ganttview-slide-container {
-	overflow: auto;
+    overflow: auto;
-	border-left: 1px solid #999;
+    border-left: 1px solid #999;
 }
 
-
 /* Grid */
 
 div.ganttview-grid-row-cell {
-	width: 20px;
+    width: 20px;
-	height: 31px;
+    height: 31px;
-	border-right: 1px solid #f0f0f0;
+    border-right: 1px solid #f0f0f0;
-	border-top: 1px solid #f0f0f0;
+    border-top: 1px solid #f0f0f0;
 }
 
 div.ganttview-grid-row-cell.ganttview-weekend {
-	background-color: #fafafa;
+    background-color: #fafafa;
 }
 
 div.ganttview-grid-row-cell.ganttview-today {
-	background-color: #F7F9FF !important;
+    background-color: #F7F9FF !important;
 }
 
 /* Blocks */
 
 div.ganttview-blocks {
-	margin-top: 40px;
+    margin-top: 40px;
 }
 
 div.ganttview-block-container {
-	height: 31px;
+    height: 31px;
-	padding-top: 4px;
+    padding-top: 4px;
-	text-align: left;
+    text-align: left;
 }
 
 div.ganttview-block {
-	position: relative;
+    position: relative;
-	height: 25px;
+    height: 25px;
-	background-color: #E5ECF9;
+    background-color: #E5ECF9;
-	border: 1px solid #c0c0c0;
+    border: 1px solid #c0c0c0;
-	border-radius: 3px;
+    border-radius: 3px;
-	-moz-border-radius: 3px;
+    -moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
+    -webkit-border-radius: 3px;
 }
 
 div.ganttview-block-text {
-	position: absolute;
+    position: absolute;
-	height: 12px;
+    height: 12px;
-	font-size: 0.8em;
+    font-size: 0.8em;
-	color: #999;
+    color: #999;
-	padding: 2px 3px;
+    padding: 2px 3px;
 }
 
-
 /* Adjustments for jQuery UI Styling */
 
 div.ganttview-block div.ui-resizable-handle.ui-resizable-s {
-	bottom: -0;
+    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) {
+    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) {
+    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);
-             * GroupBy is only supported till 1st level !
+            });
-             * @todo Flectra: Support Multi level GroupBy
+    },
-             */
+    _processData: function (raw_datas) {
-            if(self.gantt.groupBy.length) {
+        /**
-                _.each(raw_datas, function(raw_data) {
+         * GroupBy is only supported till 1st level !
-                    var grpByStr = raw_data[self.gantt.groupBy[0]] ? raw_data[self.gantt.groupBy[0]] : 'Undefined';
+         * @todo Flectra: Support Multi level GroupBy
-                    if(grpByStr && grpByStr instanceof Array) {
+         */
-                        grpByStr = raw_data[self.gantt.groupBy[0]] ? raw_data[self.gantt.groupBy[0]][1] : 'Undefined';
+        var self = this;
-                    }
+        var ganttData = [];
-                    var keyCheck = _.findKey(self.gantt.data, {name: grpByStr});
+        if (self.data.groupedBy.length) {
-                    if(!keyCheck) {
+            _.each(raw_datas, function (raw_data) {
-                        self.gantt.data.push({
+                var grpByStr = raw_data[self.data.groupedBy[0]] ? raw_data[self.data.groupedBy[0]] : 'Undefined';
-                            name: grpByStr,
+                if (grpByStr && grpByStr instanceof Array) {
-                            series: [],
+                    grpByStr = raw_data[self.data.groupedBy[0]] ? raw_data[self.data.groupedBy[0]][1] : 'Undefined';
-                        });
+                }
-                    }
+                var keyCheck = _.findKey(ganttData, {name: grpByStr});
-                    keyCheck = _.findKey(self.gantt.data, {name: grpByStr});
+                if (!keyCheck) {
-                    if(self.gantt.data[keyCheck]) {
+                    ganttData.push({
-                        if(raw_data[self.gantt.arch['date_stop']]) {
+                        name: grpByStr,
-                            self.gantt.data[keyCheck].series.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']]
+                }
-                            });
+                keyCheck = _.findKey(ganttData, {name: grpByStr});
-                        } else {
+                if (ganttData[keyCheck]) {
-                            self.gantt.data[keyCheck].series.push({
+                    if (raw_data[self.data.arch['date_stop']]) {
-                                id: raw_data['id'], name: raw_data['display_name'],
+                        ganttData[keyCheck].series.push({
-                                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_stop']].split(' ')[0]
-                });
-            } else {
-                _.each(raw_datas, function(raw_data) {
-                    if(raw_data[self.gantt.arch['date_stop']]) {
-                        self.gantt.data.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']]},
-                            ],
                         });
                     } else {
-                        self.gantt.data.push({
+                        ganttData[keyCheck].series.push({
-                            series: [
+                            id: raw_data['id'],
-                                {id: raw_data['id'], name: raw_data['display_name'],
+                            name: raw_data['display_name'],
-                                start: raw_data[self.gantt.arch['date_start']], end: raw_data[self.gantt.arch['date_start']]},
+                            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) {
-             * Render the Gantt view.
+                if (raw_data[self.data.arch['date_stop']]) {
-             *
+                    ganttData.push({
-             * Note that This method is synchronous, but the actual rendering is done
+                        series: [
-             * asynchronously (in a setTimeout).
+                            {
-             *
+                                id: raw_data['id'],
-             */
+                                name: raw_data['display_name'],
-            setTimeout(function() {
+                                start: raw_data[self.data.arch['date_start']].split(' ')[0],
-                $(".o_gantt_view_container").empty();
+                                end: raw_data[self.data.arch['date_stop']].split(' ')[0]
-                $(".o_gantt_view_container").ganttView({
+                            },
-                    data: self.gantt.data,
+                        ],
-                    slideWidth: 'auto',
+                    });
-                    cellWidth: 20,
+                } else {
-                    behavior: {
+                    ganttData.push({
-                        clickable: false,
+                        series: [
-                        draggable: false,
+                            {
-                        resizable: false,
+                                id: raw_data['id'],
-                        /**
+                                name: raw_data['display_name'],
-                         * @todo Flectra:
+                                start: raw_data[self.data.arch['date_start']].split(' ')[0],
-                         * Turn-On below events & related behavior/functions
+                                end: raw_data[self.data.arch['date_start']].split(' ')[0]
-                         */
+                            },
-//                         onClick: function(data) {},
+                        ],
-//
+                    });
-//                         onResize: function(data) {
+                }
-//                            self.updateRecord(data);
+            });
-//                         },
+        }
-//
+        return ganttData;
-//                         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>