[IMP] Enable events like Draggable and Resizable
This commit is contained in:
chintanambaliya-flectra
Siddharth Bhalgami
parent
d701e7dd58
commit
4c53003dfe
@ -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;
|
||||
}
|
||||
*/
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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;
|
||||
|
||||
});
|
||||
|
||||
@ -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,
|
||||
// });
|
||||
// },
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
122
addons/web/static/src/js/views/gantt/gantt_renderer.js
Normal file
122
addons/web/static/src/js/views/gantt/gantt_renderer.js
Normal 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');
|
||||
},
|
||||
});
|
||||
|
||||
});
|
||||
@ -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;
|
||||
},
|
||||
});
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user