Use Boostrap tooltips for search

This commit is contained in:
Alexandre Iooss 2020-04-10 21:05:06 +02:00
parent 0c70f15721
commit 682b2b19d7
No known key found for this signature in database
GPG Key ID: 6C79278F3FCDCC02
3 changed files with 26 additions and 15 deletions

View File

@ -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 * 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 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 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 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] * @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. * the associated note is not displayed.
* Useful for a consumption if the item is selected before. * 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) { note_prefix = "note", user_note_field = null, profile_pic_field = null, alias_click = null) {
let field = $("#" + field_id); 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.click(function () {
field.tooltip('hide');
field.val(""); 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 // When the user type "Enter", the first alias is clicked
field.keypress(function (event) { field.keypress(function (event) {
if (event.originalEvent.charCode === 13 && notes.length > 0) { 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); displayNote(notes[0], li_obj.text(), user_note_field, profile_pic_field);
li_obj.trigger("click"); li_obj.trigger("click");
} }
@ -225,19 +234,16 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes
return; return;
let pattern = field.val(); let pattern = field.val();
// If the pattern is not modified, we don't query the API // If the pattern is not modified, we don't query the API
if (pattern === old_pattern) if (pattern === old_pattern)
return; return;
old_pattern = pattern; old_pattern = pattern;
notes.length = 0; notes.length = 0;
let aliases_matched_obj = $("#" + alias_matched_id);
let aliases_matched_html = "";
// get matched Alias with note associated // get matched Alias with note associated
if (pattern === "") { if (pattern === "") {
aliases_matched_obj = $("#" + alias_matched_id); field.tooltip('hide');
aliases_matched_html = "";
aliases_matched_obj.html("")
notes.length = 0; notes.length = 0;
return; 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 // The response arrived too late, we stop the request
if (pattern !== $("#" + field_id).val()) if (pattern !== $("#" + field_id).val())
return; return;
// Build tooltip content
let aliases_matched_html = '<ul class="list-group list-group-flush">';
consumers.results.forEach(function (consumer) { consumers.results.forEach(function (consumer) {
let note = consumer.note; let note = consumer.note;
note.email_confirmed = consumer.email_confirmed; note.email_confirmed = consumer.email_confirmed;
@ -258,7 +267,11 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes
extra_css); extra_css);
notes.push(note); notes.push(note);
}); });
aliases_matched_obj.html(aliases_matched_html); aliases_matched_html += '</ul>';
// Show tooltip
field.attr('data-original-title', aliases_matched_html).tooltip('show');
consumers.results.forEach(function (consumer) { consumers.results.forEach(function (consumer) {
let note = consumer.note; let note = consumer.note;
let consumer_obj = $("#" + alias_prefix + "_" + consumer.id); 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) displayNote(consumer.note, consumer.name, user_note_field, profile_pic_field)
}); });
consumer_obj.click(function () { consumer_obj.click(function () {
field.val("");
old_pattern = ""; // reset input field
var disp = null; var disp = null;
notes_display.forEach(function (d) { notes_display.forEach(function (d) {
// We compare the note ids // We compare the note ids

View File

@ -78,7 +78,7 @@ notes_display = [];
buttons = []; buttons = [];
// When the user searches an alias, we update the auto-completion // 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() { "alias", "note", "user_note", "profile_pic", function() {
if (buttons.length > 0 && $("#single_conso").is(":checked")) { if (buttons.length > 0 && $("#single_conso").is(":checked")) {
consumeAll(); consumeAll();

View File

@ -28,9 +28,9 @@ function reset() {
} }
$(document).ready(function() { $(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"); "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() { "dest_alias", "dest_note", "user_note", "profile_pic", function() {
if ($("#type_credit").is(":checked") || $("#type_debit").is(":checked")) { if ($("#type_credit").is(":checked") || $("#type_debit").is(":checked")) {
let last = dests_notes_display[dests_notes_display.length - 1]; let last = dests_notes_display[dests_notes_display.length - 1];