mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-09-22 03:56:42 +00:00
Make sure components are edit-ready.
This commit is contained in:
James Cole
@@ -20,19 +20,545 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<alert :message="errorMessage" type="danger"/>
|
||||
<alert :message="successMessage" type="success"/>
|
||||
<Alert :message="errorMessage" type="danger"/>
|
||||
<Alert :message="successMessage" type="success"/>
|
||||
<SplitPills :transactions="transactions"/>
|
||||
|
||||
<div class="tab-content">
|
||||
<SplitForm
|
||||
v-for="(transaction, index) in this.transactions"
|
||||
v-bind:key="index"
|
||||
:count="transactions.length"
|
||||
:transaction="transaction"
|
||||
:allowed-opposing-types="allowedOpposingTypes"
|
||||
:custom-fields="customFields"
|
||||
:date="date"
|
||||
:time="time"
|
||||
:index="index"
|
||||
:transaction-type="transactionType"
|
||||
:destination-allowed-types="destinationAllowedTypes"
|
||||
:source-allowed-types="sourceAllowedTypes"
|
||||
:allow-switch="false"
|
||||
:submitted-transaction="submittedTransaction"
|
||||
v-on:uploaded-attachments="uploadedAttachment($event)"
|
||||
v-on:set-marker-location="storeLocation($event)"
|
||||
v-on:set-account="storeAccountValue($event)"
|
||||
v-on:set-date="storeDate($event)"
|
||||
v-on:set-time="storeTime($event)"
|
||||
v-on:set-field="storeField($event)"
|
||||
v-on:remove-transaction="removeTransaction($event)"
|
||||
v-on:selected-attachments="selectedAttachments($event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- bottom buttons etc -->
|
||||
<div class="row">
|
||||
<!-- group title -->
|
||||
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
|
||||
<div v-if="transactions.length > 1" class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<TransactionGroupTitle v-model="this.groupTitle" :errors="this.groupTitleErrors" v-on:set-group-title="storeGroupTitle($event)"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
|
||||
<!-- buttons -->
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="text-xs d-none d-lg-block d-xl-block">
|
||||
|
||||
</div>
|
||||
<button class="btn btn-outline-primary btn-block" @click="addTransaction"><i class="far fa-clone"></i> {{ $t('firefly.add_another_split') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="text-xs d-none d-lg-block d-xl-block">
|
||||
|
||||
</div>
|
||||
<button :disabled="!enableSubmit" class="btn btn-info btn-block" @click="submitTransaction">
|
||||
<span v-if="enableSubmit"><i class="far fa-save"></i> {{ $t('firefly.update_transaction') }}</span>
|
||||
<span v-if="!enableSubmit"><i class="fas fa-spinner fa-spin"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="form-check">
|
||||
<input id="createAnother" v-model="createAnother" class="form-check-input" type="checkbox">
|
||||
<label class="form-check-label" for="createAnother">
|
||||
<span class="small">{{ $t('firefly.after_update_create_another') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const lodashClonedeep = require('lodash.clonedeep');
|
||||
import Alert from '../partials/Alert';
|
||||
import SplitPills from "./SplitPills";
|
||||
import SplitForm from "./SplitForm";
|
||||
import TransactionGroupTitle from "./TransactionGroupTitle";
|
||||
import {getDefaultErrors, getDefaultTransaction, toW3CString} from '../shared/transactions';
|
||||
|
||||
export default {
|
||||
name: "Edit",
|
||||
created() {
|
||||
let parts = window.location.pathname.split('/');
|
||||
this.groupId = parseInt(parts[parts.length - 1]);
|
||||
|
||||
this.getTransactionGroup();
|
||||
this.getAllowedOpposingTypes();
|
||||
this.getCustomFields();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
successMessage: '',
|
||||
errorMessage: '',
|
||||
|
||||
// transaction props
|
||||
transactions: [],
|
||||
originalTransactions: [],
|
||||
groupTitle: '',
|
||||
originalGroupTitle: '',
|
||||
transactionType: 'any',
|
||||
groudId: 0,
|
||||
|
||||
// errors in the group title:
|
||||
groupTitleErrors: [],
|
||||
|
||||
// which custom fields to show TODO
|
||||
customFields: {},
|
||||
|
||||
// date and time of the transaction, TODO
|
||||
date: new Date,
|
||||
time: new Date,
|
||||
originalDate: new Date,
|
||||
originalTime: new Date,
|
||||
|
||||
// things the process is done working on (3 phases):
|
||||
submittedTransaction: false,
|
||||
submittedLinks: false,
|
||||
submittedAttachments: false,
|
||||
|
||||
// meta data for accounts
|
||||
allowedOpposingTypes: {},
|
||||
destinationAllowedTypes: [],
|
||||
sourceAllowedTypes: [],
|
||||
|
||||
// states for the form (makes sense right)
|
||||
enableSubmit: true,
|
||||
createAnother: false,
|
||||
resetFormAfter: false,
|
||||
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Alert,
|
||||
SplitPills,
|
||||
SplitForm,
|
||||
TransactionGroupTitle
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Grap transaction group from URL and submit GET.
|
||||
*/
|
||||
getTransactionGroup: function () {
|
||||
axios.get('./api/v1/transactions/' + this.groupId)
|
||||
.then(response => {
|
||||
this.parseTransactionGroup(response.data);
|
||||
}
|
||||
).catch(error => {
|
||||
// console.log('I failed :(');
|
||||
// console.log(error);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Parse transaction group. Title is easy, transactions have their own method.
|
||||
* @param response
|
||||
*/
|
||||
parseTransactionGroup: function (response) {
|
||||
// console.log('Will now parse');
|
||||
// console.log(response);
|
||||
let attributes = response.data.attributes;
|
||||
let transactions = attributes.transactions.reverse();
|
||||
this.groupTitle = attributes.group_title;
|
||||
this.originalGroupTitle = attributes.group_title;
|
||||
|
||||
for (let i in transactions) {
|
||||
if (transactions.hasOwnProperty(i) && /^0$|^[1-9]\d*$/.test(i) && i <= 4294967294) {
|
||||
let result = this.parseTransaction(parseInt(i), transactions[i]);
|
||||
this.transactions.push(result);
|
||||
this.originalTransactions.push(lodashClonedeep(result));
|
||||
// pick up the links of this transaction:
|
||||
this.parseLinks(parseInt(result.transaction_journal_id), parseInt(i));
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Parse a single transaction.
|
||||
*
|
||||
* @param index
|
||||
* @param array
|
||||
*/
|
||||
parseTransaction: function (index, array) {
|
||||
//console.log('index: ' + index);
|
||||
if (0 === index) {
|
||||
this.transactionType = array.type.charAt(0).toUpperCase() + array.type.slice(1);
|
||||
this.sourceAllowedTypes = [array.source_type];
|
||||
this.destinationAllowedTypes = [array.destination_type];
|
||||
this.date = new Date(array.date);
|
||||
this.time = new Date(array.date);
|
||||
this.originalDate = new Date(array.date);
|
||||
this.originalTime = new Date(array.date);
|
||||
}
|
||||
let result = getDefaultTransaction();
|
||||
// parsing here:
|
||||
result.description = array.description;
|
||||
result.transaction_journal_id = parseInt(array.transaction_journal_id);
|
||||
// accounts:
|
||||
result.source_account_id = array.source_id;
|
||||
result.source_account_name = array.source_name;
|
||||
result.source_account_type = array.source_type;
|
||||
|
||||
result.destination_account_id = array.destination_id;
|
||||
result.destination_account_name = array.destination_name;
|
||||
result.destination_account_type = array.destination_type;
|
||||
|
||||
// amount:
|
||||
result.amount = array.amount;
|
||||
result.currency_id = array.currency_id;
|
||||
result.foreign_amount = array.foreign_amount;
|
||||
result.foreign_currency_id = array.foreign_currency_id;
|
||||
|
||||
// meta data
|
||||
result.category = array.category_name;
|
||||
result.budget_id = array.budget_id;
|
||||
result.bill_id = array.bill_id;
|
||||
|
||||
result.tags = array.tags;
|
||||
|
||||
// optional date fields (6x):
|
||||
result.interest_date = array.interest_date ? array.interest_date.substr(0, 10) : '';
|
||||
result.book_date = array.book_date ? array.book_date.substr(0, 10) : '';
|
||||
result.process_date = array.process_date ? array.process_date.substr(0, 10) : '';
|
||||
result.due_date = array.due_date ? array.due_date.substr(0, 10) : '';
|
||||
result.payment_date = array.payment_date ? array.payment_date.substr(0, 10) : '';
|
||||
result.invoice_date = array.invoice_date ? array.invoice_date.substr(0, 10) : '';
|
||||
|
||||
// optional other fields:
|
||||
result.internal_reference = array.internal_reference;
|
||||
result.external_url = array.external_uri;
|
||||
result.external_id = array.external_id;
|
||||
result.notes = array.notes;
|
||||
// location:
|
||||
result.location = {
|
||||
zoom_level: array.zoom_level,
|
||||
longitude: array.longitude,
|
||||
latitude: array.latitude,
|
||||
};
|
||||
result.zoom_level = array.zoom_level;
|
||||
result.longitude = array.longitude;
|
||||
result.latitude = array.latitude;
|
||||
|
||||
// error handling
|
||||
result.errors = getDefaultErrors();
|
||||
return result;
|
||||
},
|
||||
/**
|
||||
* Get the links of this transaction group from the API.
|
||||
*/
|
||||
parseLinks: function (journalId, index) {
|
||||
axios.get('./api/v1/transactions/' + journalId + '/links')
|
||||
.then(response => {
|
||||
let links = response.data.data;
|
||||
for (let i in links) {
|
||||
if (links.hasOwnProperty(i) && /^0$|^[1-9]\d*$/.test(i) && i <= 4294967294) {
|
||||
this.parseLink(links[i], journalId, index);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Process individual link from the API.
|
||||
*/
|
||||
parseLink: function (link, journalId, index) {
|
||||
let promises = [];
|
||||
let opposingId = parseInt(link.attributes.inward_id);
|
||||
let linkDirection = 'inward';
|
||||
if (opposingId === journalId) {
|
||||
opposingId = parseInt(link.attributes.outward_id);
|
||||
linkDirection = 'outward';
|
||||
}
|
||||
// add meta data to promise context.
|
||||
promises.push(new Promise((resolve) => {
|
||||
resolve(
|
||||
{
|
||||
link: link,
|
||||
journalId: journalId,
|
||||
opposingId: opposingId,
|
||||
index: index,
|
||||
direction: linkDirection
|
||||
}
|
||||
);
|
||||
}));
|
||||
|
||||
// get stuff from the API:
|
||||
promises.push(axios.get('./api/v1/transaction-journals/' + opposingId));
|
||||
promises.push(axios.get('./api/v1/transaction_links/' + link.attributes.link_type_id));
|
||||
|
||||
Promise.all(promises).then(responses => {
|
||||
let journals = responses[1].data.data.attributes.transactions;
|
||||
let opposingId = responses[0].opposingId;
|
||||
let journal = {};
|
||||
// loop over journals to get the correct one:
|
||||
for (let i in journals) {
|
||||
if (journals.hasOwnProperty(i) && /^0$|^[1-9]\d*$/.test(i) && i <= 4294967294) {
|
||||
if (journals[i].transaction_journal_id === opposingId) {
|
||||
journal = journals[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
let index = responses[0].index;
|
||||
let direction = responses[0].direction;
|
||||
let linkTypeId = responses[2].data.data.id;
|
||||
let object = {
|
||||
link_type_id: linkTypeId + '-' + direction,
|
||||
transaction_group_id: responses[1].data.data.id,
|
||||
transaction_journal_id: journal.transaction_journal_id,
|
||||
description: journal.description,
|
||||
type: journal.type,
|
||||
currency_code: journal.currency_code,
|
||||
amount: journal.amount
|
||||
};
|
||||
this.transactions[index].links.push(object);
|
||||
this.originalTransactions[index].links.push(object);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Get API value.
|
||||
*/
|
||||
getAllowedOpposingTypes: function () {
|
||||
axios.get('./api/v1/configuration/static/firefly.allowed_opposing_types')
|
||||
.then(response => {
|
||||
this.allowedOpposingTypes = response.data['firefly.allowed_opposing_types'];
|
||||
// console.log('Set allowedOpposingTypes');
|
||||
});
|
||||
},
|
||||
/**
|
||||
* Get API value.
|
||||
*/
|
||||
getCustomFields: function () {
|
||||
axios.get('./api/v1/preferences/transaction_journal_optional_fields').then(response => {
|
||||
this.customFields = response.data.data.attributes.data;
|
||||
});
|
||||
},
|
||||
uploadedAttachment: function (payload) {
|
||||
console.log('event: uploadedAttachment');
|
||||
console.log(payload);
|
||||
},
|
||||
storeLocation: function (payload) {
|
||||
this.transactions[payload.index].zoom_level = payload.zoomLevel;
|
||||
this.transactions[payload.index].longitude = payload.lng;
|
||||
this.transactions[payload.index].latitude = payload.lat;
|
||||
},
|
||||
storeAccountValue: function (payload) {
|
||||
let direction = payload.direction;
|
||||
let index = payload.index;
|
||||
this.transactions[index][direction + '_account_id'] = payload.id;
|
||||
this.transactions[index][direction + '_account_type'] = payload.type;
|
||||
this.transactions[index][direction + '_account_name'] = payload.name;
|
||||
},
|
||||
storeDate: function (payload) {
|
||||
// console.log('event: storeDate');
|
||||
// console.log(payload);
|
||||
this.date = payload.date;
|
||||
},
|
||||
storeTime: function (payload) {
|
||||
this.time = payload.time;
|
||||
// console.log('event: storeTime');
|
||||
// console.log(payload);
|
||||
},
|
||||
storeField: function (payload) {
|
||||
let field = payload.field;
|
||||
if ('category' === field) {
|
||||
field = 'category_name';
|
||||
}
|
||||
// console.log('event: storeField(' + field + ')');
|
||||
this.transactions[payload.index][field] = payload.value;
|
||||
|
||||
},
|
||||
removeTransaction: function (payload) {
|
||||
this.transactions.splice(payload.index, 1);
|
||||
// this kills the original transactions.
|
||||
this.originalTransactions = [];
|
||||
},
|
||||
storeGroupTitle: function (payload) {
|
||||
this.groupTitle = payload;
|
||||
},
|
||||
selectedAttachments: function (payload) {
|
||||
for (let i in this.transactions) {
|
||||
if (this.transactions.hasOwnProperty(i) && /^0$|^[1-9]\d*$/.test(i) && i <= 4294967294) {
|
||||
if (parseInt(this.transactions[i].transaction_journal_id) === parseInt(payload)) {
|
||||
// console.log('selectedAttachments ' + payload);
|
||||
this.transactions[i].selectedAttachments = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
addTransaction: function () {
|
||||
let newTransaction = getDefaultTransaction();
|
||||
newTransaction.errors = getDefaultErrors();
|
||||
this.transactions.push(newTransaction);
|
||||
},
|
||||
submitTransaction: function () {
|
||||
let submission = {transactions: []};
|
||||
let shouldSubmit = false;
|
||||
let shouldLinks = false;
|
||||
let shouldUpload = false;
|
||||
if (this.groupTitle !== this.originalGroupTitle) {
|
||||
submission.group_title = this.groupTitle;
|
||||
shouldSubmit = true;
|
||||
}
|
||||
for (let i in this.transactions) {
|
||||
if (this.transactions.hasOwnProperty(i) && /^0$|^[1-9]\d*$/.test(i) && i <= 4294967294) {
|
||||
// original transaction present?
|
||||
let currentTransaction = this.transactions[i];
|
||||
let originalTransaction = this.originalTransactions.hasOwnProperty(i) ? this.originalTransactions[i] : {};
|
||||
|
||||
let diff = {};
|
||||
|
||||
// compare basic fields:
|
||||
let basicFields = [
|
||||
'description',
|
||||
'source_account_id', 'source_account_name',
|
||||
'destination_account_id', 'destination_account_name',
|
||||
'amount', 'foreign_amount', 'foreign_currency_id',
|
||||
'category_name', 'budget_id', 'bill_id',
|
||||
'interest_date', 'book_date', 'due_date', 'payment_date', 'invoice_date',
|
||||
'external_url', 'internal_reference', 'external_id', 'notes',
|
||||
'zoom_level', 'longitude', 'latitude'
|
||||
];
|
||||
|
||||
for (let ii in basicFields) {
|
||||
if (basicFields.hasOwnProperty(ii) && /^0$|^[1-9]\d*$/.test(ii) && ii <= 4294967294) {
|
||||
let fieldName = basicFields[ii];
|
||||
if (currentTransaction[fieldName] !== originalTransaction[fieldName]) {
|
||||
// console.log('Index ' + i + ': Field ' + fieldName + ' updated ("' + originalTransaction[fieldName] + '" > "' + currentTransaction[fieldName] + '")');
|
||||
// console.log(originalTransaction[fieldName]);
|
||||
// console.log(currentTransaction[fieldName]);
|
||||
diff[fieldName] = currentTransaction[fieldName];
|
||||
}
|
||||
}
|
||||
}
|
||||
if (0 !== currentTransaction.piggy_bank_id) {
|
||||
diff.piggy_bank_id = currentTransaction.piggy_bank_id;
|
||||
}
|
||||
if (JSON.stringify(currentTransaction.tags) !== JSON.stringify(originalTransaction.tags)) {
|
||||
// console.log('tags are different');
|
||||
// console.log(currentTransaction.tags);
|
||||
// console.log(originalTransaction.tags);
|
||||
diff.tags = currentTransaction.tags;
|
||||
}
|
||||
|
||||
// compare links:
|
||||
let newLinks = this.compareLinks(currentTransaction.links);
|
||||
let originalLinks = this.compareLinks(originalTransaction.links);
|
||||
// console.log('links are?');
|
||||
// console.log(newLinks);
|
||||
// console.log(originalLinks);
|
||||
if (newLinks !== originalLinks) {
|
||||
// console.log('links are different!');
|
||||
// console.log(newLinks);
|
||||
// console.log(originalLinks);
|
||||
shouldLinks = true;
|
||||
}
|
||||
// this.transactions[i].selectedAttachments
|
||||
// console.log(typeof currentTransaction.selectedAttachments);
|
||||
// console.log(currentTransaction.selectedAttachments);
|
||||
if (typeof currentTransaction.selectedAttachments !== 'undefined' && true === currentTransaction.selectedAttachments) {
|
||||
// must upload!
|
||||
shouldUpload = true;
|
||||
}
|
||||
|
||||
let dateStr = 'invalid';
|
||||
if (
|
||||
this.date.toISOString() !== this.originalDate.toISOString() ||
|
||||
this.time.toISOString() !== this.originalTime.toISOString()
|
||||
) {
|
||||
// set date and time!
|
||||
shouldSubmit = true;
|
||||
let theDate = this.date;
|
||||
// update time in date object.
|
||||
theDate.setHours(this.time.getHours());
|
||||
theDate.setMinutes(this.time.getMinutes());
|
||||
theDate.setSeconds(this.time.getSeconds());
|
||||
dateStr = toW3CString(theDate);
|
||||
submission.date = dateStr;
|
||||
}
|
||||
|
||||
if (Object.keys(diff).length !== 0) {
|
||||
diff.transaction_journal_id = originalTransaction.transaction_journal_id;
|
||||
submission.transactions.push(diff);
|
||||
shouldSubmit = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log('submitTransaction');
|
||||
console.log(shouldUpload);
|
||||
console.log(shouldLinks);
|
||||
console.log(shouldSubmit);
|
||||
if (shouldSubmit) {
|
||||
this.submitUpdate(submission);
|
||||
}
|
||||
console.log(submission);
|
||||
},
|
||||
compareLinks: function (array) {
|
||||
let compare = [];
|
||||
for (let i in array) {
|
||||
if (array.hasOwnProperty(i) && /^0$|^[1-9]\d*$/.test(i) && i <= 4294967294) {
|
||||
compare.push(
|
||||
{
|
||||
amount: array[i].amount,
|
||||
currency_code: array[i].currency_code,
|
||||
description: array[i].description,
|
||||
link_type_id: array[i].link_type_id,
|
||||
transaction_group_id: array[i].transaction_group_id,
|
||||
type: array[i].type,
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
// console.log('compareLinks');
|
||||
// console.log(compare);
|
||||
return JSON.stringify(compare);
|
||||
},
|
||||
submitUpdate: function (submission) {
|
||||
const url = './api/v1/transactions/' + this.groupId;
|
||||
axios.put(url, submission)
|
||||
.then(response => {
|
||||
console.log('OK!');
|
||||
}
|
||||
).catch(error => {
|
||||
console.log('error :(');
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user