Prep for a new auto-complete, and enable foreign currency select.

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

@@ -41,6 +41,7 @@
             <button
                     v-on:click="clearSource"
                     class="btn btn-default"
+                    tabIndex="-1"
                     type="button"><i class="fa fa-trash-o"></i></button>
         </span>
             </div>

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

@@ -21,11 +21,14 @@
 <template>
     <!--
     Show if:
-    - more than one currency enabled in system.
-
+    - more than one currency enabled, always show
+    - if just one, but is deposit or withdrawal
     -->
     <div class="form-group" v-bind:class="{ 'has-error': hasError()}" v-if="
-    this.enabledCurrencies.length > 1">
+    this.enabledCurrencies.length > 1 ||
+    (this.enabledCurrencies.length >= 1 && ('deposit' === this.transactionType.toLowerCase() || 'withdrawal' === this.transactionType.toLowerCase()))
+
+">
         <div class="col-sm-8 col-sm-offset-4 text-sm">
             {{ $t('form.foreign_amount') }}
         </div>
@@ -61,7 +64,7 @@
 
         props: ['source', 'destination', 'transactionType', 'value', 'error', 'no_currency', 'title',],
         mounted() {
-            //console.log('loadCurrencies()');
+            console.log('ForeignAmountSelect mounted()');
             this.liability = false;
             this.loadCurrencies();
         },
@@ -76,25 +79,25 @@
         },
         watch: {
             source: function () {
-                // console.log('watch source in foreign currency');
+                console.log('ForeignAmountSelect watch source');
                 this.changeData();
             },
             destination: function () {
-                // console.log('watch destination in foreign currency');
+                console.log('ForeignAmountSelect watch destination');
                 this.changeData();
             },
             transactionType: function () {
-                // console.log('watch transaction type in foreign currency');
+                console.log('ForeignAmountSelect watch transaction type (is now ' + this.transactionType + ')');
                 this.changeData();
             }
         },
         methods: {
             hasError: function () {
-                // console.log('Has error');
+                console.log('ForeignAmountSelect hasError');
                 return this.error.length > 0;
             },
             handleInput(e) {
-                // console.log('handleInput');
+                console.log('ForeignAmountSelect handleInput');
                 let obj = {
                     amount: this.$refs.amount.value,
                     currency_id: this.$refs.currency_select.value,
@@ -104,7 +107,7 @@
                 );
             },
             changeData: function () {
-                //console.log('Now in changeData()');
+                console.log('ForeignAmountSelect changeData');
                 this.enabledCurrencies = [];
                 let destType = this.destination.type ? this.destination.type.toLowerCase() : 'invalid';
                 let srcType = this.source.type ? this.source.type.toLowerCase() : 'invalid';

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

@@ -24,17 +24,28 @@
             {{ $t('firefly.date') }}
         </div>
         <div class="col-sm-12">
-            <input
-                    type="date"
-                    class="form-control"
-                    name="date[]"
-                    v-bind:title="$t('firefly.date')"
-                    ref="date"
-                    autocomplete="off"
-                    :disabled="index > 0"
-                    v-bind:placeholder="$t('firefly.date')"
-                    :value="value" @input="handleInput"
-            >
+            <div class="input-group">
+                <input
+                        type="date"
+                        class="form-control"
+                        name="date[]"
+                        v-bind:title="$t('firefly.date')"
+                        ref="date"
+                        autocomplete="off"
+
+                        :disabled="index > 0"
+                        v-bind:placeholder="$t('firefly.date')"
+                        :value="value" @input="handleInput"
+                >
+                <span class="input-group-btn">
+            <button
+                    tabIndex="-1"
+                    v-on:click="clearDate"
+                    class="btn btn-default"
+                    type="button"><i class="fa fa-trash-o"></i></button>
+        </span>
+            </div>
+
             <ul class="list-unstyled" v-for="error in this.error">
                 <li class="text-danger">{{ error }}</li>
             </ul>
@@ -52,7 +63,15 @@
             },
             handleInput(e) {
                 this.$emit('input', this.$refs.date.value);
-            }
+            },
+            clearDate: function () {
+                //props.value = '';
+                this.name = '';
+                this.$refs.date.value = '';
+                this.$emit('input', this.$refs.date.value);
+                // some event?
+                this.$emit('clear:date')
+            },
         }
     }
 </script>

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

@@ -24,18 +24,27 @@
             {{ $t('firefly.description') }}
         </div>
         <div class="col-sm-12">
-            <input
-                    type="text"
-                    class="form-control"
-                    name="description[]"
-                    :title="$t('firefly.description')"
-                    v-on:keypress="handleEnter"
-                    v-on:submit.prevent
-                    ref="descr"
-                    autocomplete="off"
-                    v-bind:placeholder="$t('firefly.description')"
-                    :value="value" @input="handleInput"
-            >
+            <div class="input-group">
+                <input
+                        type="text"
+                        class="form-control"
+                        name="description[]"
+                        :title="$t('firefly.description')"
+                        v-on:keypress="handleEnter"
+                        v-on:submit.prevent
+                        ref="descr"
+                        autocomplete="off"
+                        v-bind:placeholder="$t('firefly.description')"
+                        :value="value" @input="handleInput"
+                >
+                <span class="input-group-btn">
+            <button
+                    v-on:click="clearDescription"
+                    tabIndex="-1"
+                    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
@@ -72,11 +81,20 @@
             hasError: function () {
                 return this.error.length > 0;
             },
+            clearDescription: function () {
+                //props.value = '';
+                this.name = '';
+                this.$refs.input.value = '';
+                this.$emit('input', this.$refs.input.value);
+                // some event?
+                this.$emit('clear:description')
+            },
             handleInput(e) {
                 this.$emit('input', this.$refs.descr.value);
             },
             handleEnter: function (e) {
                 // todo feels sloppy
+
                 if (e.keyCode === 13) {
                     e.preventDefault();
                 }