Update frontend.

frontend/src/components/transactions/Create.vue

@@ -22,7 +22,7 @@
   <div>
     <alert :message="errorMessage" type="danger"/>
     <alert :message="successMessage" type="success"/>
-    <SplitPills :transactions="transactions" />
+    <SplitPills :transactions="transactions"/>
     <div class="tab-content">
       <SplitForm
           v-for="(transaction, index) in this.transactions"
@@ -30,6 +30,7 @@
           :transaction="transaction"
           :index="index"
           :count="transactions.length"
+          :custom-fields="customFields"
           :submitted-transaction="submittedTransaction"
           v-on:uploaded-attachments="uploadedAttachment($event)"
       />
@@ -116,7 +117,7 @@ export default {
   created() {
     this.storeAllowedOpposingTypes();
     this.storeAccountToTransaction();
-    this.storeCustomDateFields();
+    this.storeCustomFields();
     this.addTransaction();
   },
   data() {
@@ -125,6 +126,9 @@ export default {
       errorMessage: '',
       successMessage: '',
 
+      // custom fields, useful for components:
+      customFields: [],
+
       // states for the form (makes sense right)
       enableSubmit: true,
       createAnother: false,
@@ -155,7 +159,6 @@ export default {
     ...mapGetters([
                     'transactionType',
                     'transactions',
-                    'customDateFields',
                     'date',
                     'groupTitle'
                   ])
@@ -203,27 +206,9 @@ export default {
      * it should be done via the create.js Vue store because multiple components are interested in the
      * user's custom transaction fields.
      */
-    storeCustomDateFields: function () {
+    storeCustomFields: function () {
       axios.get('./api/v1/preferences/transaction_journal_optional_fields').then(response => {
-        let fields = response.data.data.attributes.data;
-        let allDateFields = ['interest_date', 'book_date', 'process_date', 'due_date', 'payment_date', 'invoice_date'];
-        let selectedDateFields = {
-          interest_date: false,
-          book_date: false,
-          process_date: false,
-          due_date: false,
-          payment_date: false,
-          invoice_date: false,
-        };
-        for (let key in fields) {
-          if (fields.hasOwnProperty(key)) {
-            if (-1 !== allDateFields.indexOf(key)) {
-              selectedDateFields[key] = fields[key];
-            }
-          }
-        }
-        // see we already store it in the store, so this would be an easy change.
-        this.$store.commit('transactions/create/setCustomDateFields', selectedDateFields);
+        this.customFields = response.data.data.attributes.data;
       });
     },
     /**

frontend/src/components/transactions/SplitForm.vue

@@ -100,6 +100,7 @@
               <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-xs-12 offset-xl-2 offset-lg-2">
                 <TransactionCustomDates
                     :index="index"
+                    :custom-fields.sync="customFields"
                     :errors="transaction.errors.custom_dates"
                 />
               </div>
@@ -164,12 +165,12 @@
     </div>
     <!-- end card for meta -->
     <!-- card for extra -->
-    <div class="row">
+    <div class="row" v-if="hasMetaFields">
       <div class="col">
         <div class="card">
           <div class="card-header">
             <h3 class="card-title">
-              {{ $t('firefly.transaction_journal_meta') }}
+              {{ $t('firefly.transaction_journal_extra') }}
               <span v-if="count > 1">({{ index + 1 }} / {{ count }}) </span>
             </h3>
           </div>
@@ -182,17 +183,20 @@
                     :index="index"
                     v-model="transaction.internal_reference"
                     :errors="transaction.errors.internal_reference"
+                    :custom-fields.sync="customFields"
                 />
 
                 <TransactionExternalUrl
                     :index="index"
                     v-model="transaction.external_url"
                     :errors="transaction.errors.external_url"
+                    :custom-fields.sync="customFields"
                 />
                 <TransactionNotes
                     :index="index"
                     v-model="transaction.notes"
                     :errors="transaction.errors.notes"
+                    :custom-fields.sync="customFields"
                 />
               </div>
               <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
@@ -204,9 +208,20 @@
                     :transaction_journal_id="transaction.transaction_journal_id"
                     :submitted_transaction="submittedTransaction"
                     v-model="transaction.attachments"
+                    :custom-fields.sync="customFields"
+                />
+                <TransactionLocation
+                    :index="index"
+                    v-model="transaction.notes"
+                    :errors="transaction.errors.location"
+                    :custom-fields.sync="customFields"
                 />
 
-                <TransactionLinks :index="index" v-model="transaction.links" />
+                <TransactionLinks
+                    :index="index"
+                    v-model="transaction.links"
+                    :custom-fields.sync="customFields"
+                />
               </div>
 
             </div>
@@ -242,6 +257,7 @@ import TransactionLinks from "./TransactionLinks";
 import TransactionAttachments from "./TransactionAttachments";
 import SplitPills from "./SplitPills";
 import {createNamespacedHelpers} from "vuex";
+import TransactionLocation from "./TransactionLocation";
 
 const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
 
@@ -251,13 +267,35 @@ export default {
     'transaction',
     'split',
     'count',
+    'customFields', // for custom transaction form fields.
     'index',
     'submittedTransaction' // need to know if transaction is submitted.
   ],
   computed: {
-    ...mapGetters(['transactionType',])
+    ...mapGetters(['transactionType',]),
+    hasMetaFields: function () {
+      let requiredFields = [
+        'internal_reference',
+        'notes',
+        'attachments',
+        'external_uri',
+        'location',
+        'links',
+      ];
+      for (let field in this.customFields) {
+        if (this.customFields.hasOwnProperty(field)) {
+          if (requiredFields.includes(field)) {
+            if (true === this.customFields[field]) {
+              return true;
+            }
+          }
+        }
+      }
+      return false;
+    }
   },
   components: {
+    TransactionLocation,
     SplitPills,
     TransactionAttachments,
     TransactionNotes,

frontend/src/components/transactions/TransactionAttachments.vue

@@ -19,7 +19,7 @@
   -->
 
 <template>
-  <div class="form-group">
+  <div class="form-group" v-if="showField">
     <div class="text-xs d-none d-lg-block d-xl-block">
       {{ $t('firefly.attachments') }}
     </div>
@@ -38,16 +38,35 @@
 <script>
 export default {
   name: "TransactionAttachments",
-  props: ['transaction_journal_id'],
+  props: ['transaction_journal_id', 'customFields'],
+  data() {
+    return {
+      availableFields: this.customFields
+    }
+  },
   watch: {
+    customFields: function (value) {
+      this.availableFields = value;
+    },
     transaction_journal_id: function (value) {
-      console.log('transaction_journal_id changed to ' + value);
+      if (!this.showField) {
+        return;
+      }
+      // console.log('transaction_journal_id changed to ' + value);
       // do upload!
       if (0 !== value) {
         this.doUpload();
       }
     }
   },
+  computed: {
+    showField: function () {
+      if ('attachments' in this.availableFields) {
+        return this.availableFields.attachments;
+      }
+      return false;
+    }
+  },
   methods: {
     doUpload: function () {
       console.log('Now in doUpload() for ' + this.$refs.att.files.length + ' files.');

frontend/src/components/transactions/TransactionCustomDates.vue

@@ -20,11 +20,11 @@
 
 <template>
   <div>
-    <div class="form-group" v-for="(enabled, name) in enabledDates">
-      <div class="text-xs d-none d-lg-block d-xl-block" v-if="enabled">
+    <div class="form-group" v-for="(enabled, name) in availableFields">
+      <div class="text-xs d-none d-lg-block d-xl-block" v-if="enabled && isDateField(name)">
         {{ $t('form.' + name) }}
       </div>
-      <div class="input-group" v-if="enabled">
+      <div class="input-group" v-if="enabled && isDateField(name)">
         <input
             class="form-control"
             type="date"
@@ -44,52 +44,37 @@
 
 <script>
 // TODO: error handling
+// TODO dont use store?
 import {createNamespacedHelpers} from "vuex";
 
 const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
 export default {
   name: "TransactionCustomDates",
-  props: ['index', 'errors'],
+  props: ['index', 'errors', 'customFields'],
   data() {
     return {
-      enabledDates: {},
+      dateFields: ['interest_date', 'book_date', 'process_date', 'due_date', 'payment_date', 'invoice_date'],
+      availableFields: this.customFields
     }
   },
-  created() {
-    this.getCustomDates();
+  watch: {
+    customFields: function(value) {
+      this.availableFields = value;
+    }
   },
   methods: {
     ...mapGetters(['transactions']),
     ...mapMutations(['updateField',],
     ),
+    isDateField: function (name) {
+      return this.dateFields.includes(name)
+    },
     getFieldValue(field) {
       return this.transactions()[parseInt(this.index)][field] ?? '';
     },
     setFieldValue(event, field) {
       this.updateField({index: this.index, field: field, value: event.target.value});
     },
-    getCustomDates: function () {
-      axios.get('./api/v1/preferences/transaction_journal_optional_fields').then(response => {
-        let fields = response.data.data.attributes.data;
-        let allDateFields = ['interest_date', 'book_date', 'process_date', 'due_date', 'payment_date', 'invoice_date'];
-        let selectedDateFields = {
-          interest_date: false,
-          book_date: false,
-          process_date: false,
-          due_date: false,
-          payment_date: false,
-          invoice_date: false,
-        };
-        for (let key in fields) {
-          if (fields.hasOwnProperty(key)) {
-            if (-1 !== allDateFields.indexOf(key)) {
-              selectedDateFields[key] = fields[key];
-            }
-          }
-        }
-        this.enabledDates = selectedDateFields;
-      });
-    },
   }
 }
 </script>

frontend/src/components/transactions/TransactionExternalUrl.vue

@@ -19,7 +19,7 @@
   -->
 
 <template>
-  <div class="form-group">
+  <div class="form-group" v-if="showField">
     <div class="text-xs d-none d-lg-block d-xl-block">
       {{ $t('firefly.external_url') }}
     </div>
@@ -44,11 +44,20 @@ import {createNamespacedHelpers} from "vuex";
 const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
 
 export default {
-  props: ['index', 'value', 'errors'],
+  props: ['index', 'value', 'errors', 'customFields'],
   name: "TransactionExternalUrl",
   data() {
     return {
-      url: this.value
+      url: this.value,
+      availableFields: this.customFields
+    }
+  },
+  computed: {
+    showField: function () {
+      if ('external_uri' in this.availableFields) {
+        return this.availableFields.external_uri;
+      }
+      return false;
     }
   },
   methods: {
@@ -59,6 +68,9 @@ export default {
     ),
   },
   watch: {
+    customFields: function (value) {
+      this.availableFields = value;
+    },
     url: function (value) {
       this.updateField({field: 'external_url', index: this.index, value: value});
     }

frontend/src/components/transactions/TransactionInternalReference.vue

@@ -19,7 +19,7 @@
   -->
 
 <template>
-  <div class="form-group">
+  <div class="form-group" v-if="showField">
     <div class="text-xs d-none d-lg-block d-xl-block">
       {{ $t('firefly.internal_reference') }}
     </div>
@@ -44,11 +44,20 @@ import {createNamespacedHelpers} from "vuex";
 const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
 
 export default {
-  props: ['index', 'value', 'errors'],
+  props: ['index', 'value', 'errors', 'customFields'],
   name: "TransactionInternalReference",
   data() {
     return {
-      reference: this.value
+      reference: this.value,
+      availableFields: this.customFields
+    }
+  },
+  computed: {
+    showField: function () {
+      if ('internal_reference' in this.availableFields) {
+        return this.availableFields.internal_reference;
+      }
+      return false;
     }
   },
   methods: {
@@ -59,6 +68,9 @@ export default {
     ),
   },
   watch: {
+    customFields: function (value) {
+      this.availableFields = value;
+    },
     reference: function (value) {
       this.updateField({field: 'internal_reference', index: this.index, value: value});
     }

frontend/src/components/transactions/TransactionLinks.vue

@@ -19,7 +19,7 @@
   -->
 
 <template>
-  <div>
+  <div v-if="showField">
     <div class="form-group">
       <div class="text-xs d-none d-lg-block d-xl-block">
         {{ $t('firefly.journal_links') }}
@@ -191,7 +191,7 @@ const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers
 const lodashClonedeep = require('lodash.clonedeep');
 // TODO error handling
 export default {
-  props: ['index', 'value', 'errors'],
+  props: ['index', 'value', 'errors', 'customFields'],
   name: "TransactionLinks",
   data() {
     return {
@@ -202,6 +202,7 @@ export default {
       query: '',
       searching: false,
       links: [],
+      availableFields: this.customFields
     }
   },
   created() {
@@ -209,9 +210,20 @@ export default {
     this.links = lodashClonedeep(this.value);
     this.getLinkTypes();
   },
+  computed: {
+    showField: function () {
+      if ('links' in this.availableFields) {
+        return this.availableFields.links;
+      }
+      return false;
+    }
+  },
   watch: {
     links: function (value) {
       this.updateField({index: this.index, field: 'links', value: lodashClonedeep(value)});
+    },
+    customFields: function (value) {
+      this.availableFields = value;
     }
   },
   methods: {

frontend/src/components/transactions/TransactionLocation.vue

@@ -0,0 +1,59 @@
+<!--
+  - TransactionLocation.vue
+  - Copyright (c) 2021 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/>.
+  -->
+
+<template>
+  <div class="form-group" v-if="showField">
+    <div class="text-xs d-none d-lg-block d-xl-block">
+      {{ $t('firefly.location') }}
+    </div>
+    <div class="input-group">
+      (TODO)
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TransactionLocation",
+  props: ['index', 'value', 'errors', 'customFields'],
+  data() {
+    return {
+      availableFields: this.customFields
+    }
+  },
+  computed: {
+    showField: function () {
+      if ('location' in this.availableFields) {
+        return this.availableFields.location;
+      }
+      return false;
+    }
+  },
+  watch: {
+    customFields: function (value) {
+      this.availableFields = value;
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/components/transactions/TransactionNotes.vue

@@ -20,7 +20,7 @@
 
 <template>
 
-  <div class="form-group">
+  <div class="form-group" v-if="showField">
     <div class="text-xs d-none d-lg-block d-xl-block">
       {{ $t('firefly.notes') }}
     </div>
@@ -41,11 +41,20 @@ import {createNamespacedHelpers} from "vuex";
 const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
 
 export default {
-  props: ['index', 'value', 'errors'],
+  props: ['index', 'value', 'errors', 'customFields'],
   name: "TransactionNotes",
   data() {
     return {
-      notes: this.value
+      notes: this.value,
+      availableFields: this.customFields
+    }
+  },
+  computed: {
+    showField: function () {
+      if ('notes' in this.availableFields) {
+        return this.availableFields.notes;
+      }
+      return false;
     }
   },
   methods: {
@@ -56,6 +65,9 @@ export default {
     ),
   },
   watch: {
+    customFields: function (value) {
+      this.availableFields = value;
+    },
     notes: function (value) {
       this.updateField({field: 'notes', index: this.index, value: value});
     }