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

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

@ -5,12 +5,53 @@ 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': {
@ -35,10 +76,16 @@ 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);
@ -81,13 +128,13 @@ class KHistory {
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,7 +143,7 @@ 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;
@ -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,7 +200,7 @@ 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);
} }

47
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;
} }
@ -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
@ -631,8 +633,10 @@ class HistoryGroup 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': 0, 'at': moment(), 'comment': '', return {
'valid_by': '', 'day': new Day()}; 'id': 0, 'at': moment(), 'comment': '',
'valid_by': '', 'day': new Day()
};
} }
/** /**
@ -675,9 +679,9 @@ class OperationGroup extends HistoryGroup {
* @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': []}); });
} }
/** /**
@ -712,8 +716,7 @@ class TransferGroup extends HistoryGroup {
* @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; }
@ -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];
} }
@ -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);
@ -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);
@ -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);

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

@ -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';
@ -259,7 +272,8 @@ class AccountSearch {
_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) {
@ -391,7 +413,9 @@ class CheckoutSelection {
this._init_events(); this._init_events();
this.choices = this._$input.find('option[value!=""]').toArray() this.choices =
this._$input.find('option[value!=""]')
.toArray()
.map(function(opt) { .map(function(opt) {
return parseInt($(opt).attr('value')); return parseInt($(opt).attr('value'));
}); });
@ -433,8 +457,18 @@ class ArticleManager {
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);