Expand the multi-select to various other fields.

public/js/ff/reports/index.js

@@ -8,12 +8,16 @@
  * See the LICENSE file for details.
  */
 
-/** global: minDate, nonSelectedText, allSelectedText */
+/** global: minDate, nonSelectedText, allSelectedText, filterPlaceholder */
 
 var defaultMultiSelect = {
     disableIfEmpty: true,
     nonSelectedText: nonSelectedText,
-    allSelectedText: allSelectedText
+    allSelectedText: allSelectedText,
+    includeSelectAllOption: true,
+    enableFiltering: true,
+    enableCaseInsensitiveFiltering: true,
+    filterPlaceholder: filterPlaceholder
 };
 
 $(function () {
@@ -33,11 +37,12 @@ $(function () {
         );
 
 
-        // set values from cookies, if any:
+        // set report type from cookie, if any:
         if (!(readCookie('report-type') === null)) {
             $('select[name="report_type"]').val(readCookie('report-type'));
         }
 
+        // set accounts from cookie
         if ((readCookie('report-accounts') !== null)) {
             var arr = readCookie('report-accounts').split(',');
             arr.forEach(function (val) {
@@ -48,7 +53,7 @@ $(function () {
         // make account select a hip new bootstrap multi-select thing.
         $('#inputAccounts').multiselect(defaultMultiSelect);
 
-        // set date:
+        // set date from cookie
         var startStr = readCookie('report-start');
         var endStr = readCookie('report-end');
         if (startStr !== null && endStr !== null && startStr.length == 8 && endStr.length == 8) {
@@ -91,16 +96,18 @@ function setOptionalFromCookies() {
     if ((readCookie('report-categories') !== null)) {
         arr = readCookie('report-categories').split(',');
         arr.forEach(function (val) {
-            $('input[class="category-checkbox"][type="checkbox"][value="' + val + '"]').prop('checked', true);
+            $('#inputCategories').find('option[value="' + val + '"]').prop('selected', true);
         });
+        $('#inputCategories').multiselect(defaultMultiSelect);
     }
 
     // and budgets!
     if ((readCookie('report-budgets') !== null)) {
         arr = readCookie('report-budgets').split(',');
         arr.forEach(function (val) {
-            $('input[class="budget-checkbox"][type="checkbox"][value="' + val + '"]').prop('checked', true);
+            $('#inputBudgets').find('option[value="' + val + '"]').prop('selected', true);
         });
+        $('#inputBudgets').multiselect(defaultMultiSelect);
     }
 }
 

resources/lang/en_US/firefly.php

@@ -112,6 +112,7 @@ return [
     'transaction_journal_other_options'          => 'Other options',
     'multi_select_no_selection'                  => 'None selected',
     'multi_select_all_selected'                  => 'All selected',
+    'multi_select_filter_placeholder'            => 'Find..',
 
 
     // repeat frequencies:

resources/views/reports/index.twig

@@ -215,8 +215,8 @@
         var picker;
         var nonSelectedText = "{{ 'multi_select_no_selection'|_ }}";
         var allSelectedText = "{{ 'multi_select_all_selected'|_ }}";
+        var filterPlaceholder = "{{ 'multi_select_filter_placeholder'|_ }}";
     </script>
     <script type="text/javascript" src="js/lib/bootstrap-multiselect.js"></script>
-
     <script type="text/javascript" src="js/ff/reports/index.js"></script>
 {% endblock %}

resources/views/reports/options/budget.twig

@@ -1,8 +1,8 @@
 <p>
     {{ 'select_budget'|_ }}
 </p>
-{% for budget in budgets %}
-<label class="checkbox-inline">
-    <input type="checkbox" class="budget-checkbox" name="budget[]" value="{{ budget.id }}"> {{ budget.name }}
-</label>
-{% endfor %}
+<select id="inputBudgets" name="budget[]" multiple="multiple" class="form-control">
+    {% for budget in budgets %}
+        <option value="{{ budget.id }}" label="{{ budget.name }}">{{ budget.name }}</option>
+    {% endfor %}
+</select>

resources/views/reports/options/category.twig

@@ -1,8 +1,8 @@
 <p>
     {{ 'select_category'|_ }}
 </p>
-{% for category in categories %}
-<label class="checkbox-inline">
-    <input type="checkbox" class="category-checkbox" name="category[]" value="{{ category.id }}"> {{ category.name }}
-</label>
-{% endfor %}
+<select id="inputCategories" name="category[]" multiple="multiple" class="form-control">
+    {% for category in categories %}
+        <option value="{{ category.id }}" label="{{ category.name }}">{{ category.name }}</option>
+    {% endfor %}
+</select>