cst1/kpsul
1
0
Fork 0
forked from DGNum/gestioCOF
Code Pull requests Activity

refactor account k-psul js - part 2/?

Browse source 
- 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
1 changed files with 103 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

157
kfet/templates/kfet/kpsul.html
View file

@ -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();