[IMP] Enable events like Draggable and Resizable

This commit is contained in:
chintanambaliya-flectra 2017-12-01 14:22:43 +05:30 committed by Siddharth Bhalgami
parent d701e7dd58
commit 4c53003dfe
9 changed files with 319 additions and 220 deletions

View File

@ -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;
}
*/

View File

@ -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 offset = DateUtils.daysBetween(start, series.start) == 0 ? DateUtils.daysBetween(start, series.start) : DateUtils.daysBetween(start, series.start) - 1;
var size = DateUtils.daysBetween(series.start, series.end) + 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"

View File

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

View File

@ -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;
load: function (params) {
this.modelName = params.modelName;
this.gantt = {
data: [],
this.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.groupBy]
* @param {string[]} params.groupedBy a list of valid field names
* @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,
domain: this.gantt.domain,
groupBy: this.gantt.groupBy,
}).then(function(raw_datas) {
context: this.data.context,
domain: this.data.domain,
})
.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) {
_.each(raw_datas, function(raw_data) {
var grpByStr = raw_data[self.gantt.groupBy[0]] ? raw_data[self.gantt.groupBy[0]] : 'Undefined';
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 = [];
if (self.data.groupedBy.length) {
_.each(raw_datas, function (raw_data) {
var grpByStr = raw_data[self.data.groupedBy[0]] ? raw_data[self.data.groupedBy[0]] : 'Undefined';
if (grpByStr && grpByStr instanceof Array) {
grpByStr = raw_data[self.data.groupedBy[0]] ? raw_data[self.data.groupedBy[0]][1] : 'Undefined';
}
var keyCheck = _.findKey(self.gantt.data, {name: grpByStr});
if(!keyCheck) {
self.gantt.data.push({
var keyCheck = _.findKey(ganttData, {name: grpByStr});
if (!keyCheck) {
ganttData.push({
name: grpByStr,
series: [],
});
}
keyCheck = _.findKey(self.gantt.data, {name: grpByStr});
if(self.gantt.data[keyCheck]) {
if(raw_data[self.gantt.arch['date_stop']]) {
self.gantt.data[keyCheck].series.push({
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});
if (ganttData[keyCheck]) {
if (raw_data[self.data.arch['date_stop']]) {
ganttData[keyCheck].series.push({
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[keyCheck].series.push({
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']]
ganttData[keyCheck].series.push({
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]
});
}
}
});
} else {
_.each(raw_datas, function(raw_data) {
if(raw_data[self.gantt.arch['date_stop']]) {
self.gantt.data.push({
_.each(raw_datas, function (raw_data) {
if (raw_data[self.data.arch['date_stop']]) {
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']]},
],
});
} else {
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_start']]},
],
});
}
});
}
/**
* 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);
});
{
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 {
ganttData.push({
series: [
{
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;
},
// 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,
// });
// },
});
});

View File

@ -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');
},
});
});

View File

@ -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;
},
});

View File

@ -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>

View File

@ -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>