Expand edit transaction form.

resources/assets/v2/api/v2/model/transaction/get.js

@@ -31,4 +31,7 @@ export default class Get {
     list(params) {
         return api.get('/api/v2/transactions', {params: params});
     }
+    show(id, params){
+        return api.get('/api/v2/transactions/' + id, {params: params});
+    }
 }

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

@@ -33,7 +33,7 @@ import {loadPiggyBanks} from "./shared/load-piggy-banks.js";
 import {loadSubscriptions} from "./shared/load-subscriptions.js";
 
 import 'leaflet/dist/leaflet.css';
-import {addAutocomplete} from "./shared/add-autocomplete.js";
+import {addAutocomplete, getUrls} from "./shared/add-autocomplete.js";
 import {
     changeCategory,
     changeDescription,
@@ -47,6 +47,9 @@ import {spliceErrorsIntoTransactions} from "./shared/splice-errors-into-transact
 import Tags from "bootstrap5-tags";
 import {addLocation} from "./shared/manage-locations.js";
 
+
+
+
 // TODO upload attachments to other file
 // TODO fix two maps, perhaps disconnect from entries entirely.
 // TODO group title
@@ -55,12 +58,7 @@ import {addLocation} from "./shared/manage-locations.js";
 
 let i18n;
 
-const urls = {
-    description: '/api/v2/autocomplete/transaction-descriptions',
-    account: '/api/v2/autocomplete/accounts',
-    category: '/api/v2/autocomplete/categories',
-    tag: '/api/v2/autocomplete/tags',
-};
+const urls = getUrls();
 
 let transactions = function () {
     return {
@@ -265,44 +263,7 @@ let transactions = function () {
         },
 
         addedSplit() {
-            // addedSplit, is called from the HTML
-            // for source account
-            const renderAccount = function (item, b, c) {
-                return item.name_with_balance + '<br><small class="text-muted">' + i18n.t('firefly.account_type_' + item.type) + '</small>';
-            };
-            console.log(this.filters);
-            addAutocomplete({
-                selector: 'input.ac-source',
-                serverUrl: urls.account,
-                filters: this.filters.source,
-                onRenderItem: renderAccount,
-                onChange: changeSourceAccount,
-                onSelectItem: selectSourceAccount
-            });
-            addAutocomplete({
-                selector: 'input.ac-dest',
-                serverUrl: urls.account,
-                filters: this.filters.destination,
-                onRenderItem: renderAccount,
-                onChange: changeDestinationAccount,
-                onSelectItem: selectDestinationAccount
-            });
-            addAutocomplete({
-                selector: 'input.ac-category',
-                serverUrl: urls.category,
-                valueField: 'id',
-                labelField: 'name',
-                onChange: changeCategory,
-                onSelectItem: changeCategory
-            });
-            addAutocomplete({
-                selector: 'input.ac-description',
-                serverUrl: urls.description,
-                valueField: 'id',
-                labelField: 'description',
-                onChange: changeDescription,
-                onSelectItem: changeDescription,
-            });
+
 
         },
 
@@ -508,6 +469,46 @@ let transactions = function () {
                 const count = this.entries.length - 1;
                 // if(document.querySelector('#location_map_' + count)) { }
                 addLocation(count);
+
+                // addedSplit, is called from the HTML
+                // for source account
+                const renderAccount = function (item, b, c) {
+                    return item.name_with_balance + '<br><small class="text-muted">' + i18n.t('firefly.account_type_' + item.type) + '</small>';
+                };
+                addAutocomplete({
+                    selector: 'input.ac-source',
+                    serverUrl: urls.account,
+                    // filters: this.filters.source,
+                    // onRenderItem: renderAccount,
+                    onChange: changeSourceAccount,
+                    onSelectItem: selectSourceAccount,
+                    hiddenValue: this.items[count].source_account.alpine_name,
+                });
+                addAutocomplete({
+                    selector: 'input.ac-dest',
+                    serverUrl: urls.account,
+                    filters: this.filters.destination,
+                    onRenderItem: renderAccount,
+                    onChange: changeDestinationAccount,
+                    onSelectItem: selectDestinationAccount
+                });
+                addAutocomplete({
+                    selector: 'input.ac-category',
+                    serverUrl: urls.category,
+                    valueField: 'id',
+                    labelField: 'name',
+                    onChange: changeCategory,
+                    onSelectItem: changeCategory
+                });
+                addAutocomplete({
+                    selector: 'input.ac-description',
+                    serverUrl: urls.description,
+                    valueField: 'id',
+                    labelField: 'description',
+                    onChange: changeDescription,
+                    onSelectItem: changeDescription,
+                });
+
             }, 150);
         },
 

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

@@ -23,17 +23,34 @@ import dates from '../../pages/shared/dates.js';
 import {getVariable} from "../../store/get-variable.js";
 import {I18n} from "i18n-js";
 import {loadTranslations} from "../../support/load-translations.js";
+import formatMoney from "../../util/format-money.js";
+import Get from "../../api/v2/model/transaction/get.js";
+import {parseDownloadedSplits} from "./shared/parse-downloaded-splits.js";
+import {addAutocomplete, getUrls} from "./shared/add-autocomplete.js";
+import {
+    changeCategory,
+    changeDescription,
+    changeDestinationAccount,
+    changeSourceAccount,
+    selectDestinationAccount,
+    selectSourceAccount
+} from "./shared/autocomplete-functions.js";
+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 Tags from "bootstrap5-tags";
 
 // TODO upload attachments to other file
 // TODO fix two maps, perhaps disconnect from entries entirely.
 // TODO group title
 // TODO map location from preferences
 // TODO field preferences
+// TODO filters
+// TODO parse amount
 
 let i18n;
-
-
-
+const urls = getUrls();
 
 let transactions = function () {
     return {
@@ -41,20 +58,228 @@ let transactions = function () {
         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', title: null, id: null, totalAmount: 0,
+        },
+
+        // notifications
+        notifications: {
+            error: {
+                show: false, text: '', url: '',
+            }, success: {
+                show: false, text: '', url: '',
+            }, wait: {
+                show: false, text: '',
+
+            }
+        },
 
 
+        // part of the account selection auto-complete
+        filters: {
+            source: [], destination: [],
+        },
 
+        addedSplit() {
+            setTimeout(() => {
+                // addedSplit, is called from the HTML
+                // for source account
+                const renderAccount = function (item, b, c) {
+                    return item.name_with_balance + '<br><small class="text-muted">' + i18n.t('firefly.account_type_' + item.type) + '</small>';
+                };
+                addAutocomplete({
+                    selector: 'input.ac-source',
+                    serverUrl: urls.account,
+                    filters: this.filters.source,
+                    onRenderItem: renderAccount,
+                    onChange: changeSourceAccount,
+                    onSelectItem: selectSourceAccount
+                });
+                console.log('ok');
+                console.log(this.entries[0].source_account.alpine_name);
+                addAutocomplete({
+                    selector: 'input.ac-dest',
+                    serverUrl: urls.account,
+                    filters: this.filters.destination,
+                    onRenderItem: renderAccount,
+                    onChange: changeDestinationAccount,
+                    onSelectItem: selectDestinationAccount
+                });
+                addAutocomplete({
+                    selector: 'input.ac-category',
+                    serverUrl: urls.category,
+                    valueField: 'id',
+                    labelField: 'name',
+                    onChange: changeCategory,
+                    onSelectItem: changeCategory
+                });
+                addAutocomplete({
+                    selector: 'input.ac-description',
+                    serverUrl: urls.description,
+                    valueField: 'id',
+                    labelField: 'description',
+                    onChange: changeDescription,
+                    onSelectItem: changeDescription,
+                });
+            }, 250);
+
+        },
+
+        // events in the form
+        changedDateTime(event) {
+            console.warn('changedDateTime, event is not used');
+        },
+
+        changedDescription(event) {
+            console.warn('changedDescription, event is not used');
+        },
+
+        changedDestinationAccount(event) {
+            console.warn('changedDestinationAccount, event is not used');
+        },
+
+        changedSourceAccount(event) {
+            console.warn('changedSourceAccount, event is not used');
+        },
+
+        // duplicate function but this is easier.
+        formattedTotalAmount() {
+            if (this.entries.length === 0) {
+                return formatMoney(this.groupProperties.totalAmount, 'EUR');
+            }
+            return formatMoney(this.groupProperties.totalAmount, this.entries[0].currency_code ?? 'EUR');
+        },
+
+
+        getTransactionGroup() {
+            const page = window.location.href.split('/');
+            const groupId = parseInt(page[page.length - 1]);
+            const getter = new Get();
+            getter.show(groupId, {}).then((response) => {
+                const data = response.data.data;
+                this.groupProperties.id = parseInt(data.id);
+                this.groupProperties.transactionType = data.attributes.transactions[0].type;
+                this.groupProperties.title = data.attributes.title ?? data.attributes.transactions[0].description;
+                this.entries = parseDownloadedSplits(data.attributes.transactions);
+                //console.log(this.entries);
+
+                // remove waiting thing.
+                this.notifications.wait.show = false;
+            }).then(() => {
+
+                setTimeout(() => {
+                    // render tags:
+                    Tags.init('select.ac-tags', {
+                        allowClear: true,
+                        // server: urls.tag,
+                        // liveServer: true,
+                        // clearEnd: true,
+                        selected: [{label:'Bla bla',value:1,selected:true}],
+                        //allowNew: true,
+                        //notFoundMessage: i18n.t('firefly.nothing_found'),
+                        // noCache: true,
+                        // fetchOptions: {
+                        //     headers: {
+                        //         'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content
+                        //     }
+                        // }
+                    });
+                }, 250);
+            });
+        },
 
 
         init() {
+            // download translations and get the transaction group.
             Promise.all([getVariable('language', 'en_US')]).then((values) => {
                 i18n = new I18n();
                 const locale = values[0].replace('-', '_');
                 i18n.locale = locale;
                 loadTranslations(i18n, locale).then(() => {
                     //this.addSplit();
+                    this.notifications.wait.show = true;
+                    this.notifications.wait.text = i18n.t('firefly.wait_loading_transaction');
+                    this.getTransactionGroup();
                 });
+            });
 
+            // load meta 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;
+            });
+
+            // add some event listeners
+            document.addEventListener('upload-success', (event) => {
+                this.processUpload(event);
+                document.querySelectorAll("input[type=file]").value = "";
+            });
+
+            document.addEventListener('upload-error', (event) => {
+                this.processUploadError(event);
+            });
+            document.addEventListener('location-move', (event) => {
+                this.entries[event.detail.index].latitude = event.detail.latitude;
+                this.entries[event.detail.index].longitude = event.detail.longitude;
+            });
+
+            document.addEventListener('location-set', (event) => {
+                this.entries[event.detail.index].hasLocation = true;
+                this.entries[event.detail.index].latitude = event.detail.latitude;
+                this.entries[event.detail.index].longitude = event.detail.longitude;
+                this.entries[event.detail.index].zoomLevel = event.detail.zoomLevel;
+            });
+
+            document.addEventListener('location-zoom', (event) => {
+                this.entries[event.detail.index].hasLocation = true;
+                this.entries[event.detail.index].zoomLevel = event.detail.zoomLevel;
             });
         },
     }

resources/assets/v2/pages/transactions/shared/add-autocomplete.js

@@ -20,6 +20,14 @@
 
 import Autocomplete from "bootstrap5-autocomplete";
 
+export function getUrls() {
+    return {
+        description: '/api/v2/autocomplete/transaction-descriptions',
+        account: '/api/v2/autocomplete/accounts',
+        category: '/api/v2/autocomplete/categories',
+        tag: '/api/v2/autocomplete/tags',
+    }
+}
 
 export function addAutocomplete(options) {
     const params = {
@@ -31,19 +39,14 @@ export function addAutocomplete(options) {
             }
         },
         hiddenInput: true,
-        preventBrowserAutocomplete: true,
+        // preventBrowserAutocomplete: true,
         highlightTyped: true,
         liveServer: true,
-        // onChange: this.changeSourceAccount,
-        // onSelectItem: this.selectSourceAccount
-        //     onSelectItem: this.changeCategory,
-        //     onChange: this.changeCategory,
     };
     if (typeof options.filters !== 'undefined' && options.filters.length > 0) {
         params.serverParams.types = options.filters;
     }
     if (typeof options.onRenderItem !== 'undefined' && null !== options.onRenderItem) {
-        console.log('add on render item');
         params.onRenderItem = options.onRenderItem;
     }
     if (options.valueField) {
@@ -58,6 +61,9 @@ export function addAutocomplete(options) {
     if (options.onChange) {
         params.onChange = options.onChange;
     }
+    if(options.hiddenValue) {
+        params.hiddenValue = options.hiddenValue;
+    }
 
     Autocomplete.init(options.selector, params);
 }

resources/assets/v2/pages/transactions/shared/create-empty-split.js

@@ -101,11 +101,9 @@ export function createEmptySplit() {
 
         // map
         hasLocation: false,
-        map: null,
         latitude: null,
         longitude: null,
         zoomLevel: null,
-        marker: null,
 
 
         // date and time

resources/assets/v2/pages/transactions/shared/parse-downloaded-splits.js

@@ -0,0 +1,100 @@
+/*
+ * parse-downloaded-splits.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 {createEmptySplit} from "./create-empty-split.js";
+import {format} from "date-fns";
+import formatMoney from "../../../util/format-money.js";
+
+export function parseDownloadedSplits(downloads) {
+    let returnArray = [];
+    for (let i in downloads) {
+        if (downloads.hasOwnProperty(i)) {
+            // we have at least all default values!
+            let download = downloads[i];
+            let current = createEmptySplit();
+
+            // meta data
+            current.bill_id = download.bill_id;
+            current.budget_id = download.budget_id;
+            current.category_name = download.category_name;
+            current.piggy_bank_id = download.piggy_bank_id;
+
+            // meta dates
+            current.book_date = download.book_date;
+            current.due_date = download.due_date;
+            current.interest_date = download.interest_date;
+            current.invoice_date = download.invoice_date;
+            current.payment_date = download.payment_date;
+            current.process_date = download.process_date;
+
+            // more meta
+            current.external_url = download.external_url;
+            current.internal_reference = download.internal_reference;
+            current.notes = download.notes;
+            current.tags = download.tags;
+
+            // amount
+            current.amount = parseFloat(download.amount).toFixed(download.currency_decimal_places);
+            current.currency_code = download.currency_code;
+            if(null !== download.foreign_amount) {
+                current.forein_currency_code = download.foreign_currency_code;
+                current.foreign_amount = parseFloat(download.foreign_amount).toFixed(download.foreign_currency_decimal_places);
+            }
+
+            // date and description
+            current.date = format(new Date(download.date), 'yyyy-MM-dd HH:mm');
+            current.description = download.description;
+
+            // source and destination
+            current.destination_account = {
+                id: download.destination_id,
+                name: download.destination_name,
+                alpine_name: download.destination_name,
+            };
+
+            current.source_account = {
+                id: download.source_id,
+                name: download.source_name,
+                alpine_name: download.source_name,
+            };
+
+            if(null !== download.latitude) {
+                current.hasLocation = true;
+                current.latitude = download.latitude;
+                current.longitude = download.longitude;
+                current.zoomLevel = download.zoom_level;
+            }
+
+            // hasLocation: false
+            // latitude: null
+            // longitude: null
+            // piggy_bank_id: null
+            // zoomLevel: null
+            console.log('download:');
+            console.log(download);
+            console.log('current:');
+            console.log(current);
+            returnArray.push(current);
+        }
+    }
+
+
+    return returnArray;
+}