Fix model and add debug info.

app/Import/Converter/BankDebitCredit.php

@@ -46,6 +46,7 @@ class BankDebitCredit implements ConverterInterface
         $negative = [
             'D', // Old style Rabobank (NL). Short for "Debit"
             'A', // New style Rabobank (NL). Short for "Af"
+            'DR', // https://old.reddit.com/r/FireflyIII/comments/bn2edf/generic_debitcredit_indicator/
             'Af', // ING (NL).
             'Debet', // Triodos (NL)
         ];

config/intro.php

@@ -89,22 +89,6 @@ return [
         'incomeAndExpensesChart' => ['element' => '#incomeAndExpensesChart', 'position' => 'top'],
     ],
 
-    // transactions: create (also per type!)
-    'transactions_create'            => [
-        'switch_box'       => ['element' => '#switch-box'],
-        'ffInput_category' => ['element' => '#ffInput_category'],
-    ],
-    'transactions_create_withdrawal' => [
-        'ffInput_budget'           => ['element' => '#ffInput_budget_id'],
-        'currency_dropdown_amount' => ['element' => '#currency_dropdown_amount'],
-    ],
-    'transactions_create_deposit'    => [
-        'currency_dropdown_amount' => ['element' => '#currency_dropdown_amount'],
-    ],
-    'transactions_create_transfer'   => [
-        'ffInput_piggy_bank_id' => ['element' => '#ffInput_piggy_bank_id'],
-    ],
-
     // piggies: index, create, show
     'piggy-banks_index'              => [
         'saved'         => ['element' => '.piggySaved'],

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

@@ -22,7 +22,8 @@
     <div class="form-group">
         <label class="col-sm-4 control-label" ref="cur"></label>
         <div class="col-sm-8">
-            <input type="number" step="any" class="form-control" name="amount[]"
+            <input type="number" ref="amount" :value="value" @input="handleInput" step="any" class="form-control"
+                   name="amount[]"
                    title="amount" autocomplete="off" placeholder="Amount">
         </div>
     </div>
@@ -31,15 +32,18 @@
 <script>
     export default {
         name: "Amount",
-        props: ['source', 'destination', 'transactionType'],
+        props: ['source', 'destination', 'transactionType','value'],
         data() {
             return {
                 sourceAccount: this.source,
                 destinationAccount: this.destination,
-                type: this.transactionType,
+                type: this.transactionType
             }
         },
         methods: {
+            handleInput(e) {
+                this.$emit('input', this.$refs.amount.value);
+            },
             changeData: function () {
                 if ('' === this.transactionType) {
                     $(this.$refs.cur).text(this.sourceAccount.currency_name);

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

@@ -21,8 +21,8 @@
 <template>
     <div class="form-group" v-if="typeof this.transactionType !== 'undefined' && this.transactionType === 'Withdrawal'">
         <div class="col-sm-12">
-            <select name="budget[]" class="form-control" v-if="this.budgets.length > 0">
+            <select name="budget[]" ref="budget" @input="handleInput" class="form-control" v-if="this.budgets.length > 0">
-                <option v-for="budget in this.budgets">{{budget.name}}</option>
+                <option v-for="budget in this.budgets" :label="budget.name" :value="budget.id">{{budget.name}}</option>
             </select>
         </div>
     </div>
@@ -31,7 +31,7 @@
 <script>
     export default {
         name: "Budget",
-        props: ['transactionType'],
+        props: ['transactionType','value'],
         mounted() {
             this.loadBudgets();
         },
@@ -41,6 +41,9 @@
             }
         },
         methods: {
+            handleInput(e) {
+                this.$emit('input', this.$refs.budget.value);
+            },
             loadBudgets: function () {
                 let URI = document.getElementsByTagName('base')[0].href + "json/budgets";
                 axios.get(URI, {}).then((res) => {

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

@@ -24,6 +24,8 @@
             <div class="input-group">
                 <input
                         ref="input"
+                        :value="value"
+                        @input="handleInput"
                         type="text"
                         placeholder="Category"
                         autocomplete="off"
@@ -57,6 +59,7 @@
     export default {
         name: "Category",
         props: {
+            value: String,
             inputName: String,
             accountName: {
                 type: String,
@@ -76,9 +79,16 @@
         mounted() {
             this.target = this.$refs.input;
             this.categoryAutoCompleteURI = document.getElementsByTagName('base')[0].href + "json/categories?query=";
-            //this.triggerTransactionType();
         },
         methods: {
+            handleInput(e) {
+                if (typeof this.$refs.input.value === 'string') {
+                    this.$emit('input', this.$refs.input.value);
+                    return;
+                }
+                this.$emit('input', this.$refs.input.value.name);
+
+            },
             clearCategory: function () {
                 //props.value = '';
                 this.name = '';
@@ -92,6 +102,12 @@
                 // emit the fact that the user selected a type of account
                 // (influencing the destination)
                 this.$emit('select:category', this.name);
+
+                if (typeof this.name === 'string') {
+                    this.$emit('input', this.name);
+                    return;
+                }
+                this.$emit('input', this.name.name);
             },
             handleEnter: function (e) {
                 // todo feels sloppy

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

@@ -19,7 +19,8 @@
   -->
 
 <template>
-    <form method="POST" action="transactions/store" accept-charset="UTF-8" class="form-horizontal" id="store" enctype="multipart/form-data">
+    <form method="POST" action="transactions/store" accept-charset="UTF-8" class="form-horizontal" id="store"
+          enctype="multipart/form-data">
         <input name="_token" type="hidden" value="xxx">
 
         <div class="row" v-if="transactions.length > 1">
@@ -35,11 +36,13 @@
                             <div class="col-sm-12">
                                 <input type="text" class="form-control" name="group_title"
                                        v-model="group_title"
-                                       title="Description of the split transaction" autocomplete="off" placeholder="Description of the split transaction">
+                                       title="Description of the split transaction" autocomplete="off"
+                                       placeholder="Description of the split transaction">
 
 
                                 <p class="help-block">
-                                    If you create a split transaction, there must be a global description for all splits of the transaction.
+                                    If you create a split transaction, there must be a global description for all splits
+                                    of the transaction.
                                 </p>
                             </div>
                         </div>
@@ -58,7 +61,8 @@
                                 <span v-if="transactions.length === 1">Transaction information</span>
                             </h3>
                             <div class="box-tools pull-right" v-if="transactions.length > 1" x>
-                                <button v-on:click="deleteTransaction(index, $event)" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>
+                                <button v-on:click="deleteTransaction(index, $event)" class="btn btn-xs btn-danger"><i
+                                        class="fa fa-trash"></i></button>
                             </div>
                         </div>
                         <div class="box-body">
@@ -114,19 +118,32 @@
                                     <amount
                                             :source="transaction.source_account"
                                             :destination="transaction.destination_account"
+                                            v-model="transaction.amount"
                                             :transactionType="transactionType"
                                     ></amount>
                                     <foreign-amount
                                             :source="transaction.source_account"
                                             :destination="transaction.destination_account"
+                                            v-model="transaction.foreign_amount"
                                             :transactionType="transactionType"
                                     ></foreign-amount>
                                 </div>
                                 <div class="col-lg-4">
-                                    <budget :transactionType="transactionType"></budget>
+                                    <budget
-                                    <category :transactionType="transactionType"></category>
+                                            :transactionType="transactionType"
-                                    <piggy-bank :transactionType="transactionType"></piggy-bank>
+                                            v-model="transaction.budget"
-                                    <tags></tags>
+                                    ></budget>
+                                    <category
+                                            :transactionType="transactionType"
+                                            v-model="transaction.category"
+                                    ></category>
+                                    <piggy-bank
+                                            :transactionType="transactionType"
+                                            v-model="transaction.piggy_bank"
+                                    ></piggy-bank>
+                                    <tags
+                                            v-model="transaction.tags"
+                                    ></tags>
                                     <!-- custom string fields -->
                                     <custom-transaction-fields></custom-transaction-fields>
 
@@ -140,6 +157,7 @@
                 </div>
             </div>
         </div>
+        <pre>{{ $data }}</pre>
         <div class="row">
             <div class="col-lg-12">
                 <p>
@@ -167,7 +185,14 @@
                     description: "",
                     date: "",
                     amount: "",
-                                           foreign_amount: "",
+                    category: "",
+                    piggy_bank: 0,
+                    budget: 0,
+                    tags: [],
+                    foreign_amount: {
+                        amount: "",
+                        currency_id: 0
+                    },
                     source_account: {
                         id: 0,
                         name: "",

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

@@ -21,12 +21,22 @@
 <template>
     <div class="form-group">
         <div class="col-sm-4">
-            <select class="form-control" name="foreign_currency[]" v-if="this.enabledCurrencies.length > 0">
+            <select class="form-control" ref="currency_select" name="foreign_currency[]"
-                <option v-for="currency in this.enabledCurrencies" v-if="currency.enabled">{{ currency.name }}</option>
+                    v-if="this.enabledCurrencies.length > 0" @input="handleInput">
+                <option
+                        v-for="currency in this.enabledCurrencies"
+                        v-if="currency.enabled"
+                        :value="currency.id"
+                        :label="currency.name"
+
+                >
+                    {{ currency.name }}
+                </option>
             </select>
         </div>
         <div class="col-sm-8">
-            <input type="number" step="any" class="form-control" name="foreign_amount[]" v-if="this.enabledCurrencies.length > 0"
+            <input type="number" @input="handleInput" ref="amount" :value="value.amount" step="any" class="form-control"
+                   name="foreign_amount[]" v-if="this.enabledCurrencies.length > 0"
                    title="Foreign amount" autocomplete="off" placeholder="Foreign amount">
         </div>
     </div>
@@ -35,7 +45,7 @@
 <script>
     export default {
         name: "ForeignAmountSelect",
-        props: ['source', 'destination', 'transactionType'],
+        props: ['source', 'destination', 'transactionType', 'value'],
         mounted() {
             this.loadCurrencies();
         },
@@ -58,6 +68,13 @@
             }
         },
         methods: {
+            handleInput(e) {
+                this.$emit('input', {
+                    amount: +this.$refs.amount.value,
+                    currency_id: this.$refs.currency_select.value,
+                }
+                );
+            },
             changeData: function () {
                 this.enabledCurrencies = [];
                 if (this.transactionType === 'Transfer') {

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

@@ -21,8 +21,8 @@
 <template>
     <div class="form-group" v-if="typeof this.transactionType !== 'undefined' && this.transactionType === 'Transfer'">
         <div class="col-sm-12">
-            <select name="piggy_bank[]" class="form-control" v-if="this.piggies.length > 0">
+            <select name="piggy_bank[]" ref="piggy" @input="handleInput" class="form-control" v-if="this.piggies.length > 0">
-                <option v-for="piggy in this.piggies">{{piggy.name}}</option>
+                <option v-for="piggy in this.piggies" :label="piggy.name" :value="piggy.id">{{piggy.name}}</option>
             </select>
         </div>
     </div>
@@ -31,7 +31,7 @@
 <script>
     export default {
         name: "PiggyBank",
-        props: ['transactionType'],
+        props: ['value','transactionType'],
         mounted() {
             this.loadPiggies();
         },
@@ -41,6 +41,9 @@
             }
         },
         methods: {
+            handleInput(e) {
+                this.$emit('input', this.$refs.piggy.value);
+            },
             loadPiggies: function () {
                 let URI = document.getElementsByTagName('base')[0].href + "json/piggy-banks";
                 axios.get(URI, {}).then((res) => {

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

@@ -42,7 +42,9 @@
         name: "Tags",
         components: {
             VueTagsInput
-        }, data() {
+        },
+        props: ['value'],
+        data() {
             return {
                 tag: '',
                 tags: [],
@@ -57,6 +59,7 @@
             update(newTags) {
                 this.autocompleteItems = [];
                 this.tags = newTags;
+                this.$emit('input', this.tags);
             },
             initItems() {
                 if (this.tag.length < 2) {