From a2f54d48a791de79d5d2dd631581b87478f95ce3 Mon Sep 17 00:00:00 2001
From: Yohann D'ANELLO <yohann.danello@gmail.com>
Date: Thu, 12 Mar 2020 01:10:52 +0100
Subject: [PATCH] Improve a lot the interface

---
 apps/note/api/views.py         |   5 +-
 templates/note/conso_form.html | 146 ++++++++++++++++++++++++---------
 2 files changed, 108 insertions(+), 43 deletions(-)

diff --git a/apps/note/api/views.py b/apps/note/api/views.py
index 14f64003..cace7e40 100644
--- a/apps/note/api/views.py
+++ b/apps/note/api/views.py
@@ -82,8 +82,7 @@ class NotePolymorphicViewSet(viewsets.ModelViewSet):
             elif "club" in types:
                 queryset = queryset.filter(polymorphic_ctype__model="noteclub")
             elif "special" in types:
-                queryset = queryset.filter(
-                    polymorphic_ctype__model="notespecial")
+                queryset = queryset.filter(polymorphic_ctype__model="notespecial")
             else:
                 queryset = queryset.none()
 
@@ -98,6 +97,8 @@ class AliasViewSet(viewsets.ModelViewSet):
     """
     queryset = Alias.objects.all()
     serializer_class = AliasSerializer
+    filter_backends = [SearchFilter]
+    search_fields = ['$normalized_name', '$name', '$note__polymorphic_ctype__model', ]
 
     def get_queryset(self):
         """
diff --git a/templates/note/conso_form.html b/templates/note/conso_form.html
index 7179fc58..35c2ab82 100644
--- a/templates/note/conso_form.html
+++ b/templates/note/conso_form.html
@@ -31,12 +31,9 @@
                         <ul class="list-group list-group-flush" id="note_list">
                         </ul>
                         <div class="card-body">
-                            <select name="source" data-placeholder="Note ..." data-minimum-input-length="1"
-                                    required id="note" data-autocomplete-light-language="fr"
-                                    data-autocomplete-light-url="/note/note-autocomplete/"
-                                    data-autocomplete-light-function="select2">
-                                <option value="" selected>---------</option>
-                            </select>
+                            <input class="rounded mx-auto d-block" type="text" id="note" />
+                            <ul class="list-group list-group-flush" id="alias_matched">
+                            </ul>
                         </div>
                     </div>
                 </div>
@@ -79,10 +76,10 @@
                                 <div class="d-inline-flex flex-wrap justify-content-center">
                                     {% for button in category.list %}
                                         {% if button.display %}
-                                        <button class="btn btn-outline-dark rounded-0 flex-fill"
-                                                id="button{{ button.id }}" name="button" value="{{ button.name }}">
-                                            {{ button.name }} ({{ button.amount | pretty_money }})
-                                        </button>
+                                            <button class="btn btn-outline-dark rounded-0 flex-fill"
+                                                    id="button{{ button.id }}" name="button" value="{{ button.name }}">
+                                                {{ button.name }} ({{ button.amount | pretty_money }})
+                                            </button>
                                         {% endif %}
                                     {% endfor %}
                                 </div>
@@ -145,12 +142,14 @@
     <script type="text/javascript">
         function pretty_money(value) {
             if (value % 100 === 0)
-                return (value < 0 ? "- " : "") + Math.round(Math.abs(value) / 100) + " €";
+                return (value < 0 ? "- " : "") + Math.floor(Math.abs(value) / 100) + " €";
             else
-                return (value < 0 ? "- " : "") + Math.round(Math.abs(value) / 100) + " € " + (Math.abs(value) % 100);
+                return (value < 0 ? "- " : "") + Math.floor(Math.abs(value) / 100) + " € " + (Math.abs(value) % 100);
         }
 
-        var consos = [];
+        let old_pattern = null;
+        let notes = [];
+        let consos = [];
 
         $(document).ready(function() {
             // If hash of a category in the URL, then select this category
@@ -167,34 +166,99 @@
             });
 
             let note_obj = $("#note");
-            note_obj.change(function() {
-                let name = $("#note option:selected").text();
-                let note = note_obj.val();
-                note_obj.val(0);
-                note_obj.text("");
-                var conso = null;
-                consos.forEach(function(c) {
-                    if (c[1] === note) {
-                        c[2] += 1;
-                        conso = c;
-                    }
-                });
-                if (conso == null)
-                    consos = consos.concat([[name, note, 1]]);
-                let note_list = $("#note_list");
-                var html = "";
-                consos.forEach(function(conso) {
-                   html += "<li class=\"list-group-item py-1 d-flex justify-content-between align-items-center\">" + conso[0] + "<span class=\"badge badge-dark badge-pill\">" + conso[2] + "</span></li>\n";
-                });
-                note_list.html(html);
+            note_obj.click(function() {
+                note_obj.val("");
+            });
+            note_obj.keyup(function() {
+                let pattern = note_obj.val();
+                if (pattern === old_pattern || pattern === "")
+                    return;
 
-                $.getJSON("/api/note/note/" + note + "/?format=json", function(note) {
-                    console.log(note);
-                    $("#user_note").text(name + " : " + pretty_money(note.balance));
-                    if (note.display_image == null)
-                        $("#profile_pic").attr('src', '/media/pic/default.png');
-                    else
-                        $("#profile_pic").attr('src', note.display_image);
+                old_pattern = pattern;
+
+                notes = [];
+                let aliases_matched_obj = $("#alias_matched");
+                let aliases_matched_html = "";
+                $.getJSON("/api/note/alias/?format=json&alias=" + pattern + "&search=user|club", function(aliases) {
+                    aliases.results.forEach(function(alias) {
+                        aliases_matched_html += "<li class=\"list-group-item py-1 d-flex justify-content-between align-items-center\"" +
+                            " id=\"alias_" + alias.normalized_name + "\">" + alias.name + "</li>\n";
+                        $.getJSON("/api/note/note/" + alias.note + "/?format=json", function(note) {
+                            notes += note;
+                            let alias_obj = $("#alias_" + alias.normalized_name);
+                            alias_obj.hover(function() {
+                                $("#user_note").text(alias.name + " : " + pretty_money(note.balance));
+                            if (note.display_image == null)
+                                $("#profile_pic").attr('src', '/media/pic/default.png');
+                            else
+                                $("#profile_pic").attr('src', note.display_image);
+                            });
+
+                            alias_obj.click(function() {
+                                note_obj.val("");
+                                var conso = null;
+                                consos.forEach(function(c) {
+                                    if (c[1] === note.id) {
+                                        c[3] += 1;
+                                        conso = c;
+                                    }
+                                });
+                                if (conso == null)
+                                    consos = consos.concat([[alias.name, note.id, note, 1]]);
+                                let note_list = $("#note_list");
+                                let html = "";
+                                consos.forEach(function(conso) {
+                                   html += "<li class=\"list-group-item py-1 d-flex justify-content-between align-items-center\"" +
+                                       " id=\"note_" + conso[1] + "\">" + conso[0] + "<span class=\"badge badge-dark badge-pill\">"
+                                       + conso[3] + "</span></li>\n";
+                                });
+
+                                note_list.html(html);
+
+                                consos.forEach(function(conso) {
+                                    let line_obj = $("#note_" + conso[1]);
+                                    line_obj.hover(function() {
+                                        $("#user_note").text(conso[0] + " : " + pretty_money(conso[2].balance));
+                                        if (conso[2].display_image == null)
+                                            $("#profile_pic").attr('src', '/media/pic/default.png');
+                                        else
+                                            $("#profile_pic").attr('src', conso[2].display_image);
+                                    });
+
+                                    function line_obj_click(c) {
+                                        return (function() {
+                                            let new_consos = [];
+                                            let html = "";
+                                            consos.forEach(function (conso) {
+                                                if (conso[3] > 1 || conso[1] !== c[1]) {
+                                                    conso[3] -= conso[1] === c[1] ? 1 : 0;
+                                                    new_consos = new_consos.concat([conso]);
+                                                    html += "<li class=\"list-group-item py-1 d-flex justify-content-between align-items-center\"" +
+                                                        " id=\"note_" + conso[1] + "\">" + conso[0] + "<span class=\"badge badge-dark badge-pill\">"
+                                                        + conso[3] + "</span></li>\n";
+                                                }
+                                            });
+                                            note_list.html(html);
+                                            consos.forEach(function (conso) {
+                                                $("#note_" + conso[1]).click(line_obj_click(conso));
+                                                line_obj.hover(function() {
+                                                    $("#user_note").text(conso[0] + " : " + pretty_money(conso[2].balance));
+                                                    if (conso[2].display_image == null)
+                                                        $("#profile_pic").attr('src', '/media/pic/default.png');
+                                                    else
+                                                        $("#profile_pic").attr('src', conso[2].display_image);
+                                                });
+                                            });
+                                            consos = new_consos;
+                                        });
+                                    }
+
+                                    line_obj.click(line_obj_click(conso));
+                                });
+                            });
+                        });
+                        aliases_matched_obj.html(aliases_matched_html);
+                    });
                 });
             });
 
@@ -205,7 +269,7 @@
                             $.post("/api/note/transaction/transaction/",
                             {
                                 "csrfmiddlewaretoken": "{{ csrf_token }}",
-                                "quantity": conso[2],
+                                "quantity": conso[3],
                                 "amount": {{ button.amount }},
                                 "reason": "{{ button.name }} ({{ button.category.name }})",
                                 "valid": true,