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:
parent
fdcf4c3ab0
commit
ee848d210e
1 changed files with 103 additions and 54 deletions
|
@ -372,12 +372,12 @@ class AccountManager {
|
|||
|
||||
constructor(env) {
|
||||
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() {
|
||||
|
@ -405,7 +405,7 @@ class AccountManager {
|
|||
var buttons = '';
|
||||
|
||||
if (this.is_empty) {
|
||||
var trigramme = this._$input_trigramme.val().formatTri();
|
||||
var trigramme = this.selection.get();
|
||||
if (trigramme.isValidTri()) {
|
||||
var url_base = "{% url 'kfet.account.create' %}";
|
||||
var url = url_base + '?trigramme=' + trigramme.urlify();
|
||||
|
@ -423,11 +423,15 @@ class AccountManager {
|
|||
this._$container.find('.buttons').html(buttons);
|
||||
}
|
||||
|
||||
update() {
|
||||
var trigramme = this._$input_trigramme.val().formatTri();
|
||||
update(trigramme) {
|
||||
if (typeof trigramme !== 'undefined')
|
||||
this.selection.set(trigramme);
|
||||
|
||||
trigramme = trigramme || this.selection.get();
|
||||
|
||||
if (trigramme.isValidTri()) {
|
||||
this.account.fromAPI(trigramme,
|
||||
() => this.on_api_success(),
|
||||
() => this._update_on_success(),
|
||||
() => this.reset_data()
|
||||
);
|
||||
} else {
|
||||
|
@ -435,7 +439,7 @@ class AccountManager {
|
|||
}
|
||||
}
|
||||
|
||||
on_api_success() {
|
||||
_update_on_success() {
|
||||
$('#id_on_acc').val(this.account.id);
|
||||
this.display();
|
||||
|
||||
|
@ -444,38 +448,9 @@ class AccountManager {
|
|||
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() {
|
||||
$('#id_on_acc').val(0);
|
||||
this._$input_trigramme.val('');
|
||||
this.selection.reset();
|
||||
this.reset_data();
|
||||
}
|
||||
|
||||
|
@ -484,16 +459,23 @@ class AccountManager {
|
|||
this.display();
|
||||
}
|
||||
|
||||
focus() {
|
||||
this.selection.focus();
|
||||
return this;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class AccountSearch {
|
||||
|
||||
constructor(account_manager) {
|
||||
this.account_manager = account_manager;
|
||||
constructor(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._input = '#search_autocomplete';
|
||||
this._results_container = '#account_results';
|
||||
|
||||
this._init_outer_events();
|
||||
}
|
||||
|
||||
open() {
|
||||
|
@ -509,14 +491,16 @@ class AccountSearch {
|
|||
onOpen: function() {
|
||||
that._$input = $(that._input);
|
||||
that._$results_container = $(that._results_container);
|
||||
that._init_input();
|
||||
that._init_events();
|
||||
that
|
||||
._init_form();
|
||||
._init_inner_events();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
_init_input() {
|
||||
_init_form() {
|
||||
var that = this;
|
||||
|
||||
this._$input.yourlabsAutocomplete({
|
||||
url: '{% url "kfet.account.search.autocomplete" %}',
|
||||
minimumCharacters: 2,
|
||||
|
@ -526,15 +510,35 @@ class AccountSearch {
|
|||
container: that._$results_container,
|
||||
box: that._$results_container,
|
||||
});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
_init_events() {
|
||||
this._$input.bind('selectChoice', (e, choice, autocomplete) => this._on_select(e, choice, autocomplete));
|
||||
_init_outer_events() {
|
||||
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) {
|
||||
this.account_manager._$input_trigramme.val(choice.find('.trigramme').text());
|
||||
this.account_manager._$input_trigramme.trigger('input');
|
||||
this.manager.update(choice.find('.trigramme').text());
|
||||
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() {
|
||||
'use strict';
|
||||
// -----
|
||||
|
@ -631,10 +679,10 @@ $(document).ready(function() {
|
|||
// Event listener
|
||||
checkoutInput.on('change', function() {
|
||||
retrieveCheckoutData(checkoutInput.val());
|
||||
if (account_manager.account.trigramme) {
|
||||
if (!account_manager.is_empty()) {
|
||||
articleSelect.focus().select();
|
||||
} else {
|
||||
account_manager._$input_trigramme.focus().select();
|
||||
account_manager.focus();
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -1464,7 +1512,7 @@ $(document).ready(function() {
|
|||
resetComment();
|
||||
resetSelectable();
|
||||
if (give_tri_focus)
|
||||
account_manager._$input_trigramme.focus();
|
||||
account_manager.focus();
|
||||
}
|
||||
|
||||
function hardReset(give_tri_focus=true) {
|
||||
|
@ -1514,8 +1562,9 @@ $(document).ready(function() {
|
|||
case 113:
|
||||
if (e.shiftKey) {
|
||||
// Shift+F2 - Account reset
|
||||
account_manager.reset();
|
||||
account_manager._$input_trigramme.focus();
|
||||
account_manager
|
||||
.reset()
|
||||
.focus();
|
||||
} else {
|
||||
// F2 - Basket reset
|
||||
resetBasket();
|
||||
|
|
Loading…
Reference in a new issue