Fix some v2 issues.

frontend/src/components/dashboard/BudgetLimitRow.vue

@@ -30,7 +30,6 @@
              aria-valuemax="100" aria-valuemin="0" class="progress-bar bg-success" role="progressbar">
                       <span v-if="budgetLimit.pctGreen > 35">
                         {{ $t('firefly.spent_x_of_y', {amount: Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimit.currency_code}).format(budgetLimit.spent), total: Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimit.currency_code}).format(budgetLimit.amount)}) }}
-                        <!--  -->
                       </span>
 
 
@@ -45,7 +44,7 @@
 
         <div :aria-valuenow="budgetLimit.pctRed" :style="'width: '+ budgetLimit.pctRed + '%;'"
              aria-valuemax="100" aria-valuemin="0" class="progress-bar bg-danger" role="progressbar">
-                      <span v-if="budgetLimit.pctOrange <= 50 && budgetLimit.pctRed > 35" class="text-muted">
+                      <span v-if="budgetLimit.pctOrange <= 50 && budgetLimit.pctRed > 35" class="text-white">
                         {{ $t('firefly.spent_x_of_y', {amount: Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimit.currency_code}).format(budgetLimit.spent), total: Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimit.currency_code}).format(budgetLimit.amount)}) }}
                       </span>
         </div>

frontend/src/components/dashboard/BudgetRow.vue

@@ -24,6 +24,7 @@
     <td style="width:25%;">
       <a :href="'./budgets/show/' + budget.id">{{ budget.name }}</a>
     </td>
+    <td>&nbsp;</td>
     <td class="align-middle text-right">
       <span class="text-danger">
         {{ Intl.NumberFormat(locale, {style: 'currency', currency: budget.currency_code}).format(parseFloat(budget.spent)) }}

frontend/src/components/dashboard/MainBudgetList.vue

@@ -214,8 +214,8 @@ export default {
               let pctGreen = 0;
               let pctOrange = 0;
               let pctRed = 0;
-              //console.log('Collected "' + period + '" budget limit #' + currentId + ' (part of budget #' + budgetId + ')');
-              //console.log('Spent ' + spentFloat + ' of ' + amount);
+              console.log('Collected "' + period + '" budget limit #' + currentId + ' (part of budget #' + budgetId + ')');
+              console.log('Spent ' + spentFloatPos + ' of ' + amount);
 
               // remove budget info from rawBudgets if it's there:
               this.filterBudgets(budgetId, currencyId);
@@ -230,6 +230,12 @@ export default {
                 pctOrange = (spentFloatPos / amount) * 100;
                 pctRed = 100 - pctOrange;
               }
+              // spent exactly on budget
+              if (0.0 !== spentFloatPos && spentFloatPos === amount) {
+                pctOrange = 0;
+                pctRed = 100;
+              }
+
               let obj = {
                 id: currentId,
                 amount: current.attributes.amount,

frontend/src/components/transactions/Create.vue

@@ -31,6 +31,7 @@
             :count="transactions.length"
             :custom-fields="customFields"
             :date="date"
+            ref="splitForms"
             :destination-allowed-types="destinationAllowedTypes"
             :index="index"
             :source-allowed-types="sourceAllowedTypes"
@@ -433,6 +434,12 @@ export default {
       this.updateField({index: payload.index, field: payload.direction + '_account_currency_symbol', value: payload.currency_symbol});
 
       //this.calculateTransactionType(payload.index);
+      if('source' === payload.direction && true === payload.user_selected) {
+        this.$refs.splitForms[payload.index].$refs.destinationAccount.giveFocus();
+      }
+      if('destination' === payload.direction && true === payload.user_selected) {
+        this.$refs.splitForms[payload.index].$refs.amount.giveFocus();
+      }
     },
     storeField: function (payload) {
       this.updateField(payload);

frontend/src/components/transactions/SplitForm.vue

@@ -58,6 +58,8 @@
                     :source-allowed-types="sourceAllowedTypes"
                     :transaction-type="transactionType"
                     direction="source"
+                    ref="sourceAccount"
+                    v-on:selected-account="triggerNextAccount($event)"
                 />
               </div>
               <!-- switcharoo! -->
@@ -79,6 +81,7 @@
                     :destination-allowed-types="destinationAllowedTypes"
                     :errors="transaction.errors.destination"
                     :index="index"
+                    ref="destinationAccount"
                     :transaction-type="transactionType"
                     :source-allowed-types="sourceAllowedTypes"
                     direction="destination"
@@ -93,6 +96,7 @@
                 <!-- AMOUNT -->
                 <TransactionAmount
                     v-on="$listeners"
+                    ref="amount"
                     :amount="transaction.amount"
                     :destination-currency-symbol="this.transaction.destination_account_currency_symbol"
                     :errors="transaction.errors.amount"
@@ -379,6 +383,13 @@ export default {
       // console.log('Will remove transaction ' + this.index);
       this.$emit('remove-transaction', {index: this.index});
     },
+    triggerNextAccount: function(e) {
+      //alert(e);
+      if('source' === e) {
+        console.log('Jump to destination!');
+        this.$refs.destinationAccount.giveFocus();
+      }
+    }
   },
   computed: {
     splitDate: function () {

frontend/src/components/transactions/TransactionAccount.vue

@@ -37,6 +37,7 @@
         :placeholder="$t('firefly.' + direction + '_account')"
         :serializer="item => item.name_with_balance"
         :showOnFocus=true
+        ref="inputThing"
         aria-autocomplete="none"
         autocomplete="off"
         @hit="userSelectedAccount"
@@ -119,6 +120,12 @@ export default {
     getACURL: function (types, query) {
       return './api/v1/autocomplete/accounts?types=' + types.join(',') + '&query=' + query;
     },
+    giveFocus: function() {
+      console.log('I want focus! now OK: ' + this.direction + ' l: ' + this.accounts.length);
+      //console.log(this.$refs.inputThing.$refs.input.value);
+      this.$refs.inputThing.$refs.input.focus();
+      console.log(this.$refs.inputThing.isFocused);
+    },
     userSelectedAccount: function (event) {
       // console.log('userSelectedAccount!');
       // console.log('To prevent invalid propogation, set selectedAccountTrigger = true');
@@ -205,10 +212,14 @@ export default {
                      currency_id: value.currency_id,
                      currency_code: value.currency_code,
                      currency_symbol: value.currency_symbol,
+                     user_selected: true,
                    }
+                   // jump to next field somehow.
+
         );
         //console.log('watch::selectedAccount() will now set accountName because selectedAccountTrigger = true');
         this.accountName = value.name;
+
       }
       if (false === this.selectedAccountTrigger) {
         //console.log('watch::selectedAccount() will NOT set accountName because selectedAccountTrigger = false');
@@ -238,6 +249,7 @@ export default {
                      currency_id: null,
                      currency_code: null,
                      currency_symbol: null,
+                     user_selected: false
                    }
         );
         // this.account = {name: value, type: null, id: null, currency_id: null, currency_code: null, currency_symbol: null};

frontend/src/components/transactions/TransactionAmount.vue

@@ -33,6 +33,7 @@
           autocomplete="off"
           name="amount[]"
           type="number"
+          ref="input"
           step="any"
       >
     </div>
@@ -71,7 +72,10 @@ export default {
   methods: {
     formatNumber(str) {
       return parseFloat(str).toFixed(this.fractionDigits);
-    }
+    },
+    giveFocus: function() {
+      this.$refs.input.focus();
+    },
   },
   data() {
     return {