Expand v3 layout

app/Http/Controllers/Transaction/CreateController.php

@@ -154,10 +154,10 @@ final class CreateController extends Controller
             'latitude'             => $latitude,
             'zoomLevel'            => $zoomLevel,
             'objectType'           => $objectType,
-            'optionalDateFields'   => $optionalDateFields,
+            // 'optionalDateFields'   => $optionalDateFields,
             'subTitle'             => $subTitle,
             'previousUrl'          => $previousUrl,
-            'optionalFields'       => $optionalFields,
+            // 'optionalFields'       => $optionalFields,
             'preFilled'            => $preFilled,
             'allowedOpposingTypes' => $allowedOpposingTypes,
             'accountToTypes'       => $accountToTypes,

app/View/Components/Transaction/Split.php

@@ -30,16 +30,12 @@ use Illuminate\View\Component;
 
 class Split extends Component
 {
-    public array $optionalFields;
-    public array $optionalDateFields;
 
     /**
      * Create a new component instance.
      */
-    public function __construct(array $optionalFields, array $optionalDateFields)
+    public function __construct()
     {
-        $this->optionalFields     = $optionalFields;
-        $this->optionalDateFields = $optionalDateFields;
     }
 
     /**

config/translations.php

@@ -69,6 +69,12 @@ return [
                 'liability_direction_credit_short',
                 'liability_direction_null_short',
                 'help_rate_form',
+                'pref_optional_tj_interest_date',
+                'pref_optional_tj_book_date',
+                'pref_optional_tj_process_date',
+                'pref_optional_tj_due_date',
+                'pref_optional_tj_payment_date',
+                'pref_optional_tj_invoice_date',
                 'save_new_rate',
                 'interest_calc_yearly',
                 'loading',

resources/assets/v3/js/pages/transactions/create.js

@@ -49,6 +49,7 @@ import {addSplit} from "./shared/add-split.js";
 import {clearSourceAccount, clearDestinationAccount} from './shared/clear-fields.js';
 import {detectTransactionType} from './shared/detect-transaction-type.js';
 import {determineAmountCurrency} from './shared/determine-amount-currency.js';
+import {loadCustomFields} from './shared/load-custom-fields.js';
 // TODO fix two maps, perhaps disconnect from entries entirely.
 // TODO map location from preferences
 // TODO field preferences
@@ -91,6 +92,7 @@ let create = function () {
         formBehaviour: {
             formType: 'create',
             foreignCurrencyEnabled: true,
+            customFields: {},
         },
 
         // form data (except transactions) is stored in formData
@@ -152,7 +154,8 @@ let create = function () {
         clearDestinationAccount: clearDestinationAccount,
         detectTransactionType: detectTransactionType,
         determineAmountCurrency: determineAmountCurrency,
-     addAllAutocompleteToForm: addAllAutocompleteToForm,
+        addAllAutocompleteToForm: addAllAutocompleteToForm,
+        loadCustomFields: loadCustomFields,
 
 
         filterForeignCurrencies(code) {
@@ -211,6 +214,10 @@ let create = function () {
             this.addSplit();
 
             // load custom field preference and enable/disable those fields.
+            this.loadCustomFields().then(data => {
+                console.log('Loaded custom fields', data);
+                this.formBehaviour.customFields = data;
+            });
 
             // load currencies and save in form data.
             loadCurrencies().then(data => {

resources/assets/v3/js/pages/transactions/edit.js

@@ -86,6 +86,7 @@ let transactions = function () {
             formType: 'edit',
             foreignCurrencyEnabled: true,
             categorySelectVisible: false,
+            customFields: {},
         },
 
         // form data (except transactions) is stored in formData
@@ -136,6 +137,7 @@ let transactions = function () {
         determineAmountCurrency: determineAmountCurrency,
         addAllAutocompleteToForm: addAllAutocompleteToForm,
 
+
         // part of the account selection auto-complete
 
         changedDateTime(event) {
@@ -225,6 +227,13 @@ let transactions = function () {
 
         init() {
             console.log('Init()');
+
+            // load custom field preference and enable/disable those fields.
+            this.loadCustomFields().then(data => {
+                console.log('Loaded custom fields');
+                this.formBehaviour.customFields = data;
+            });
+
             this.i18next = i18next;
             // download translations and get the transaction group.
             this.notifications.wait.show = true;

resources/assets/v3/js/pages/transactions/shared/load-custom-fields.js

@@ -0,0 +1,8 @@
+
+import Preferences from '../../../api/preferences/index.js';
+
+export function loadCustomFields() {
+    return (new Preferences()).getByName('transaction_journal_optional_fields').then(data => {
+        return data.data.data.attributes.data;
+    });
+}

resources/views/partials/form/transaction/attachments.blade.php

@@ -1,4 +1,4 @@
-@if(true === $optionalFields['attachments'])
+<template x-if="true === formBehaviour.customFields.attachments">
     <div class="row mb-3">
         <label :for="'attachments_' + index"
                class="col-sm-1 col-form-label d-none d-sm-block">
@@ -13,4 +13,4 @@
                    >
         </div>
     </div>
-@endif
+</template>

resources/views/partials/form/transaction/date-fields.blade.php

@@ -1,18 +1,20 @@
-@foreach($optionalDateFields as $name => $enabled)
-    @if($enabled)
-        <div class="row mb-1">
-            <label :for="'{{ $name }}_' + index"
-                   class="col-sm-1 col-form-label d-none d-sm-block">
-                <em class="bi bi-calendar-date" title="{{ __('firefly.pref_optional_tj_' . $name) }}"></em>
-            </label>
-            <div class="col-sm-10">
-                <input type="date"
-                       class="form-control"
-                       :id="'{{ $name }}_' + index"
-                       x-model="transaction.{{ $name }}"
-                       :data-index="index"
-                       placeholder="">
+    <template x-for="enabled, key in formBehaviour.customFields" x-key="key">
+        <div class="remove me">
+            <template x-if="enabled && key.endsWith('_date')">
+            <div class="row mb-1">
+                <label :for="key + '_' + index"
+                       class="col-sm-1 col-form-label d-none d-sm-block">
+                    <em class="bi bi-calendar-date" :title="i18next.t('firefly.pref_optional_tj_' + key)"></em>
+                </label>
+                <div class="col-sm-10">
+                    <input type="date"
+                           class="form-control"
+                           :id="key + '_' + index"
+                           x-model="transaction[key]"
+                           :data-index="index"
+                           placeholder="">
+                </div>
             </div>
+        </template>
         </div>
-    @endif
-@endforeach
+    </template>

resources/views/partials/form/transaction/external-url.blade.php

@@ -1,5 +1,5 @@
-@if(true === $optionalFields['external_url'])
-<div class="row mb-3">
+<template x-if="true === formBehaviour.customFields.external_url">
+    <div class="row mb-3">
     <label :for="'external_url_' + index"
            class="col-sm-1 col-form-label d-none d-sm-block">
         <em title="{{ __('firefly.external_url') }}" class="bi bi-link"></em>
@@ -20,4 +20,5 @@
         </template>
     </div>
 </div>
-@endif
+</template>
+

resources/views/partials/form/transaction/internal-reference.blade.php

@@ -1,5 +1,6 @@
-@if(true === $optionalFields['internal_reference'])
-<div class="row mb-3">
+
+<template x-if="true === formBehaviour.customFields.internal_reference">
+    <div class="row mb-3">
     <label :for="'internal_reference_' + index"
            class="col-sm-1 col-form-label d-none d-sm-block">
         <em title="{{ __('firefly.internal_reference') }}" class="bi bi-tag-fill"></em>
@@ -13,4 +14,5 @@
                placeholder="{{ __('firefly.internal_reference')  }}">
     </div>
 </div>
-@endif
+</template>
+

resources/views/partials/form/transaction/location.blade.php

@@ -1,4 +1,5 @@
-@if(true === $optionalFields['location'])
+
+<template x-if="true === formBehaviour.customFields.location">
     <div class="row mb-3">
         <label :for="'map_' + index" class="col-sm-1 col-form-label d-none d-sm-block">
             <em title="{{ __('firefly.location') }}" class="bi bi-globe-europe-africa"></em>
@@ -26,4 +27,5 @@
             </div>
         </template>
     </div>
-@endif
+</template>
+

resources/views/partials/form/transaction/notes.blade.php

@@ -1,5 +1,6 @@
-@if(true === $optionalFields['notes'])
-<div class="row mb-3">
+
+<template x-if="true === formBehaviour.customFields.notes">
+    <div class="row mb-3">
     <label :for="'notes_' + index" class="col-sm-1 col-form-label d-none d-sm-block">
         <em title="{{ __('firefly.notes') }}" class="bi bi-fonts"></em>
     </label>
@@ -10,4 +11,5 @@
                   placeholder="{{ __('firefly.notes')  }}"></textarea>
     </div>
 </div>
-@endif
+</template>
+

resources/views/transactions/create.blade.php

@@ -9,8 +9,6 @@
                         :zoomLevel="$zoomLevel"
                         :latitude="$latitude"
                         :longitude="$longitude"
-                        :optional-date-fields="$optionalDateFields"
-                        :optional-fields="$optionalFields"
                          />
                 </template>
             </div>