refactor account k-psul js - part 2/?

- les événements de AccountSearch sont enregistrés depuis ces classes (plus depuis le manager)
- ajout d'une classe AccountSelection s'occupant de la sélection d'un
  compte par l'utilisateur
- la méthode update de AccountManager peut maintenant prendre un
  trigramme et le set correctement, à défaut elle récupère le trigramme
  via AccountSelection
This commit is contained in:
Aurélien Delobelle 2017-02-15 14:09:20 +01:00
parent fdcf4c3ab0
commit ee848d210e

View file

@ -372,12 +372,12 @@ class AccountManager {
constructor(env) { constructor(env) {
this._env = env; // temporary, should be a link to "kpsul_manager" or something like this this._env = env; // temporary, should be a link to "kpsul_manager" or something like this
this.account = new Account();
this.search = new AccountSearch(this);
this._$container = $('#account');
this._$input_trigramme = $('#id_trigramme');
this._init_events(); this._$container = $('#account');
this.account = new Account();
this.selection = new AccountSelection(this);
this.search = new AccountSearch(this);
} }
get is_empty() { get is_empty() {
@ -405,7 +405,7 @@ class AccountManager {
var buttons = ''; var buttons = '';
if (this.is_empty) { if (this.is_empty) {
var trigramme = this._$input_trigramme.val().formatTri(); var trigramme = this.selection.get();
if (trigramme.isValidTri()) { if (trigramme.isValidTri()) {
var url_base = "{% url 'kfet.account.create' %}"; var url_base = "{% url 'kfet.account.create' %}";
var url = url_base + '?trigramme=' + trigramme.urlify(); var url = url_base + '?trigramme=' + trigramme.urlify();
@ -423,11 +423,15 @@ class AccountManager {
this._$container.find('.buttons').html(buttons); this._$container.find('.buttons').html(buttons);
} }
update() { update(trigramme) {
var trigramme = this._$input_trigramme.val().formatTri(); if (typeof trigramme !== 'undefined')
this.selection.set(trigramme);
trigramme = trigramme || this.selection.get();
if (trigramme.isValidTri()) { if (trigramme.isValidTri()) {
this.account.fromAPI(trigramme, this.account.fromAPI(trigramme,
() => this.on_api_success(), () => this._update_on_success(),
() => this.reset_data() () => this.reset_data()
); );
} else { } else {
@ -435,7 +439,7 @@ class AccountManager {
} }
} }
on_api_success() { _update_on_success() {
$('#id_on_acc').val(this.account.id); $('#id_on_acc').val(this.account.id);
this.display(); this.display();
@ -444,38 +448,9 @@ class AccountManager {
this._env.updateBasketRel(); this._env.updateBasketRel();
} }
_init_events() {
var that = this;
this._$input_trigramme
.on('input', () => this.update()); // doesn't want "that.update" instead of "() => this.update()"
this._$input_trigramme
.on('keydown', function(e) {
// keys: 13:Enter|40:Arrow-Down
if (e.keyCode == 13 || e.keyCode == 40) {
that._$input_trigramme.val('LIQ');
that.update();
}
});
/* open search on button click */
this._$container
.on('click', '.search', () => this.search.open());
/* open search on Ctrl-F */
this._$container
.on('keydown', function(e) {
if (e.which == 70 && e.ctrlKey) {
that.search.open();
e.preventDefault() ;
}
});
}
reset() { reset() {
$('#id_on_acc').val(0); $('#id_on_acc').val(0);
this._$input_trigramme.val(''); this.selection.reset();
this.reset_data(); this.reset_data();
} }
@ -484,16 +459,23 @@ class AccountManager {
this.display(); this.display();
} }
focus() {
this.selection.focus();
return this;
}
} }
class AccountSearch { class AccountSearch {
constructor(account_manager) { constructor(manager) {
this.account_manager = account_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';
this._init_outer_events();
} }
open() { open() {
@ -509,14 +491,16 @@ class AccountSearch {
onOpen: function() { onOpen: function() {
that._$input = $(that._input); that._$input = $(that._input);
that._$results_container = $(that._results_container); that._$results_container = $(that._results_container);
that._init_input(); that
that._init_events(); ._init_form();
._init_inner_events();
} }
}); });
} }
_init_input() { _init_form() {
var that = this; var that = this;
this._$input.yourlabsAutocomplete({ this._$input.yourlabsAutocomplete({
url: '{% url "kfet.account.search.autocomplete" %}', url: '{% url "kfet.account.search.autocomplete" %}',
minimumCharacters: 2, minimumCharacters: 2,
@ -526,15 +510,35 @@ class AccountSearch {
container: that._$results_container, container: that._$results_container,
box: that._$results_container, box: that._$results_container,
}); });
return this;
} }
_init_events() { _init_outer_events() {
this._$input.bind('selectChoice', (e, choice, autocomplete) => this._on_select(e, choice, autocomplete)); var that = this;
/* open search on button click */
this.manager._$container
.on('click', '.search', () => this.open());
/* open search on Ctrl-F */
this.manager._$container
.on('keydown', function(e) {
if (e.which == 70 && e.ctrlKey) {
that.open();
e.preventDefault() ;
}
});
}
_init_inner_events() {
this._$input
.bind('selectChoice', (e, choice, autocomplete) => this._on_select(e, choice, autocomplete));
return this;
} }
_on_select(e, choice, autocomplete) { _on_select(e, choice, autocomplete) {
this.account_manager._$input_trigramme.val(choice.find('.trigramme').text()); this.manager.update(choice.find('.trigramme').text());
this.account_manager._$input_trigramme.trigger('input');
this.close(); this.close();
} }
@ -544,6 +548,50 @@ class AccountSearch {
} }
class AccountSelection {
constructor(manager) {
this.manager = manager;
this._$input = $('#id_trigramme');
this._init_events();
}
_init_events() {
var that = this;
// user change trigramme
this._$input
.on('input', () => this.manager.update());
// LIQ shortcuts
this._$input
.on('keydown', function(e) {
// keys: 13:Enter|40:Arrow-Down
if (e.keyCode == 13 || e.keyCode == 40)
that.manager.update('LIQ');
});
}
get() {
return this._$input.val().formatTri();
}
set(v) {
this._$input.val(v);
}
focus() {
this._$input.focus();
}
reset() {
this.set('');
}
}
$(document).ready(function() { $(document).ready(function() {
'use strict'; 'use strict';
// ----- // -----
@ -631,10 +679,10 @@ $(document).ready(function() {
// Event listener // Event listener
checkoutInput.on('change', function() { checkoutInput.on('change', function() {
retrieveCheckoutData(checkoutInput.val()); retrieveCheckoutData(checkoutInput.val());
if (account_manager.account.trigramme) { if (!account_manager.is_empty()) {
articleSelect.focus().select(); articleSelect.focus().select();
} else { } else {
account_manager._$input_trigramme.focus().select(); account_manager.focus();
} }
}); });
@ -1464,7 +1512,7 @@ $(document).ready(function() {
resetComment(); resetComment();
resetSelectable(); resetSelectable();
if (give_tri_focus) if (give_tri_focus)
account_manager._$input_trigramme.focus(); account_manager.focus();
} }
function hardReset(give_tri_focus=true) { function hardReset(give_tri_focus=true) {
@ -1514,8 +1562,9 @@ $(document).ready(function() {
case 113: case 113:
if (e.shiftKey) { if (e.shiftKey) {
// Shift+F2 - Account reset // Shift+F2 - Account reset
account_manager.reset(); account_manager
account_manager._$input_trigramme.focus(); .reset()
.focus();
} else { } else {
// F2 - Basket reset // F2 - Basket reset
resetBasket(); resetBasket();