DGNum/gestioCOF
14
2
Fork 2
Code Issues 78 Pull requests 18 Projects Releases 12 Packages Wiki Activity Actions

WIP: Aureplop/kpsul js refactor #501

Draft
delobell wants to merge 215 commits from aureplop/kpsul_js_refactor into master
pull from: aureplop/kpsul_js_refactor
merge into: DGNum:master
Conversation 55 Commits 215 Files changed 19 +234 -148
3 changed files with 234 additions and 148 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit bc71e1628a - Show all commits

101
kfet/static/kfet/js/history.js
View file

@ -5,28 +5,69 @@ class KHistory {
static get default_options() { static get default_options() {
return { return {
'templates': { 'templates': {
'purchase': '<div class="ope"><span class="amount"></span><span class="infos1"></span><span class="infos2"></span><span class="addcost"></span><span class="canceled"></span></div>', 'purchase': `
'specialope': '<div class="ope"><span class="amount"></span><span class="infos1"></span><span class="infos2"></span><span class="addcost"></span><span class="canceled"></span></div>', <div class="ope">
'opegroup': '<div class="opegroup"><span class="time"></span><span class="trigramme"></span><span class="amount"></span><span class="valid_by"></span><span class="comment"></span></div>', <span class="amount"></span>
'transfergroup': '<div class="opegroup"><span class="time"></span><span class="infos"></span><span class="valid_by"></span><span class="comment"></span></div>', <span class="infos1"></span>
'day': '<div class="day"><span class="date"></span></div>', <span class="infos2"></span>
'transfer': '<div class="ope"><span class="amount"></span><span class="infos1"></span><span class="glyphicon glyphicon-arrow-right"></span><span class="infos2"></span><span class="canceled"></span></div>', <span class="addcost"></span>
<span class="canceled"></span>
</div>
`,
'specialope': `
<div class="ope">
<span class="amount"></span>
<span class="infos1"></span>
<span class="infos2"></span>
<span class="addcost"></span>
<span class="canceled"></span>
</div>
`,
'opegroup': `
<div class="opegroup">
<span class="time"></span>
<span class="trigramme"></span>
<span class="amount"></span>
<span class="valid_by"></span>
<span class="comment"></span>
</div>`,
'transfergroup': `
<div class="opegroup">
<span class="time"></span>
<span class="infos"></span>
<span class="valid_by"></span>
<span class="comment"></span>
</div>
`,
'day': `
<div class="day">
<span class="date"></span>
</div>
`,
'transfer': `
<div class="ope">
<span class="amount"></span>
<span class="infos1"></span>
<span class="glyphicon glyphicon-arrow-right"></span>
<span class="infos2"></span>
<span class="canceled"></span>
</div>`,
}, },
'api_options': { 'api_options': {
from: moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'), from: moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
}, },
}; };
} }
constructor(options) { constructor(options) {
var all_options = $.extend({}, this.constructor.default_options, options); var all_options = $.extend({}, this.constructor.default_options, options);
this.api_options = all_options.api_options; this.api_options = all_options.api_options;
this._$container = $('#history'); this._$container = $('#history');
this._$nb_opes = $('#nb_opes'); this._$nb_opes = $('#nb_opes');
this.data = new OperationList(); this.data = new OperationList();
if (!all_options.no_select) if (!all_options.no_select)
@ -35,13 +76,19 @@ class KHistory {
if (!all_options.static) if (!all_options.static)
OperationWebSocket.add_handler(data => this.update_data(data)); OperationWebSocket.add_handler(data => this.update_data(data));
var templates = all_options.templates var templates = all_options.templates;
if (all_options.no_trigramme) if (all_options.no_trigramme)
templates['opegroup'] = templates['opegroup'] = `
'<div class="opegroup"><span class="time"></span><span class="amount"></span><span class="valid_by"></span><span class="comment"></span></div>'; <div class="opegroup">
<span class="time"></span>
<span class="amount"></span>
<span class="valid_by"></span>
<span class="comment"></span>
</div>
`;
this.display = new ForestDisplay(this._$container, templates, this.data); this.display = new ForestDisplay(this._$container, templates, this.data);
this._init_events(); this._init_events();
} }
@ -76,18 +123,18 @@ class KHistory {
} }
cancel_operations(to_cancel) { cancel_operations(to_cancel) {
var that = this ; var that = this;
var on_success = function() { var on_success = function() {
if (that.selection) if (that.selection)
that.selection.reset() ; that.selection.reset();
$(that).trigger("cancel_done"); $(that).trigger("cancel_done");
} };
api_with_auth({ api_with_auth({
url: Urls['kfet.kpsul.cancel_operations'](), url: Urls['kfet.kpsul.cancel_operations'](),
data: to_cancel, data: to_cancel,
on_success: on_success, on_success: on_success,
}) });
} }
add_node(data) { add_node(data) {
@ -96,8 +143,8 @@ class KHistory {
} }
update_node(modelname, id, update_data) { update_node(modelname, id, update_data) {
var updated = this.data.update(modelname, id, update_data) var updated = this.data.update(modelname, id, update_data);
if (!updated) if (!updated)
return false; return false;
this.display.update(updated); this.display.update(updated);
@ -124,11 +171,11 @@ class KHistory {
options.accounts.indexOf(opegroup.account_id) < 0) options.accounts.indexOf(opegroup.account_id) < 0)
return false; return false;
if (options.checkouts && options.checkouts.length && if (options.checkouts && options.checkouts.length &&
(opegroup.modelname == 'transfergroup' || (opegroup.modelname == 'transfergroup' ||
options.checkouts.indexOf(opegroup.checkout_id) < 0)) options.checkouts.indexOf(opegroup.checkout_id) < 0))
return false; return false;
return true; return true;
} }
@ -138,7 +185,7 @@ class KHistory {
for (let ope of opes) { for (let ope of opes) {
if (ope['cancellation']) { if (ope['cancellation']) {
var update_data = { let update_data = {
'canceled_at': ope.canceled_at, 'canceled_at': ope.canceled_at,
'canceled_by': ope.canceled_by, 'canceled_by': ope.canceled_by,
}; };
@ -153,12 +200,12 @@ class KHistory {
for (let opegroup of opegroups) { for (let opegroup of opegroups) {
if (opegroup['cancellation']) { if (opegroup['cancellation']) {
var update_data = { 'amount': opegroup.amount }; let update_data = { 'amount': opegroup.amount };
this.update_node('opegroup', opegroup.id, update_data); this.update_node('opegroup', opegroup.id, update_data);
} }
if (opegroup['add'] && this.is_valid(opegroup)) { if (opegroup['add'] && this.is_valid(opegroup)) {
this.add_node(opegroup); this.add_node(opegroup);
} }
} }

119
kfet/static/kfet/js/kfet.api.js
View file

@ -68,7 +68,7 @@ class ModelObject {
* @param {Object} [data={}] - data to store in instance * @param {Object} [data={}] - data to store in instance
*/ */
constructor(data) { constructor(data) {
this.from(data || {}); this.from(data || {});
} }
/** /**
@ -210,7 +210,7 @@ class APIModelObject extends ModelObject {
* @param {object} [api_options] Additional data appended to the request. * @param {object} [api_options] Additional data appended to the request.
*/ */
fromAPI(api_options) { fromAPI(api_options) {
api_options = api_options || {}; api_options = api_options || {};
api_options['format'] = 'json'; api_options['format'] = 'json';
@ -263,8 +263,10 @@ class Account extends APIModelObject {
* @see {@link Models.ModelObject.props|ModelObject.props} * @see {@link Models.ModelObject.props|ModelObject.props}
*/ */
static get props() { static get props() {
return ['id', 'trigramme', 'name', 'nickname', 'email', 'is_cof', return [
'promo', 'balance', 'is_frozen', 'departement']; 'id', 'trigramme', 'name', 'nickname', 'email', 'is_cof',
'promo', 'balance', 'is_frozen', 'departement'
];
} }
/** /**
@ -280,7 +282,7 @@ class Account extends APIModelObject {
'is_cof' : false, 'promo': '', 'balance': 0, 'is_frozen': false, 'is_cof' : false, 'promo': '', 'balance': 0, 'is_frozen': false,
'departement': '', 'departement': '',
}; };
}; }
/** /**
* @default <tt>django-js-reverse('kfet.account')</tt> * @default <tt>django-js-reverse('kfet.account')</tt>
@ -292,7 +294,7 @@ class Account extends APIModelObject {
var url = Urls['kfet.account.create'](); var url = Urls['kfet.account.create']();
if (trigramme) { if (trigramme) {
var trigramme_url = encodeURIComponent(trigramme); var trigramme_url = encodeURIComponent(trigramme);
url += `?trigramme=${trigramme_url}` url += `?trigramme=${trigramme_url}`;
} }
return url; return url;
} }
@ -494,7 +496,7 @@ class ArticleCategory extends ModelObject {
* @see {@link Models.ModelObject.compare|ModelObject.compare} * @see {@link Models.ModelObject.compare|ModelObject.compare}
*/ */
static compare(a, b) { static compare(a, b) {
return a.name.localeCompare(b.name) ; return a.name.localeCompare(b.name);
} }
} }
@ -549,7 +551,7 @@ class Article extends ModelObject {
set price(v) { this._price = floatCheck(v); } set price(v) { this._price = floatCheck(v); }
is_low_stock(nb) { is_low_stock(nb) {
return (-5 <= this.stock - nb && this.stock - nb <= 5); return (-5 <= this.stock - nb && this.stock - nb <= 5);
} }
} }
@ -565,7 +567,7 @@ class Day extends ModelObject {
* @default <tt>['id', 'date']</tt> * @default <tt>['id', 'date']</tt>
* @see {@link Models.ModelObject.props|ModelObject.props} * @see {@link Models.ModelObject.props|ModelObject.props}
*/ */
static get props() { return ['id', 'at', 'opegroups'] } static get props() { return ['id', 'at', 'opegroups']; }
/** /**
* Default values for Day model instances * Default values for Day model instances
@ -626,13 +628,15 @@ class HistoryGroup extends ModelObject {
/** /**
* Default values for HistoryGroup model instances * Default values for HistoryGroup model instances
* @default <tt>{ 'id': 0, 'at': moment(), 'comment': '', * @default <tt>{ 'id': 0, 'at': moment(), 'comment': '',
'valid_by': '' }</tt> 'valid_by': '' }</tt>
* @see {@link Models.ModelObject.default_data|ModelObject.default_data} * @see {@link Models.ModelObject.default_data|ModelObject.default_data}
*/ */
static get default_data() { static get default_data() {
return {'id': 0, 'at': moment(), 'comment': '', return {
'valid_by': '', 'day': new Day()}; 'id': 0, 'at': moment(), 'comment': '',
'valid_by': '', 'day': new Day()
};
} }
/** /**
@ -660,7 +664,7 @@ class OperationGroup extends HistoryGroup {
/** /**
* Properties associated with an opegroup. * Properties associated with an opegroup.
* @default <tt>{@link Models.HistoryGroup.props|HistoryGroup.props} + * @default <tt>{@link Models.HistoryGroup.props|HistoryGroup.props} +
* ['amount', 'is_cof', 'trigramme']</tt> * ['amount', 'is_cof', 'trigramme']</tt>
* @see {@link Models.ModelObject.props|ModelObject.props} * @see {@link Models.ModelObject.props|ModelObject.props}
*/ */
@ -670,14 +674,14 @@ class OperationGroup extends HistoryGroup {
/** /**
* Default values for OperationGroup instances. * Default values for OperationGroup instances.
* @default <tt>{@link Models.HistoryGroup.default_data|HistoryGroup.default_data} + * @default <tt>{@link Models.HistoryGroup.default_data|HistoryGroup.default_data} +
* {'amount': 0, 'is_cof': false, 'trigramme': ''}</tt> * {'amount': 0, 'is_cof': false, 'trigramme': ''}</tt>
* @see {@link Models.ModelObject.default_data|ModelObject.default_data} * @see {@link Models.ModelObject.default_data|ModelObject.default_data}
*/ */
static get default_data() { static get default_data() {
return $.extend({}, HistoryGroup.default_data, return $.extend({}, HistoryGroup.default_data, {
{'amount': 0, 'is_cof': false, 'trigramme': '', 'amount': 0, 'is_cof': false, 'trigramme': '', 'opes': []
'opes': []}); });
} }
/** /**
@ -704,16 +708,15 @@ class OperationGroup extends HistoryGroup {
* @memberof Models * @memberof Models
*/ */
class TransferGroup extends HistoryGroup { class TransferGroup extends HistoryGroup {
/** /**
* Default values for OperationGroup instances. * Default values for OperationGroup instances.
* @default <tt>{@link Models.HistoryGroup.default_data|HistoryGroup.default_data} + * @default <tt>{@link Models.HistoryGroup.default_data|HistoryGroup.default_data} +
* {'transfers': []}</tt> * {'transfers': []}</tt>
* @see {@link Models.ModelObject.default_data|ModelObject.default_data} * @see {@link Models.ModelObject.default_data|ModelObject.default_data}
*/ */
static get default_data() { static get default_data() {
return $.extend({}, HistoryGroup.default_data, return $.extend({}, HistoryGroup.default_data, {'transfers': []});
{'transfers': []});
} }
/** /**
@ -753,8 +756,10 @@ class Operation extends ModelObject {
* @see {@link Models.ModelObject.default_data|ModelObject.default_data} * @see {@link Models.ModelObject.default_data|ModelObject.default_data}
*/ */
static get default_data() { static get default_data() {
return {'id': '', 'amount': 0, 'canceled_at': undefined, 'canceled_by': '', return {
'group': new HistoryGroup()}; 'id': '', 'amount': 0, 'canceled_at': undefined, 'canceled_by': '',
'group': new HistoryGroup()
};
} }
get amount() { return this._amount; } get amount() { return this._amount; }
@ -762,7 +767,7 @@ class Operation extends ModelObject {
get canceled_at() { return this._canceled_at; } get canceled_at() { return this._canceled_at; }
set canceled_at(v) { set canceled_at(v) {
if (v) if (v)
this._canceled_at = dateUTCToParis(v); this._canceled_at = dateUTCToParis(v);
else else
this._canceled_at = undefined; this._canceled_at = undefined;
@ -778,14 +783,14 @@ class Purchase extends Operation {
/** /**
* Additional properties for purchases. * Additional properties for purchases.
* @default <tt>{@link Models.Operation.props|Operation.props} + ['article_name', 'article_nb', * @default <tt>{@link Models.Operation.props|Operation.props} + ['article_name', 'article_nb',
* 'addcost_amount', 'addcost_for']</tt> * 'addcost_amount', 'addcost_for']</tt>
* @see {@link Models.ModelObject.props|ModelObject.props} * @see {@link Models.ModelObject.props|ModelObject.props}
*/ */
static get props() { static get props() {
return Operation.props.concat( return Operation.props.concat(
['article_name', 'article_nb', 'addcost_amount', 'addcost_for'] ['article_name', 'article_nb', 'addcost_amount', 'addcost_for']
); );
} }
/** /**
@ -960,7 +965,7 @@ class ModelForest {
* @param {number} direction * @param {number} direction
*/ */
get_or_create(modelname, data, direction) { get_or_create(modelname, data, direction) {
var struct = this.constructor.structure ; var struct = this.constructor.structure;
var struct_data = struct[modelname]; var struct_data = struct[modelname];
var model = struct_data.model; var model = struct_data.model;
@ -972,7 +977,7 @@ class ModelForest {
var node; var node;
if (data instanceof ModelObject) if (data instanceof ModelObject)
node = data; node = data;
else else
node = new model(data); node = new model(data);
if (direction <= 0) { if (direction <= 0) {
@ -985,7 +990,7 @@ class ModelForest {
var parent_modelname, parent_data; var parent_modelname, parent_data;
// If index, we create it // If index, we create it
if (struct_data.index) { if (struct_data.index) {
var new_parent = {} var new_parent = {};
for (let key of struct_data.index.fields) { for (let key of struct_data.index.fields) {
new_parent[key] = data[key]; new_parent[key] = data[key];
} }
@ -1002,13 +1007,13 @@ class ModelForest {
parent_modelname = related.modelname; parent_modelname = related.modelname;
} else { } else {
parent_data = data.parent.content ; parent_data = data.parent.content;
parent_modelname = data.parent.modelname ; parent_modelname = data.parent.modelname;
} }
var parent = this.get_or_create(parent_modelname, parent_data, -1); var parent = this.get_or_create(parent_modelname, parent_data, -1);
var parent_childname = struct[parent_modelname].children; var parent_childname = struct[parent_modelname].children;
node[parent_name] = parent ; node[parent_name] = parent;
parent[parent_childname].push(node); parent[parent_childname].push(node);
} }
@ -1024,7 +1029,7 @@ class ModelForest {
} }
} }
return node ; return node;
} }
/** /**
@ -1034,7 +1039,7 @@ class ModelForest {
from(data) { from(data) {
this.roots = []; this.roots = [];
if (data.objects) { if (data.objects) {
this.related = data.related this.related = data.related;
for (let modelname in data.objects) { for (let modelname in data.objects) {
for (let obj_data of data.objects[modelname]) for (let obj_data of data.objects[modelname])
this.get_or_create(modelname, obj_data, 0); this.get_or_create(modelname, obj_data, 0);
@ -1077,7 +1082,7 @@ class ModelForest {
for (let root of this.roots) for (let root of this.roots)
if (recurse(root)) if (recurse(root))
return ; return;
} }
/** /**
@ -1090,7 +1095,7 @@ class ModelForest {
function callback(node) { function callback(node) {
if (node.id == id) { if (node.id == id) {
result = node ; result = node;
return true; return true;
} }
} }
@ -1101,13 +1106,13 @@ class ModelForest {
} }
update(modelname, id, update_data) { update(modelname, id, update_data) {
var updated = null ; var updated = null;
function callback(node) { function callback(node) {
if (node.id == id) { if (node.id == id) {
node.update(update_data); node.update(update_data);
updated = node ; updated = node;
return true ; return true;
} }
} }
@ -1174,7 +1179,7 @@ class ArticleList extends APIModelForest {
'children': 'articles', 'children': 'articles',
}, },
}; };
} }
/** /**
@ -1215,7 +1220,7 @@ class OperationList extends APIModelForest {
}, },
'transfergroup': { 'transfergroup': {
'model': TransferGroup, 'model': TransferGroup,
'parent': 'day', 'parent': 'day',
'children': 'transfers', 'children': 'transfers',
'index': { 'index': {
'modelname': 'day', 'modelname': 'day',
@ -1268,7 +1273,7 @@ class OperationList extends APIModelForest {
class ForestDisplay { class ForestDisplay {
constructor($container, templates, data) { constructor($container, templates, data) {
this._templates = templates ; this._templates = templates;
this._$container = $container; this._$container = $container;
this.data = data || new ModelForest(); this.data = data || new ModelForest();
} }
@ -1286,7 +1291,7 @@ class ForestDisplay {
var struct_data = this.data.constructor.structure[modelname]; var struct_data = this.data.constructor.structure[modelname];
var template = this._templates[modelname]; var template = this._templates[modelname];
var options = options || {} ; options = options || {};
var $container = $('<div></div>'); var $container = $('<div></div>');
$container.attr('id', modelname+'-'+node.id); $container.attr('id', modelname+'-'+node.id);
@ -1322,7 +1327,7 @@ class ForestDisplay {
*/ */
add(node, options) { add(node, options) {
var struct = this.data.constructor.structure; var struct = this.data.constructor.structure;
var existing = this.data.get_parent(node) ; var existing = this.data.get_parent(node);
var first_missing = node; var first_missing = node;
while (existing && !(this._$container.find('#'+existing.modelname+'-'+existing.id))) { while (existing && !(this._$container.find('#'+existing.modelname+'-'+existing.id))) {
@ -1345,7 +1350,7 @@ class ForestDisplay {
* @param {Object} [options] Options for element render method * @param {Object} [options] Options for element render method
*/ */
render(options) { render(options) {
var forest = this.data ; var forest = this.data;
if (forest.is_empty()) if (forest.is_empty())
return; return;
@ -1367,7 +1372,7 @@ class ForestDisplay {
* @param {Object} data * @param {Object} data
*/ */
update(data) { update(data) {
var modelname = data.constructor.verbose_name ; var modelname = data.constructor.verbose_name;
var $new_elt = data.display($(this._templates[modelname]), {}); var $new_elt = data.display($(this._templates[modelname]), {});
var $to_replace = this._$container.find('#'+modelname+'-'+data.id+'>:first-child'); var $to_replace = this._$container.find('#'+modelname+'-'+data.id+'>:first-child');
@ -1449,8 +1454,8 @@ class Formatter {
* attributes names for container (default: <tt>''</tt>). * attributes names for container (default: <tt>''</tt>).
*/ */
static render(object, $container, options) { static render(object, $container, options) {
options.props = options.props || []; options.props = options.props || [];
options.attrs = options.attrs || []; options.attrs = options.attrs || [];
var props = options.override_props ? options.props : this.props.concat(options.props); var props = options.override_props ? options.props : this.props.concat(options.props);
var attrs = options.override_attrs ? options.attrs : this.attrs.concat(options.attrs); var attrs = options.override_attrs ? options.attrs : this.attrs.concat(options.attrs);
@ -1708,7 +1713,7 @@ class HistoryGroupFormatter extends Formatter {
* @extends Formatters.HistoryGroupFormatter * @extends Formatters.HistoryGroupFormatter
*/ */
class TransferGroupFormatter extends HistoryGroupFormatter { class TransferGroupFormatter extends HistoryGroupFormatter {
/** /**
* Properties renderable to html. * Properties renderable to html.
* @default {@link Models.TransferGroup.props} <tt> + ['infos', 'time']</tt> * @default {@link Models.TransferGroup.props} <tt> + ['infos', 'time']</tt>
@ -1753,7 +1758,7 @@ class OpegroupFormatter extends HistoryGroupFormatter {
* @memberof Formatters * @memberof Formatters
*/ */
class DayFormatter extends Formatter { class DayFormatter extends Formatter {
/** /**
* Properties renderable to html. * Properties renderable to html.
* @default {@link Models.Day.props} * @default {@link Models.Day.props}
@ -1801,18 +1806,18 @@ class OperationFormatter extends Formatter {
static prop_canceled(a) { static prop_canceled(a) {
if (a.canceled_at) { if (a.canceled_at) {
var cancel = 'Annulé'; var cancel = 'Annulé';
if (a.canceled_by) if (a.canceled_by)
cancel += ' par '+a.canceled_by; cancel += ' par '+a.canceled_by;
cancel += ' le '+a.canceled_at.format('DD/MM/YY à HH:mm:ss'); cancel += ' le '+a.canceled_at.format('DD/MM/YY à HH:mm:ss');
return cancel ; return cancel;
} else { } else {
return ''; return '';
} }
} }
static attr_canceled(a) { static attr_canceled(a) {
return a.canceled_at ? 'true' : 'false' ; return a.canceled_at ? 'true' : 'false';
} }
} }
@ -1852,7 +1857,7 @@ class PurchaseFormatter extends OperationFormatter {
* @memberof Formatters * @memberof Formatters
*/ */
class SpecialOpeFormatter extends OperationFormatter { class SpecialOpeFormatter extends OperationFormatter {
/** /**
* <tt>a.amount</tt> with two decimal places. * <tt>a.amount</tt> with two decimal places.
*/ */
@ -1861,7 +1866,7 @@ class SpecialOpeFormatter extends OperationFormatter {
} }
static prop_infos2(a) { static prop_infos2(a) {
return SpecialOperation.verbose_types[a.type] || '' ; return SpecialOperation.verbose_types[a.type] || '';
} }
} }

162
kfet/static/kfet/js/kpsul.js
View file

@ -13,7 +13,7 @@ class KPsulManager {
this.checkout_manager = new CheckoutManager(this); this.checkout_manager = new CheckoutManager(this);
this.article_manager = new ArticleManager(this); this.article_manager = new ArticleManager(this);
this.history = new KHistory({ this.history = new KHistory({
api_options: {'opesonly': true}, api_options: {'opesonly': true},
}); });
this._init_events(); this._init_events();
@ -30,6 +30,8 @@ class KPsulManager {
this.article_manager.reset_data(); this.article_manager.reset_data();
this.history.fetch(); this.history.fetch();
} }
return this;
} }
focus() { focus() {
@ -44,11 +46,7 @@ class KPsulManager {
} }
_init_events() { _init_events() {
var that = this ; $(this.history).on("cancel_done", () => this.reset(true).focus());
$(this.history).on("cancel_done", function(e) {
that.reset(true);
that.focus();
});
} }
} }
@ -66,10 +64,22 @@ class AccountManager {
// buttons: search, read or create // buttons: search, read or create
this._$buttons_container = this._$container.find('.buttons'); this._$buttons_container = this._$container.find('.buttons');
this._buttons_templates = { this._buttons_templates = {
create: template`<a href="${'url'}" class="btn btn-primary" target="_blank" title="Créer ce compte"><span class="glyphicon glyphicon-plus"></span></a>`, create: template`
read: template`<a href="${'url'}" class="btn btn-primary" target="_blank" title="Détails du compte"><span class="glyphicon glyphicon-info-sign"></span></a>`, <a href="${'url'}" class="btn btn-primary" target="_blank" title="Créer ce compte">
search: template`<button class="btn btn-primary search" title="Rechercher"><span class="glyphicon glyphicon-search"></span></button>`, <span class="glyphicon glyphicon-plus"></span>
} </a>
`,
read: template`
<a href="${'url'}" class="btn btn-primary" target="_blank" title="Détails du compte">
<span class="glyphicon glyphicon-info-sign"></span>
</a>
`,
search: template`
<button class="btn btn-primary search" title="Rechercher">
<span class="glyphicon glyphicon-search"></span>
</button>
`,
};
} }
@ -92,13 +102,13 @@ class AccountManager {
if (this.is_empty()) { if (this.is_empty()) {
var trigramme = this.selection.get(); var trigramme = this.selection.get();
if (trigramme.isValidTri()) { if (trigramme.isValidTri()) {
var url = Account.url_create(trigramme); let url = Account.url_create(trigramme);
buttons = this._buttons_templates['create']({url: url}); buttons = this._buttons_templates['create']({url: url});
} else { /* trigramme input is empty or invalid */ } else { /* trigramme input is empty or invalid */
buttons = this._buttons_templates['search'](); buttons = this._buttons_templates['search']();
} }
} else { /* an account is loaded */ } else { /* an account is loaded */
var url = this.account.url_read; let url = this.account.url_read;
buttons = this._buttons_templates['read']({url: url}); buttons = this._buttons_templates['read']({url: url});
} }
@ -198,7 +208,10 @@ class AccountSearch {
constructor(manager) { constructor(manager) {
this.manager = manager; this.manager = manager;
this._content = '<input type="text" name="q" id="search_autocomplete" autocomplete="off" spellcheck="false" autofocus><div id="account_results"></div>' ; this._content = `
<input type="text" name="q" id="search_autocomplete" autocomplete="off" spellcheck="false" autofocus>
<div id="account_results"></div>
`;
this._input = '#search_autocomplete'; this._input = '#search_autocomplete';
this._results_container = '#account_results'; this._results_container = '#account_results';
@ -252,14 +265,15 @@ class AccountSearch {
.on('keydown', function(e) { .on('keydown', function(e) {
if (e.which == 70 && e.ctrlKey) { if (e.which == 70 && e.ctrlKey) {
that.open(); that.open();
e.preventDefault() ; e.preventDefault();
} }
}); });
} }
_init_inner_events() { _init_inner_events() {
this._$input.bind('selectChoice', this._$input.bind('selectChoice',
(e, choice, autocomplete) => this._on_select(e, choice, autocomplete)); (e, choice, autocomplete) => this._on_select(e, choice, autocomplete)
);
return this; return this;
} }
@ -291,9 +305,17 @@ class CheckoutManager {
this._$buttons_container = this._$container.find('.buttons'); this._$buttons_container = this._$container.find('.buttons');
this._buttons_templates = { this._buttons_templates = {
read: template`<a class="btn btn-primary" href="${'url'}" title="En savoir plus" target="_blank"><span class="glyphicon glyphicon-info-sign"></span></a>`, read: template`
statement_create: template`<a href="${'url'}" title="Effectuer un relevé" class="btn btn-primary" target="_blank"><span class="glyphicon glyphicon-euro"></span></a>`, <a class="btn btn-primary" href="${'url'}" title="En savoir plus" target="_blank">
} <span class="glyphicon glyphicon-info-sign"></span>
</a>
`,
statement_create: template`
<a href="${'url'}" title="Effectuer un relevé" class="btn btn-primary" target="_blank">
<span class="glyphicon glyphicon-euro"></span>
</a>
`,
};
} }
update(id) { update(id) {
@ -341,7 +363,7 @@ class CheckoutManager {
this._$laststatement_container.hide(); this._$laststatement_container.hide();
} else { } else {
this.laststatement.display(this._$laststatement_container, { this.laststatement.display(this._$laststatement_container, {
'prefix_prop': this.laststatement_display_prefix 'prefix_prop': this.laststatement_display_prefix
}); });
this._$laststatement_container.show(); this._$laststatement_container.show();
} }
@ -391,10 +413,12 @@ class CheckoutSelection {
this._init_events(); this._init_events();
this.choices = this._$input.find('option[value!=""]').toArray() this.choices =
.map(function(opt) { this._$input.find('option[value!=""]')
return parseInt($(opt).attr('value')); .toArray()
}); .map(function(opt) {
return parseInt($(opt).attr('value'));
});
} }
_init_events() { _init_events() {
@ -425,17 +449,27 @@ class ArticleManager {
this._env = env; // Global K-Psul Manager this._env = env; // Global K-Psul Manager
this._$container = $('#articles_data'); this._$container = $('#articles_data');
this._$input = $('#article_autocomplete'); this._$input = $('#article_autocomplete');
this._$nb = $('#article_number'); this._$nb = $('#article_number');
this._$stock = $('#article_stock'); this._$stock = $('#article_stock');
this.selected = new Article() ; this.selected = new Article();
this.data = new ArticleList() ; this.data = new ArticleList();
var $container = $('#articles_data'); var $container = $('#articles_data');
var templates = { var templates = {
'category': '<div class="category"><span class="name"></span></div>', category: `
'article' : '<div class="article"><span class="name"></span><span class="price"></span><span class="stock"></span></div>' <div class="category">
} ; <span class="name"></span>
</div>
`,
article: `
<div class="article">
<span class="name"></span>
<span class="price"></span>
<span class="stock"></span>
</div>
`,
};
this.display = new ForestDisplay($container, templates, this.data); this.display = new ForestDisplay($container, templates, this.data);
this.autocomplete = new ArticleAutocomplete(this, $container); this.autocomplete = new ArticleAutocomplete(this, $container);
@ -444,7 +478,7 @@ class ArticleManager {
} }
get nb() { get nb() {
return this._$nb.val() ; return this._$nb.val();
} }
display_list() { display_list() {
@ -452,7 +486,7 @@ class ArticleManager {
} }
validate(article) { validate(article) {
this.selected.from(article) ; this.selected.from(article);
this._$input.val(article.name); this._$input.val(article.name);
this._$nb.val('1'); this._$nb.val('1');
this._$stock.text('/'+article.stock); this._$stock.text('/'+article.stock);
@ -460,7 +494,7 @@ class ArticleManager {
} }
unset() { unset() {
this.selected.clear(); this.selected.clear();
} }
is_empty() { is_empty() {
@ -485,11 +519,11 @@ class ArticleManager {
} }
reset() { reset() {
this.unset() ; this.unset();
this._$stock.text(''); this._$stock.text('');
this._$nb.val(''); this._$nb.val('');
this._$input.val(''); this._$input.val('');
this.autocomplete.showAll() ; this.autocomplete.showAll();
} }
_init_events() { _init_events() {
@ -515,20 +549,20 @@ class ArticleManager {
this._$nb.on('keydown', function(e) { this._$nb.on('keydown', function(e) {
if (e.keyCode == 13 && that.constructor.check_nb(that.nb) && !that.is_empty()) { if (e.keyCode == 13 && that.constructor.check_nb(that.nb) && !that.is_empty()) {
kpsul._env.addPurchase(that.selected, that.nb); kpsul._env.addPurchase(that.selected, that.nb);
that.reset(); that.reset();
that.focus(); that.focus();
} }
if (normalKeys.test(e.keyCode) || arrowKeys.test(e.keyCode) || e.ctrlKey) { if (normalKeys.test(e.keyCode) || arrowKeys.test(e.keyCode) || e.ctrlKey) {
if (e.ctrlKey && e.charCode == 65) if (e.ctrlKey && e.charCode == 65)
that._$nb.val(''); that._$nb.val('');
return true ; return true;
} }
if (that.constructor.check_nb(that.nb+e.key)) if (that.constructor.check_nb(that.nb+e.key))
return true; return true;
return false; return false;
}); });
@ -536,7 +570,7 @@ class ArticleManager {
//Note : this function may not be needed after the whole rework //Note : this function may not be needed after the whole rework
get_article(id) { get_article(id) {
return this.data.find('article', id) ; return this.data.find('article', id);
} }
focus() { focus() {
@ -549,7 +583,7 @@ class ArticleManager {
} }
static check_nb(nb) { static check_nb(nb) {
return /^[0-9]+$/.test(nb) && nb > 0 && nb <= 24 ; return /^[0-9]+$/.test(nb) && nb > 0 && nb <= 24;
} }
} }
@ -557,15 +591,15 @@ class ArticleAutocomplete {
constructor(article_manager, $container) { constructor(article_manager, $container) {
this.manager = article_manager; this.manager = article_manager;
this._$container = $container ; this._$container = $container;
this._$input = $('#article_autocomplete'); this._$input = $('#article_autocomplete');
this.showAll() ; this.showAll();
this._init_events(); this._init_events();
} }
_init_events() { _init_events() {
var that = this ; var that = this;
// 8:Backspace|9:Tab|13:Enter|46:DEL|112-117:F1-6|119-123:F8-F12 // 8:Backspace|9:Tab|13:Enter|46:DEL|112-117:F1-6|119-123:F8-F12
var normalKeys = /^(8|9|13|46|112|113|114|115|116|117|119|120|121|122|123)$/; var normalKeys = /^(8|9|13|46|112|113|114|115|116|117|119|120|121|122|123)$/;
@ -573,17 +607,17 @@ class ArticleAutocomplete {
this._$input this._$input
.on('keydown', function(e) { .on('keydown', function(e) {
var text = that._$input.val() ; var text = that._$input.val();
if (normalKeys.test(e.keyCode) || arrowKeys.test(e.keyCode) || e.ctrlKey) { if (normalKeys.test(e.keyCode) || arrowKeys.test(e.keyCode) || e.ctrlKey) {
// For the backspace key, we suppose the cursor is at the very end // For the backspace key, we suppose the cursor is at the very end
if(e.keyCode == 8) { if(e.keyCode == 8) {
that.update(text.substring(0, text.length-1), true); that.update(text.substring(0, text.length-1), true);
} }
return true ; return true;
} }
that.update(text+e.key, false); that.update(text+e.key, false);
return false ; return false;
}); });
@ -592,9 +626,9 @@ class ArticleAutocomplete {
update(prefix, backspace) { update(prefix, backspace) {
this.resetMatch(); this.resetMatch();
var article_list = this.manager.data ; var article_list = this.manager.data;
var lower = prefix.toLowerCase() ; var lower = prefix.toLowerCase();
var that = this ; var that = this;
article_list.traverse('article', function(article) { article_list.traverse('article', function(article) {
if (article.name.toLowerCase().startsWith(lower)) if (article.name.toLowerCase().startsWith(lower))
@ -603,15 +637,15 @@ class ArticleAutocomplete {
if (this.matching.length == 1) { if (this.matching.length == 1) {
if (!backspace) { if (!backspace) {
this.manager.validate(this.matching[0]) ; this.manager.validate(this.matching[0]);
this.showAll() ; this.showAll();
} else { } else {
this.manager.unset(); this.manager.unset();
this.updateDisplay(); this.updateDisplay();
} }
} else if (this.matching.length > 1) { } else if (this.matching.length > 1) {
this.manager.unset(); this.manager.unset();
this.updateDisplay() ; this.updateDisplay();
if (!backspace) if (!backspace)
this.updatePrefix(); this.updatePrefix();
} }
@ -626,14 +660,14 @@ class ArticleAutocomplete {
if (that.matching.indexOf(article) != -1) { if (that.matching.indexOf(article) != -1) {
is_active = true; is_active = true;
that._$container.find('#article-'+article.id).show(); that._$container.find('#article-'+article.id).show();
} else { } else {
that._$container.find('#article-'+article.id).hide(); that._$container.find('#article-'+article.id).hide();
} }
} }
if (is_active) { if (is_active) {
that._$container.find('#category-'+category.id).show(); that._$container.find('#category-'+category.id).show();
} else { } else {
that._$container.find('#category-'+category.id).hide(); that._$container.find('#category-'+category.id).hide();
} }
}); });
@ -641,15 +675,15 @@ class ArticleAutocomplete {
updatePrefix() { updatePrefix() {
var lower = this.matching.map(function (article) { var lower = this.matching.map(function (article) {
return article.name.toLowerCase() ; return article.name.toLowerCase();
}); });
lower.sort() ; lower.sort();
var first = lower[0], last = lower[lower.length-1], var first = lower[0], last = lower[lower.length-1],
length = first.length, i = 0; length = first.length, i = 0;
while (i < length && first.charAt(i) === last.charAt(i)) i++; while (i < length && first.charAt(i) === last.charAt(i)) i++;
this._$input.val(first.substring(0,i)) ; this._$input.val(first.substring(0,i));
} }
showAll() { showAll() {