From f32bdd6c76c1dfac7f4bd9d7c0324e35528e59e6 Mon Sep 17 00:00:00 2001
From: James Cole <james@firefly-iii.org>
Date: Fri, 10 Dec 2021 16:42:02 +0100
Subject: [PATCH] Fix various issues and remove debug comments.

---
 frontend/src/components/accounts/Create.vue   |   4 +-
 frontend/src/components/accounts/Index.vue    |   4 -
 frontend/src/components/accounts/Show.vue     |  18 +-
 frontend/src/components/bills/Create.vue      | 204 +++++++++++-------
 frontend/src/components/bills/Index.vue       |   8 +-
 .../components/dashboard/MainBudgetList.vue   |   6 +-
 .../components/form/GenericAttachments.vue    |  16 +-
 .../store/modules/transactions/create.js      |   8 +-
 .../src/components/transactions/Create.vue    |   6 +-
 .../src/components/transactions/Index.vue     |   2 +-
 .../src/components/transactions/SplitForm.vue |   4 +-
 .../components/transactions/SplitPills.vue    |  29 +--
 .../transactions/TransactionAccount.vue       |  13 +-
 .../transactions/TransactionAmount.vue        |   9 +-
 .../transactions/TransactionBill.vue          |   5 +
 .../transactions/TransactionBudget.vue        |   5 +
 .../transactions/TransactionCategory.vue      |   7 +-
 .../transactions/TransactionDate.vue          |   9 +-
 .../transactions/TransactionForeignAmount.vue |   6 +
 .../TransactionForeignCurrency.vue            |   7 +-
 .../transactions/TransactionListLarge.vue     |  14 +-
 .../transactions/TransactionTags.vue          |   1 +
 22 files changed, 240 insertions(+), 145 deletions(-)

diff --git a/frontend/src/components/accounts/Create.vue b/frontend/src/components/accounts/Create.vue
index eba5864e1a..78c5c6ec95 100644
--- a/frontend/src/components/accounts/Create.vue
+++ b/frontend/src/components/accounts/Create.vue
@@ -275,8 +275,8 @@ export default {
       this.hasAttachments = false;
     },
     uploadedAttachments: function (e) {
-      console.log('Response to event uploaded-attachments');
-      console.log(e);
+      // console.log('Response to event uploaded-attachments');
+      // console.log(e);
       this.finishSubmission();
     },
     submitForm: function (e) {
diff --git a/frontend/src/components/accounts/Index.vue b/frontend/src/components/accounts/Index.vue
index d3c9c15ad7..440a93d9c2 100644
--- a/frontend/src/components/accounts/Index.vue
+++ b/frontend/src/components/accounts/Index.vue
@@ -177,13 +177,9 @@
 import {mapGetters, mapMutations} from "vuex";
 import Sortable from "sortablejs";
 import format from "date-fns/format";
-// import {setup} from 'axios-cache-adapter';
-// import {cacheAdapterEnhancer} from 'axios-extensions';
 import {configureAxios} from "../../shared/forageStore";
 
 
-// get all and cache, dont keep the table busy.
-
 export default {
   name: "Index",
   props: {
diff --git a/frontend/src/components/accounts/Show.vue b/frontend/src/components/accounts/Show.vue
index 98dbbf0d39..bb40688054 100644
--- a/frontend/src/components/accounts/Show.vue
+++ b/frontend/src/components/accounts/Show.vue
@@ -80,8 +80,8 @@
 
 <script>
 import TransactionListLarge from "../transactions/TransactionListLarge";
-import format from "date-fns/format";
 import {mapGetters} from "vuex";
+import format from "date-fns/format";
 import {configureAxios} from "../../shared/forageStore";
 
 export default {
@@ -147,32 +147,36 @@ export default {
       this.updatePageTitle();
     },
     getTransactions: function () {
+      // console.log('getTransactions()');
       if (this.showReady && !this.loading) {
+        // console.log('Show ready, not loading, go for download');
         this.loading = true;
+        this.rawTransactions = [];
         configureAxios().then(async (api) => {
           // console.log('Now getTransactions() x Start');
           let startStr = format(this.start, 'y-MM-dd');
           let endStr = format(this.end, 'y-MM-dd');
-          this.rawTransactions = [];
-
-          let url = './api/v1/accounts/' + this.accountId + '/transactions?page=1&limit=' + this.perPage + '&start=' + startStr + '&end=' + endStr + '&cache=' + this.cacheKey;
+          let url = './api/v1/accounts/' + this.accountId + '/transactions?page=' + this.currentPage + '&limit=' + this.perPage + '&start=' + startStr + '&end=' + endStr + '&cache=' + this.cacheKey;
 
           api.get(url)
               .then(response => {
                       // console.log('Now getTransactions() DONE!');
                       this.total = parseInt(response.data.meta.pagination.total);
+                      let transactions = response.data.data;
+                      // console.log('Have downloaded ' + transactions.length + ' transactions');
+                      // console.log(response.data);
                       this.rawTransactions = response.data.data;
                       this.loading = false;
                     }
               );
         });
-
       }
+
     },
     jumpToPage: function (event) {
-      // console.log('noticed a change!');
+      // console.log('noticed a change in account/show!');
       this.currentPage = event.page;
-      this.downloadTransactionList(event.page);
+      this.getTransactions();
     },
   },
   watch: {
diff --git a/frontend/src/components/bills/Create.vue b/frontend/src/components/bills/Create.vue
index 6533154a81..269c8d2e5f 100644
--- a/frontend/src/components/bills/Create.vue
+++ b/frontend/src/components/bills/Create.vue
@@ -23,93 +23,131 @@
     <Alert :message="errorMessage" type="danger"/>
     <Alert :message="successMessage" type="success"/>
     <form @submit="submitForm" autocomplete="off">
-      <div class="row">
-        <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
-          <div class="card card-primary">
-            <div class="card-header">
-              <h3 class="card-title">
-                {{ $t('firefly.mandatoryFields') }}
-              </h3>
-            </div>
-            <div class="card-body">
-              <GenericTextInput :disabled="submitting" v-model="name" field-name="name" :errors="errors.name" :title="$t('form.name')"
-                                v-on:set-field="storeField($event)"/>
-              <GenericCurrency :disabled="submitting" v-model="currency_id" :errors="errors.currency_id" v-on:set-field="storeField($event)"/>
-
-              <GenericTextInput :disabled="submitting" field-type="number" field-step="any" v-model="amount_min"
-                                field-name="amount_min" :errors="errors.amount_min" :title="$t('form.amount_min')" v-on:set-field="storeField($event)"/>
-
-              <GenericTextInput :disabled="submitting" field-type="number" field-step="any" v-model="amount_max"
-                                field-name="amount_max" :errors="errors.amount_max" :title="$t('form.amount_max')" v-on:set-field="storeField($event)"/>
-
-              <GenericTextInput :disabled="submitting" field-type="date" v-model="date" field-name="date"
-                                :errors="errors.date" :title="$t('form.startdate')" v-on:set-field="storeField($event)"/>
-              <GenericTextInput :disabled="submitting" field-type="date" v-model="end_date" field-name="end_date"
-                                :errors="errors.end_date" :title="$t('form.end_date')" v-on:set-field="storeField($event)"/>
-              <GenericTextInput :disabled="submitting" field-type="date" v-model="extension_date" field-name="extension_date"
-                                :errors="errors.extension_date" :title="$t('form.extension_date')" v-on:set-field="storeField($event)"/>
-
-              <RepeatFrequencyPeriod :disabled="submitting" v-model="repeat_freq" :errors="errors.repeat_freq"
-                                     v-on:set-field="storeField($event)"/>
-            </div>
-          </div>
-        </div>
-        <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
-          <div class="card">
-            <div class="card-header">
-              <h3 class="card-title">
-                {{ $t('firefly.optionalFields') }}
-              </h3>
-            </div>
-            <div class="card-body">
-              <GenericTextarea :disabled="submitting" field-name="notes" :title="$t('form.notes')" v-model="notes" :errors="errors.notes"
-                               v-on:set-field="storeField($event)"/>
-
-              <GenericAttachments :disabled="submitting" :title="$t('form.attachments')" field-name="attachments" :errors="errors.attachments"
-                                  v-on:selected-attachments="selectedAttachments($event)"
-                                  v-on:selected-no-attachments="selectedNoAttachments($event)"
-                                  v-on:uploaded-attachments="uploadedAttachments($event)"
-                                  :upload-trigger="uploadTrigger"
-                                  :upload-object-type="uploadObjectType"
-                                  :upload-object-id="uploadObjectId"
-              />
-
-              <GenericTextInput :disabled="submitting" v-model="skip" field-name="skip" :errors="errors.skip" :title="$t('form.skip')"
-                                v-on:set-field="storeField($event)"/>
-
-              <GenericGroup :disabled="submitting" v-model="group_title" field-name="group_title" :errors="errors.group_title" :title="$t('form.object_group')"
-                            v-on:set-field="storeField($event)"/>
-            </div>
-          </div>
-        </div>
+      <div class="col">
+        <!-- tabs -->
+        <ul class="nav nav-tabs ml-auto p-2" id="subscriptionTabs">
+          <li>
+          <li class="nav-item"><a class="nav-link active" href="#subscription" data-toggle="pill">
+            Subscription
+          </a>
+          </li>
+          <li>
+          <li class="nav-item"><a class="nav-link" href="#rule" data-toggle="pill">
+            Rule
+          </a>
+          </li>
+        </ul>
       </div>
-      <div class="row">
-        <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12 offset-xl-6 offset-lg-6">
-          <div class="card">
-            <div class="card-body">
-              <div class="row">
-                <div class="col-lg-6 offset-lg-6">
-                  <button :disabled=submitting type="button" @click="submitForm" class="btn btn-success btn-block">{{
-                      $t('firefly.store_new_bill')
-                    }}
-                  </button>
-                  <div class="form-check">
-                    <input id="createAnother" v-model="createAnother" class="form-check-input" type="checkbox">
-                    <label class="form-check-label" for="createAnother">
-                      <span class="small">{{ $t('firefly.create_another') }}</span>
-                    </label>
-                  </div>
-                  <div class="form-check">
-                    <input id="resetFormAfter" v-model="resetFormAfter" :disabled="!createAnother" class="form-check-input" type="checkbox">
-                    <label class="form-check-label" for="resetFormAfter">
-                      <span class="small">{{ $t('firefly.reset_after') }}</span>
-                    </label>
+      <div class="tab-content" id="subscriptionTabContent">
+        <div class="tab-pane show active" id="subscription" role="tabpanel" aria-labelledby="subscription-tab">
+          <div class="row">
+            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
+              <div class="card card-primary">
+                <div class="card-header">
+                  <h3 class="card-title">
+                    {{ $t('firefly.mandatoryFields') }}
+                  </h3>
+                </div>
+                <div class="card-body">
+                  <GenericTextInput :disabled="submitting" v-model="name" field-name="name" :errors="errors.name" :title="$t('form.name')"
+                                    v-on:set-field="storeField($event)"/>
+                  <GenericCurrency :disabled="submitting" v-model="currency_id" :errors="errors.currency_id" v-on:set-field="storeField($event)"/>
+
+                  <GenericTextInput :disabled="submitting" field-type="number" field-step="any" v-model="amount_min"
+                                    field-name="amount_min" :errors="errors.amount_min" :title="$t('form.amount_min')" v-on:set-field="storeField($event)"/>
+
+                  <GenericTextInput :disabled="submitting" field-type="number" field-step="any" v-model="amount_max"
+                                    field-name="amount_max" :errors="errors.amount_max" :title="$t('form.amount_max')" v-on:set-field="storeField($event)"/>
+
+                  <GenericTextInput :disabled="submitting" field-type="date" v-model="date" field-name="date"
+                                    :errors="errors.date" :title="$t('form.startdate')" v-on:set-field="storeField($event)"/>
+                  <GenericTextInput :disabled="submitting" field-type="date" v-model="end_date" field-name="end_date"
+                                    :errors="errors.end_date" :title="$t('form.end_date')" v-on:set-field="storeField($event)"/>
+                  <GenericTextInput :disabled="submitting" field-type="date" v-model="extension_date" field-name="extension_date"
+                                    :errors="errors.extension_date" :title="$t('form.extension_date')" v-on:set-field="storeField($event)"/>
+
+                  <RepeatFrequencyPeriod :disabled="submitting" v-model="repeat_freq" :errors="errors.repeat_freq"
+                                         v-on:set-field="storeField($event)"/>
+                </div>
+              </div>
+            </div>
+            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
+              <div class="card">
+                <div class="card-header">
+                  <h3 class="card-title">
+                    {{ $t('firefly.optionalFields') }}
+                  </h3>
+                </div>
+                <div class="card-body">
+                  <GenericTextarea :disabled="submitting" field-name="notes" :title="$t('form.notes')" v-model="notes" :errors="errors.notes"
+                                   v-on:set-field="storeField($event)"/>
+
+                  <GenericAttachments :disabled="submitting" :title="$t('form.attachments')" field-name="attachments" :errors="errors.attachments"
+                                      v-on:selected-attachments="selectedAttachments($event)"
+                                      v-on:selected-no-attachments="selectedNoAttachments($event)"
+                                      v-on:uploaded-attachments="uploadedAttachments($event)"
+                                      :upload-trigger="uploadTrigger"
+                                      :upload-object-type="uploadObjectType"
+                                      :upload-object-id="uploadObjectId"
+                  />
+
+                  <GenericTextInput :disabled="submitting" v-model="skip" field-name="skip" :errors="errors.skip" :title="$t('form.skip')"
+                                    v-on:set-field="storeField($event)"/>
+
+                  <GenericGroup :disabled="submitting" v-model="group_title" field-name="group_title" :errors="errors.group_title"
+                                :title="$t('form.object_group')"
+                                v-on:set-field="storeField($event)"/>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12 offset-xl-6 offset-lg-6">
+              <div class="card">
+                <div class="card-body">
+                  <div class="row">
+                    <div class="col-lg-6 offset-lg-6">
+                      <button :disabled=submitting type="button" @click="submitForm" class="btn btn-success btn-block">{{
+                          $t('firefly.store_new_bill')
+                        }}
+                      </button>
+                      <div class="form-check">
+                        <input id="createAnother" v-model="createAnother" class="form-check-input" type="checkbox">
+                        <label class="form-check-label" for="createAnother">
+                          <span class="small">{{ $t('firefly.create_another') }}</span>
+                        </label>
+                      </div>
+                      <div class="form-check">
+                        <input id="resetFormAfter" v-model="resetFormAfter" :disabled="!createAnother" class="form-check-input" type="checkbox">
+                        <label class="form-check-label" for="resetFormAfter">
+                          <span class="small">{{ $t('firefly.reset_after') }}</span>
+                        </label>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
+        <div class="tab-pane show" id="rule" role="tabpanel" aria-labelledby="rule-tab">
+          <div class="row">
+            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
+              <div class="card card-primary">
+                <div class="card-header">
+                  <h3 class="card-title">
+                    Title
+                  </h3>
+                </div>
+                <div class="card-body">
+                  <p>
+                    In the future here you can set rule info for the new subscription.
+                  </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+        </div>
       </div>
     </form>
   </div>
@@ -226,7 +264,7 @@ export default {
               this.uploadObjectId = this.returnedId;
               this.uploadTrigger = true;
             }
-            if(!this.hasAttachments) {
+            if (!this.hasAttachments) {
               this.finishSubmission();
             }
           })
@@ -236,10 +274,10 @@ export default {
             // display errors!
           });
     },
-    uploadedAttachments: function(e) {
+    uploadedAttachments: function (e) {
       this.finishSubmission();
     },
-    finishSubmission: function() {
+    finishSubmission: function () {
       this.successMessage = this.$t('firefly.stored_new_bill_js', {ID: this.returnedId, name: this.returnedTitle});
       // stay here is false?
       if (false === this.createAnother) {
diff --git a/frontend/src/components/bills/Index.vue b/frontend/src/components/bills/Index.vue
index 887029d870..535b32af15 100644
--- a/frontend/src/components/bills/Index.vue
+++ b/frontend/src/components/bills/Index.vue
@@ -269,10 +269,10 @@ export default {
           };
     },
     downloadBills: function (page) {
-      console.log('downloadBills');
-      console.log(this.indexReady);
-      console.log(this.loading);
-      console.log(this.downloaded);
+      // console.log('downloadBills');
+      // console.log(this.indexReady);
+      // console.log(this.loading);
+      // console.log(this.downloaded);
       this.resetGroups();
       // console.log('getAccountList()');
       if (this.indexReady && !this.loading && !this.downloaded) {
diff --git a/frontend/src/components/dashboard/MainBudgetList.vue b/frontend/src/components/dashboard/MainBudgetList.vue
index 896f6c84c5..1e7643659d 100644
--- a/frontend/src/components/dashboard/MainBudgetList.vue
+++ b/frontend/src/components/dashboard/MainBudgetList.vue
@@ -215,16 +215,16 @@ export default {
               let pctOrange = 0;
               let pctRed = 0;
               //console.log('Collected "' + period + '" budget limit #' + currentId + ' (part of budget #' + budgetId + ')');
-              console.log('Spent ' + spentFloatPos + ' of ' + amount);
+              // console.log('Spent ' + spentFloatPos + ' of ' + amount);
 
               // remove budget info from rawBudgets if it's there:
               this.filterBudgets(budgetId, currencyId);
               let name = this.budgets[current.attributes.budget_id].name;
               // spent within budget:
               if (0.0 !== spentFloat && spentFloatPos < amount) {
-                console.log('Spent ' + name + ' in budget');
+                // console.log('Spent ' + name + ' in budget');
                 pctGreen = (spentFloatPos / amount) * 100;
-                console.log('pctGreen is ' + pctGreen);
+                // console.log('pctGreen is ' + pctGreen);
               }
 
               // spent over budget
diff --git a/frontend/src/components/form/GenericAttachments.vue b/frontend/src/components/form/GenericAttachments.vue
index 1b4ebf6148..8b11710bfe 100644
--- a/frontend/src/components/form/GenericAttachments.vue
+++ b/frontend/src/components/form/GenericAttachments.vue
@@ -97,22 +97,22 @@ export default {
         // });
 
         // new code
-        console.log('start of new');
+        // console.log('start of new');
         let files = this.$refs.att.files;
         this.uploads = files.length;
         // loop all files and create attachments.
         for (let i in files) {
           if (files.hasOwnProperty(i) && /^0$|^[1-9]\d*$/.test(i) && i <= 4294967294) {
-            console.log('Now at file ' + (parseInt(i) + 1) + ' / ' + files.length);
+            // console.log('Now at file ' + (parseInt(i) + 1) + ' / ' + files.length);
             // read file into file reader:
             let current = files[i];
             let fileReader = new FileReader();
             let theParent = this; // dont ask me why i need to do this.
             fileReader.onloadend = evt => {
               if (evt.target.readyState === FileReader.DONE) {
-                console.log('I am done reading file ' + (parseInt(i) + 1));
+                // console.log('I am done reading file ' + (parseInt(i) + 1));
                 this.createAttachment(current.name).then(response => {
-                  console.log('Created attachment. Now upload (1)');
+                  // console.log('Created attachment. Now upload (1)');
                   return theParent.uploadAttachment(response.data.data.id, new Blob([evt.target.result]));
                 }).then(theParent.countAttachment);
               }
@@ -121,7 +121,7 @@ export default {
           }
         }
         if (0 === files.length) {
-          console.log('No files to upload. Emit event!');
+          // console.log('No files to upload. Emit event!');
           this.$emit('uploaded-attachments', this.transaction_journal_id);
         }
         // Promise.all(promises).then(response => {
@@ -138,15 +138,15 @@ export default {
   methods: {
     countAttachment: function () {
       this.uploaded++;
-      console.log('Uploaded ' + this.uploaded + ' / ' + this.uploads);
+      // console.log('Uploaded ' + this.uploaded + ' / ' + this.uploads);
       if (this.uploaded >= this.uploads) {
-        console.log('All files uploaded. Emit event for ' + this.uploadObjectId);
+        // console.log('All files uploaded. Emit event for ' + this.uploadObjectId);
         this.$emit('uploaded-attachments', this.uploadObjectId);
       }
     },
     uploadAttachment: function (attachmentId, data) {
       this.created++;
-      console.log('Now in uploadAttachment()');
+      // console.log('Now in uploadAttachment()');
       const uploadUri = './api/v1/attachments/' + attachmentId + '/upload';
       return axios.post(uploadUri, data)
     },
diff --git a/frontend/src/components/store/modules/transactions/create.js b/frontend/src/components/store/modules/transactions/create.js
index 564c614fbe..829c83e9cf 100644
--- a/frontend/src/components/store/modules/transactions/create.js
+++ b/frontend/src/components/store/modules/transactions/create.js
@@ -20,7 +20,7 @@
 
 const lodashClonedeep = require('lodash.clonedeep');
 
-import {getDefaultTransaction, getDefaultErrors} from '../../../../shared/transactions';
+import {getDefaultErrors, getDefaultTransaction} from '../../../../shared/transactions';
 
 // initial state
 const state = () => ({
@@ -100,6 +100,7 @@ const mutations = {
         state.transactions[payload.index].errors = lodashClonedeep(state.defaultErrors);
     },
     resetTransactions(state) {
+        // console.log('Store: Record call to resetTransactions :(');
         state.transactions = [];
     },
     setGroupTitle(state, payload) {
@@ -109,12 +110,13 @@ const mutations = {
         state.customDateFields = payload;
     },
     deleteTransaction(state, payload) {
+        // console.log('Record call to deleteTransaction!');
         state.transactions.splice(payload.index, 1);
         // console.log('Deleted transaction ' + payload.index);
         // console.log(state.transactions);
-        if (0 === state.transactions.length) {
+        // if (0 === state.transactions.length) {
             // console.log('array is empty!');
-        }
+        // }
     },
     setTransactionType(state, transactionType) {
         state.transactionType = transactionType;
diff --git a/frontend/src/components/transactions/Create.vue b/frontend/src/components/transactions/Create.vue
index b4aa5581d1..25fca03e49 100644
--- a/frontend/src/components/transactions/Create.vue
+++ b/frontend/src/components/transactions/Create.vue
@@ -221,7 +221,7 @@ export default {
                     ]
     ),
     addTransactionArray: function (event) {
-      console.log('Record call to addTransactionArray');
+      // console.log('Record call to addTransactionArray');
       event.preventDefault();
       this.addTransaction();
     },
@@ -229,8 +229,8 @@ export default {
      * Removes a split from the array.
      */
     removeTransaction: function (payload) {
-      console.log('Record call to removeTransaction');
-      console.log('Triggered to remove transaction ' + payload.index);
+      // console.log('Record call to removeTransaction');
+      // console.log('Triggered to remove transaction ' + payload.index);
       window.$('#tab_split_' + (payload.index - 1)).click();
       this.$store.commit('transactions/create/deleteTransaction', payload);
     },
diff --git a/frontend/src/components/transactions/Index.vue b/frontend/src/components/transactions/Index.vue
index c34dff9dda..45d13672d2 100644
--- a/frontend/src/components/transactions/Index.vue
+++ b/frontend/src/components/transactions/Index.vue
@@ -153,7 +153,7 @@ export default {
       this.getTransactionList();
     },
     jumpToPage: function (event) {
-      console.log('noticed a change in transactions/index.vue!');
+      // console.log('noticed a change in transactions/index.vue!');
       this.currentPage = event.page;
       this.downloadTransactionList(event.page);
     },
diff --git a/frontend/src/components/transactions/SplitForm.vue b/frontend/src/components/transactions/SplitForm.vue
index 850204c1a6..7ea30c6bbd 100644
--- a/frontend/src/components/transactions/SplitForm.vue
+++ b/frontend/src/components/transactions/SplitForm.vue
@@ -209,6 +209,7 @@
                 <TransactionTags
                     v-model="transaction.tags"
                     v-on="$listeners"
+                    ref="tags"
                     :errors="transaction.errors.tags"
                     :index="index"
                 />
@@ -381,12 +382,13 @@ export default {
   methods: {
     removeTransaction: function () {
       // 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!');
+        // console.log('Jump to destination!');
         this.$refs.destinationAccount.giveFocus();
       }
     }
diff --git a/frontend/src/components/transactions/SplitPills.vue b/frontend/src/components/transactions/SplitPills.vue
index 8e7333fccc..64b622fc66 100644
--- a/frontend/src/components/transactions/SplitPills.vue
+++ b/frontend/src/components/transactions/SplitPills.vue
@@ -19,17 +19,22 @@
   -->
 
 <template>
-  <div v-if="transactions.length > 1" class="row">
-    <div class="col">
-      <!-- tabs -->
-      <ul class="nav nav-pills ml-auto p-2" id="transactionTabs">
-        <li v-for="(transaction, index) in this.transactions" class="nav-item"><a :class="'nav-link' + (0 === index ? ' active' : '')"
-                                                                                  :href="'#split_' + index"
-                                                                                  data-toggle="pill">
-          <span v-if="'' !== transaction.description">{{ transaction.description }}</span>
-          <span v-if="'' === transaction.description">Split {{ index + 1 }}</span>
-        </a></li>
-      </ul>
+  <div>
+    <span>Length: {{ this.transactions.length }}</span>
+
+    <div v-if="transactions.length > 1" class="row">
+      <div class="col">
+        <!-- tabs -->
+        <ul class="nav nav-pills ml-auto p-2" id="transactionTabs">
+          <li v-for="(transaction, index) in this.transactions" class="nav-item"><a :class="'nav-link' + (0 === index ? ' active' : '')"
+                                                                                    :href="'#split_' + index"
+                                                                                    :id="'tab_split_' + index"
+                                                                                    data-toggle="pill">
+            <span v-if="'' !== transaction.description">{{ transaction.description }}</span>
+            <span v-if="'' === transaction.description">Split {{ index + 1 }}</span>
+          </a></li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -41,7 +46,7 @@ export default {
     transactions: {
       type: Array,
       required: true,
-      default: function() {
+      default: function () {
         return [];
       }
     },
diff --git a/frontend/src/components/transactions/TransactionAccount.vue b/frontend/src/components/transactions/TransactionAccount.vue
index 859b91478e..514e48751b 100644
--- a/frontend/src/components/transactions/TransactionAccount.vue
+++ b/frontend/src/components/transactions/TransactionAccount.vue
@@ -116,15 +116,22 @@ export default {
     // console.log('TransactionAccount::created() direction=' + this.direction + ', type=' + this.transactionType + ' , name="' + this.accountName + '"');
     this.selectedAccountTrigger = true;
   },
+  mounted: function () {
+    this.$nextTick(function () {
+      if (0 === this.index) {
+        this.$refs.inputThing.$refs.input.tabIndex = 2;
+      }
+    })
+  },
   methods: {
     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);
+    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);
+      //console.log(this.$refs.inputThing.isFocused);
     },
     userSelectedAccount: function (event) {
       // console.log('userSelectedAccount!');
diff --git a/frontend/src/components/transactions/TransactionAmount.vue b/frontend/src/components/transactions/TransactionAmount.vue
index 9e4120571b..bd84a2de52 100644
--- a/frontend/src/components/transactions/TransactionAmount.vue
+++ b/frontend/src/components/transactions/TransactionAmount.vue
@@ -69,11 +69,18 @@ export default {
       this.transactionAmount = this.formatNumber(this.amount);
     }
   },
+  mounted: function () {
+    this.$nextTick(function () {
+      if (0 === this.index) {
+        this.$refs.input.tabIndex = 3;
+      }
+    })
+  },
   methods: {
     formatNumber(str) {
       return parseFloat(str).toFixed(this.fractionDigits);
     },
-    giveFocus: function() {
+    giveFocus: function () {
       this.$refs.input.focus();
     },
   },
diff --git a/frontend/src/components/transactions/TransactionBill.vue b/frontend/src/components/transactions/TransactionBill.vue
index 1bb269247b..5bda067e35 100644
--- a/frontend/src/components/transactions/TransactionBill.vue
+++ b/frontend/src/components/transactions/TransactionBill.vue
@@ -52,6 +52,11 @@ export default {
       bill: this.value,
     }
   },
+  mounted: function () {
+    this.$nextTick(function () {
+      this.$refs.bill.tabIndex = 9;
+    })
+  },
   created() {
     this.collectData();
   },
diff --git a/frontend/src/components/transactions/TransactionBudget.vue b/frontend/src/components/transactions/TransactionBudget.vue
index 731c2e8e7d..24e47b976e 100644
--- a/frontend/src/components/transactions/TransactionBudget.vue
+++ b/frontend/src/components/transactions/TransactionBudget.vue
@@ -52,6 +52,11 @@ export default {
       emitEvent: true
     }
   },
+  mounted: function () {
+    this.$nextTick(function () {
+      this.$refs.budget.tabIndex = 8;
+    })
+  },
   created() {
     this.collectData();
   },
diff --git a/frontend/src/components/transactions/TransactionCategory.vue b/frontend/src/components/transactions/TransactionCategory.vue
index d80cfcc870..9f6da4e538 100644
--- a/frontend/src/components/transactions/TransactionCategory.vue
+++ b/frontend/src/components/transactions/TransactionCategory.vue
@@ -35,6 +35,7 @@
         inputName="category[]"
         @hit="selectedCategory = $event"
         @input="lookupCategory"
+        ref="input"
     >
       <template slot="append">
         <div class="input-group-append">
@@ -64,7 +65,11 @@ export default {
       category: this.value
     }
   },
-
+  mounted: function () {
+    this.$nextTick(function () {
+      this.$refs.input.$refs.input.tabIndex = 10;
+    })
+  },
   created() {
     //console.log('Created category(' + this.index + ') "' + this.value + '"');
     // initial list of accounts:
diff --git a/frontend/src/components/transactions/TransactionDate.vue b/frontend/src/components/transactions/TransactionDate.vue
index 1c2385e395..e3621933b2 100644
--- a/frontend/src/components/transactions/TransactionDate.vue
+++ b/frontend/src/components/transactions/TransactionDate.vue
@@ -67,7 +67,14 @@ export default {
     let parts = this.date.split('T');
     this.dateStr = parts[0];
     this.timeStr = parts[1];
-
+  },
+  mounted: function () {
+    if (0 === this.index) {
+      this.$nextTick(function () {
+        this.$refs.date.tabIndex = 6;
+        this.$refs.time.tabIndex = 7;
+      });
+    }
   },
   data() {
     return {
diff --git a/frontend/src/components/transactions/TransactionForeignAmount.vue b/frontend/src/components/transactions/TransactionForeignAmount.vue
index 5874349113..dc96a5af86 100644
--- a/frontend/src/components/transactions/TransactionForeignAmount.vue
+++ b/frontend/src/components/transactions/TransactionForeignAmount.vue
@@ -31,6 +31,7 @@
           autocomplete="off"
           name="foreign_amount[]"
           type="number"
+          ref="input"
       >
     </div>
     <span v-if="errors.length > 0">
@@ -66,6 +67,11 @@ export default {
       this.amount = this.formatNumber(this.amount);
     }
   },
+  mounted: function () {
+    this.$nextTick(function () {
+      this.$refs.input.tabIndex = 5;
+    })
+  },
   methods: {
     formatNumber(str) {
       return parseFloat(str).toFixed(this.fractionDigits);
diff --git a/frontend/src/components/transactions/TransactionForeignCurrency.vue b/frontend/src/components/transactions/TransactionForeignCurrency.vue
index 5d5446b242..728390963a 100644
--- a/frontend/src/components/transactions/TransactionForeignCurrency.vue
+++ b/frontend/src/components/transactions/TransactionForeignCurrency.vue
@@ -23,7 +23,7 @@
   <div v-if="isVisible" class="form-group">
     <div class="text-xs">&nbsp;</div>
     <div class="input-group">
-      <select v-model="selectedCurrency" class="form-control" name="foreign_currency_id[]">
+      <select v-model="selectedCurrency" class="form-control" ref="input" name="foreign_currency_id[]">
         <option v-for="currency in selectableCurrencies" :label="currency.name" :value="currency.id">{{ currency.name }}</option>
       </select>
     </div>
@@ -77,6 +77,11 @@ export default {
     // console.log('Created TransactionForeignCurrency');
     this.getAllCurrencies();
   },
+  mounted: function () {
+    this.$nextTick(function () {
+      this.$refs.input.tabIndex = 4;
+    })
+  },
   methods: {
     lockCurrency: function () {
       // console.log('Lock currency (' + this.transactionType + ')');
diff --git a/frontend/src/components/transactions/TransactionListLarge.vue b/frontend/src/components/transactions/TransactionListLarge.vue
index 6ccf92ace6..081ebbd8c8 100644
--- a/frontend/src/components/transactions/TransactionListLarge.vue
+++ b/frontend/src/components/transactions/TransactionListLarge.vue
@@ -225,12 +225,12 @@ export default {
       this.$emit('jump-page', {page: value});
     },
     entries: function (value) {
-      console.log('detected new transactions! (' + value.length + ')');
+      // console.log('detected new transactions! (' + value.length + ')');
       this.parseTransactions();
     },
-    value: function (value) {
-      console.log('Watch value!');
-    }
+    // value: function (value) {
+    //   // console.log('Watch value!');
+    // }
   },
   methods: {
     ...mapMutations('root', ['refreshCacheKey',]),
@@ -239,10 +239,10 @@ export default {
       // console.log('Start of parseTransactions. Count of entries is ' + this.entries.length + ' and page is ' + this.page);
       // console.log('Reported total is ' + this.total);
       if (0 === this.entries.length) {
-        console.log('Will not render now because length is 0.');
+        // console.log('Will not render now because length is 0.');
         return;
       }
-      console.log('Now have ' + this.transactions.length + ' transactions');
+      // console.log('Now have ' + this.transactions.length + ' transactions');
       for (let i = 0; i < this.total; i++) {
         this.transactions.push({dummy: true, type: 'x'});
         // console.log('Push dummy to index ' + i);
@@ -270,7 +270,7 @@ export default {
     },
     newCacheKey: function () {
       this.refreshCacheKey();
-      console.log('Cache key is now ' + this.cacheKey);
+      // console.log('Cache key is now ' + this.cacheKey);
       this.$emit('refreshed-cache-key');
     },
     updateFieldList: function () {
diff --git a/frontend/src/components/transactions/TransactionTags.vue b/frontend/src/components/transactions/TransactionTags.vue
index f5ee3f41aa..884a14217b 100644
--- a/frontend/src/components/transactions/TransactionTags.vue
+++ b/frontend/src/components/transactions/TransactionTags.vue
@@ -29,6 +29,7 @@
           :add-only-from-autocomplete="false"
           :autocomplete-items="autocompleteItems"
           :tags="tags"
+          ref="input"
           :title="$t('firefly.tags')"
           v-bind:placeholder="$t('firefly.tags')"
           @tags-changed="newTags => this.tags = newTags"