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

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() {
+    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()) {
             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) {
+    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._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
-                that._init_events();
+                    ._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() {
+    _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) {
-        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();
     }
 
@@ -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
-                    account_manager._$input_trigramme.focus();
+                        .reset()
+                        .focus();
                 } else {
                     // F2 - Basket reset
                     resetBasket();