Lots of new code for new transaction screen.

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

@@ -0,0 +1,160 @@
+<!--
+  - AccountSelect.vue
+  - Copyright (c) 2019 thegrumpydictator@gmail.com
+  -
+  - This file is part of Firefly III.
+  -
+  - Firefly III is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU General Public License as published by
+  - the Free Software Foundation, either version 3 of the License, or
+  - (at your option) any later version.
+  -
+  - Firefly III 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 General Public License for more details.
+  -
+  - You should have received a copy of the GNU General Public License
+  - along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
+  -->
+<template>
+    <div class="form-group">
+        <div class="col-sm-12">
+            <div class="input-group">
+                <input
+                        ref="input"
+                        type="text"
+                        :placeholder="title"
+                        :data-index="index"
+                        autocomplete="off"
+                        data-role="input"
+                        v-on:keypress="handleEnter"
+                        :disabled="inputDisabled"
+                        class="form-control"
+                        v-on:submit.prevent
+                        :name="inputName"
+                        :title="title">
+                <span class="input-group-btn">
+            <button
+                    v-on:click="clearSource"
+                    class="btn btn-default"
+                    type="button"><i class="fa fa-trash-o"></i></button>
+        </span>
+            </div>
+            <typeahead
+                    :open-on-empty=true
+                    :open-on-focus=true
+                    v-on:input="selectedItem"
+                    :async-src="accountAutoCompleteURI"
+                    v-model="name"
+                    :target="target"
+                    item-key="name"
+            ></typeahead>
+        </div>
+    </div>
+
+</template>
+<script>
+    export default {
+        props: {
+            inputName: String,
+            title: String,
+            index: Number,
+            transactionType: String,
+            accountName: {
+                type: String,
+                default: ''
+            },
+            accountTypeFilters: {
+                type: Array,
+                default: function () {
+                    return [];
+                }
+            }
+        },
+
+        data() {
+            return {
+                accountAutoCompleteURI: null,
+                name: null,
+                trType: this.transactionType,
+                target: null,
+                inputDisabled: false,
+                allowedTypes: this.accountTypeFilters
+            }
+        },
+        ready() {
+            this.name = this.accountName;
+        },
+        mounted() {
+            this.target = this.$refs.input;
+            let types = this.allowedTypes.join(',');
+            this.name = this.accountName;
+            this.accountAutoCompleteURI = document.getElementsByTagName('base')[0].href + "json/accounts?types=" + types + "&query=";
+            this.triggerTransactionType();
+        },
+
+        watch: {
+            transactionType() {
+                this.triggerTransactionType();
+            },
+            accountTypeFilters() {
+                let types = this.accountTypeFilters.join(',');
+                console.log(this.inputName + '[' + this.index + '] is now searching for: ' + types);
+                this.accountAutoCompleteURI = document.getElementsByTagName('base')[0].href + "json/accounts?types=" + types + "&query=";
+            }
+        },
+        methods:
+            {
+                triggerTransactionType: function () {
+                    if (null === this.transactionType) {
+                        return;
+                    }
+                    this.inputDisabled = false;
+                    if (this.transactionType.toString() !== '' && this.index > 0) {
+                        if (this.transactionType.toString() === 'Transfer') {
+                            this.inputDisabled = true;
+                            // todo: needs to copy value from very first input
+
+                            return;
+                        }
+
+                        if (this.transactionType.toString() === 'Withdrawal' && this.inputName.substr(0, 6).toLowerCase() === 'source') {
+                            // todo also clear value?
+                            this.inputDisabled = true;
+                            return;
+                        }
+
+                        if (this.transactionType.toString() === 'Deposit' && this.inputName.substr(0, 11).toLowerCase() === 'destination') {
+                            // todo also clear value?
+                            this.inputDisabled = true;
+                        }
+                    }
+                },
+                selectedItem: function (e) {
+                    if (typeof this.name === 'undefined') {
+                        return;
+                    }
+                    // emit the fact that the user selected a type of account
+                    // (influencing the destination)
+                    this.$emit('select:account', this.name);
+                },
+                clearSource: function (e) {
+                    //props.value = '';
+                    this.name = '';
+                    // some event?
+                    this.$emit('clear:value')
+                },
+                handleEnter: function (e) {
+                    // todo feels sloppy
+                    if (e.keyCode === 13) {
+                        e.preventDefault();
+                    }
+                }
+            }
+    }
+</script>
+
+<style scoped>
+
+</style>