Improve a lot the interface

This commit is contained in:
Yohann D'ANELLO 2020-03-12 01:10:52 +01:00
parent f748f533b2
commit a2f54d48a7
2 changed files with 108 additions and 43 deletions

View File

@ -82,8 +82,7 @@ class NotePolymorphicViewSet(viewsets.ModelViewSet):
elif "club" in types: elif "club" in types:
queryset = queryset.filter(polymorphic_ctype__model="noteclub") queryset = queryset.filter(polymorphic_ctype__model="noteclub")
elif "special" in types: elif "special" in types:
queryset = queryset.filter( queryset = queryset.filter(polymorphic_ctype__model="notespecial")
polymorphic_ctype__model="notespecial")
else: else:
queryset = queryset.none() queryset = queryset.none()
@ -98,6 +97,8 @@ class AliasViewSet(viewsets.ModelViewSet):
""" """
queryset = Alias.objects.all() queryset = Alias.objects.all()
serializer_class = AliasSerializer serializer_class = AliasSerializer
filter_backends = [SearchFilter]
search_fields = ['$normalized_name', '$name', '$note__polymorphic_ctype__model', ]
def get_queryset(self): def get_queryset(self):
""" """

View File

@ -31,12 +31,9 @@
<ul class="list-group list-group-flush" id="note_list"> <ul class="list-group list-group-flush" id="note_list">
</ul> </ul>
<div class="card-body"> <div class="card-body">
<select name="source" data-placeholder="Note ..." data-minimum-input-length="1" <input class="rounded mx-auto d-block" type="text" id="note" />
required id="note" data-autocomplete-light-language="fr" <ul class="list-group list-group-flush" id="alias_matched">
data-autocomplete-light-url="/note/note-autocomplete/" </ul>
data-autocomplete-light-function="select2">
<option value="" selected>---------</option>
</select>
</div> </div>
</div> </div>
</div> </div>
@ -79,10 +76,10 @@
<div class="d-inline-flex flex-wrap justify-content-center"> <div class="d-inline-flex flex-wrap justify-content-center">
{% for button in category.list %} {% for button in category.list %}
{% if button.display %} {% if button.display %}
<button class="btn btn-outline-dark rounded-0 flex-fill" <button class="btn btn-outline-dark rounded-0 flex-fill"
id="button{{ button.id }}" name="button" value="{{ button.name }}"> id="button{{ button.id }}" name="button" value="{{ button.name }}">
{{ button.name }} ({{ button.amount | pretty_money }}) {{ button.name }} ({{ button.amount | pretty_money }})
</button> </button>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>
@ -145,12 +142,14 @@
<script type="text/javascript"> <script type="text/javascript">
function pretty_money(value) { function pretty_money(value) {
if (value % 100 === 0) if (value % 100 === 0)
return (value < 0 ? "- " : "") + Math.round(Math.abs(value) / 100) + " "; return (value < 0 ? "- " : "") + Math.floor(Math.abs(value) / 100) + " ";
else 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() { $(document).ready(function() {
// If hash of a category in the URL, then select this category // If hash of a category in the URL, then select this category
@ -167,34 +166,99 @@
}); });
let note_obj = $("#note"); let note_obj = $("#note");
note_obj.change(function() { note_obj.click(function() {
let name = $("#note option:selected").text(); note_obj.val("");
let note = note_obj.val(); });
note_obj.val(0); note_obj.keyup(function() {
note_obj.text(""); let pattern = note_obj.val();
var conso = null; if (pattern === old_pattern || pattern === "")
consos.forEach(function(c) { return;
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);
$.getJSON("/api/note/note/" + note + "/?format=json", function(note) { old_pattern = pattern;
console.log(note);
$("#user_note").text(name + " : " + pretty_money(note.balance)); notes = [];
if (note.display_image == null) let aliases_matched_obj = $("#alias_matched");
$("#profile_pic").attr('src', '/media/pic/default.png'); let aliases_matched_html = "";
else $.getJSON("/api/note/alias/?format=json&alias=" + pattern + "&search=user|club", function(aliases) {
$("#profile_pic").attr('src', note.display_image); 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/", $.post("/api/note/transaction/transaction/",
{ {
"csrfmiddlewaretoken": "{{ csrf_token }}", "csrfmiddlewaretoken": "{{ csrf_token }}",
"quantity": conso[2], "quantity": conso[3],
"amount": {{ button.amount }}, "amount": {{ button.amount }},
"reason": "{{ button.name }} ({{ button.category.name }})", "reason": "{{ button.name }} ({{ button.category.name }})",
"valid": true, "valid": true,