New and optimised Vue code, courtesy of @GaryQ

resources/assets/js/app.js

@@ -18,35 +18,17 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
-import * as uiv from 'uiv';
-import CustomAttachments from "./components/transactions/CustomAttachments";
-import CreateTransaction from './components/transactions/CreateTransaction';
-import EditTransaction from './components/transactions/EditTransaction';
-import Clients from './components/passport/Clients';
-import AuthorizedClients from "./components/passport/AuthorizedClients";
-import PersonalAccessTokens from "./components/passport/PersonalAccessTokens";
-import CustomDate from "./components/transactions/CustomDate";
-import CustomString from "./components/transactions/CustomString";
-import CustomTextarea from "./components/transactions/CustomTextarea";
-import StandardDate from "./components/transactions/StandardDate";
-import GroupDescription from "./components/transactions/GroupDescription";
-import TransactionDescription from "./components/transactions/TransactionDescription";
-import CustomTransactionFields from "./components/transactions/CustomTransactionFields";
-import PiggyBank from "./components/transactions/PiggyBank";
-import Tags from "./components/transactions/Tags";
-import Category from "./components/transactions/Category";
-import Amount from "./components/transactions/Amount";
-import ForeignAmountSelect from "./components/transactions/ForeignAmountSelect";
-import TransactionType from "./components/transactions/TransactionType";
-import AccountSelect from "./components/transactions/AccountSelect";
-import Budget from "./components/transactions/Budget";
+/* We'll load jQuery and the Bootstrap jQuery plugin which provides support
+* for JavaScript based Bootstrap features such as modals and tabs. This
+* code may be modified to fit the specific needs of your application.
+*/
+
+try {
+   window.$ = window.jQuery = require('jquery');
+
+    require('bootstrap-sass');
+} catch (e) {}
+
+
 
-/**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
- */
 
-require('./bootstrap');

resources/assets/js/app_vue.js

@@ -0,0 +1,32 @@
+/*
+ * app_vue.js
+ * Copyright (c) 2019 james@firefly-iii.org
+ *
+ * This file is part of Firefly III (https://github.com/firefly-iii).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/* Creates a base file for vue apps
+ * Bootstrat-sass and jquery are loaded via app.js
+*/
+import Vue from 'vue';
+import VueI18n from 'vue-i18n'
+import * as uiv from 'uiv';
+
+window.vuei18n = VueI18n;
+window.uiv =uiv;
+Vue.use(vuei18n);
+Vue.use(uiv);
+window.Vue = Vue;

resources/assets/js/bootstrap.js

@@ -18,21 +18,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-window._ = require('lodash');
-
-/**
- * We'll load jQuery and the Bootstrap jQuery plugin which provides support
- * for JavaScript based Bootstrap features such as modals and tabs. This
- * code may be modified to fit the specific needs of your application.
- */
-
-try {
-    window.$ = window.jQuery = require('jquery');
-
-    require('bootstrap-sass');
-} catch (e) {}
-
-/**
+/*
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the
  * CSRF token as a header based on the value of the "XSRF" token cookie.

resources/assets/js/components/transactions/Amount.vue

@@ -25,9 +25,16 @@
         </div>
         <label class="col-sm-4 control-label" ref="cur"></label>
         <div class="col-sm-8">
-            <input type="number" @input="handleInput" ref="amount" :value="value" step="any" class="form-control"
-                   name="amount[]"
-                   title="$t('firefly.amount')" autocomplete="off" v-bind:placeholder="$t('firefly.amount')">
+            <input type="number" 
+            @input="handleInput" 
+            ref="amount" 
+            :value="value" 
+            step="any" 
+            class="form-control"
+            name="amount[]"
+            :title="$t('firefly.amount')" 
+            autocomplete="off" 
+            v-bind:placeholder="$t('firefly.amount')">
             <ul class="list-unstyled" v-for="error in this.error">
                 <li class="text-danger">{{ error }}</li>
             </ul>

resources/assets/js/components/transactions/Budget.vue

@@ -27,9 +27,19 @@
             {{ $t('firefly.budget') }}
         </div>
         <div class="col-sm-12">
-            <select name="budget[]" ref="budget" v-model="value" @input="handleInput" class="form-control"
-                    v-if="this.budgets.length > 0">
-                <option v-for="cBudget in this.budgets" :label="cBudget.name" :value="cBudget.id">{{cBudget.name}}</option>
+            <select 
+            name="budget[]" 
+            ref="budget" 
+            v-model="selected" 
+            @input="handleInput"
+            v-on:change="signalChange" 
+            :title="$t('firefly.budget')"
+            class="form-control"
+             v-if="this.budgets.length > 0">
+                <option v-for="cBudget in this.budgets" 
+                    :label="cBudget.name" 
+                    :value="cBudget.id">{{cBudget.name}}
+                </option>
             </select>
             <ul class="list-unstyled" v-for="error in this.error">
                 <li class="text-danger">{{ error }}</li>
@@ -41,17 +51,29 @@
 <script>
     export default {
         name: "Budget",
-        props: ['transactionType', 'value', 'error','no_budget'],
+        props: {
+            transactionType: String, 
+            value: {
+                type: [String, Number], 
+                default: 0
+            },
+            error: Array,
+            no_budget: String,
+        },
         mounted() {
             this.loadBudgets();
-            //this.value = null === this.value ? 0 : this.value;
         },
         data() {
             return {
+                selected: this.value,
                 budgets: [],
             }
         },
         methods: {
+            // Fixes edit change budget not updating on every broswer
+            signalChange: function(e) {
+                this.$emit('input', this.$refs.budget.value);
+            },
             handleInput(e) {
                 this.$emit('input', this.$refs.budget.value);
             },

resources/assets/js/components/transactions/Tags.vue

@@ -29,6 +29,7 @@
             <vue-tags-input
                     v-model="tag"
                     :tags="tags"
+                    :title="$t('firefly.tags')"
                     classes="form-input"
                     :autocomplete-items="autocompleteItems"
                     :add-only-from-autocomplete="false"

resources/assets/js/create_transaction.js

@@ -1,5 +1,5 @@
 /*
- * app.js
+ * create_transactions.js
  * Copyright (c) 2019 james@firefly-iii.org
  *
  * This file is part of Firefly III (https://github.com/firefly-iii).
@@ -18,15 +18,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
-import * as uiv from 'uiv';
 import CustomAttachments from "./components/transactions/CustomAttachments";
 import CreateTransaction from './components/transactions/CreateTransaction';
-import EditTransaction from './components/transactions/EditTransaction';
-import Clients from './components/passport/Clients';
-import AuthorizedClients from "./components/passport/AuthorizedClients";
-import PersonalAccessTokens from "./components/passport/PersonalAccessTokens";
 import CustomDate from "./components/transactions/CustomDate";
 import CustomString from "./components/transactions/CustomString";
 import CustomTextarea from "./components/transactions/CustomTextarea";
@@ -44,18 +37,12 @@ import AccountSelect from "./components/transactions/AccountSelect";
 import Budget from "./components/transactions/Budget";
 
 /**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
+ * First we will load Axios via bootstrap.js
+ * jquery and bootstrap-sass preloaded in app.js
+ * vue, uiv and vuei18n are in app_vue.js
  */
 
-require('./bootstrap');
-
-Vue.use(VueI18n);
-window.Vue = Vue;
-
-Vue.use(uiv);
-
+ require('./bootstrap');
 
 // components for create and edit transactions.
 Vue.component('budget', Budget);
@@ -66,7 +53,6 @@ Vue.component('custom-textarea', CustomTextarea);
 Vue.component('standard-date', StandardDate);
 Vue.component('group-description', GroupDescription);
 Vue.component('transaction-description', TransactionDescription);
-
 Vue.component('custom-transaction-fields', CustomTransactionFields);
 Vue.component('piggy-bank', PiggyBank);
 Vue.component('tags', Tags);
@@ -80,7 +66,7 @@ Vue.component('create-transaction', CreateTransaction);
 
 
 // Create VueI18n instance with options
-const i18n = new VueI18n({
+const i18n = new vuei18n({
                              locale: document.documentElement.lang, // set locale
                              fallbackLocale: 'en',
                              messages: {
@@ -111,6 +97,6 @@ new Vue({
             i18n,
             el: "#create_transaction",
             render: (createElement) => {
-                return createElement(CreateTransaction, { props: props })
+                return createElement(CreateTransaction, { props: props });
             },
         });

resources/assets/js/edit_transaction.js

@@ -1,5 +1,5 @@
 /*
- * app.js
+ * edit_transactions.js
  * Copyright (c) 2019 james@firefly-iii.org
  *
  * This file is part of Firefly III (https://github.com/firefly-iii).
@@ -18,15 +18,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
-import * as uiv from 'uiv';
 import CustomAttachments from "./components/transactions/CustomAttachments";
-import CreateTransaction from './components/transactions/CreateTransaction';
 import EditTransaction from './components/transactions/EditTransaction';
-import Clients from './components/passport/Clients';
-import AuthorizedClients from "./components/passport/AuthorizedClients";
-import PersonalAccessTokens from "./components/passport/PersonalAccessTokens";
 import CustomDate from "./components/transactions/CustomDate";
 import CustomString from "./components/transactions/CustomString";
 import CustomTextarea from "./components/transactions/CustomTextarea";
@@ -44,17 +37,12 @@ import AccountSelect from "./components/transactions/AccountSelect";
 import Budget from "./components/transactions/Budget";
 
 /**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
+ * First we will load Axios via bootstrap.js
+ * jquery and bootstrap-sass preloaded in app.js
+ * vue, uiv and vuei18n are in app_vue.js
  */
 
-require('./bootstrap');
-
-Vue.use(VueI18n);
-window.Vue = Vue;
-
-Vue.use(uiv);
+ require('./bootstrap');
 
 // components for create and edit transactions.
 Vue.component('budget', Budget);
@@ -65,7 +53,6 @@ Vue.component('custom-textarea', CustomTextarea);
 Vue.component('standard-date', StandardDate);
 Vue.component('group-description', GroupDescription);
 Vue.component('transaction-description', TransactionDescription);
-
 Vue.component('custom-transaction-fields', CustomTransactionFields);
 Vue.component('piggy-bank', PiggyBank);
 Vue.component('tags', Tags);
@@ -78,7 +65,7 @@ Vue.component('account-select', AccountSelect);
 Vue.component('edit-transaction', EditTransaction);
 
 // Create VueI18n instance with options
-const i18n = new VueI18n({
+const i18n = new vuei18n({
                              locale: document.documentElement.lang, // set locale
                              fallbackLocale: 'en',
                              messages: {

resources/assets/js/profile.js

@@ -1,5 +1,5 @@
 /*
- * app.js
+ * peofile.js
  * Copyright (c) 2019 james@firefly-iii.org
  *
  * This file is part of Firefly III (https://github.com/firefly-iii).
@@ -18,41 +18,19 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
-import * as uiv from 'uiv';
-import CustomAttachments from "./components/transactions/CustomAttachments";
-import CreateTransaction from './components/transactions/CreateTransaction';
-import EditTransaction from './components/transactions/EditTransaction';
 import Clients from './components/passport/Clients';
 import AuthorizedClients from "./components/passport/AuthorizedClients";
 import PersonalAccessTokens from "./components/passport/PersonalAccessTokens";
-import CustomDate from "./components/transactions/CustomDate";
-import CustomString from "./components/transactions/CustomString";
-import CustomTextarea from "./components/transactions/CustomTextarea";
-import StandardDate from "./components/transactions/StandardDate";
-import GroupDescription from "./components/transactions/GroupDescription";
-import TransactionDescription from "./components/transactions/TransactionDescription";
-import CustomTransactionFields from "./components/transactions/CustomTransactionFields";
-import PiggyBank from "./components/transactions/PiggyBank";
-import Tags from "./components/transactions/Tags";
-import Category from "./components/transactions/Category";
-import Amount from "./components/transactions/Amount";
-import ForeignAmountSelect from "./components/transactions/ForeignAmountSelect";
-import TransactionType from "./components/transactions/TransactionType";
-import AccountSelect from "./components/transactions/AccountSelect";
-import Budget from "./components/transactions/Budget";
 import ProfileOptions from "./components/profile/ProfileOptions";
 
 /**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
+ * First we will load Axios via bootstrap.js
+ * jquery and bootstrap-sass preloaded in app.js
+ * vue, uiv and vuei18n are in app_vue.js
  */
 
 require('./bootstrap');
 
-window.Vue = Vue;
 Vue.component('passport-clients', Clients);
 Vue.component('passport-authorized-clients',AuthorizedClients);
 Vue.component('passport-personal-access-tokens', PersonalAccessTokens);