From ee848d210e3b78a987e7bd4bbc74000e2a673355 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Delobelle?= Date: Wed, 15 Feb 2017 14:09:20 +0100 Subject: [PATCH] refactor account k-psul js - part 2/? MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- kfet/templates/kfet/kpsul.html | 157 +++++++++++++++++++++------------ 1 file changed, 103 insertions(+), 54 deletions(-) diff --git a/kfet/templates/kfet/kpsul.html b/kfet/templates/kfet/kpsul.html index 2d432e4c..11dfb0f2 100644 --- a/kfet/templates/kfet/kpsul.html +++ b/kfet/templates/kfet/kpsul.html @@ -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 = '
' ; 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();