Modernise the typeahead stuff to squash some bugs.

This commit is contained in:
James Cole 2018-09-17 17:41:34 +02:00
parent f76fdedd25
commit 744d45fb04
No known key found for this signature in database
GPG Key ID: C16961E655E74B5E
19 changed files with 228 additions and 148 deletions

View File

@ -18,8 +18,6 @@
* along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
*/
/** global: what, Modernizr, selectsForeignCurrency, convertForeignToNative, validateCurrencyForTransfer, convertSourceToDestination, journalData, journal, accountInfo, exchangeRateInstructions, currencyInfo */
$(document).ready(function () {
"use strict";
setAutocompletes();
@ -30,47 +28,7 @@ $(document).ready(function () {
* Set the auto-complete JSON things.
*/
function setAutocompletes() {
// do categories auto complete:
var categories = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: 'json/categories',
filter: function (list) {
return $.map(list, function (name) {
return {name: name};
});
}
}
});
categories.initialize();
$('input[name="category"]').typeahead({}, {source: categories, displayKey: 'name', autoSelect: false});
// do tags auto complete:
var tagTags = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: 'json/tags',
filter: function (list) {
return $.map(list, function (tagTag) {
return {name: tagTag};
});
}
}
});
tagTags.initialize();
$('input[name="tags"]').tagsinput({
typeaheadjs: {
name: 'tags',
displayKey: 'name',
valueKey: 'name',
source: tagTags.ttAdapter()
}
});
initCategoryAC();
initTagsAC();
}

127
public/js/ff/common/autocomplete.js vendored Normal file
View File

@ -0,0 +1,127 @@
/*
* autocomplete.js
* Copyright (c) 2018 thegrumpydictator@gmail.com
*
* This file is part of Firefly III.
*
* Firefly III is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* Firefly III is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
*/
/**
* Do tags auto complete.
*/
function initTagsAC() {
var tagTags = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: 'json/tags',
filter: function (list) {
return $.map(list, function (tagTag) {
return {name: tagTag};
});
}
}
});
tagTags.initialize();
$('input[name="tags"]').tagsinput({
typeaheadjs: {
name: 'tags',
displayKey: 'name',
valueKey: 'name',
source: tagTags.ttAdapter()
}
});
}
/**
* Do destination name (expense accounts) auto complete.
*/
function initExpenseAC() {
initExpenseACField('destination_name');
}
/**
* Do destination name (expense accounts) auto complete.
*/
function initExpenseACField(fieldName) {
if ($('input[name="' + fieldName + '"]').length > 0) {
console.log('Init expense AC for field "'+fieldName+'"');
var destNames = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: 'json/expense-accounts',
filter: function (list) {
return $.map(list, function (name) {
return {name: name};
});
}
}
});
destNames.initialize();
$('input[name="' + fieldName + '"]').typeahead({}, {source: destNames, displayKey: 'name', autoSelect: false});
}
}
/**
* Do source name (revenue accounts) auto complete.
*/
function initRevenueAC() {
initRevenueACField('source_name');
}
/**
* Do source name (revenue accounts) auto complete.
*/
function initRevenueACField(fieldName) {
if ($('input[name="' + fieldName + '"]').length > 0) {
console.log('Init revenue AC for field "'+fieldName+'"');
var sourceNames = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: 'json/revenue-accounts',
filter: function (list) {
return $.map(list, function (name) {
return {name: name};
});
}
}
});
sourceNames.initialize();
$('input[name="' + fieldName + '"]').typeahead({}, {source: sourceNames, displayKey: 'name', autoSelect: false});
}
}
/**
* Do categories auto complete.
*/
function initCategoryAC() {
var categories = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: 'json/categories',
filter: function (list) {
return $.map(list, function (name) {
return {name: name};
});
}
}
});
categories.initialize();
$('input[name="category"]').typeahead({}, {source: categories, displayKey: 'name', autoSelect: false});
}

View File

@ -137,39 +137,10 @@ function parseRepetitionSuggestions(data) {
}
function initializeAutoComplete() {
// auto complete things:
$.getJSON('json/tags').done(function (data) {
var opt = {
typeahead: {
source: data,
afterSelect: function () {
this.$element.val("");
},
autoSelect: false,
},
autoSelect: false,
};
$('input[name="tags"]').tagsinput(
opt
);
});
if ($('input[name="destination_name"]').length > 0) {
$.getJSON('json/expense-accounts').done(function (data) {
$('input[name="destination_name"]').typeahead({source: data, autoSelect: false});
});
}
if ($('input[name="source_name"]').length > 0) {
$.getJSON('json/revenue-accounts').done(function (data) {
$('input[name="source_name"]').typeahead({source: data, autoSelect: false});
});
}
$.getJSON('json/categories').done(function (data) {
$('input[name="category"]').typeahead({source: data, autoSelect: false});
});
initTagsAC();
initExpenseAC();
initRevenueAC();
initCategoryAC();
}
/**

View File

@ -109,11 +109,11 @@ function respondToFirstDateChange() {
// preselected value:
var preSelected = currentRepType;
if(preSelected === '') {
if (preSelected === '') {
preSelected = select.val();
}
$.getJSON(suggestUri, {date: date,pre_select: preSelected,past:true}).fail(function () {
$.getJSON(suggestUri, {date: date, pre_select: preSelected, past: true}).fail(function () {
console.error('Could not load repetition suggestions');
alert('Could not load repetition suggestions');
}).done(parseRepetitionSuggestions);
@ -128,8 +128,8 @@ function parseRepetitionSuggestions(data) {
if (data.hasOwnProperty(k)) {
console.log('label: ' + data[k].label + ', selected: ' + data[k].selected);
opt = $('<option>').val(k).attr('label', data[k].label).text(data[k].label);
if(data[k].selected) {
opt.attr('selected','selected');
if (data[k].selected) {
opt.attr('selected', 'selected');
}
select.append(opt);
}
@ -138,39 +138,10 @@ function parseRepetitionSuggestions(data) {
}
function initializeAutoComplete() {
// auto complete things:
$.getJSON('json/tags').done(function (data) {
var opt = {
typeahead: {
source: data,
afterSelect: function () {
this.$element.val("");
},
autoSelect: false,
},
autoSelect: false,
};
$('input[name="tags"]').tagsinput(
opt
);
});
if ($('input[name="destination_name"]').length > 0) {
$.getJSON('json/expense-accounts').done(function (data) {
$('input[name="destination_name"]').typeahead({source: data, autoSelect: false});
});
}
if ($('input[name="source_name"]').length > 0) {
$.getJSON('json/revenue-accounts').done(function (data) {
$('input[name="source_name"]').typeahead({source: data, autoSelect: false});
});
}
$.getJSON('json/categories').done(function (data) {
$('input[name="category"]').typeahead({source: data, autoSelect: false});
});
initTagsAC();
initExpenseAC();
initRevenueAC();
initCategoryAC();
}
/**

View File

@ -362,13 +362,21 @@ function updateTriggerInput(selectList) {
function createAutoComplete(input, URI) {
console.log('Now in createAutoComplete().')
input.typeahead('destroy');
$.getJSON(URI).done(function (data) {
console.log('Input now has auto complete from URI ' + URI);
input.typeahead({source: data, autoSelect: false});
}).fail(function () {
console.log('Could not grab URI ' + URI + ' so autocomplete will not work');
});
var source = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: URI,
filter: function (list) {
return $.map(list, function (name) {
return {name: name};
});
}
}
});
source.initialize();
input.typeahead({}, {source: source, displayKey: 'name', autoSelect: false});
}
function testRuleTriggers() {

34
public/js/ff/transactions/convert.js vendored Normal file
View File

@ -0,0 +1,34 @@
/*
* convert.js
* Copyright (c) 2018 thegrumpydictator@gmail.com
*
* This file is part of Firefly III.
*
* Firefly III is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* Firefly III is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
*/
$(document).ready(function () {
"use strict";
setAutocompletes();
});
/**
* Set the auto-complete JSON things.
*/
function setAutocompletes() {
initRevenueACField('source_account_revenue');
initExpenseACField('destination_account_expense');
}

View File

@ -22,19 +22,28 @@
$(function () {
"use strict";
var transactions = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: autoCompleteUri,
filter: function (list) {
return $.map(list, function (name) {
return {name: name};
});
}
}
});
transactions.initialize();
var input=$("#link_other");
input.typeahead({}, {source: transactions, displayKey: 'name', autoSelect: false});
$.getJSON(autoCompleteUri).done(function (data) {
var $input = $("#link_other");
$input.typeahead({
source: data,
autoSelect: true
});
$input.change(function () {
var current = $input.typeahead("getActive");
input.change(function () {
var current = input.typeahead("getActive");
if (current) {
// Some item from your model is active!
if (current.name.toLowerCase() === $input.val().toLowerCase()) {
if (current.name.toLowerCase() ===
input.val().toLowerCase()) {
// This means the exact match is found. Use toLowerCase() if you want case insensitive match.
$('input[name="link_journal_id"]').val(current.id);
} else {
@ -44,7 +53,4 @@ $(function () {
$('input[name="link_journal_id"]').val(0);
}
});
});
});

View File

@ -97,6 +97,7 @@
var what = "{{ what }}";
</script>
<script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/ff/common/autocomplete.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/jquery-ui.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/modernizr-custom.js?v={{ FF_VERSION }}"></script>

View File

@ -194,7 +194,8 @@
{% endblock %}
{% block scripts %}
<script type="text/javascript" src="js/lib/modernizr-custom.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/ff/common/autocomplete.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/jquery-ui.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="lib/fc/fullcalendar.min.js?v={{ FF_VERSION }}"></script>

View File

@ -215,7 +215,8 @@
{% endblock %}
{% block scripts %}
<script type="text/javascript" src="js/lib/modernizr-custom.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/ff/common/autocomplete.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/jquery-ui.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="lib/fc/fullcalendar.min.js?v={{ FF_VERSION }}"></script>

View File

@ -145,7 +145,7 @@
{% endblock %}
{% block scripts %}
<script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript">
var triggerCount = {{ triggerCount }};
var actionCount = {{ actionCount }};

View File

@ -128,7 +128,7 @@
{% endblock %}
{% block scripts %}
<script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript">
var triggerCount = {{ triggerCount }};
var actionCount = {{ actionCount }};

View File

@ -128,7 +128,8 @@
<script type="text/javascript">
var what = "";
</script>
<script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/ff/common/autocomplete.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/ff/transactions/mass/edit-bulk.js?v={{ FF_VERSION }}"></script>
{% endblock %}

View File

@ -215,10 +215,7 @@
{% endblock %}
{% block scripts %}
<script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}"></script>
{% endblock %}
{% block styles %}
<link href="css/bootstrap-tagsinput.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet" media="all">
<script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/ff/common/autocomplete.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/ff/transactions/convert.js?v={{ FF_VERSION }}"></script>
{% endblock %}

View File

@ -136,6 +136,7 @@
<script type="text/javascript">
var what = "";
</script>
<script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/ff/common/autocomplete.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/ff/transactions/mass/edit.js?v={{ FF_VERSION }}"></script>
{% endblock %}

View File

@ -463,6 +463,6 @@
<script type="text/javascript">
var autoCompleteUri = "{{ route('json.journals-with-id',[journal.id]) }}";
</script>
<script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/ff/transactions/show.js?v={{ FF_VERSION }}"></script>
{% endblock %}

View File

@ -242,6 +242,7 @@
</script>
<script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/ff/common/autocomplete.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/modernizr-custom.js?v={{ FF_VERSION }}"></script>

View File

@ -248,7 +248,8 @@
<script type="text/javascript">
var what = "{{ what }}";
</script>
<script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/ff/common/autocomplete.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/jquery-ui.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/modernizr-custom.js?v={{ FF_VERSION }}"></script>

View File

@ -328,7 +328,8 @@
var originalForeignSum = {{ preFilled.journal_foreign_amount }};
var what = "{{ preFilled.what }}";
</script>
<script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/ff/common/autocomplete.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/jquery-ui.min.js?v={{ FF_VERSION }}"></script>
<script type="text/javascript" src="js/lib/modernizr-custom.js?v={{ FF_VERSION }}"></script>