Expand create transaction form.

app/Http/Controllers/Transaction/CreateController.php

@@ -50,7 +50,7 @@ class CreateController extends Controller
 
         $this->middleware(
             function ($request, $next) {
-                app('view')->share('title', (string)trans('firefly.transactions'));
+                app('view')->share('title', (string) trans('firefly.transactions'));
                 app('view')->share('mainTitleIcon', 'fa-exchange');
                 $this->repository = app(TransactionGroupRepositoryInterface::class);
 
@@ -61,7 +61,7 @@ class CreateController extends Controller
 
     public function cloneGroup(Request $request): JsonResponse
     {
-        $groupId = (int)$request->get('id');
+        $groupId = (int) $request->get('id');
         if (0 !== $groupId) {
             $group = $this->repository->find($groupId);
             if (null !== $group) {
@@ -74,8 +74,8 @@ class CreateController extends Controller
 
                 app('preferences')->mark();
 
-                $title    = $newGroup->title ?? $newGroup->transactionJournals->first()->description;
-                $link     = route('transactions.show', [$newGroup->id]);
+                $title = $newGroup->title ?? $newGroup->transactionJournals->first()->description;
+                $link  = route('transactions.show', [$newGroup->id]);
                 session()->flash('success', trans('firefly.stored_journal', ['description' => $title]));
                 session()->flash('success_url', $link);
 
@@ -101,14 +101,14 @@ class CreateController extends Controller
     {
         app('preferences')->mark();
 
-        $sourceId             = (int)request()->get('source');
-        $destinationId        = (int)request()->get('destination');
+        $sourceId      = (int) request()->get('source');
+        $destinationId = (int) request()->get('destination');
 
         /** @var AccountRepositoryInterface $accountRepository */
         $accountRepository    = app(AccountRepositoryInterface::class);
         $cash                 = $accountRepository->getCashAccount();
         $preFilled            = session()->has('preFilled') ? session('preFilled') : [];
-        $subTitle             = (string)trans(sprintf('breadcrumbs.create_%s', strtolower((string)$objectType)));
+        $subTitle             = (string) trans(sprintf('breadcrumbs.create_%s', strtolower((string) $objectType)));
         $subTitleIcon         = 'fa-plus';
         $optionalFields       = app('preferences')->get('transaction_journal_optional_fields', [])->data;
         $allowedOpposingTypes = config('firefly.allowed_opposing_types');
@@ -118,7 +118,19 @@ class CreateController extends Controller
         $parts                = parse_url($previousUrl);
         $search               = sprintf('?%s', $parts['query'] ?? '');
         $previousUrl          = str_replace($search, '', $previousUrl);
-
+        // not really a fan of this, but meh.
+        $optionalDateFields = [
+            'interest_date' => $optionalFields['interest_date'],
+            'book_date'     => $optionalFields['book_date'],
+            'process_date'  => $optionalFields['process_date'],
+            'due_date'      => $optionalFields['due_date'],
+            'payment_date'  => $optionalFields['payment_date'],
+            'invoice_date'  => $optionalFields['invoice_date'],
+        ];
+//        var_dump($optionalFields);
+//        exit;
+        $optionalFields['external_url'] = $optionalFields['external_url'] ?? false;
+        $optionalFields['location'] = $optionalFields['location'] ?? false;
         session()->put('preFilled', $preFilled);
 
         return view(
@@ -127,6 +139,7 @@ class CreateController extends Controller
                 'subTitleIcon',
                 'cash',
                 'objectType',
+                'optionalDateFields',
                 'subTitle',
                 'defaultCurrency',
                 'previousUrl',

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

@@ -26,15 +26,14 @@ import formatMoney from "../../util/format-money.js";
 import Autocomplete from "bootstrap5-autocomplete";
 import Post from "../../api/v2/model/transaction/post.js";
 import AttachmentPost from "../../api/v1/attachments/post.js";
-
-import Get from "../../api/v2/model/currency/get.js";
-import BudgetGet from "../../api/v2/model/budget/get.js";
-import PiggyBankGet from "../../api/v2/model/piggy-bank/get.js";
-import SubscriptionGet from "../../api/v2/model/subscription/get.js";
 import {getVariable} from "../../store/get-variable.js";
 import {I18n} from "i18n-js";
 import {loadTranslations} from "../../support/load-translations.js";
 import Tags from "bootstrap5-tags";
+import {loadCurrencies} from "./shared/load-currencies.js";
+import {loadBudgets} from "./shared/load-budgets.js";
+import {loadPiggyBanks} from "./shared/load-piggy-banks.js";
+import {loadSubscriptions} from "./shared/load-subscriptions.js";
 
 import L from "leaflet";
 
@@ -172,71 +171,113 @@ let uploadFiles = function (fileData, id) {
 
 let transactions = function () {
     return {
-        count: 0,
-        totalAmount: 0,
-        transactionType: 'unknown',
-        showSuccessMessage: false,
-        showErrorMessage: false,
-        defaultCurrency: {},
-        entries: [], // loading things
-        loadingCurrencies: true,
-        loadingBudgets: true,
-        loadingPiggyBanks: true,
-        loadingSubscriptions: true,
+        // transactions are stored in "entries":
+        entries: [],
+
+        // state of the form is stored in formState:
+        formStates: {
+            loadingCurrencies: true,
+            loadingBudgets: true,
+            loadingPiggyBanks: true,
+            loadingSubscriptions: true,
+            isSubmitting: false,
+            returnHereButton: false,
+            saveAsNewButton: false, // edit form only
+            resetButton: true,
+            rulesButton: true,
+            webhooksButton: true,
+        },
+
+        // form behaviour during transaction
+        formBehaviour: {
+            formType: 'create', foreignCurrencyEnabled: true,
+        },
+
+        // form data (except transactions) is stored in formData
+        formData: {
+            defaultCurrency: null,
+            enabledCurrencies: [],
+            nativeCurrencies: [],
+            foreignCurrencies: [],
+            budgets: [],
+            piggyBanks: [],
+            subscriptions: [],
+        },
+
+        // properties for the entire transaction group
+        groupProperties: {
+            transactionType: 'unknown',
+            totalAmount: 0,
+        },
+
+        // notifications
+        notifications: {
+            error: {
+                show: false,
+                text: '',
+                url: '',
+            },
+            success: {
+                show: false,
+                text: '',
+                url: '',
+            },
+            wait: {
+                show: false,text: '',
+                url: '',
+
+            }
+        },
+
+
+        // part of the account selection auto-complete
+        filters: {
+            source: [],
+            destination: [],
+        },
+
+        // old properties, no longer used.
+
 
         // data sets
-        enabledCurrencies: [],
-        nativeCurrencies: [],
-        foreignCurrencies: [],
-        budgets: [],
-        piggyBanks: {},
-        subscriptions: [],
-        dateFields: ['interest_date', 'book_date', 'process_date', 'due_date', 'payment_date', 'invoice_date'],
-
-        foreignAmountEnabled: true,
-        filters: {
-            source: [], destination: [],
-        },
-        errorMessageText: '',
-        successMessageLink: '#',
-        successMessageText: '', // error and success messages:
-        showError: false,
-        showSuccess: false,
-        showWaitMessage: false,
-
-        // four buttons
-        returnHereButton: false,
-        resetButton: false,
-        resetButtonEnabled: false,
-        rulesButton: true,
-        webhookButton: true,
-
-        // state of the form
-        submitting: false,
 
         // used to display the success message
-        newGroupTitle: '',
-        newGroupId: 0,
+        //newGroupTitle: '',
+        //newGroupId: 0,
 
         // map things:
-        hasLocation: false,
-        latitude: 51.959659235274,
-        longitude: 5.756805887265858,
-        zoomLevel: 13,
+        //hasLocation: false,
+        //latitude: 51.959659235274,
+        //longitude: 5.756805887265858,
+        //zoomLevel: 13,
+
+        // events in the form
+        changedDateTime(event) {
+            console.log('changedDateTime');
+        },
+        changedDescription(event) {
+            console.log('changedDescription');
+        },
+        changedDestinationAccount(event) {
+            console.log('changedDestinationAccount')
+        },
+        changedSourceAccount(event) {
+            console.log('changedSourceAccount')
+        },
 
 
         detectTransactionType() {
             const sourceType = this.entries[0].source_account.type ?? 'unknown';
             const destType = this.entries[0].destination_account.type ?? 'unknown';
             if ('unknown' === sourceType && 'unknown' === destType) {
-                this.transactionType = 'unknown';
+                this.groupProperties.transactionType = 'unknown';
                 console.warn('Cannot infer transaction type from two unknown accounts.');
                 return;
             }
             // transfer: both are the same and in strict set of account types
             if (sourceType === destType && ['Asset account', 'Loan', 'Debt', 'Mortgage'].includes(sourceType)) {
-                this.transactionType = 'transfer';
-                console.log('Transaction type is detected to be "' + this.transactionType + '".');
+                this.groupProperties.transactionType = 'transfer';
+                console.log('Transaction type is detected to be "' + this.groupProperties.transactionType + '".');
 
                 // this also locks the amount into the amount of the source account
                 // and the foreign amount (if different) in that of the destination account.
@@ -247,38 +288,39 @@ let transactions = function () {
             }
             // withdrawals:
             if ('Asset account' === sourceType && ['Expense account', 'Debt', 'Loan', 'Mortgage'].includes(destType)) {
-                this.transactionType = 'withdrawal';
-                console.log('[a] Transaction type is detected to be "' + this.transactionType + '".');
+                this.groupProperties.transactionType = 'withdrawal';
+                console.log('[a] Transaction type is detected to be "' + this.groupProperties.transactionType + '".');
                 this.filterNativeCurrencies(this.entries[0].source_account.currency_code);
                 return;
             }
             if ('Asset account' === sourceType && 'unknown' === destType) {
-                this.transactionType = 'withdrawal';
-                console.log('[b] Transaction type is detected to be "' + this.transactionType + '".');
+                this.groupProperties.transactionType = 'withdrawal';
+                console.log('[b] Transaction type is detected to be "' + this.groupProperties.transactionType + '".');
                 console.log(this.entries[0].source_account);
                 this.filterNativeCurrencies(this.entries[0].source_account.currency_code);
                 return;
             }
             if (['Debt', 'Loan', 'Mortgage'].includes(sourceType) && 'Expense account' === destType) {
-                this.transactionType = 'withdrawal';
-                console.log('[c] Transaction type is detected to be "' + this.transactionType + '".');
+                this.groupProperties.transactionType = 'withdrawal';
+                console.log('[c] Transaction type is detected to be "' + this.groupProperties.transactionType + '".');
                 this.filterNativeCurrencies(this.entries[0].source_account.currency_code);
                 return;
             }
 
             // deposits:
             if ('Revenue account' === sourceType && ['Asset account', 'Debt', 'Loan', 'Mortgage'].includes(destType)) {
-                this.transactionType = 'deposit';
-                console.log('Transaction type is detected to be "' + this.transactionType + '".');
+                this.groupProperties.transactionType = 'deposit';
+                console.log('Transaction type is detected to be "' + this.groupProperties.transactionType + '".');
                 return;
             }
             if (['Debt', 'Loan', 'Mortgage'].includes(sourceType) && 'Asset account' === destType) {
-                this.transactionType = 'deposit';
-                console.log('Transaction type is detected to be "' + this.transactionType + '".');
+                this.groupProperties.transactionType = 'deposit';
+                console.log('Transaction type is detected to be "' + this.groupProperties.transactionType + '".');
                 return;
             }
             console.warn('Unknown account combination between "' + sourceType + '" and "' + destType + '".');
         },
+
         selectSourceAccount(item, ac) {
             const index = parseInt(ac._searchInput.attributes['data-index'].value);
             document.querySelector('#form')._x_dataStack[0].$data.entries[index].source_account = {
@@ -366,160 +408,6 @@ let transactions = function () {
             console.log('Changed destination account into a known ' + item.type.toLowerCase());
             document.querySelector('#form')._x_dataStack[0].detectTransactionType();
         },
-        loadCurrencies() {
-            this.enabledCurrencies = [];
-            this.nativeCurrencies = [];
-            this.foreignCurrencies = [];
-
-            this.foreignCurrencies.push({
-                id: 0, name: '(no foreign currency)', code: '', default: false, symbol: '', decimal_places: 2,
-            });
-
-            console.log('Loading user currencies.');
-            let params = {
-                page: 1, limit: 1337
-            };
-            let getter = new Get();
-            getter.list({}).then((response) => {
-                for (let i in response.data.data) {
-                    if (response.data.data.hasOwnProperty(i)) {
-                        let current = response.data.data[i];
-                        if (current.attributes.enabled) {
-                            let obj =
-
-                                {
-                                    id: current.id,
-                                    name: current.attributes.name,
-                                    code: current.attributes.code,
-                                    default: current.attributes.default,
-                                    symbol: current.attributes.symbol,
-                                    decimal_places: current.attributes.decimal_places,
-
-                                };
-                            if (obj.default) {
-                                this.defaultCurrency = obj;
-                            }
-                            this.enabledCurrencies.push(obj);
-                            this.nativeCurrencies.push(obj);
-                            this.foreignCurrencies.push(obj);
-                        }
-                    }
-                }
-                this.loadingCurrencies = false;
-            });
-        },
-        loadBudgets() {
-            this.budgets = [];
-
-            this.budgets.push({
-                id: 0, name: '(no budget)',
-            });
-
-            console.log('Loading user budgets.');
-            let params = {
-                page: 1, limit: 1337
-            };
-            let getter = new BudgetGet();
-            getter.list({}).then((response) => {
-                for (let i in response.data.data) {
-                    if (response.data.data.hasOwnProperty(i)) {
-                        let current = response.data.data[i];
-                        let obj = {
-                            id: current.id, name: current.attributes.name,
-                        };
-                        this.budgets.push(obj);
-                    }
-                }
-                this.loadingBudgets = false;
-                console.log(this.budgets);
-            });
-        },
-        loadPiggyBanks() {
-            this.piggyBanks = {};
-            let tempObject = {
-                '0': {
-                    id: 0, name: '(no group)', order: 0, piggyBanks: [{
-                        id: 0, name: '(no piggy bank)', order: 0,
-                    }]
-                }
-            };
-            console.log('Loading user piggy banks.');
-            let params = {
-                page: 1, limit: 1337
-            };
-            let getter = new PiggyBankGet();
-            getter.list({}).then((response) => {
-                for (let i in response.data.data) {
-                    if (response.data.data.hasOwnProperty(i)) {
-                        let current = response.data.data[i];
-                        let objectGroupId = current.attributes.object_group_id ?? '0';
-                        let objectGroupTitle = current.attributes.object_group_title ?? '(no group)';
-                        let piggyBank = {
-                            id: current.id, name: current.attributes.name, order: current.attributes.order,
-                        };
-                        if (!tempObject.hasOwnProperty(objectGroupId)) {
-                            tempObject[objectGroupId] = {
-                                id: objectGroupId,
-                                name: objectGroupTitle,
-                                order: current.attributes.object_group_order ?? 0,
-                                piggyBanks: []
-                            };
-                        }
-                        tempObject[objectGroupId].piggyBanks.push(piggyBank);
-                        tempObject[objectGroupId].piggyBanks.sort((a, b) => a.order - b.order);
-                    }
-                }
-                //tempObject.sort((a,b) => a.order - b.order);
-                this.loadingPiggyBanks = false;
-                this.piggyBanks = Object.keys(tempObject).sort().reduce((obj, key) => {
-                    obj[key] = tempObject[key];
-                    return obj;
-                }, {});
-            });
-        },
-        loadSubscriptions() {
-            this.subscriptions = {};
-            let tempObject = {
-                '0': {
-                    id: 0, name: '(no group)', order: 0, subscriptions: [{
-                        id: 0, name: '(no subscription)', order: 0,
-                    }]
-                }
-            };
-            console.log('Loading user suscriptions.');
-            let params = {
-                page: 1, limit: 1337
-            };
-            let getter = new SubscriptionGet();
-            getter.list({}).then((response) => {
-                for (let i in response.data.data) {
-                    if (response.data.data.hasOwnProperty(i)) {
-                        let current = response.data.data[i];
-                        let objectGroupId = current.attributes.object_group_id ?? '0';
-                        let objectGroupTitle = current.attributes.object_group_title ?? '(no group)';
-                        let piggyBank = {
-                            id: current.id, name: current.attributes.name, order: current.attributes.order,
-                        };
-                        if (!tempObject.hasOwnProperty(objectGroupId)) {
-                            tempObject[objectGroupId] = {
-                                id: objectGroupId,
-                                name: objectGroupTitle,
-                                order: current.attributes.object_group_order ?? 0,
-                                subscriptions: []
-                            };
-                        }
-                        tempObject[objectGroupId].subscriptions.push(piggyBank);
-                        tempObject[objectGroupId].subscriptions.sort((a, b) => a.order - b.order);
-                    }
-                }
-                //tempObject.sort((a,b) => a.order - b.order);
-                this.loadingSubscriptions = false;
-                this.subscriptions = Object.keys(tempObject).sort().reduce((obj, key) => {
-                    obj[key] = tempObject[key];
-                    return obj;
-                }, {});
-            });
-        },
         changeSourceAccount(item, ac) {
             console.log('changeSourceAccount');
             if (typeof item === 'undefined') {
@@ -665,12 +553,28 @@ let transactions = function () {
                 loadTranslations(i18n, locale).then(() => {
                     this.addSplit();
                 });
-
             });
-            this.loadCurrencies();
-            this.loadBudgets();
-            this.loadPiggyBanks();
-            this.loadSubscriptions();
+            // load currencies and save in form data.
+            loadCurrencies().then(data => {
+                this.formStates.loadingCurrencies = false;
+                this.formData.defaultCurrency = data.defaultCurrency;
+                this.formData.enabledCurrencies = data.enabledCurrencies;
+                this.formData.nativeCurrencies = data.nativeCurrencies;
+                this.formData.foreignCurrencies = data.foreignCurrencies;
+            });
+
+            loadBudgets().then(data => {
+                this.formData.budgets = data;
+                this.formStates.loadingBudgets = false;
+            });
+            loadPiggyBanks().then(data => {
+                this.formData.piggyBanks = data;
+                this.formStates.loadingPiggyBanks = false;
+            });
+            loadSubscriptions().then(data => {
+                this.formData.subscriptions = data;
+                this.formStates.loadingSubscriptions = false;
+            });
 
             document.addEventListener('upload-success', (event) => {
                 this.processUpload(event);
@@ -691,7 +595,7 @@ let transactions = function () {
             this.detectTransactionType();
 
             // parse transaction:
-            let transactions = parseFromEntries(this.entries, this.transactionType);
+            let transactions = parseFromEntries(this.entries, this.groupProperties.transactionType);
             let submission = {
                 // todo process all options
                 group_title: null, fire_webhooks: false, apply_rules: false, transactions: transactions
@@ -855,7 +759,7 @@ let transactions = function () {
 
                 L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                     maxZoom: 19,
-                    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap '+count+'</a>'
+                    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap ' + count + '</a>'
                 }).addTo(map);
                 map.on('click', this.addPointToMap);
                 map.on('zoomend', this.saveZoomOfMap);

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

@@ -37,7 +37,15 @@ let i18n;
 
 let transactions = function () {
     return {
+        // transactions are stored in "entries":
         entries: [],
+
+
+
+
+
+
+
         init() {
             Promise.all([getVariable('language', 'en_US')]).then((values) => {
                 i18n = new I18n();

resources/assets/v2/pages/transactions/shared/load-budgets.js

@@ -0,0 +1,46 @@
+/*
+ * load-budgets.js
+ * Copyright (c) 2024 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/>.
+ */
+
+
+import Get from "../../../api/v2/model/budget/get.js";
+
+export function loadBudgets() {
+    let params = {
+        page: 1, limit: 1337
+    };
+    let getter = new Get();
+    return getter.list(params).then((response) => {
+        let returnData = [{
+            id: 0, name: '(no budget)',
+        }];
+
+        for (let i in response.data.data) {
+            if (response.data.data.hasOwnProperty(i)) {
+                let current = response.data.data[i];
+                let obj = {
+                    id: current.id, name: current.attributes.name,
+                };
+                returnData.push(obj);
+            }
+        }
+        return returnData;
+    });
+
+}

resources/assets/v2/pages/transactions/shared/load-currencies.js

@@ -0,0 +1,65 @@
+/*
+ * load-currencies.js
+ * Copyright (c) 2024 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/>.
+ */
+
+
+import Get from "../../../api/v2/model/currency/get.js";
+
+export function loadCurrencies() {
+    let params = {
+        page: 1, limit: 1337
+    };
+    let getter = new Get();
+    return getter.list(params).then((response) => {
+        let returnData = {
+            defaultCurrency: {},
+            nativeCurrencies: [],
+            foreignCurrencies: [],
+            enabledCurrencies: [],
+        };
+
+        returnData.foreignCurrencies.push({
+            id: 0, name: '(no foreign currency)', code: '', default: false, symbol: '', decimal_places: 2,
+        });
+        for (let i in response.data.data) {
+            if (response.data.data.hasOwnProperty(i)) {
+                let current = response.data.data[i];
+                if (current.attributes.enabled) {
+                    let obj =
+                        {
+                            id: current.id,
+                            name: current.attributes.name,
+                            code: current.attributes.code,
+                            default: current.attributes.default,
+                            symbol: current.attributes.symbol,
+                            decimal_places: current.attributes.decimal_places,
+
+                        };
+                    if (obj.default) {
+                        returnData.defaultCurrency = obj;
+                    }
+                    returnData.enabledCurrencies.push(obj);
+                    returnData.nativeCurrencies.push(obj);
+                    returnData.foreignCurrencies.push(obj);
+                }
+            }
+        }
+        return returnData;
+    });
+}

resources/assets/v2/pages/transactions/shared/load-piggy-banks.js

@@ -0,0 +1,63 @@
+/*
+ * load-piggy-banks.js
+ * Copyright (c) 2024 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/>.
+ */
+
+import Get from "../../../api/v2/model/piggy-bank/get.js";
+
+export function loadPiggyBanks() {
+    let params = {
+        page: 1, limit: 1337
+    };
+    let getter = new Get();
+    return getter.list(params).then((response) => {
+        let piggyBanks = {
+            '0': {
+                id: 0, name: '(no group)', order: 0, piggyBanks: [{
+                    id: 0, name: '(no piggy bank)', order: 0,
+                }]
+            }
+        };
+
+        for (let i in response.data.data) {
+            if (response.data.data.hasOwnProperty(i)) {
+                let current = response.data.data[i];
+                let objectGroupId = current.attributes.object_group_id ?? '0';
+                let objectGroupTitle = current.attributes.object_group_title ?? '(no group)';
+                let piggyBank = {
+                    id: current.id, name: current.attributes.name, order: current.attributes.order,
+                };
+                if (!piggyBanks.hasOwnProperty(objectGroupId)) {
+                    piggyBanks[objectGroupId] = {
+                        id: objectGroupId,
+                        name: objectGroupTitle,
+                        order: current.attributes.object_group_order ?? 0,
+                        piggyBanks: []
+                    };
+                }
+                piggyBanks[objectGroupId].piggyBanks.push(piggyBank);
+                piggyBanks[objectGroupId].piggyBanks.sort((a, b) => a.order - b.order);
+            }
+        }
+        //tempObject.sort((a,b) => a.order - b.order);
+        return Object.keys(piggyBanks).sort().reduce((obj, key) => {
+            obj[key] = piggyBanks[key];
+            return obj;
+        }, {});
+    });
+}

resources/assets/v2/pages/transactions/shared/load-subscriptions.js

@@ -0,0 +1,61 @@
+/*
+ * load-subscriptions.js
+ * Copyright (c) 2024 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/>.
+ */
+
+import SubscriptionGet from "../../../api/v2/model/subscription/get.js";
+
+export function loadSubscriptions() {
+    let params = {
+        page: 1, limit: 1337
+    };
+    let getter = new SubscriptionGet();
+    return getter.list(params).then((response) => {
+        let subscriptions = {
+            '0': {
+                id: 0, name: '(no group)', order: 0, subscriptions: [{
+                    id: 0, name: '(no subscription)', order: 0,
+                }]
+            }
+        };
+        for (let i in response.data.data) {
+            if (response.data.data.hasOwnProperty(i)) {
+                let current = response.data.data[i];
+                let objectGroupId = current.attributes.object_group_id ?? '0';
+                let objectGroupTitle = current.attributes.object_group_title ?? '(no group)';
+                let piggyBank = {
+                    id: current.id, name: current.attributes.name, order: current.attributes.order,
+                };
+                if (!subscriptions.hasOwnProperty(objectGroupId)) {
+                    subscriptions[objectGroupId] = {
+                        id: objectGroupId,
+                        name: objectGroupTitle,
+                        order: current.attributes.object_group_order ?? 0,
+                        subscriptions: []
+                    };
+                }
+                subscriptions[objectGroupId].subscriptions.push(piggyBank);
+                subscriptions[objectGroupId].subscriptions.sort((a, b) => a.order - b.order);
+            }
+        }
+        return Object.keys(subscriptions).sort().reduce((obj, key) => {
+            obj[key] = subscriptions[key];
+            return obj;
+        }, {});
+    });
+}

resources/lang/en_US/firefly.php

@@ -1268,6 +1268,7 @@ return [
     'sums_apply_to_range'                       => 'All sums apply to the selected range',
     'mapbox_api_key'                            => 'To use map, get an API key from <a href="https://www.mapbox.com/">Mapbox</a>. Open your <code>.env</code> file and enter this code after <code>MAPBOX_API_KEY=</code>.',
     'press_object_location'                     => 'Right click or long press to set the object\'s location.',
+    'click_tap_location'                        => 'Click or tap the map to add a location',
     'clear_location'                            => 'Clear location',
     'delete_all_selected_tags'                  => 'Delete all selected tags',
     'select_tags_to_delete'                     => 'Don\'t forget to select some tags.',
@@ -1895,6 +1896,8 @@ return [
     // Ignore this comment
 
     // transactions:
+    'amount_foreign_if'                         => 'Amount in foreign currency, if any',
+    'amount_destination_account'                => 'Amount in the currency of the destination account',
     'edit_transaction_title'                    => 'Edit transaction ":description"',
     'unreconcile'                               => 'Undo reconciliation',
     'update_withdrawal'                         => 'Update withdrawal',

resources/views/v2/partials/form/transaction/amount.blade.php

@@ -1,14 +1,14 @@
 <div class="row mb-3">
+    <!-- select for currency -->
     <div class="col-sm-3">
-        <template x-if="loadingCurrencies">
-                                                    <span class="form-control-plaintext"><em
-                                                            class="fa-solid fa-spinner fa-spin"></em></span>
+        <!-- is loading currencies -->
+        <template x-if="formStates.loadingCurrencies">
+            <span class="form-control-plaintext"><em class="fa-solid fa-spinner fa-spin"></em></span>
         </template>
-        <template x-if="!loadingCurrencies">
-            <select class="form-control" :id="'currency_code_' + index"
-                    x-model="transaction.currency_code"
-            >
-                <template x-for="currency in nativeCurrencies">
+        <!-- is no longer loading currencies -->
+        <template x-if="!formStates.loadingCurrencies">
+            <select class="form-control" :id="'currency_code_' + index" x-model="transaction.currency_code">
+                <template x-for="currency in formData.nativeCurrencies">
                     <option :selected="currency.id == defaultCurrency.id"
                             :label="currency.name" :value="currency.code"
                             x-text="currency.name"></option>
@@ -16,12 +16,13 @@
             </select>
         </template>
     </div>
+    <!-- actual amount -->
     <div class="col-sm-9">
         <input type="number" step="any" min="0"
                :id="'amount_' + index"
                :data-index="index"
                :class="{'is-invalid': transaction.errors.amount.length > 0, 'input-mask' : true, 'form-control': true}"
-               x-model="transaction.amount" data-inputmask="currency"
+               x-model="transaction.amount"
                @change="changedAmount"
                placeholder="0.00">
         <template x-if="transaction.errors.amount.length > 0">

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

@@ -1,14 +1,16 @@
-<div class="row mb-3">
-    <label :for="'attachments_' + index"
-           class="col-sm-1 col-form-label d-none d-sm-block">
-        <i class="fa-solid fa-file-import"></i>
-    </label>
-    <div class="col-sm-10">
-        <input type="file" multiple
-               class="form-control attachments"
-               :id="'attachments_' + index"
-               :data-index="index"
-               name="attachments[]"
-               placeholder="{{ __('firefly.category')  }}">
+@if(true === $optionalFields['attachments'])
+    <div class="row mb-3">
+        <label :for="'attachments_' + index"
+               class="col-sm-1 col-form-label d-none d-sm-block">
+            <em title="{{ __('firefly.attachments') }}" class="fa-solid fa-file-import"></em>
+        </label>
+        <div class="col-sm-10">
+            <input type="file" multiple
+                   class="form-control attachments"
+                   :id="'attachments_' + index"
+                   :data-index="index"
+                   name="attachments[]"
+                   >
+        </div>
     </div>
-</div>
+@endif

resources/views/v2/partials/form/transaction/budget.blade.php

@@ -1,20 +1,19 @@
-<template x-if="transactionType != 'deposit' && transactionType != 'transfer'">
+<template x-if="groupProperties.transactionType != 'deposit' && groupProperties.transactionType != 'transfer'">
     <div class="row mb-3">
         <label :for="'budget_id_' + index"
                class="col-sm-1 col-form-label d-none d-sm-block">
-            <i class="fa-solid fa-chart-pie"></i>
+            <em title="{{ __('firefly.budget') }}" class="fa-solid fa-chart-pie"></em>
         </label>
         <div class="col-sm-10">
-            <template x-if="loadingBudgets">
-                                                        <span class="form-control-plaintext"><em
-                                                                class="fa-solid fa-spinner fa-spin"></em></span>
+            <template x-if="formStates.loadingBudgets">
+                <span class="form-control-plaintext"><em class="fa-solid fa-spinner fa-spin"></em></span>
             </template>
-            <template x-if="!loadingBudgets">
+            <template x-if="!formStates.loadingBudgets">
                 <select class="form-control"
                         :id="'budget_id_' + index"
                         x-model="transaction.budget_id"
                 >
-                    <template x-for="budget in budgets">
+                    <template x-for="budget in formData.budgets">
                         <option :label="budget.name" :value="budget.id"
                                 x-text="budget.name"></option>
                     </template>

resources/views/v2/partials/form/transaction/category.blade.php

@@ -1,7 +1,6 @@
 <div class="row mb-3">
-    <label :for="'category_name_' + index"
-           class="col-sm-1 col-form-label d-none d-sm-block">
-        <i class="fa-solid fa-bookmark"></i>
+    <label :for="'category_name_' + index" class="col-sm-1 col-form-label d-none d-sm-block">
+        <em title="{{ __('firefly.category') }}" class="fa-solid fa-bookmark"></em>
     </label>
     <div class="col-sm-10">
         <input type="search"

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

@@ -1,16 +1,18 @@
-<template x-for="dateField in dateFields">
-    <div class="row mb-1">
-        <label :for="dateField + '_date_' + index"
-               class="col-sm-1 col-form-label d-none d-sm-block">
-            <i class="fa-solid fa-calendar-alt" :title="dateField"></i>
-        </label>
-        <div class="col-sm-10">
-            <input type="date"
-                   class="form-control"
-                   :id="dateField + '_date_' + index"
-                   x-model="transaction[dateField]"
-                   :data-index="index"
-                   placeholder="">
+@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="fa-solid fa-calendar-alt" 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="">
+            </div>
         </div>
-    </div>
-</template>
+    @endif
+@endforeach

resources/views/v2/partials/form/transaction/date-time.blade.php

@@ -1,10 +1,10 @@
 <div class="row mb-3">
-    <label for="date_0" class="col-sm-1 col-form-label d-none d-sm-block">
-        <i class="fa-solid fa-calendar"></i>
+    <label :for="'date_' + index" class="col-sm-1 col-form-label d-none d-sm-block">
+        <em title="{{ __('firefly.date_and_time') }}" class="fa-solid fa-calendar"></em>
     </label>
     <div class="col-sm-10">
         <input type="datetime-local" class="form-control" :id="'date_' + index"
-               @change="detectTransactionType"
+               @change="changedDateTime"
                x-model="transaction.date"
         >
     </div>

resources/views/v2/partials/form/transaction/description.blade.php

@@ -1,11 +1,11 @@
 <div class="row mb-3">
     <label :for="'description_' + index" class="col-sm-1 col-form-label d-none d-sm-block">
-        <em title="TODO explain me" class="fa-solid fa-font"></em>
+        <em title="{{ __('firefly.description') }}" class="fa-solid fa-font"></em>
     </label>
     <div class="col-sm-10">
         <input type="text" class="form-control ac-description"
                :id="'description_' + index"
-               @change="detectTransactionType"
+               @change="changedDescription"
                x-model="transaction.description"
                :data-index="index"
                placeholder="{{ __('firefly.description')  }}">

resources/views/v2/partials/form/transaction/destination-account.blade.php

@@ -1,12 +1,13 @@
 <div class="row mb-3">
     <label :for="'dest_' + index"
            class="col-sm-1 col-form-label d-none d-sm-block">
-        <i class="fa-solid fa-arrow-left"></i>
+        <em title="{{ __('firefly.destination_account') }}" class="fa-solid fa-arrow-left"></em>
     </label>
     <div class="col-sm-10">
         <input type="text"
                class="form-control ac-dest"
                :id="'dest_' + index"
+               @changed="changedDestinationAccount"
                x-model="transaction.destination_account.alpine_name"
                :data-index="index"
                placeholder="{{ __('firefly.destination_account')  }}">

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

@@ -1,7 +1,8 @@
+@if(true === $optionalFields['external_url'])
 <div class="row mb-3">
     <label :for="'external_url_' + index"
            class="col-sm-1 col-form-label d-none d-sm-block">
-        <i class="fa-solid fa-link"></i>
+        <em title="{{ __('firefly.external_url') }}" class="fa-solid fa-link"></em>
     </label>
     <div class="col-sm-10">
         <input type="text"
@@ -19,3 +20,4 @@
         </template>
     </div>
 </div>
+@endif

resources/views/v2/partials/form/transaction/foreign-amount.blade.php

@@ -1,17 +1,15 @@
-<template x-if="foreignAmountEnabled">
+<template x-if="formBehaviour.foreignCurrencyEnabled">
     <div class="row mb-3">
         <div class="col-sm-3">
             <label class="form-label">&nbsp;</label>
-            <template x-if="loadingCurrencies">
-                                                        <span class="form-control-plaintext"><em
-                                                                class="fa-solid fa-spinner fa-spin"></em></span>
+            <template x-if="formStates.loadingCurrencies">
+                <span class="form-control-plaintext"><em class="fa-solid fa-spinner fa-spin"></em></span>
             </template>
-            <template x-if="!loadingCurrencies">
+            <template x-if="!formStates.loadingCurrencies">
                 <select class="form-control"
                         :id="'foreign_currency_code_' + index"
-                        x-model="transaction.foreign_currency_code"
-                >
-                    <template x-for="currency in foreignCurrencies">
+                        x-model="transaction.foreign_currency_code">
+                    <template x-for="currency in formData.foreignCurrencies">
                         <option :label="currency.name" :value="currency.code"
                                 x-text="currency.name"></option>
                     </template>
@@ -19,26 +17,21 @@
             </template>
         </div>
         <div class="col-sm-9">
-            <template x-if="transactionType != 'transfer'">
-                <label class="small form-label">Amount in foreign amount, if
-                    any</label>
+            <template x-if="groupProperties.transactionType != 'transfer'">
+                <label class="small form-label">{{ __('firefly.amount_foreign_if') }}</label>
             </template>
-            <template x-if="transactionType == 'transfer'">
-                <label class="small form-label">Amount in currency of
-                    destination
-                    account</label>
+            <template x-if="groupProperties.transactionType == 'transfer'">
+                <label class="small form-label">{{ __('firefly.amount_destination_account') }}</label>
             </template>
             <input type="number" step="any" min="0"
                    :id="'amount_' + index"
                    :data-index="index"
                    :class="{'is-invalid': transaction.errors.foreign_amount.length > 0, 'input-mask' : true, 'form-control': true}"
                    x-model="transaction.foreign_amount"
-                   data-inputmask="currency"
                    @change="changedAmount"
                    placeholder="0.00">
             <template x-if="transaction.errors.foreign_amount.length > 0">
-                <div class="invalid-feedback"
-                     x-text="transaction.errors.foreign_amount[0]"></div>
+                <div class="invalid-feedback" x-text="transaction.errors.foreign_amount[0]"></div>
             </template>
         </div>
     </div>

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

@@ -1,7 +1,8 @@
+@if(true === $optionalFields['internal_reference'])
 <div class="row mb-3">
     <label :for="'internal_reference_' + index"
            class="col-sm-1 col-form-label d-none d-sm-block">
-        <i class="fa-solid fa-anchor"></i>
+        <em title="{{ __('firefly.internal_reference') }}" class="fa-solid fa-anchor"></em>
     </label>
     <div class="col-sm-10">
         <input type="search"
@@ -12,3 +13,4 @@
                placeholder="{{ __('firefly.internal_reference')  }}">
     </div>
 </div>
+@endif

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

@@ -1,18 +1,18 @@
+@if(true === $optionalFields['location'])
 <div class="row mb-3">
-    <label :for="'map_' + index"
-           class="col-sm-1 col-form-label d-none d-sm-block">
-        <i class="fa-solid fa-earth-europe"></i>
+    <label :for="'map_' + index" class="col-sm-1 col-form-label d-none d-sm-block">
+        <em title="{{ __('firefly.location') }}" class="fa-solid fa-earth-europe"></em>
     </label>
     <div class="col-sm-10">
         <div :id="'location_map_' + index" style="height:300px;" :data-index="index"></div>
         <span class="muted small">
-                                                    <template x-if="!transaction.hasLocation">
-                                                        <span>Tap the map to add a location</span>
-                                                    </template>
-                                                    <template x-if="transaction.hasLocation">
-                                                        <a :data-index="index" href="#" @click="clearLocation">Clear point</a>
-                                                        </template>
-                                                </span>
+            <template x-if="!transaction.hasLocation">
+                <span>{{ __('firefly.click_tap_location') }}</span>
+            </template>
+            <template x-if="transaction.hasLocation">
+                <a :data-index="index" href="#" @click="clearLocation">{{ __('firefly.clear_location') }}</a>
+            </template>
+        </span>
     </div>
-
 </div>
+@endif

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

@@ -1,11 +1,13 @@
+@if(true === $optionalFields['notes'])
 <div class="row mb-3">
-    <label :for="'notes_' + index"
-           class="col-sm-1 col-form-label d-none d-sm-block">
-        <i class="fa-solid fa-font"></i>
+    <label :for="'notes_' + index" class="col-sm-1 col-form-label d-none d-sm-block">
+        <em title="{{ __('firefly.notes') }}" class="fa-solid fa-font"></em>
     </label>
     <div class="col-sm-10">
-                                                <textarea class="form-control" :id="'notes_' + index"
-                                                          x-model="transaction.notes"
-                                                          placeholder="{{ __('firefly.notes')  }}"></textarea>
+        <textarea class="form-control"
+                  :id="'notes_' + index"
+                  x-model="transaction.notes"
+                  placeholder="{{ __('firefly.notes')  }}"></textarea>
     </div>
 </div>
+@endif

resources/views/v2/partials/form/transaction/piggy-bank.blade.php

@@ -1,20 +1,18 @@
-<template
-    x-if="transactionType != 'deposit' && transactionType != 'withdrawal'">
+<template x-if="groupProperties.transactionType != 'deposit' && groupProperties.transactionType != 'withdrawal'">
     <div class="row mb-3">
         <label :for="'piggy_bank_id_' + index"
                class="col-sm-1 col-form-label d-none d-sm-block">
-            <i class="fa-solid fa-piggy-bank"></i>
+            <em title="{{ __('firefly.piggy_bank') }}" class="fa-solid fa-piggy-bank"></em>
         </label>
         <div class="col-sm-10">
-            <template x-if="loadingPiggyBanks">
-                                                        <span class="form-control-plaintext"><em
-                                                                class="fa-solid fa-spinner fa-spin"></em></span>
+            <template x-if="formStates.loadingPiggyBanks">
+                <span class="form-control-plaintext"><em class="fa-solid fa-spinner fa-spin"></em></span>
             </template>
-            <template x-if="!loadingPiggyBanks">
+            <template x-if="!formStates.loadingPiggyBanks">
                 <select class="form-control"
                         :id="'piggy_bank_id_' + index"
                         x-model="transaction.piggy_bank_id">
-                    <template x-for="group in piggyBanks">
+                    <template x-for="group in formData.piggyBanks">
                         <optgroup :label="group.name">
                             <template x-for="piggyBank in group.piggyBanks">
                                 <option :label="piggyBank.name"

resources/views/v2/partials/form/transaction/source-account.blade.php

@@ -1,7 +1,7 @@
 <div class="row mb-3">
     <label :for="'source_' + index"
            class="col-sm-1 col-form-label d-none d-sm-block">
-        <i class="fa-solid fa-arrow-right"></i>
+        <em title="{{ __('firefly.source_account') }}" class="fa-solid fa-arrow-right"></em>
     </label>
     <div class="col-sm-10">
         <input type="text"
@@ -9,6 +9,7 @@
                :id="'source_' + index"
                x-model="transaction.source_account.alpine_name"
                :data-index="index"
+               @changed="changedSourceAccount"
                placeholder="{{ __('firefly.source_account')  }}">
     </div>
 </div>

resources/views/v2/partials/form/transaction/submission-options.blade.php

@@ -1,31 +1,39 @@
+<!-- RETURN HERE AFTER CREATE TRANSACTION -->
+<template x-if="'create' === formBehaviour.formType">
+    <div class="form-check">
+        <input class="form-check-input" x-model="formStates.returnHereButton" type="checkbox" id="returnButton">
+        <label class="form-check-label" for="returnButton">{{ __('firefly.create_another') }}</label>
+    </div>
+</template>
+
+<!-- RESET AFTER -->
+<template x-if="'create' === formBehaviour.formType">
+    <div class="form-check">
+        <input class="form-check-input" x-model="formStates.resetButton" type="checkbox" id="resetButton" :disabled="!formStates.returnHereButton">
+        <label class="form-check-label" for="resetButton">{{ __('firefly.reset_after') }}</label>
+    </div>
+</template>
+<!-- RETURN HERE AFTER EDIT TRANSACTION -->
+<template x-if="'edit' === formBehaviour.formType">
+    <div class="form-check">
+        <input class="form-check-input" x-model="formStates.returnHereButton" type="checkbox" id="returnButton">
+        <label class="form-check-label" for="returnButton">{{ __('firefly.after_update_create_another') }}</label>
+    </div>
+</template>
+<!-- CLONE INSTEAD OF EDIT CURRENT TRANSACTION -->
+<template x-if="'edit' === formBehaviour.formType">
+    <div class="form-check">
+        <input class="form-check-input" x-model="formStates.saveAsNewButton" type="checkbox" id="saveAsNewButton">
+        <label class="form-check-label" for="saveAsNewButton">{{ __('firefly.store_as_new') }}</label>
+    </div>
+</template>
+
 <div class="form-check">
-    <input class="form-check-input" x-model="returnHereButton" type="checkbox"
-           id="returnButton">
-    <label class="form-check-label" for="returnButton">
-        Return here to create a new transaction
-    </label>
+    <input class="form-check-input" type="checkbox" id="rulesButton" :checked="formStates.rulesButton">
+    <label class="form-check-label" for="rulesButton">{{ __('firefly.apply_rules_checkbox') }}</label>
 </div>
 
 <div class="form-check">
-    <input class="form-check-input" x-model="resetButton" type="checkbox"
-           id="resetButton" :disabled="!returnHereButton">
-    <label class="form-check-label" for="resetButton">
-        Reset the form after returning
-    </label>
-</div>
-
-<div class="form-check">
-    <input class="form-check-input" type="checkbox" id="rulesButton"
-           :checked="rulesButton">
-    <label class="form-check-label" for="rulesButton">
-        Run rules on this transaction
-    </label>
-</div>
-
-<div class="form-check">
-    <input class="form-check-input" type="checkbox" id="webhookButton"
-           :checked="webhookButton">
-    <label class="form-check-label" for="webhookButton">
-        Run webhooks on this transaction
-    </label>
+    <input class="form-check-input" type="checkbox" id="webhookButton" :checked="formStates.webhookButton">
+    <label class="form-check-label" for="webhookButton">{{ __('firefly.fire_webhooks_checkbox') }}</label>
 </div>

resources/views/v2/partials/form/transaction/subscription.blade.php

@@ -1,19 +1,17 @@
-<template x-if="transactionType != 'transfer' && transactionType != 'deposit'">
+<template x-if="groupProperties.transactionType != 'transfer' && groupProperties.transactionType != 'deposit'">
     <div class="row mb-3">
-        <label :for="'bill_id_' + index"
-               class="col-sm-1 col-form-label d-none d-sm-block">
-            <i class="fa-solid fa-calendar"></i>
+        <label :for="'bill_id_' + index" class="col-sm-1 col-form-label d-none d-sm-block">
+            <em title="{{ __('firefly.subscription') }}" class="fa-solid fa-calendar"></em>
         </label>
         <div class="col-sm-10">
-            <template x-if="loadingSubscriptions">
-                                                        <span class="form-control-plaintext"><em
-                                                                class="fa-solid fa-spinner fa-spin"></em></span>
+            <template x-if="formStates.loadingSubscriptions">
+                <span class="form-control-plaintext"><em class="fa-solid fa-spinner fa-spin"></em></span>
             </template>
-            <template x-if="!loadingSubscriptions">
+            <template x-if="!formStates.loadingSubscriptions">
                 <select class="form-control"
                         :id="'bill_id_' + index"
                         x-model="transaction.bill_id">
-                    <template x-for="group in subscriptions">
+                    <template x-for="group in formData.subscriptions">
                         <optgroup :label="group.name">
                             <template
                                 x-for="subscription in group.subscriptions">

resources/views/v2/partials/form/transaction/tags.blade.php

@@ -1,7 +1,7 @@
 <div class="row mb-3">
     <label :for="'tags_' + index"
            class="col-sm-1 col-form-label d-none d-sm-block">
-        <i class="fa-solid fa-tag"></i>
+        <em title="{{ __('firefly.tags') }}" class="fa-solid fa-tag"></em>
     </label>
     <div class="col-sm-10">
         <select
@@ -10,7 +10,7 @@
             x-model="transaction.tags"
             :name="'tags['+index+'][]'"
             multiple>
-            <option value="">Type a tag...</option>
+            <option value="">{{ __('firefly.select_tag') }}</option>
         </select>
     </div>
 </div>

resources/views/v2/transactions/create.blade.php

@@ -10,7 +10,7 @@
             <x-transaction-tab-list></x-transaction-tab-list>
             <div class="tab-content" id="splitTabsContent">
                 <template x-for="transaction,index in entries">
-                    <x-transaction-split></x-transaction-split>
+                    <x-transaction-split :optionalFields="$optionalFields" :optionalDateFields="$optionalDateFields"></x-transaction-split>
                 </template>
             </div>
             <div class="row">