From 682b2b19d7bf2d3ed1e43381ebd4456241d07b81 Mon Sep 17 00:00:00 2001 From: Alexandre Iooss Date: Fri, 10 Apr 2020 21:05:06 +0200 Subject: [PATCH] Use Boostrap tooltips for search --- static/js/base.js | 35 +++++++++++++++++++++++------------ static/js/consos.js | 2 +- static/js/transfer.js | 4 ++-- 3 files changed, 26 insertions(+), 15 deletions(-) diff --git a/static/js/base.js b/static/js/base.js index 56c23c85..a4c09540 100644 --- a/static/js/base.js +++ b/static/js/base.js @@ -186,7 +186,6 @@ function removeNote(d, note_prefix = "note", notes_display, note_list_id, user_n /** * Generate an auto-complete field to query a note with its alias * @param field_id The identifier of the text field where the alias is typed - * @param alias_matched_id The div block identifier where the matched aliases are displayed * @param note_list_id The div block identifier where the notes of the buyers are displayed * @param notes An array containing the note objects of the buyers * @param notes_display An array containing the infos of the buyers: [alias, note id, note object, quantity] @@ -200,11 +199,21 @@ function removeNote(d, note_prefix = "note", notes_display, note_list_id, user_n * the associated note is not displayed. * Useful for a consumption if the item is selected before. */ -function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes_display, alias_prefix = "alias", +function autoCompleteNote(field_id, note_list_id, notes, notes_display, alias_prefix = "alias", note_prefix = "note", user_note_field = null, profile_pic_field = null, alias_click = null) { let field = $("#" + field_id); - // When the user clicks on the search field, it is immediately cleared + + // Configure tooltip + field.tooltip({ + html: true, + placement: 'bottom', + title: 'Loading...', + trigger: 'manual' + }); + + // Clear search on click field.click(function () { + field.tooltip('hide'); field.val(""); }); @@ -213,7 +222,7 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes // When the user type "Enter", the first alias is clicked field.keypress(function (event) { if (event.originalEvent.charCode === 13 && notes.length > 0) { - let li_obj = $("#" + alias_matched_id + " li").first(); + let li_obj = $(".tooltip-inner ul li").first(); displayNote(notes[0], li_obj.text(), user_note_field, profile_pic_field); li_obj.trigger("click"); } @@ -225,19 +234,16 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes return; let pattern = field.val(); + // If the pattern is not modified, we don't query the API if (pattern === old_pattern) return; old_pattern = pattern; notes.length = 0; - let aliases_matched_obj = $("#" + alias_matched_id); - let aliases_matched_html = ""; // get matched Alias with note associated if (pattern === "") { - aliases_matched_obj = $("#" + alias_matched_id); - aliases_matched_html = ""; - aliases_matched_obj.html("") + field.tooltip('hide'); notes.length = 0; return; } @@ -249,6 +255,9 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes // The response arrived too late, we stop the request if (pattern !== $("#" + field_id).val()) return; + + // Build tooltip content + let aliases_matched_html = ''; + + // Show tooltip + field.attr('data-original-title', aliases_matched_html).tooltip('show'); + consumers.results.forEach(function (consumer) { let note = consumer.note; let consumer_obj = $("#" + alias_prefix + "_" + consumer.id); @@ -266,8 +279,6 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes displayNote(consumer.note, consumer.name, user_note_field, profile_pic_field) }); consumer_obj.click(function () { - field.val(""); - old_pattern = ""; // reset input field var disp = null; notes_display.forEach(function (d) { // We compare the note ids diff --git a/static/js/consos.js b/static/js/consos.js index 76f5af9b..88f0cc38 100644 --- a/static/js/consos.js +++ b/static/js/consos.js @@ -78,7 +78,7 @@ notes_display = []; buttons = []; // When the user searches an alias, we update the auto-completion -autoCompleteNote("note", "alias_matched", "note_list", notes, notes_display, +autoCompleteNote("note", "note_list", notes, notes_display, "alias", "note", "user_note", "profile_pic", function() { if (buttons.length > 0 && $("#single_conso").is(":checked")) { consumeAll(); diff --git a/static/js/transfer.js b/static/js/transfer.js index 293e5071..899966fa 100644 --- a/static/js/transfer.js +++ b/static/js/transfer.js @@ -28,9 +28,9 @@ function reset() { } $(document).ready(function() { - autoCompleteNote("source_note", "source_alias_matched", "source_note_list", sources, sources_notes_display, + autoCompleteNote("source_note", "source_note_list", sources, sources_notes_display, "source_alias", "source_note", "user_note", "profile_pic"); - autoCompleteNote("dest_note", "dest_alias_matched", "dest_note_list", dests, dests_notes_display, + autoCompleteNote("dest_note", "dest_note_list", dests, dests_notes_display, "dest_alias", "dest_note", "user_note", "profile_pic", function() { if ($("#type_credit").is(":checked") || $("#type_debit").is(":checked")) { let last = dests_notes_display[dests_notes_display.length - 1];