Merge branch 'Aufinal/backbone' into 'master'

Refactor le JS de K-Psul via Backbone : 2e étape

Closes #267 and #290

See merge request klub-dev-ens/gestioCOF!400

kfet/forms.py

@@ -640,7 +640,7 @@ class StatScaleForm(forms.Form):
 
 
 class AccountStatForm(forms.Form):
-    """ Idem, mais pour la balance d'un compte """
+    """Idem, mais pour la balance d'un compte"""
 
     begin_date = forms.DateTimeField(required=False)
     end_date = forms.DateTimeField(required=False)

kfet/static/kfet/css/index.css

@@ -194,6 +194,18 @@
 
 /* Account autocomplete window */
 
+.jconfirm #search_autocomplete {
+    margin-bottom: 0;
+}
+
+#account_results {
+    left:0 !important;
+}
+
+#account_results ul li.autocomplete-header {
+    display:none;
+}
+
 #account_results ul {
     list-style-type:none;
     background:rgba(255,255,255,0.9);

kfet/static/kfet/css/libs/jconfirm-kfet.css

@@ -25,6 +25,9 @@
 .jconfirm .jconfirm-box .content-pane {
     border-bottom:1px solid #ddd;
     margin: 0px !important;
+    /* fixes whitespace below block
+    see https://stackoverflow.com/a/5804278 */
+    vertical-align: middle;
 }
 
 .jconfirm .jconfirm-box .content {
@@ -51,7 +54,6 @@
 }
 
 .jconfirm .jconfirm-box .buttons {
-    margin-top:-6px; /* j'arrive pas à voir pk y'a un espace au dessus sinon... */
     padding:0;
     height:40px;
 }

kfet/static/kfet/js/account.js

@@ -10,7 +10,6 @@ var Account = Backbone.Model.extend({
         'is_frozen': false,
         'departement': '',
         'nickname': '',
-        'trigramme': '',
     },
 
     url: function () {
@@ -18,8 +17,9 @@ var Account = Backbone.Model.extend({
     },
 
     reset: function () {
-        // On ne veut pas trigger un `change` deux fois
+        // Réinitialise les attributs du modèle à leurs défaults, sauf le trigramme qui est bind à l'input.
-        this.clear({ silent: true }).set(this.defaults)
+        // On n'utilise pas .clear() car on ne veut pas clear le trigramme.
+        this.set(this.defaults)
     },
 
     parse: function (resp, options) {
@@ -31,27 +31,37 @@ var Account = Backbone.Model.extend({
     },
 
     view: function () {
-        view_class = this.get("trigramme") == 'LIQ' ? LIQView : AccountView;
+        if (this.is_empty_account()) {
+            view_class = EmptyAccountView
+        } else if (this.get("trigramme") == 'LIQ') {
+            view_class = LIQView
+        } else {
+            view_class = AccountView
+        }
         return new view_class({ model: this })
     },
 
     render: function () {
         this.view().render();
-    }
+    },
+
+    is_empty_account: function () {
+        return (this.id == 0)
+    },
 })
 
 var AccountView = Backbone.View.extend({
 
     el: '#account',
-    input: '#id_trigramme',
     buttons: '.buttons',
+    id_field: "#id_on_acc",
 
     props: _.keys(Account.prototype.defaults),
 
     get: function (property) {
         /* If the function this.get_<property> is defined,
         we call it ; else we call this.model.<property>. */
-        getter_name = 'get_' + property;
+        getter_name = `get_${property}`;
         if (_.functions(this).includes(getter_name))
             return this[getter_name]()
         else
@@ -67,9 +77,9 @@ var AccountView = Backbone.View.extend({
     },
 
     attr_data_balance: function () {
-        if (this.model.id == 0) {
+        // Cette fonction est utilisée uniquement sur un compte valide
-            return '';
+
-        } else if (this.model.get("is_frozen")) {
+        if (this.model.get("is_frozen")) {
             return "frozen";
         } else if (this.model.get("balance") < 0) {
             return 'neg';
@@ -81,23 +91,9 @@ var AccountView = Backbone.View.extend({
     },
 
     get_buttons: function () {
-        var buttons = '';
+        var url = django_urls["kfet.account.read"](this.model.get("trigramme"));
-        if (this.model.id != 0) {
-            var url = django_urls["kfet.account.read"](encodeURIComponent(this.model.get("trigramme")))
-            buttons += `<a href="${url}" class="btn btn-primary" target="_blank" title="Modifier"><span class="glyphicon glyphicon-cog"></span></a>`;
-        } else {
-            var trigramme = this.$(this.input).val().toUpperCase();
-            if (isValidTrigramme(trigramme)) {
-                trigramme = encodeURIComponent(trigramme);
-                var url_base = django_urls["kfet.account.create"]();
-                var url = `${url_base}?trigramme=${trigramme}`;
-                buttons += `<a href="${url}" class="btn btn-primary" target="_blank" title="Créer"><span class="glyphicon glyphicon-plus"></span></a>`;
-            } else {
-                buttons += '<button class="btn btn-primary search" title="Rechercher"><span class="glyphicon glyphicon-search"></span></button>';
-            }
-        }
 
-        return buttons
+        return `<a href="${url}" class="btn btn-primary" target="_blank" title="Modifier"><span class="glyphicon glyphicon-cog"></span></a>`;
     },
 
     render: function () {
@@ -108,16 +104,7 @@ var AccountView = Backbone.View.extend({
 
         this.$el.attr("data-balance", this.attr_data_balance());
         this.$(this.buttons).html(this.get_buttons());
-    },
+        $(this.id_field).val(this.get("id"));
-
-    reset: function () {
-        for (let prop of this.props) {
-            var selector = "#account-" + prop;
-            this.$(selector).text('');
-        }
-
-        this.$el.attr("data-balance", '');
-        this.$(this.buttons).html(this.get_buttons());
     },
 })
 
@@ -131,3 +118,28 @@ var LIQView = AccountView.extend({
     }
 })
 
+var EmptyAccountView = AccountView.extend({
+    get: function () {
+        return '';
+    },
+
+    attr_data_balance: function () {
+        return '';
+    },
+
+    get_buttons: function () {
+        /* Léger changement de fonctionnement :
+        on affiche *toujours* le bouton de recherche si
+        le compte est invalide */
+        buttons = '<button class="btn btn-primary search" title="Rechercher"><span class="glyphicon glyphicon-search"></span></button>';
+        trigramme = this.model.get("trigramme")
+        if (trigramme.is_valid_trigramme()) {
+            trigramme = encodeURIComponent(trigramme);
+            var url_base = django_urls["kfet.account.create"]();
+            var url = `${url_base}?trigramme=${trigramme}`;
+            buttons += `<a href="${url}" class="btn btn-primary" target="_blank" title="Créer"><span class="glyphicon glyphicon-plus"></span></a>`;
+        }
+
+        return buttons
+    }
+})

kfet/static/kfet/js/kfet.js

@@ -1,3 +1,17 @@
+/*
+ * Fonctions d'aide à la gestion de trigrammes
+ */
+
+String.prototype.format_trigramme = function () {
+    return this.toUpperCase().substr(0, 3)
+}
+
+String.prototype.is_valid_trigramme = function () {
+    var pattern = /^[^a-z]{3}$/;
+    return pattern.test(this);
+}
+
+
 /**
  * CSRF Token
  */
@@ -14,7 +28,7 @@ function csrfSafeMethod(method) {
 }
 
 $.ajaxSetup({
-    beforeSend: function(xhr, settings) {
+    beforeSend: function (xhr, settings) {
         if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
             xhr.setRequestHeader("X-CSRFToken", csrftoken);
         }
@@ -23,7 +37,7 @@ $.ajaxSetup({
 
 function add_csrf_form($form) {
     $form.append(
-        $('<input>', {'name': 'csrfmiddlewaretoken', 'value': csrftoken})
+        $('<input>', { 'name': 'csrfmiddlewaretoken', 'value': csrftoken })
     );
 }
 
@@ -66,7 +80,7 @@ class KfetWebsocket {
         var that = this;
         this.socket = new ReconnectingWebSocket(this.url);
 
-        this.socket.onmessage = function(e) {
+        this.socket.onmessage = function (e) {
             var data = $.extend({}, that.default_msg, JSON.parse(e.data));
             for (let handler of that.handlers) {
                 handler(data);
@@ -77,26 +91,21 @@ class KfetWebsocket {
 
 var OperationWebSocket = new KfetWebsocket({
     'relative_url': 'k-psul/',
-    'default_msg': {'opegroups':[],'opes':[],'checkouts':[],'articles':[]},
+    'default_msg': { 'opegroups': [], 'opes': [], 'checkouts': [], 'articles': [] },
 });
 
-function amountDisplay(amount, is_cof=false, tri='') {
+function amountDisplay(amount, is_cof = false, tri = '') {
     if (tri == 'LIQ')
-        return (- amount).toFixed(2) +'€';
+        return (- amount).toFixed(2) + '€';
     return amountToUKF(amount, is_cof);
 }
 
-function amountToUKF(amount, is_cof=false, account=false) {
+function amountToUKF(amount, is_cof = false, account = false) {
-    var rounding = account ? Math.floor : Math.round ;
+    var rounding = account ? Math.floor : Math.round;
     var coef_cof = is_cof ? 1 + settings['subvention_cof'] / 100 : 1;
     return rounding(amount * coef_cof * 10);
 }
 
-function isValidTrigramme(trigramme) {
-    var pattern = /^[^a-z]{3}$/;
-    return trigramme.match(pattern);
-}
-
 function getErrorsHtml(data) {
     var content = '';
     if (!data)
@@ -113,8 +122,8 @@ function getErrorsHtml(data) {
     if ('missing_perms' in data['errors']) {
         content += 'Permissions manquantes';
         content += '<ul>';
-        for (var i=0; i<data['errors']['missing_perms'].length; i++)
+        for (var i = 0; i < data['errors']['missing_perms'].length; i++)
-            content += '<li>'+data['errors']['missing_perms'][i]+'</li>';
+            content += '<li>' + data['errors']['missing_perms'][i] + '</li>';
         content += '</ul>';
     }
     if ('negative' in data['errors']) {
@@ -123,8 +132,8 @@ function getErrorsHtml(data) {
         } else {
             var url_base = '/k-fet/accounts/';
         }
-        for (var i=0; i<data['errors']['negative'].length; i++) {
+        for (var i = 0; i < data['errors']['negative'].length; i++) {
-            content += '<a class="btn btn-primary" href="'+url_base+data['errors']['negative'][i]+'/edit" target="_blank" style="width:100%">Autorisation de négatif requise pour '+data['errors']['negative'][i]+'</a>';
+            content += '<a class="btn btn-primary" href="' + url_base + data['errors']['negative'][i] + '/edit" target="_blank" style="width:100%">Autorisation de négatif requise pour ' + data['errors']['negative'][i] + '</a>';
         }
     }
     if ('addcost' in data['errors']) {
@@ -138,7 +147,7 @@ function getErrorsHtml(data) {
     if ('account' in data['errors']) {
         content += 'Général';
         content += '<ul>';
-        content += '<li>Opération invalide sur le compte '+data['errors']['account']+'</li>';
+        content += '<li>Opération invalide sur le compte ' + data['errors']['account'] + '</li>';
         content += '</ul>';
     }
     return content;
@@ -147,54 +156,54 @@ function getErrorsHtml(data) {
 function requestAuth(data, callback, focus_next = null) {
     var content = getErrorsHtml(data);
     content += '<div class="capslock"><span class="glyphicon glyphicon-lock"></span><input type="password" name="password" autofocus><div>',
-    $.confirm({
+        $.confirm({
-        title: 'Authentification requise',
+            title: 'Authentification requise',
-        content: content,
+            content: content,
-        backgroundDismiss: true,
+            backgroundDismiss: true,
-        animation:'top',
+            animation: 'top',
-        closeAnimation:'bottom',
+            closeAnimation: 'bottom',
-        keyboardEnabled: true,
+            keyboardEnabled: true,
-        confirm: function() {
+            confirm: function () {
-            var password = this.$content.find('input').val();
+                var password = this.$content.find('input').val();
-            callback(password);
+                callback(password);
-        },
+            },
-        onOpen: function() {
+            onOpen: function () {
-            var that = this;
+                var that = this;
-            var capslock = -1 ; // 1 -> caps on ; 0 -> caps off ; -1 or 2 -> unknown
+                var capslock = -1; // 1 -> caps on ; 0 -> caps off ; -1 or 2 -> unknown
-            this.$content.find('input').on('keypress', function(e) {
+                this.$content.find('input').on('keypress', function (e) {
-                if (e.keyCode == 13)
+                    if (e.keyCode == 13)
-                    that.$confirmButton.click();
+                        that.$confirmButton.click();
 
-                var s = String.fromCharCode(e.which);
+                    var s = String.fromCharCode(e.which);
-                if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps on, shift off
+                    if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) || //caps on, shift off
-                    (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) { //caps on, shift on
+                        (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) { //caps on, shift on
-                        capslock = 1 ;
+                        capslock = 1;
-                } else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)|| //caps off, shift off
+                    } else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey) || //caps off, shift off
-                           (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps off, shift on
+                        (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps off, shift on
-                        capslock = 0 ;
+                        capslock = 0;
-                }
+                    }
-                if (capslock == 1)
+                    if (capslock == 1)
-                    $('.capslock .glyphicon').show() ;
+                        $('.capslock .glyphicon').show();
-                else if (capslock == 0)
+                    else if (capslock == 0)
-                    $('.capslock .glyphicon').hide() ;
+                        $('.capslock .glyphicon').hide();
-            });
+                });
-            // Capslock key is not detected by keypress
+                // Capslock key is not detected by keypress
-            this.$content.find('input').on('keydown', function(e) {
+                this.$content.find('input').on('keydown', function (e) {
-                if (e.which == 20) {
+                    if (e.which == 20) {
-                    capslock = 1-capslock ;
+                        capslock = 1 - capslock;
-                }
+                    }
-                if (capslock == 1)
+                    if (capslock == 1)
-                    $('.capslock .glyphicon').show() ;
+                        $('.capslock .glyphicon').show();
-                else if (capslock == 0)
+                    else if (capslock == 0)
-                    $('.capslock .glyphicon').hide() ;
+                        $('.capslock .glyphicon').hide();
-            });
+                });
-        },
+            },
-        onClose: function() {
+            onClose: function () {
-            if (focus_next)
+                if (focus_next)
-                this._lastFocused = focus_next;
+                    this._lastFocused = focus_next;
-        }
+            }
 
-    });
+        });
 }
 
 
@@ -249,7 +258,7 @@ function submit_url(el) {
 function registerBoolParser(id, true_str, false_str) {
     $.tablesorter.addParser({
         id: id,
-        format: function(s) {
+        format: function (s) {
             return s.toLowerCase()
                 .replace(true_str, 1)
                 .replace(false_str, 0);
@@ -270,9 +279,9 @@ registerBoolParser('article__hidden', 'caché', 'affiché');
 $.extend(true, $.tablesorter.defaults, {
     headerTemplate: '{content} {icon}',
 
-    cssIconAsc  : 'glyphicon glyphicon-chevron-up',
+    cssIconAsc: 'glyphicon glyphicon-chevron-up',
-    cssIconDesc : 'glyphicon glyphicon-chevron-down',
+    cssIconDesc: 'glyphicon glyphicon-chevron-down',
-    cssIconNone : 'glyphicon glyphicon-resize-vertical',
+    cssIconNone: 'glyphicon glyphicon-resize-vertical',
 
     // Only four-digits format year is handled by the builtin parser
     // 'shortDate'.
@@ -292,16 +301,16 @@ $.extend(true, $.tablesorter.defaults, {
 
 // https://mottie.github.io/tablesorter/docs/index.html#variable-language
 $.extend($.tablesorter.language, {
-    sortAsc      : 'Trié par ordre croissant, ',
+    sortAsc: 'Trié par ordre croissant, ',
-    sortDesc     : 'Trié par ordre décroissant, ',
+    sortDesc: 'Trié par ordre décroissant, ',
-    sortNone     : 'Non trié, ',
+    sortNone: 'Non trié, ',
-    sortDisabled : 'tri désactivé et/ou non-modifiable',
+    sortDisabled: 'tri désactivé et/ou non-modifiable',
-    nextAsc      : 'cliquer pour trier par ordre croissant',
+    nextAsc: 'cliquer pour trier par ordre croissant',
-    nextDesc     : 'cliquer pour trier par ordre décroissant',
+    nextDesc: 'cliquer pour trier par ordre décroissant',
-    nextNone     : 'cliquer pour retirer le tri'
+    nextNone: 'cliquer pour retirer le tri'
 });
 
 
-$( function() {
+$(function () {
     $('.sortable').tablesorter();
 });

kfet/static/kfet/js/kpsul.js

@@ -0,0 +1,154 @@
+class AccountManager {
+    // Classe pour gérer la partie "compte" de K-Psul
+    // Devrait être la seule interface entre le JS de K-Psul et la logique des comptes.
+    constructor() {
+        // jQuery elements
+        this._$input = $("#id_trigramme");
+        this._$container = $("#account");
+        this._$article_select = $("#article_autocomplete")
+
+        // Subordinated classes
+        this.account = new Account({ "trigramme": "" });
+        this.search = new AccountSearch(this)
+
+        // Initialization
+        this._init_events();
+    }
+
+    get data() {
+        return this.account.toJSON();
+    }
+
+    _init_events() {
+        var that = this;
+
+        // L'input change ; on met à jour le compte
+        this._$input.on("input", () => this.update())
+
+        // Raccourci LIQ
+        this._$input.on("keydown", function (e) {
+            if (e.key == "ArrowDown") {
+                that.set("LIQ")
+            }
+        })
+
+        // Fonction de recherche
+        this._$container.on('click', '.search', function () {
+            that.search.open();
+        });
+
+        this._$container.on('keydown', function (e) {
+            if (e.key == "f" && e.ctrlKey) {
+                // Ctrl + F : universal search shortcut
+                that.search.open();
+                e.preventDefault();
+            }
+        });
+    }
+
+    set(trigramme) {
+        this._$input.val(trigramme);
+        this.update();
+    }
+
+    update() {
+        var trigramme = this._$input.val().format_trigramme();
+        this.account.set({ "trigramme": trigramme })
+        if (trigramme.is_valid_trigramme()) {
+            this.account.fetch({
+                "success": this._on_success.bind(this),
+                "error": this.reset.bind(this, false),
+            })
+        } else {
+            this.reset()
+        }
+    }
+
+    _on_success() {
+        // On utilise l'objet global window pour accéder aux fonctions nécessaires
+        this.account.render();
+        this._$article_select.focus();
+        window.updateBasketAmount();
+        window.updateBasketRel();
+    }
+
+    reset(hard_reset = false) {
+        this.account.reset();
+        this.account.render();
+
+        if (hard_reset) {
+            this._$input.val("");
+            this.update()
+        }
+    }
+}
+
+class AccountSearch {
+
+    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';
+
+    }
+
+    open() {
+        var that = this;
+        this._$dialog = $.dialog({
+            title: 'Recherche de compte',
+            content: this._content,
+            backgroundDismiss: true,
+            animation: 'top',
+            closeAnimation: 'bottom',
+            keyboardEnabled: true,
+            onOpen: function () {
+                that._$input = $(that._input);
+                that._$results_container = $(that._results_container);
+                that._init_form()
+                    ._init_events();
+            },
+        });
+    }
+
+    _init_form() {
+        var that = this;
+
+        this._$input.yourlabsAutocomplete({
+            url: django_urls['kfet.account.search.autocomplete'](),
+            minimumCharacters: 2,
+            id: 'search_autocomplete',
+            choiceSelector: '.autocomplete-value',
+            placeholder: "Chercher un utilisateur K-Fêt",
+            container: that._$results_container,
+            box: that._$results_container,
+            fixPosition: function () { },
+        });
+
+        return this;
+    }
+
+    _init_events() {
+        this._$input.bind('selectChoice',
+            (e, choice, autocomplete) => this._on_select(e, choice, autocomplete)
+        );
+        return this;
+    }
+
+    _on_select(e, choice, autocomplete) {
+        // Une option est de la forme "<User> (<trigramme>)"
+        var choice_text = choice.text().trim();
+        var trigramme_regex = /\((.{3})\)$/;
+        // le match est de la forme [<global match>, <group match>]
+        trigramme = choice_text.match(trigramme_regex)[1]
+        this.manager.set(trigramme);
+        this.close();
+    }
+
+    close() {
+        if (this._$dialog !== undefined) {
+            this._$dialog.close();
+        }
+    }
+}

kfet/templates/kfet/kpsul.html

@@ -10,6 +10,7 @@
 <script type="text/javascript" src="{% static 'kfet/vendor/underscore-min.js' %}"></script>
 <script type="text/javascript" src="{% static 'kfet/vendor/backbone-min.js' %}"></script>
 <script type="text/javascript" src="{% static 'kfet/js/account.js' %}"></script>
+<script type="text/javascript" src="{% static 'kfet/js/kpsul.js' %}"></script>
 {% endblock %}
 
 {% block title %}K-Psul{% endblock %}
@@ -213,124 +214,8 @@ $(document).ready(function() {
     // Account data management
     // -----
 
-    // Initializing
+    var account_manager = new AccountManager();
-    var account = new Account()
-    var account_container = $('#account');
     var triInput = $('#id_trigramme');
-    var account_data = {};
-    var account_data_default = {
-        'id'   : 0,
-        'name' : '',
-        'email': '',
-        'is_cof' : '',
-        'promo'  : '',
-        'balance': '',
-        'trigramme'  : '',
-        'is_frozen'  : false,
-        'departement': '',
-        'nickname'   : '',
-    };
-
-    // Search for an account
-    function searchAccount() {
-        var content = '<input type="text" name="q" id="search_autocomplete" spellcheck="false" autofocus><div id="account_results"></div>' ;
-        $.dialog({
-            title: 'Recherche de compte',
-            content: content,
-            backgroundDismiss: true,
-            animation: 'top',
-            closeAnimation: 'bottom',
-            keyboardEnabled: true,
-
-            onOpen: function() {
-                var that=this ;
-                $('input#search_autocomplete').yourlabsAutocomplete({
-                    url: '{% url "kfet.account.search.autocomplete" %}',
-                    minimumCharacters: 2,
-                    id: 'search_autocomplete',
-                    choiceSelector: '.choice',
-                    placeholder: "Chercher un utilisateur K-Fêt",
-                    box: $("#account_results"),
-                    fixPosition: function() {},
-                });
-                $('input#search_autocomplete').bind(
-                    'selectChoice',
-                    function(e, choice, autocomplete) {
-                        autocomplete.hide() ;
-                        triInput.val(choice.find('.trigramme').text()) ;
-                        triInput.trigger('input') ;
-                        that.close() ;
-                });
-            }
-        });
-    }
-
-    account_container.on('click', '.search', function () {
-        searchAccount() ;
-    }) ;
-
-    account_container.on('keydown', function(e) {
-        if (e.which == 70 && e.ctrlKey) {
-            // Ctrl + F : universal search shortcut
-            searchAccount() ;
-            e.preventDefault() ;
-        }
-    });
-
-    // Clear data
-    function resetAccountData() {
-        account_data = account_data_default;
-        $('#id_on_acc').val(0);
-        account.reset();
-        account.view().reset()
-    }
-
-    function resetAccount() {
-        triInput.val('');
-        resetAccountData();
-    }
-
-    // Store data
-    function storeAccountData() {
-        account_data = account.toJSON();
-        $('#id_on_acc').val(account.id);
-        account.render();
-    }
-
-    // Retrieve via ajax
-    function retrieveAccountData(tri) {
-        account.set({'trigramme': tri});
-        account.fetch({
-            'success': function() {
-                storeAccountData();
-                articleSelect.focus();
-                updateBasketAmount();
-                updateBasketRel();
-            },
-            'error': function() {
-                resetAccountData();
-            },
-        })
-    }
-
-    // Event listener
-    triInput.on('input', function() {
-        var tri = triInput.val().toUpperCase();
-        // Checking if tri is valid to avoid sending requests
-        if (isValidTrigramme(tri)) {
-            retrieveAccountData(tri);
-        } else {
-            resetAccountData();
-        }
-    });
-
-    triInput.on('keydown', function(e) {
-        if (e.keyCode == 40) {
-            // Arrow Down - Shorcut to LIQ
-            triInput.val('LIQ');
-            triInput.trigger('input');
-        }
-    });
 
 
     // -----
@@ -416,7 +301,7 @@ $(document).ready(function() {
     // Event listener
     checkoutInput.on('change', function() {
         retrieveCheckoutData(checkoutInput.val());
-        if (account_data['trigramme']) {
+        if (account_manager.data['trigramme']) {
             articleSelect.focus().select();
         } else {
             triInput.focus().select();
@@ -752,11 +637,11 @@ $(document).ready(function() {
         var amount_euro = - article_data[3] * nb ;
         if (settings['addcost_for']
             && settings['addcost_amount']
-            && account_data['trigramme'] != settings['addcost_for']
+            && account_manager.data['trigramme'] != settings['addcost_for']
             && article_data[5])
                 amount_euro -= settings['addcost_amount'] * nb;
         var reduc_divisor = 1;
-        if (account_data['is_cof'] && article_data[6])
+        if (account_manager.data['is_cof'] && article_data[6])
             reduc_divisor = 1 + settings['subvention_cof'] / 100;
         return (amount_euro / reduc_divisor).toFixed(2);
     }
@@ -779,7 +664,7 @@ $(document).ready(function() {
                 .attr('data-opeindex', index)
                 .find('.number').text('('+nb+'/'+article_data[4]+')').end()
                 .find('.name').text(article_data[0]).end()
-                .find('.amount').text(amountToUKF(amount_euro, account_data['is_cof'], false));
+                .find('.amount').text(amountToUKF(amount_euro, account_manager.data['is_cof'], false));
             basket_container.prepend(article_basket_html);
             if (is_low_stock(id, nb))
                 article_basket_html.find('.lowstock')
@@ -805,7 +690,7 @@ $(document).ready(function() {
             .attr('data-opeindex', index)
             .find('.number').text(amount+"€").end()
             .find('.name').text('Charge').end()
-            .find('.amount').text(amountToUKF(amount, account_data['is_cof'], false));
+            .find('.amount').text(amountToUKF(amount, account_manager.data['is_cof'], false));
         basket_container.prepend(deposit_basket_html);
         updateBasketRel();
     }
@@ -818,7 +703,7 @@ $(document).ready(function() {
             .attr('data-opeindex', index)
             .find('.number').text(amount+"€").end()
             .find('.name').text('Édition').end()
-            .find('.amount').text(amountToUKF(amount, account_data['is_cof'], false));
+            .find('.amount').text(amountToUKF(amount, account_manager.data['is_cof'], false));
         basket_container.prepend(deposit_basket_html);
         updateBasketRel();
     }
@@ -831,7 +716,7 @@ $(document).ready(function() {
             .attr('data-opeindex', index)
             .find('.number').text(amount+"€").end()
             .find('.name').text('Retrait').end()
-            .find('.amount').text(amountToUKF(amount, account_data['is_cof'], false));
+            .find('.amount').text(amountToUKF(amount, account_manager.data['is_cof'], false));
         basket_container.prepend(withdraw_basket_html);
         updateBasketRel();
     }
@@ -887,7 +772,7 @@ $(document).ready(function() {
             var amount = $(this).find('#id_form-'+opeindex+'-amount');
             if (!deleted && type == "purchase")
                 amount.val(amountEuroPurchase(article_id, article_nb));
-            basket_container.find('[data-opeindex='+opeindex+'] .amount').text(amountToUKF(amount.val(), account_data['is_cof'], false));
+            basket_container.find('[data-opeindex='+opeindex+'] .amount').text(amountToUKF(amount.val(), account_manager.data['is_cof'], false));
         });
     }
 
@@ -895,7 +780,7 @@ $(document).ready(function() {
 
     function updateBasketRel() {
         var basketrel_html = '';
-        if (account_data['trigramme'] == 'LIQ' && !isBasketEmpty()) {
+        if (account_manager.data['trigramme'] == 'LIQ' && !isBasketEmpty()) {
             var amount = - getAmountBasket();
             basketrel_html += '<div>Total: '+amount.toFixed(2)+' €</div>';
             if (amount < 5)
@@ -904,11 +789,11 @@ $(document).ready(function() {
                 basketrel_html += '<div>Sur 10€: '+ (10-amount).toFixed(2) +' €</div>';
             if (amount < 20)
                 basketrel_html += '<div>Sur 20€: '+ (20-amount).toFixed(2) +' €</div>';
-        } else if (account_data['trigramme'] != '' && !isBasketEmpty()) {
+        } else if (account_manager.data['trigramme'] != '' && !isBasketEmpty()) {
             var amount = getAmountBasket();
-            var amountUKF = amountToUKF(amount, account_data['is_cof'], false);
+            var amountUKF = amountToUKF(amount, account_manager.data['is_cof'], false);
-            var newBalance = account_data['balance'] + amount;
+            var newBalance = account_manager.data['balance'] + amount;
-            var newBalanceUKF = amountToUKF(newBalance, account_data['is_cof'], true);
+            var newBalanceUKF = amountToUKF(newBalance, account_manager.data['is_cof'], true);
             basketrel_html += '<div>Total: '+amountUKF+'</div>';
             basketrel_html += '<div>Nouveau solde: '+newBalanceUKF+'</div>';
             if (newBalance < 0)
@@ -929,7 +814,7 @@ $(document).ready(function() {
         var nb_before = formset_container.find("#id_form-"+opeindex+"-article_nb").val();
         var nb_after = parseInt(nb_before) + parseInt(nb);
         var amountEuro_after = amountEuroPurchase(id, nb_after);
-        var amountUKF_after = amountToUKF(amountEuro_after, account_data['is_cof']);
+        var amountUKF_after = amountToUKF(amountEuro_after, account_manager.data['is_cof']);
 
         if (type == 'purchase') {
             if (nb_after == 0) {
@@ -1151,7 +1036,7 @@ $(document).ready(function() {
 
     function updatePreviousOp() {
         var previousop_html = '';
-        var trigramme = account_data['trigramme'];
+        var trigramme = account_manager.data['trigramme'];
         previousop_html += '<div class="trigramme">Trigramme : '+trigramme+'</div>';
         previousop_html += basketrel_container.html();
         previousop_container.html(previousop_html);
@@ -1293,7 +1178,7 @@ $(document).ready(function() {
     // Reset functions
 
     function coolReset(give_tri_focus=true) {
-        resetAccount();
+        account_manager.reset(true);
         resetBasket();
         resetComment();
         resetSelectable();
@@ -1348,7 +1233,7 @@ $(document).ready(function() {
             case 113:
                 if (e.shiftKey) {
                     // Shift+F2 - Account reset
-                    resetAccount();
+                    account_manager.reset(true);
                     triInput.focus();
                 } else {
                     // F2 - Basket reset
@@ -1380,6 +1265,9 @@ $(document).ready(function() {
         }
     });
 
+    // On exporte les fonctions nécessaires dans `window`
+    window.updateBasketAmount = updateBasketAmount;
+    window.updateBasketRel = updateBasketRel;
     // -----
     // Initiliazing all
     // -----