Fixed the currency dropdown when multiple fields present on single page.

public/js/firefly.js

@@ -1,7 +1,9 @@
 /* globals token, dateRangeConfig, $, */
 $(function () {
     "use strict";
-    $('.currencySelect').click(currencySelect);
+
+    // when you click on a currency, this happens:
+    $('.currency-option').click(currencySelect);
 
     var ranges = {};
     // range for the current month:
@@ -62,21 +64,51 @@ $(function () {
 
 function currencySelect(e) {
     "use strict";
-    var target = $(e.target);
+    // clicked on
+    var target = $(e.target); // target is the <A> tag.
+
+    // name of the field in question:
+    var name = target.data('name');
+
+    // id of menu button (used later on):
+    var menuID = 'currency_dropdown_' + name;
+
+    // the hidden input with the actual value of the selected currency:
+    var hiddenInputName = 'amount_currency_id_' + target.data('name');
+
+    // span with the current selection (next to the caret):
+    var spanId = 'currency_select_symbol_' + target.data('name');
+
+    // the selected currency symbol:
     var symbol = target.data('symbol');
-    var code = target.data('code');
+
+    // id of the selected currency.
     var id = target.data('id');
-    var fieldType = target.data('field');
-    var menu = $('.' + fieldType + 'CurrencyDropdown');
 
-    var symbolHolder = $('#' + fieldType + 'CurrentSymbol');
+    // update the hidden input:
-    symbolHolder.text(symbol);
+    $('input[name="' + hiddenInputName + '"]').val(id);
-    $('input[name="' + fieldType + '_currency_id"]').val(id);
 
-    // close dropdown (hack hack)
+    // update the symbol:
-    menu.click();
+    $('#' + spanId).text(symbol);
+
+    // close the menu (hack hack)
+    $('#' + menuID).click();
 
 
     return false;
+
+    //var code = target.data('code');
+    //var fieldType = target.data('field');
+    //var menu = $('.' + fieldType + 'CurrencyDropdown');
+    //
+    //var symbolHolder = $('#' + fieldType + 'CurrentSymbol');
+    //symbolHolder.text(symbol);
+    //$('input[name="' + fieldType + '_currency_id"]').val(id);
+    //
+    // close dropdown (hack hack)
+    //menu.click();
+
+
+    //return false;
 }
 

resources/twig/form/amount.twig

@@ -4,12 +4,18 @@
     <div class="col-sm-8">
         <div class="input-group">
             <div class="input-group-btn">
-                <button type="button" class="btn btn-default dropdown-toggle amountCurrencyDropdown" data-toggle="dropdown" aria-expanded="false">
+                <button type="button"
+                        class="btn btn-default dropdown-toggle currency-dropdown" data-toggle="dropdown" aria-expanded="false">
                     <span>{{ defaultCurrency.symbol|raw }}</span> <span class="caret"></span>
                 </button>
-                <ul class="dropdown-menu" role="menu">
+                <ul class="dropdown-menu currency-dropdown-menu" role="menu">
                     {% for currency in currencies %}
-                        <li><a href="#" class="currencySelect" data-id="{{ currency.id }}" data-field="amount" data-currency="{{ currency.code }}"
+                        <li>
+                            <a href="#"
+                               class="currency-option"
+                               data-id="{{ currency.id }}"
+                               data-name="{{ name }}"
+                               data-currency="{{ currency.code }}"
                                data-symbol="{{ currency.symbol|raw }}">{{ currency.name }}</a></li>
                     {% endfor %}
                 </ul>
@@ -21,5 +27,6 @@
 
         {% include 'form/feedback.twig' %}
     </div>
-    <input type="hidden" name="amount_currency_id" value="{{ defaultCurrency.id }}"/>
+
+    <input type="hidden" name="amount_currency_id_{{ name }}" value="{{ defaultCurrency.id }}"/>
 </div>

resources/twig/form/balance.twig

@@ -4,21 +4,29 @@
     <div class="col-sm-8">
         <div class="input-group">
             <div class="input-group-btn">
-                <button type="button" class="btn btn-default dropdown-toggle balanceCurrencyDropdown" data-toggle="dropdown" aria-expanded="false">
+                <button type="button"
-                    <span>{{ defaultCurrency.symbol|raw }}</span> <span class="caret"></span>
+                        class="btn btn-default dropdown-toggle currency-dropdown" id="currency_dropdown_{{ name }}" data-toggle="dropdown" aria-expanded="false">
+                    <span id="currency_select_symbol_{{ name }}">{{ defaultCurrency.symbol|raw }}</span> <span class="caret"></span>
                 </button>
-                <ul class="dropdown-menu" role="menu">
+                <ul class="dropdown-menu currency-dropdown-menu" role="menu">
                     {% for currency in currencies %}
-                        <li><a href="#" class="currencySelect" data-id="{{ currency.id }}" data-field="balance" data-currency="{{ currency.code }}"
+                        <li>
-                               data-symbol="{{ currency.symbol }}">{{ currency.name }}</a></li>
+                            <a href="#"
+                               class="currency-option"
+                               data-id="{{ currency.id }}"
+                               data-name="{{ name }}"
+                               data-currency="{{ currency.code }}"
+                               data-symbol="{{ currency.symbol|raw }}">{{ currency.name }}</a></li>
                     {% endfor %}
                 </ul>
             </div>
             {{ Form.input('number', name, value, options) }}
 
+
         </div>
+
         {% include 'form/feedback.twig' %}
     </div>
 
-    <input type="hidden" name="balance_currency_id" value="{{ defaultCurrency.id }}"/>
+    <input type="hidden" name="amount_currency_id_{{ name }}" value="{{ defaultCurrency.id }}"/>
 </div>