gh-mirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2026-01-09 20:11:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rebuild frontend

Browse Source
This commit is contained in:
James Cole
2021-04-09 02:07:34 +02:00
parent 5b60db120f
commit 0b4ebf644d
27 changed files with 210 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/components/store/modules/root.js vendored
View File

@@ -22,6 +22,7 @@
const state = () => (
{
listPageSize: 33,
// timezone: ''
}
)
@@ -29,20 +30,18 @@ const state = () => (
// getters
const getters = {
listPageSize: state => {
// console.log('Wil return ' + state.listPageSize);
return state.listPageSize;
},
// timezone: state => {
// // console.log('Wil return ' + state.listPageSize);
// return state.timezone;
// },
}
// actions
const actions = {
initialiseStore(context) {
// console.log('Now in root initialiseStore');
// if list length in local storage:
if (localStorage.listPageSize) {
// console.log('listPageSize is in localStorage')
// console.log('Init list page size with value ');
// console.log(localStorage.listPageSize);
state.listPageSize = localStorage.listPageSize;
context.commit('setListPageSize', {length: localStorage.listPageSize});
}
@@ -54,6 +53,17 @@ const actions = {
}
);
}
// if (localStorage.timezone) {
// state.timezone = localStorage.timezone;
// context.commit('setTimezone', {timezone: localStorage.timezone});
// }
// if (!localStorage.timezone) {
// axios.get('./api/v1/configuration/app.timezone')
// .then(response => {
// context.commit('setTimezone', {timezone: response.data.data.value});
// }
// );
// }
}
}
@@ -65,9 +75,17 @@ const mutations = {
let number = parseInt(payload.length);
if (0 !== number) {
state.listPageSize = number;
localStorage.listPageSize = number;
}
},
// setTimezone(state, payload) {
//
// if ('' !== payload.timezone) {
// state.timezone = payload.timezone;
// localStorage.timezone = payload.timezone;
// }
// },
}
export default {

129
frontend/src/components/transactions/Create.vue
View File

@@ -37,14 +37,12 @@
:index="index"
:source-allowed-types="sourceAllowedTypes"
:submitted-transaction="submittedTransaction"
:time="time"
:transaction="transaction"
:transaction-type="transactionType"
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)"
/>
@@ -113,14 +111,11 @@
</template>
<script>
import {createNamespacedHelpers} from 'vuex'
import Alert from '../partials/Alert';
import SplitPills from "./SplitPills";
import TransactionGroupTitle from "./TransactionGroupTitle";
import SplitForm from "./SplitForm";
import {toW3CString} from '../../shared/transactions';
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
import {mapGetters, mapMutations} from "vuex";
export default {
name: "Create",
@@ -138,10 +133,12 @@ export default {
let pathName = window.location.pathname;
let parts = pathName.split('/');
let type = parts[parts.length - 1];
console.log('Set transaction type to ' + type);
// set a basic date-time string:
this.date = format(new Date, "yyyy-MM-dd'T'00:00");
console.log('Date is set to "' + this.date + '"');
this.setTransactionType(type[0].toUpperCase() + type.substring(1));
//this.getAllowedOpposingTypes();
this.getExpectedSourceTypes();
this.getAccountToTransaction();
this.getCustomFields();
@@ -187,32 +184,25 @@ export default {
sourceAllowedTypes: ['Asset account', 'Loan', 'Debt', 'Mortgage', 'Revenue account'],
destinationAllowedTypes: ['Asset account', 'Loan', 'Debt', 'Mortgage', 'Expense account'],
// date and time not in the store because it was buggy
date: new Date,
time: new Date,
// date not in the store because it was buggy
date: ''
}
},
computed: {
/**
* Grabbed from the store.
*/
...mapGetters([
'transactionType',
'transactions',
'groupTitle'
])
...mapGetters('transactions/create', ['transactionType', 'transactions', 'groupTitle']),
...mapGetters('root', ['listPageSize'])
},
watch: {
submittedTransaction: function () {
// see finalizeSubmit()
this.finalizeSubmit();
},
submittedLinks: function () {
// see finalizeSubmit()
this.finalizeSubmit();
},
submittedAttachments: function () {
// see finalizeSubmit()
this.finalizeSubmit();
}
},
@@ -220,17 +210,17 @@ export default {
/**
* Store related mutators used by this component.
*/
...mapMutations(
[
'setGroupTitle',
'addTransaction',
'deleteTransaction',
'setTransactionError',
'setTransactionType',
'resetErrors',
'updateField',
'resetTransactions',
],
...mapMutations('transactions/create',
[
'setGroupTitle',
'addTransaction',
'deleteTransaction',
'setTransactionError',
'setTransactionType',
'resetErrors',
'updateField',
'resetTransactions',
]
),
/**
* Removes a split from the array.
@@ -412,68 +402,11 @@ export default {
storeDate: function (payload) {
this.date = payload.date;
},
storeTime: function (payload) {
this.time = payload.time;
},
storeGroupTitle: function (value) {
// console.log('set group title: ' + value);
this.setGroupTitle({groupTitle: value});
},
// /**
// * Calculate the transaction type based on what's currently in the store.
// */
// calculateTransactionType: function (index) {
// //console.log('calculateTransactionType(' + index + ')');
// if (0 === index) {
// let source = this.transactions[0].source_account_type;
// let dest = this.transactions[0].destination_account_type;
// if (null === source || null === dest) {
// //console.log('transactionType any');
// this.setTransactionType('any');
// //this.$store.commit('setTransactionType', 'any');
// //console.log('calculateTransactionType: either type is NULL so no dice.');
// return;
// }
// if ('' === source || '' === dest) {
// //console.log('transactionType any');
// this.setTransactionType('any');
// //this.$store.commit('setTransactionType', 'any');
// //console.log('calculateTransactionType: either type is empty so no dice.');
// return;
// }
// // ok so type is set on both:
// let expectedDestinationTypes = this.accountToTransaction[source];
// if ('undefined' !== typeof expectedDestinationTypes) {
// let transactionType = expectedDestinationTypes[dest];
// if ('undefined' !== typeof expectedDestinationTypes[dest]) {
// //console.log('Found a type: ' + transactionType);
// this.setTransactionType(transactionType);
// //this.$store.commit('setTransactionType', transactionType);
// //console.log('calculateTransactionType: ' + source + ' --> ' + dest + ' = ' + transactionType);
// return;
// }
// }
// //console.log('Found no type for ' + source + ' --> ' + dest);
// if ('Asset account' !== source) {
// //console.log('Drop ID from destination.');
// this.updateField({index: 0, field: 'destination_account_id', value: null});
// //console.log('calculateTransactionType: drop ID from destination.');
// // source.id =null
// // context.commit('updateField', {field: 'source_account',index: })
// // context.state.transactions[0].source_account.id = null;
// }
// if ('Asset account' !== dest) {
// //console.log('Drop ID from source.');
// this.updateField({index: 0, field: 'source_account_id', value: null});
// //console.log('calculateTransactionType: drop ID from source.');
// //context.state.transactions[0].destination_account.id = null;
// }
// //console.log('calculateTransactionType: fallback, type to any.');
// this.setTransactionType('any');
// //this.$store.commit('setTransactionType', 'any');
// }
// },
/**
* Submit transaction links.
*/
@@ -702,22 +635,6 @@ export default {
* @param array
*/
convertSplit: function (key, array) {
let dateStr = 'invalid';
if (
this.time instanceof Date && !isNaN(this.time) &&
this.date instanceof Date && !isNaN(this.date)
) {
let theDate = new Date(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);
}
// console.log('Date is now ' + dateStr);
// console.log(dateStr);
// console.log('dateStr = ' + dateStr);
if ('' === array.destination_account_name) {
array.destination_account_name = null;
}
@@ -735,7 +652,7 @@ export default {
let currentSplit = {
// basic
description: array.description,
date: dateStr,
date: this.date,
type: this.transactionType.toLowerCase(),
// account
@@ -884,10 +801,10 @@ export default {
this.allowedOpposingTypes = response.data.data.value;
});
},
getExpectedSourceTypes: function() {
getExpectedSourceTypes: function () {
axios.get('./api/v1/configuration/firefly.expected_source_types')
.then(response => {
console.log('getExpectedSourceTypes.');
//console.log('getExpectedSourceTypes.');
this.sourceAllowedTypes = response.data.data.value.source[this.transactionType];
this.destinationAllowedTypes = response.data.data.value.destination[this.transactionType];
// console.log('Source allowed types for ' + this.transactionType + ' is: ');

29
frontend/src/components/transactions/Edit.vue
View File

@@ -35,7 +35,6 @@
:allowed-opposing-types="allowedOpposingTypes"
:custom-fields="customFields"
:date="date"
:time="time"
:index="index"
:transaction-type="transactionType"
:destination-allowed-types="destinationAllowedTypes"
@@ -46,7 +45,6 @@
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)"
@@ -153,10 +151,8 @@ export default {
returnedGroupTitle: '',
// date and time of the transaction,
date: new Date,
time: new Date,
originalDate: new Date,
originalTime: new Date,
date: '',
originalDate: '',
// things the process is done working on (3 phases):
submittedTransaction: false,
@@ -245,10 +241,8 @@ export default {
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);
this.date = array.date.substring(0, 16);
this.originalDate = array.date.substring(0, 16);
}
let result = getDefaultTransaction();
// parsing here:
@@ -453,7 +447,8 @@ export default {
newTransaction.errors = getDefaultErrors();
this.transactions.push(newTransaction);
},
submitTransaction: function () {
submitTransaction: function (event) {
event.preventDefault();
let submission = {transactions: []};
let shouldSubmit = false;
let shouldLinks = false;
@@ -598,21 +593,13 @@ export default {
shouldUpload = true;
}
let dateStr = 'invalid';
if (
this.date.toISOString() !== this.originalDate.toISOString() ||
this.time.toISOString() !== this.originalTime.toISOString()
this.date !== this.originalDate
) {
console.log('Date and/or time is changed');
// 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);
diff.date = dateStr;
diff.date = this.date;
}
console.log('Now at index ' + i);
console.log(Object.keys(diff).length);

15
frontend/src/components/transactions/SplitForm.vue
View File

@@ -139,7 +139,6 @@
:date="splitDate"
:errors="transaction.errors.date"
:index="index"
:time="splitTime"
/>
</div>
@@ -341,11 +340,7 @@ export default {
required: true
},
date: {
type: Date,
required: true
},
time: {
type: Date,
type: String,
required: true
},
transactionType: {
@@ -385,15 +380,15 @@ export default {
splitDate: function () {
return this.date;
},
splitTime: function () {
return this.time;
},
sourceAccount: function () {
return {
console.log('computed::sourceAccount');
let value = {
id: this.transaction.source_account_id,
name: this.transaction.source_account_name,
type: this.transaction.source_account_type,
};
console.log(JSON.stringify(value));
return value;
},
destinationAccount: function () {
return {

33
frontend/src/components/transactions/TransactionAccount.vue
View File

@@ -23,7 +23,7 @@
<div v-if="visible" class="text-xs d-none d-lg-block d-xl-block">
<span v-if="0 === this.index">{{ $t('firefly.' + this.direction + '_account') }}</span>
<span v-if="this.index > 0" class="text-warning">{{ $t('firefly.first_split_overrules_' + this.direction) }}</span>
<!--<br><span>{{ selectedAccount }}</span> -->
<br><span>{{ selectedAccount }}</span>
</div>
<div v-if="!visible" class="text-xs d-none d-lg-block d-xl-block">
&nbsp;
@@ -107,21 +107,17 @@ export default {
accountTypes: [],
initialSet: [],
selectedAccount: {},
//account: this.value,
accountName: '',
selectedAccountTrigger: false,
}
},
created() {
//// console.log('TransactionAccount::created()');
//this.selectedAccountTrigger = true;
this.accountName = this.value.name ?? '';
//// console.log('TransactionAccount direction=' + this.direction + ', type=' + this.transactionType + ' , name="' + this.accountName + '"');
//this.createInitialSet();
// console.log('TransactionAccount::created() direction=' + this.direction + ', type=' + this.transactionType + ' , name="' + this.accountName + '"');
this.selectedAccountTrigger = true;
},
methods: {
getACURL: function (types, query) {
//// console.log('TransactionAccount::getACURL()');
return './api/v1/autocomplete/accounts?types=' + types.join(',') + '&query=' + query;
},
userSelectedAccount: function (event) {
@@ -131,7 +127,7 @@ export default {
this.selectedAccount = event;
},
systemReturnedAccount: function (event) {
// console.log('userSelectedAccount!');
// console.log('systemReturnedAccount!');
// console.log('To prevent invalid propogation, set selectedAccountTrigger = false');
this.selectedAccountTrigger = false;
this.selectedAccount = event;
@@ -196,10 +192,10 @@ export default {
* @param value
*/
selectedAccount: function (value) {
// console.log('TransactionAccount::watch selectedAccount()');
// console.log(value);
console.log('TransactionAccount::watch selectedAccount()');
console.log(value);
if (true === this.selectedAccountTrigger) {
// console.log('$emit alles!');
console.log('$emit alles!');
this.$emit('set-account',
{
index: this.index,
@@ -212,18 +208,18 @@ export default {
currency_symbol: value.currency_symbol,
}
);
// console.log('watch::selectedAccount() will now set accountName because selectedAccountTrigger = true');
console.log('watch::selectedAccount() will now set accountName because selectedAccountTrigger = true');
this.accountName = value.name;
}
},
accountName: function (value) {
// console.log('now at watch accountName("' + value + '")');
// console.log(this.selectedAccountTrigger);
console.log('now at watch accountName("' + value + '")');
console.log(this.selectedAccountTrigger);
if (true === this.selectedAccountTrigger) {
// console.log('Do nothing because selectedAccountTrigger = true');
console.log('Do nothing because selectedAccountTrigger = true');
}
if (false === this.selectedAccountTrigger) {
// console.log('$emit name from watch::accountName() because selectedAccountTrigger = false');
console.log('$emit name from watch::accountName() because selectedAccountTrigger = false');
this.$emit('set-account',
{
index: this.index,
@@ -238,12 +234,11 @@ export default {
);
// this.account = {name: value, type: null, id: null, currency_id: null, currency_code: null, currency_symbol: null};
}
// console.log('set selectedAccountTrigger to be FALSE');
console.log('set selectedAccountTrigger to be FALSE');
this.selectedAccountTrigger = false;
// this.selectedAccountTrigger = false;
},
value: function (value) {
// console.log('TransactionAccount::watch value(' + JSON.stringify(value) + ')');
console.log('TransactionAccount::watch value(' + JSON.stringify(value) + ')');
this.systemReturnedAccount(value);
// // console.log('Index ' + this.index + ' nwAct: ', value);

96
frontend/src/components/transactions/TransactionDate.vue
View File

@@ -35,7 +35,6 @@
name="date[]"
type="date"
>
<!--
<input
ref="time"
v-model="timeStr"
@@ -47,96 +46,51 @@
name="time[]"
type="time"
>
-->
</div>
<span v-if="errors.length > 0">
<span v-for="error in errors" class="text-danger small">{{ error }}<br/></span>
</span>
<span class="text-muted small" v-if="'' !== timeZone">{{ timeZone }}</span>
<span class="text-muted small">{{ localTimeZone }}:{{ systemTimeZone }}</span>
</div>
</template>
<script>
import {mapGetters} from "vuex";
export default {
props: ['index', 'errors', 'date', 'time'],
props: ['index', 'errors', 'date'],
name: "TransactionDate",
created() {
this.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
this.localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
this.systemTimeZone = this.timezone;
console.log('TransactionDate: ' + this.date);
// split date and time:
let parts = this.date.split('T');
this.dateStr = parts[0];
this.timeStr = parts[1];
},
data() {
return {
localDate: this.date,
localTime: this.time,
timeZone: '',
timeString: '',
localTimeZone: '',
systemTimeZone: '',
timeStr: '',
dateStr: '',
}
},
watch: {
dateStr: function (value) {
this.$emit('set-date', {date: value + 'T' + this.timeStr});
},
timeStr: function (value) {
this.$emit('set-date', {date: this.dateStr + 'T' + value});
}
},
methods: {},
computed: {
dateStr: {
get() {
if (this.localDate instanceof Date && !isNaN(this.localDate)) {
return this.localDate.toISOString().split('T')[0];
}
return '';
},
set(value) {
// bit of a hack but meh.
if ('' === value) {
// reset to today
this.localDate = new Date();
this.$emit('set-date', {date: this.localDate});
return;
}
this.localDate = new Date(value);
this.$emit('set-date', {date: this.localDate});
}
},
timeStr: {
get() {
// console.log('getTimeStr: ' + this.localTime);
if (this.localTime instanceof Date && !isNaN(this.localTime)) {
let localStr = ('0' + this.localTime.getHours()).slice(-2) + ':' + ('0' + this.localTime.getMinutes()).slice(-2) + ':' + ('0' + this.localTime.getSeconds()).slice(-2);
// console.log('Time is: ' + localStr);
return localStr;
}
// console.log('Return empty string!');
return '';
},
set(value) {
// console.log('Set: ' + value);
if ('' === value) {
// console.log('Value is empty, set 00:00:00');
this.localTime.setHours(0);
this.localTime.setMinutes(0);
this.localTime.setSeconds(0);
this.$emit('set-time', {time: this.localTime});
return;
}
// bit of a hack but meh.
let current = new Date(this.localTime.getTime());
let parts = value.split(':');
// console.log('Parts are:');
// console.log(parts);
let hrs = parts[0] ?? '0';
let min = parts[1] ?? '0';
let sec = parts[2] ?? '0';
hrs = 3 === hrs.length ? hrs.substr(1, 2) : hrs;
min = 3 === min.length ? min.substr(1, 2) : min;
sec = 3 === sec.length ? sec.substr(1, 2) : sec;
// console.log('Hrs: ' + hrs);
// console.log('Min: ' + min);
// console.log('Sec: ' + sec);
current.setHours(parseInt(hrs));
current.setMinutes(parseInt(min));
current.setSeconds(parseInt(sec));
this.localTime = current;
this.$emit('set-time', {time: this.localTime});
}
}
...mapGetters('root', ['timezone']),
}
}
</script>