[REF] web: Kanban: move quick create widgets

... in their own file.
This commit is contained in:
Aaron Bohy
2018-01-26 19:26:03 +01:00
parent 7ed3bd40a7
commit 6ea347a490
5 changed files with 176 additions and 168 deletions
@@ -4,15 +4,14 @@ odoo.define('web.KanbanColumn', function (require) {
var config = require('web.config');
var core = require('web.core');
var Dialog = require('web.Dialog');
var kanban_quick_create = require('web.kanban_quick_create');
var KanbanRecord = require('web.KanbanRecord');
var RecordQuickCreate = require('web.kanban_record_quick_create');
var view_dialogs = require('web.view_dialogs');
var Widget = require('web.Widget');
var KanbanColumnProgressBar = require('web.KanbanColumnProgressBar');
var _t = core._t;
var QWeb = core.qweb;
var RecordQuickCreate = kanban_quick_create.RecordQuickCreate;
var KanbanColumn = Widget.extend({
template: 'KanbanView.Group',
@@ -0,0 +1,168 @@
odoo.define('web.kanban_column_quick_create', function (require) {
"use strict";
/**
* This file defines the ColumnQuickCreate widget for Kanban. It allows to
* create kanban columns directly from the Kanban view.
*/
var Widget = require('web.Widget');
var ColumnQuickCreate = Widget.extend({
template: 'KanbanView.ColumnQuickCreate',
events: {
'click': 'toggleFold',
'click input': '_onInputClicked',
'click .o_kanban_add': '_onAddClicked',
'focusout': '_onFocusout',
'keydown': '_onKeydown',
'keypress input': '_onKeypress',
'mousedown .o_kanban_add': '_onMousedown',
},
/**
* @override
*/
init: function () {
this._super.apply(this, arguments);
this.folded = true;
},
/**
* @override
*/
start: function () {
this.$header = this.$('.o_column_header');
this.$quick_create = this.$('.o_kanban_quick_create');
this.$input = this.$('input');
return this._super.apply(this, arguments);
},
//--------------------------------------------------------------------------
// Public
//--------------------------------------------------------------------------
/**
* Folds/unfolds the Column quick create widget
*/
toggleFold: function () {
this.folded = !this.folded;
this._update();
if (!this.folded) {
this.$input.focus();
this.trigger_up('scrollTo', {selector: '.o_column_quick_create'});
}
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* Clears the input value and notify the environment to create a column
*
* @private
*/
_add: function () {
var value = this.$input.val().trim();
if (!value.length) {
return;
}
this.$input.val('');
this.trigger_up('quick_create_add_column', {value: value});
this.$input.focus();
},
/**
* Cancels the quick creation
*
* @private
*/
_cancel: function () {
this.folded = true;
this.$input.val('');
this._update();
},
/**
* Updates the rendering according to the current state (folded/unfolded)
*
* @private
*/
_update: function () {
this.$header.toggle(this.folded);
this.$quick_create.toggle(!this.folded);
},
//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------
/**
* @private
* @param {MouseEvent} event
*/
_onAddClicked: function (event) {
event.stopPropagation();
this._add();
},
/**
* Cancels the quick creation when the input loses the focus
*
* @private
*/
_onFocusout: function () {
var hasFocus = this.$(':focus').length > 0;
if (hasFocus) {
return;
}
this._cancel();
},
/**
* Stops the propagation of the event to prevent the quick create from
* toggling when the user clicks in the input
*
* @private
* @param {MouseEvent} event
*/
_onInputClicked: function (event) {
event.stopPropagation();
},
/**
* Cancels quick creation on escape keydown event
*
* @private
* @param {KeyEvent} event
*/
_onKeydown: function (event) {
if (event.keyCode === 27) { // escape
this._cancel();
}
},
/**
* Validates quick creation on enter keypress event
*
* @private
* @param {KeyEvent} event
*/
_onKeypress: function (event) {
if (event.keyCode === 13) { // enter
this._add();
}
},
/**
* In all browsers the 'focus/blur' event is triggered before a button's
* 'click' (it's actually triggered by mousedown).
* The quick create is hidden on blur of its input but still needs to create
* the data when the "Add" button is clicked.
* This problem is adressed by suppressing the 'focus/blur' event from the
* Add button entirely by preventing the browser's default mousedown handler.
*
* @private
* @param {MouseEvent} event
*/
_onMousedown: function (event) {
event.preventDefault();
},
});
return ColumnQuickCreate;
});
@@ -1,9 +1,9 @@
odoo.define('web.kanban_quick_create', function (require) {
odoo.define('web.kanban_record_quick_create', function (require) {
"use strict";
/**
* This file defines two Kanban 'quick create' widgets: one to quick create
* kanban records, and one to quick create kanban columns.
* This file defines the RecordQuickCreate widget for Kanban. It allows to
* create kanban records directly from the Kanban view.
*/
var core = require('web.core');
@@ -251,164 +251,6 @@ var RecordQuickCreate = Widget.extend({
},
});
var ColumnQuickCreate = Widget.extend({
template: 'KanbanView.ColumnQuickCreate',
events: {
'click': 'toggleFold',
'click input': '_onInputClicked',
'click .o_kanban_add': '_onAddClicked',
'focusout': '_onFocusout',
'keydown': '_onKeydown',
'keypress input': '_onKeypress',
'mousedown .o_kanban_add': '_onMousedown',
},
/**
* @override
*/
init: function () {
this._super.apply(this, arguments);
this.folded = true;
},
/**
* @override
*/
start: function () {
this.$header = this.$('.o_column_header');
this.$quick_create = this.$('.o_kanban_quick_create');
this.$input = this.$('input');
return this._super.apply(this, arguments);
},
//--------------------------------------------------------------------------
// Public
//--------------------------------------------------------------------------
/**
* Folds/unfolds the Column quick create widget
*/
toggleFold: function () {
this.folded = !this.folded;
this._update();
if (!this.folded) {
this.$input.focus();
this.trigger_up('scrollTo', {selector: '.o_column_quick_create'});
}
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* Clears the input value and notify the environment to create a column
*
* @private
*/
_add: function () {
var value = this.$input.val().trim();
if (!value.length) {
return;
}
this.$input.val('');
this.trigger_up('quick_create_add_column', {value: value});
this.$input.focus();
},
/**
* Cancels the quick creation
*
* @private
*/
_cancel: function () {
this.folded = true;
this.$input.val('');
this._update();
},
/**
* Updates the rendering according to the current state (folded/unfolded)
*
* @private
*/
_update: function () {
this.$header.toggle(this.folded);
this.$quick_create.toggle(!this.folded);
},
//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------
/**
* @private
* @param {MouseEvent} event
*/
_onAddClicked: function (event) {
event.stopPropagation();
this._add();
},
/**
* Cancels the quick creation when the input loses the focus
*
* @private
*/
_onFocusout: function () {
var hasFocus = this.$(':focus').length > 0;
if (hasFocus) {
return;
}
this._cancel();
},
/**
* Stops the propagation of the event to prevent the quick create from
* toggling when the user clicks in the input
*
* @private
* @param {MouseEvent} event
*/
_onInputClicked: function (event) {
event.stopPropagation();
},
/**
* Cancels quick creation on escape keydown event
*
* @private
* @param {KeyEvent} event
*/
_onKeydown: function (event) {
if (event.keyCode === 27) { // escape
this._cancel();
}
},
/**
* Validates quick creation on enter keypress event
*
* @private
* @param {KeyEvent} event
*/
_onKeypress: function (event) {
if (event.keyCode === 13) { // enter
this._add();
}
},
/**
* In all browsers the 'focus/blur' event is triggered before a button's
* 'click' (it's actually triggered by mousedown).
* The quick create is hidden on blur of its input but still needs to create
* the data when the "Add" button is clicked.
* This problem is adressed by suppressing the 'focus/blur' event from the
* Add button entirely by preventing the browser's default mousedown handler.
*
* @private
* @param {MouseEvent} event
*/
_onMousedown: function (event) {
event.preventDefault();
},
});
return {
RecordQuickCreate: RecordQuickCreate,
ColumnQuickCreate: ColumnQuickCreate,
};
return RecordQuickCreate;
});
@@ -5,13 +5,11 @@ var BasicRenderer = require('web.BasicRenderer');
var core = require('web.core');
var KanbanColumn = require('web.KanbanColumn');
var KanbanRecord = require('web.KanbanRecord');
var quick_create = require('web.kanban_quick_create');
var ColumnQuickCreate = require('web.kanban_column_quick_create');
var QWeb = require('web.QWeb');
var session = require('web.session');
var utils = require('web.utils');
var ColumnQuickCreate = quick_create.ColumnQuickCreate;
var qweb = core.qweb;
function findInNode(node, predicate) {
+2 -1
View File
@@ -213,11 +213,12 @@
<script type="text/javascript" src="/web/static/src/js/views/graph/graph_renderer.js"></script>
<script type="text/javascript" src="/web/static/src/js/views/graph/graph_view.js"></script>
<script type="text/javascript" src="/web/static/src/js/views/kanban/kanban_column.js"></script>
<script type="text/javascript" src="/web/static/src/js/views/kanban/kanban_quick_create.js"></script>
<script type="text/javascript" src="/web/static/src/js/views/kanban/kanban_column_progressbar.js"></script>
<script type="text/javascript" src="/web/static/src/js/views/kanban/kanban_column_quick_create.js"></script>
<script type="text/javascript" src="/web/static/src/js/views/kanban/kanban_model.js"></script>
<script type="text/javascript" src="/web/static/src/js/views/kanban/kanban_controller.js"></script>
<script type="text/javascript" src="/web/static/src/js/views/kanban/kanban_record.js"></script>
<script type="text/javascript" src="/web/static/src/js/views/kanban/kanban_record_quick_create.js"></script>
<script type="text/javascript" src="/web/static/src/js/views/kanban/kanban_renderer.js"></script>
<script type="text/javascript" src="/web/static/src/js/views/kanban/kanban_renderer_mobile.js"></script>
<script type="text/javascript" src="/web/static/src/js/views/kanban/kanban_view.js"></script>