mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-10-12 15:35:15 +00:00
Expand edit transaction form.
This commit is contained in:
James Cole
@@ -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;
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user