Add custom component for date.

resources/assets/js/app.js

@@ -11,6 +11,9 @@ import * as uiv from 'uiv';
 Vue.use(uiv);
 // components for create and edit transactions.
 Vue.component('budget', require('./components/transactions/Budget.vue'));
+
+Vue.component('custom-date', require('./components/transactions/CustomDate.vue'));
+
 Vue.component('custom-transaction-fields', require('./components/transactions/CustomTransactionFields.vue'));
 Vue.component('piggy-bank', require('./components/transactions/PiggyBank.vue'));
 Vue.component('tags', require('./components/transactions/Tags.vue'));

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

@@ -0,0 +1,24 @@
+<template>
+    <div class="form-group">
+        <div class="col-sm-12 text-sm">
+            Custom Date
+        </div>
+        <div class="col-sm-12">
+            <!-- v-model="transaction.date" -->
+            <!-- :disabled="index > 0" -->
+            <input type="date" class="form-control" name="date[]"
+                   title="Custom Date" value="" autocomplete="off"
+                   placeholder="Custom Date">
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "CustomDate"
+    }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -19,7 +19,14 @@
   -->
 
 <template>
-
+    <div>
+        <component v-if="this.fields.interest_date" v-bind:is="componentInstance"></component>
+        <component v-if="this.fields.book_date" v-bind:is="componentInstance"></component>
+        <component v-if="this.fields.process_date" v-bind:is="componentInstance"></component>
+        <component v-if="this.fields.due_date" v-bind:is="componentInstance"></component>
+        <component v-if="this.fields.payment_date" v-bind:is="componentInstance"></component>
+        <component v-if="this.fields.invoice_date" v-bind:is="componentInstance"></component>
+    </div>
 </template>
 
 <script>
@@ -28,14 +35,39 @@
         mounted() {
             this.getPreference();
         },
+        data() {
+            return {
+                customInterestDate: null,
+                fields: [
+                    {
+                        "interest_date": false,
+                        "book_date": false,
+                        "process_date": false,
+                        "due_date": false,
+                        "payment_date": false,
+                        "invoice_date": false,
+                        "internal_reference": false,
+                        "notes": false,
+                        "attachments": false
+                    }
+                ]
+            };
+        },
+        computed: {
+            componentInstance () {
+                return 'custom-date';
+            }
+        },
         methods: {
             getPreference() {
 
-                const url = document.getElementsByTagName('base')[0].href + 'api/v1/preferences/transaction_journal_optional_fields';
+               // Vue.component('custom-date', (resolve) => {
+               //      console.log('loaded');
+               //  });
 
+                const url = document.getElementsByTagName('base')[0].href + 'api/v1/preferences/transaction_journal_optional_fields';
                 axios.get(url).then(response => {
-                    // TODO here we are.
+                    this.fields = response.data.data.attributes.data;
-                    //console.log(response.data.data.attributes);
                 }).catch(() => console.warn('Oh. Something went wrong'));
             },
         }