mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-11-18 15:39:50 +00:00
Rebuild frontpage.
This commit is contained in:
James Cole
@@ -73,6 +73,9 @@ const state = () => ({
|
||||
|
||||
// meta data
|
||||
budget_id: 0,
|
||||
bill_id: 0,
|
||||
piggy_bank_id: 0,
|
||||
tags: [],
|
||||
|
||||
// optional date fields (6x):
|
||||
interest_date: null,
|
||||
@@ -81,6 +84,11 @@ const state = () => ({
|
||||
due_date: null,
|
||||
payment_date: null,
|
||||
invoice_date: null,
|
||||
|
||||
// optional other fields:
|
||||
internal_reference: null,
|
||||
external_url: null,
|
||||
notes: null
|
||||
},
|
||||
}
|
||||
)
|
||||
@@ -148,6 +156,7 @@ const actions = {
|
||||
// console.log('Found no type for ' + source.type + ' --> ' + dest.type);
|
||||
if ('Asset account' !== source.type) {
|
||||
console.log('Drop ID from source. TODO');
|
||||
|
||||
// source.id =null
|
||||
// context.commit('updateField', {field: 'source_account',index: })
|
||||
// context.state.transactions[0].source_account.id = null;
|
||||
@@ -170,8 +179,8 @@ const mutations = {
|
||||
setCustomDateFields(state, payload) {
|
||||
state.customDateFields = payload;
|
||||
},
|
||||
deleteTransaction(state, index) {
|
||||
state.transactions.splice(index, 1);
|
||||
deleteTransaction(state, payload) {
|
||||
state.transactions.splice(payload.index, 1);
|
||||
},
|
||||
setTransactionType(state, transactionType) {
|
||||
state.transactionType = transactionType;
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="row" v-for="(transaction, index) in transactions">
|
||||
<div class="row" v-for="(transaction, index) in this.transactions">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
@@ -29,13 +29,13 @@
|
||||
<span v-if="transactions.length > 1">{{ $t('firefly.single_split') }} {{ index + 1 }} / {{ transactions.length }}</span>
|
||||
</h3>
|
||||
<div v-if="transactions.length > 1" class="card-tools">
|
||||
<button class="btn btn-xs btn-danger" type="button" v-on:click="deleteTransaction(index, $event)"><i
|
||||
<button class="btn btn-xs btn-danger" type="button" v-on:click="removeTransaction(index)"><i
|
||||
class="fa fa-trash"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<h4>{{ $t('firefly.basic_journal_information') }}</h4>
|
||||
<h4>{{ $t('firefly.basic_journal_information') }}: {{ transaction.description }}</h4>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="d-block d-sm-none">XS</p>
|
||||
@@ -48,8 +48,9 @@
|
||||
<!-- description etc, 3 rows -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Description:
|
||||
<TransactionDescription
|
||||
:description="transactions[index].description"
|
||||
v-bind:description.sync="transaction.description"
|
||||
:index="index"
|
||||
></TransactionDescription>
|
||||
</div>
|
||||
@@ -61,7 +62,7 @@
|
||||
<div class="col-xl-5 col-lg-5 col-md-10 col-sm-12 col-xs-12">
|
||||
<!-- SOURCE -->
|
||||
<TransactionAccount
|
||||
:selectedAccount="transactions[index].source_account"
|
||||
:selectedAccount="transaction.source_account"
|
||||
direction="source"
|
||||
:index="index"
|
||||
/>
|
||||
@@ -77,7 +78,7 @@
|
||||
<div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-xs-12">
|
||||
<!-- DESTINATION -->
|
||||
<TransactionAccount
|
||||
:selectedAccount="transactions[index].destination_account"
|
||||
:selectedAccount="transaction.destination_account"
|
||||
direction="destination"
|
||||
:index="index"
|
||||
/>
|
||||
@@ -105,8 +106,8 @@
|
||||
<div class="row">
|
||||
<div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-xs-12">
|
||||
<TransactionDate
|
||||
:date="transactions[index].date"
|
||||
:time="transactions[index].time"
|
||||
:date="transaction.date"
|
||||
:time="transaction.time"
|
||||
:index="index"
|
||||
/>
|
||||
</div>
|
||||
@@ -116,60 +117,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<p class="d-block d-sm-none">XS</p>
|
||||
<p class="d-none d-sm-block d-md-none">SM</p>
|
||||
<p class="d-none d-md-block d-lg-none">MD</p>
|
||||
<p class="d-none d-lg-block d-xl-none">LG</p>
|
||||
<p class="d-none d-xl-block">XL</p>
|
||||
|
||||
|
||||
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
|
||||
|
||||
{# top stuff #}
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<!-- AMOUNT -->
|
||||
<!--
|
||||
<div class="input-group">
|
||||
<input
|
||||
title="Amount"
|
||||
autocomplete="off"
|
||||
autofocus
|
||||
class="form-control"
|
||||
name="something[]"
|
||||
type="text"
|
||||
placeholder="Amount"
|
||||
>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input
|
||||
title="Foreign"
|
||||
autocomplete="off"
|
||||
autofocus
|
||||
class="form-control"
|
||||
name="something[]"
|
||||
type="text"
|
||||
placeholder="Foreign"
|
||||
>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
<div class="col">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h4>{{ $t('firefly.transaction_journal_meta') }}</h4>
|
||||
|
||||
<!-- meta -->
|
||||
@@ -179,48 +126,27 @@
|
||||
:budget_id="transactions[index].budget_id"
|
||||
:index="index"
|
||||
/>
|
||||
<div class="input-group">
|
||||
<input
|
||||
title="Category"
|
||||
autocomplete="off"
|
||||
class="form-control"
|
||||
name="something[]"
|
||||
type="text"
|
||||
placeholder="Category"
|
||||
>
|
||||
</div>
|
||||
|
||||
<TransactionCategory
|
||||
:category="transaction.category"
|
||||
:index="index"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="input-group">
|
||||
<input
|
||||
title="Bill"
|
||||
autocomplete="off"
|
||||
class="form-control"
|
||||
name="something[]"
|
||||
type="text"
|
||||
placeholder="Bill"
|
||||
>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input
|
||||
title="Tags"
|
||||
autocomplete="off"
|
||||
class="form-control"
|
||||
name="something[]"
|
||||
type="text"
|
||||
placeholder="Tags"
|
||||
>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input
|
||||
title="Piggy"
|
||||
autocomplete="off"
|
||||
class="form-control"
|
||||
name="something[]"
|
||||
type="text"
|
||||
placeholder="Piggy"
|
||||
>
|
||||
</div>
|
||||
<TransactionBill
|
||||
:bill_id="transactions[index].bill_id"
|
||||
:index="index"
|
||||
/>
|
||||
|
||||
<TransactionTags
|
||||
:index="index"
|
||||
:tags="transactions[index].tags"
|
||||
/>
|
||||
<TransactionPiggyBank
|
||||
:index="index"
|
||||
:piggy_bank_id="transactions[index].piggy_bank_id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -228,50 +154,53 @@
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="input-group">
|
||||
<input
|
||||
title="internal ref"
|
||||
autocomplete="off"
|
||||
class="form-control"
|
||||
name="something[]"
|
||||
type="text"
|
||||
placeholder="internal ref"
|
||||
>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input
|
||||
title="Piggy"
|
||||
autocomplete="off"
|
||||
class="form-control"
|
||||
name="something[]"
|
||||
type="text"
|
||||
placeholder="external url"
|
||||
>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<textarea class="form-control" placeholder="Notes"></textarea>
|
||||
</div>
|
||||
<TransactionInternalReference
|
||||
:index="index"
|
||||
:internalReference="transaction.internal_reference"
|
||||
/>
|
||||
|
||||
<TransactionExternalUrl
|
||||
:index="index"
|
||||
:externalUrl="transaction.external_url"
|
||||
/>
|
||||
<TransactionNotes
|
||||
:index="index"
|
||||
:notes="transaction.notes"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="input-group">
|
||||
<input
|
||||
title="Piggy"
|
||||
autocomplete="off"
|
||||
class="form-control"
|
||||
name="something[]"
|
||||
type="text"
|
||||
placeholder="transaction links"
|
||||
>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input
|
||||
title="Piggy"
|
||||
autocomplete="off"
|
||||
class="form-control"
|
||||
name="something[]"
|
||||
type="text"
|
||||
placeholder="piggy bank"
|
||||
>
|
||||
<div class="form-group">
|
||||
<div class="text-xs d-none d-lg-block d-xl-block">
|
||||
{{ $t('firefly.journal_links') }}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p>
|
||||
<em>No transaction links</em>
|
||||
</p>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">
|
||||
<em>is paid by</em>
|
||||
<a href="#">Some other transaction</a> (<span class="text-success">$ 12.34</span>)
|
||||
<div class="btn-group btn-group-xs float-right">
|
||||
<a href="#" class="btn btn-xs btn-default"><i class="far fa-edit"></i></a>
|
||||
<a href="#" class="btn btn-xs btn-danger"><i class="far fa-trash-alt"></i></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<em>is paid by</em>
|
||||
<a href="#">Some other transaction</a> (<span class="text-success">$ 12.34</span>)
|
||||
<div class="btn-group btn-group-xs float-right">
|
||||
<a href="#" class="btn btn-xs btn-default"><i class="far fa-edit"></i></a>
|
||||
<a href="#" class="btn btn-xs btn-danger"><i class="far fa-trash-alt"></i></a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="form-text">
|
||||
<a href="#" class="btn btn-default"><i class="fas fa-plus"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -308,16 +237,24 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createNamespacedHelpers} from 'vuex'
|
||||
|
||||
import TransactionDescription from "./TransactionDescription";
|
||||
import TransactionDate from "./TransactionDate";
|
||||
import TransactionBudget from "./TransactionBudget";
|
||||
import {createNamespacedHelpers} from 'vuex'
|
||||
import TransactionAccount from "./TransactionAccount";
|
||||
import SwitchAccount from "./SwitchAccount";
|
||||
import TransactionAmount from "./TransactionAmount";
|
||||
import TransactionForeignAmount from "./TransactionForeignAmount";
|
||||
import TransactionForeignCurrency from "./TransactionForeignCurrency";
|
||||
import TransactionCustomDates from "./TransactionCustomDates";
|
||||
import TransactionCategory from "./TransactionCategory";
|
||||
import TransactionBill from "./TransactionBill";
|
||||
import TransactionTags from "./TransactionTags";
|
||||
import TransactionPiggyBank from "./TransactionPiggyBank";
|
||||
import TransactionInternalReference from "./TransactionInternalReference";
|
||||
import TransactionExternalUrl from "./TransactionExternalUrl";
|
||||
import TransactionNotes from "./TransactionNotes";
|
||||
|
||||
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
|
||||
|
||||
@@ -325,6 +262,13 @@ const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers
|
||||
export default {
|
||||
name: "Create",
|
||||
components: {
|
||||
TransactionNotes,
|
||||
TransactionExternalUrl,
|
||||
TransactionInternalReference,
|
||||
TransactionPiggyBank,
|
||||
TransactionTags,
|
||||
TransactionBill,
|
||||
TransactionCategory,
|
||||
TransactionCustomDates,
|
||||
TransactionForeignCurrency,
|
||||
TransactionForeignAmount, TransactionAmount, SwitchAccount, TransactionAccount, TransactionBudget, TransactionDescription, TransactionDate
|
||||
@@ -357,6 +301,10 @@ export default {
|
||||
'setAccountToTransaction',
|
||||
],
|
||||
),
|
||||
removeTransaction: function(index) {
|
||||
// store.commit('addCustomer'
|
||||
this.$store.commit('transactions/create/deleteTransaction', {index: index});
|
||||
},
|
||||
storeCustomDateFields: function () {
|
||||
// TODO may include all custom fields in the future.
|
||||
axios.get('./api/v1/preferences/transaction_journal_optional_fields').then(response => {
|
||||
@@ -372,7 +320,7 @@ export default {
|
||||
};
|
||||
for (let key in fields) {
|
||||
if (fields.hasOwnProperty(key)) {
|
||||
if(-1 !== allDateFields.indexOf(key)) {
|
||||
if (-1 !== allDateFields.indexOf(key)) {
|
||||
selectedDateFields[key] = fields[key];
|
||||
}
|
||||
}
|
||||
@@ -444,9 +392,25 @@ export default {
|
||||
foreign_amount: array.foreign_amount,
|
||||
|
||||
|
||||
// meta
|
||||
// meta data
|
||||
budget_id: array.budget_id,
|
||||
category: array.category,
|
||||
bill_id: array.bill_id,
|
||||
tags: array.tags,
|
||||
piggy_bank_id: array.piggy_bank_id,
|
||||
|
||||
// optional date fields (6x):
|
||||
interest_date: array.interest_date,
|
||||
book_date: array.book_date,
|
||||
process_date: array.process_date,
|
||||
due_date: array.due_date,
|
||||
payment_date: array.payment_date,
|
||||
invoice_date: array.invoice_date,
|
||||
|
||||
// other optional fields:
|
||||
internal_reference: array.internal_reference,
|
||||
external_url: array.external_url,
|
||||
notes: array.notes,
|
||||
};
|
||||
|
||||
// return it.
|
||||
|
||||
112
frontend/src/components/transactions/TransactionBill.vue
Normal file
112
frontend/src/components/transactions/TransactionBill.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<!--
|
||||
- TransactionBill.vue
|
||||
- Copyright (c) 2021 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/>.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="form-group">
|
||||
<div class="text-xs d-none d-lg-block d-xl-block">
|
||||
{{ $t('firefly.bill') }}
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<select
|
||||
ref="bill"
|
||||
:title="$t('firefly.bill')"
|
||||
v-model="bill_id"
|
||||
autocomplete="off"
|
||||
class="form-control"
|
||||
name="bill_id[]"
|
||||
v-on:submit.prevent
|
||||
>
|
||||
<option v-for="bill in this.billList" :value="bill.id" :label="bill.name">{{ bill.name }}</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {createNamespacedHelpers} from "vuex";
|
||||
|
||||
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
|
||||
|
||||
export default {
|
||||
props: ['index'],
|
||||
name: "TransactionBill",
|
||||
data() {
|
||||
return {
|
||||
billList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.collectData();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(
|
||||
[
|
||||
'updateField',
|
||||
],
|
||||
),
|
||||
collectData() {
|
||||
this.billList.push(
|
||||
{
|
||||
id: 0,
|
||||
name: this.$t('firefly.no_bill'),
|
||||
}
|
||||
);
|
||||
this.getBills();
|
||||
},
|
||||
getBills() {
|
||||
axios.get('./api/v1/bills')
|
||||
.then(response => {
|
||||
this.parseBills(response.data);
|
||||
}
|
||||
);
|
||||
},
|
||||
parseBills(data) {
|
||||
for (let key in data.data) {
|
||||
if (data.data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
|
||||
let current = data.data[key];
|
||||
this.billList.push(
|
||||
{
|
||||
id: parseInt(current.id),
|
||||
name: current.attributes.name
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'transactionType',
|
||||
'transactions',
|
||||
]),
|
||||
bill_id: {
|
||||
get() {
|
||||
return this.transactions[this.index].bill_id;
|
||||
},
|
||||
set(value) {
|
||||
this.updateField({field: 'bill_id', index: this.index, value: value});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -109,7 +109,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
121
frontend/src/components/transactions/TransactionCategory.vue
Normal file
121
frontend/src/components/transactions/TransactionCategory.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<!--
|
||||
- TransactionCategory.vue
|
||||
- Copyright (c) 2021 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/>.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="form-group">
|
||||
<div class="text-xs d-none d-lg-block d-xl-block">
|
||||
{{ $t('firefly.category') }}
|
||||
</div>
|
||||
|
||||
<vue-typeahead-bootstrap
|
||||
inputName="category[]"
|
||||
v-model="category"
|
||||
:data="categories"
|
||||
:placeholder="$t('firefly.category')"
|
||||
:showOnFocus=true
|
||||
:minMatchingChars="3"
|
||||
:serializer="item => item.name"
|
||||
@hit="selectedCategory = $event"
|
||||
@input="lookupCategory"
|
||||
>
|
||||
<template slot="append">
|
||||
<div class="input-group-append">
|
||||
<button v-on:click="clearCategory" class="btn btn-outline-secondary" type="button"><i class="far fa-trash-alt"></i></button>
|
||||
</div>
|
||||
</template>
|
||||
</vue-typeahead-bootstrap>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {createNamespacedHelpers} from "vuex";
|
||||
import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap';
|
||||
import {debounce} from "lodash";
|
||||
|
||||
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
|
||||
|
||||
export default {
|
||||
props: ['index'],
|
||||
components: {VueTypeaheadBootstrap},
|
||||
name: "TransactionCategory",
|
||||
data() {
|
||||
return {
|
||||
categories: [],
|
||||
initialSet: [],
|
||||
category: '',
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
|
||||
// initial list of accounts:
|
||||
axios.get(this.getACURL(''))
|
||||
.then(response => {
|
||||
this.categories = response.data;
|
||||
this.initialSet = response.data;
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations(
|
||||
[
|
||||
'updateField',
|
||||
],
|
||||
),
|
||||
clearCategory: function () {
|
||||
this.category = '';
|
||||
},
|
||||
getACURL: function (query) {
|
||||
// update autocomplete URL:
|
||||
return document.getElementsByTagName('base')[0].href + 'api/v1/autocomplete/categories?query=' + query;
|
||||
},
|
||||
lookupCategory: debounce(function () {
|
||||
// update autocomplete URL:
|
||||
axios.get(this.getACURL(this.category))
|
||||
.then(response => {
|
||||
this.categories = response.data;
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
watch: {
|
||||
category: function (value) {
|
||||
console.log('Watch category: "' + value + '"');
|
||||
this.updateField({field: 'category', index: this.index, value: value});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'transactionType',
|
||||
'transactions',
|
||||
]),
|
||||
selectedCategory: {
|
||||
get() {
|
||||
return this.categories[this.index].name;
|
||||
},
|
||||
set(value) {
|
||||
this.updateField({field: 'category', index: this.index, value: value.name});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -23,72 +23,43 @@
|
||||
<div class="text-xs d-none d-lg-block d-xl-block">
|
||||
{{ $t('firefly.description') }}
|
||||
</div>
|
||||
<vue-typeahead-bootstrap
|
||||
inputName="description[]"
|
||||
v-model="query"
|
||||
:data="descriptions"
|
||||
:placeholder="$t('firefly.description')"
|
||||
:showOnFocus=true
|
||||
autofocus
|
||||
:minMatchingChars="3"
|
||||
:serializer="item => item.description"
|
||||
@hit="selectedDescription = $event"
|
||||
@input="lookupDescription"
|
||||
>
|
||||
<template slot="append">
|
||||
<div class="input-group-append">
|
||||
<button v-on:click="clearDescription" class="btn btn-outline-secondary" type="button"><i class="far fa-trash-alt"></i></button>
|
||||
</div>
|
||||
</template>
|
||||
</vue-typeahead-bootstrap>
|
||||
|
||||
|
||||
<!--
|
||||
<vue-typeahead-bootstrap
|
||||
<vue-typeahead-bootstrap
|
||||
inputName="description[]"
|
||||
v-model="description"
|
||||
:data="descriptions"
|
||||
:serializer="item => item.name_with_balance"
|
||||
@hit="selectedAccount = $event"
|
||||
:placeholder="$t('firefly.' + this.direction + '_account')"
|
||||
@input="lookupAccount"
|
||||
>
|
||||
</vue-typeahead-bootstrap>
|
||||
<input
|
||||
ref="description"
|
||||
:title="$t('firefly.description')"
|
||||
v-model="description"
|
||||
autocomplete="off"
|
||||
autofocus
|
||||
class="form-control"
|
||||
name="description[]"
|
||||
type="text"
|
||||
:placeholder="$t('firefly.description')"
|
||||
v-on:submit.prevent
|
||||
>
|
||||
|
||||
-->
|
||||
:placeholder="$t('firefly.description')"
|
||||
:showOnFocus=true
|
||||
autofocus
|
||||
:minMatchingChars="3"
|
||||
:serializer="item => item.description"
|
||||
@input="lookupDescription"
|
||||
>
|
||||
<template slot="append">
|
||||
<div class="input-group-append">
|
||||
<button v-on:click="clearDescription" class="btn btn-outline-secondary" type="button"><i class="far fa-trash-alt"></i></button>
|
||||
</div>
|
||||
</template>
|
||||
</vue-typeahead-bootstrap>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import {createNamespacedHelpers} from "vuex";
|
||||
import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap';
|
||||
import {debounce} from "lodash";
|
||||
|
||||
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
|
||||
|
||||
// https://firefly.sd.home/api/v1/autocomplete/transactions?query=test
|
||||
|
||||
export default {
|
||||
props: ['index'],
|
||||
props: ['index', 'description'],
|
||||
components: {VueTypeaheadBootstrap},
|
||||
name: "TransactionDescription",
|
||||
data() {
|
||||
return {
|
||||
descriptions: [],
|
||||
query: '',
|
||||
initialSet: []
|
||||
}
|
||||
},
|
||||
@@ -110,20 +81,27 @@ export default {
|
||||
],
|
||||
),
|
||||
clearDescription: function () {
|
||||
this.selectedDescription = '';
|
||||
this.description = '';
|
||||
},
|
||||
getACURL: function (query) {
|
||||
// update autocomplete URL:
|
||||
return document.getElementsByTagName('base')[0].href + 'api/v1/autocomplete/transactions?query=' + query;
|
||||
},
|
||||
lookupDescription: debounce(function () {
|
||||
console.log('lookupDescription');
|
||||
// update autocomplete URL:
|
||||
axios.get(this.getACURL(this.query))
|
||||
axios.get(this.getACURL(this.description))
|
||||
.then(response => {
|
||||
this.descriptions = response.data;
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
watch: {
|
||||
description: function (value) {
|
||||
console.log('Index ' + this.index + ': ' + value);
|
||||
//this.updateField({field: 'description', index: this.index, value: value});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'transactionType',
|
||||
@@ -131,16 +109,13 @@ export default {
|
||||
]),
|
||||
selectedDescription: {
|
||||
get() {
|
||||
return this.transactions[this.index].description;
|
||||
//return this.description;
|
||||
},
|
||||
set(value) {
|
||||
this.updateField({field: 'description', index: this.index, value: value});
|
||||
this.description = value.description;
|
||||
//this.updateField({field: 'description', index: this.index, value: value.description});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,70 @@
|
||||
<!--
|
||||
- TransactionInternalReference.vue
|
||||
- Copyright (c) 2021 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/>.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="form-group">
|
||||
<div class="text-xs d-none d-lg-block d-xl-block">
|
||||
{{ $t('firefly.external_url') }}
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="url"
|
||||
name="external_url[]"
|
||||
:placeholder="$t('firefly.external_url')"
|
||||
v-model="externalUrl"
|
||||
class="form-control"/>
|
||||
<div class="input-group-append">
|
||||
<button type="button" class="btn btn-outline-secondary"><i class="far fa-trash-alt"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createNamespacedHelpers} from "vuex";
|
||||
|
||||
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
|
||||
|
||||
export default {
|
||||
props: ['index'],
|
||||
name: "TransactionExternalUrl",
|
||||
methods: {
|
||||
...mapMutations(
|
||||
[
|
||||
'updateField',
|
||||
],
|
||||
),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
externalUrl: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
externalUrl: function (value) {
|
||||
this.updateField({field: 'external_url', index: this.index, value: value});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,70 @@
|
||||
<!--
|
||||
- TransactionInternalReference.vue
|
||||
- Copyright (c) 2021 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/>.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="form-group">
|
||||
<div class="text-xs d-none d-lg-block d-xl-block">
|
||||
{{ $t('firefly.internal_reference') }}
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="text"
|
||||
name="internal_reference[]"
|
||||
v-model="internalReference"
|
||||
:placeholder="$t('firefly.internal_reference')"
|
||||
class="form-control"/>
|
||||
<div class="input-group-append">
|
||||
<button type="button" class="btn btn-outline-secondary"><i class="far fa-trash-alt"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createNamespacedHelpers} from "vuex";
|
||||
|
||||
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
|
||||
|
||||
export default {
|
||||
props: ['index'],
|
||||
name: "TransactionInternalReference",
|
||||
methods: {
|
||||
...mapMutations(
|
||||
[
|
||||
'updateField',
|
||||
],
|
||||
),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
internalReference: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
internalReference: function (value) {
|
||||
this.updateField({field: 'internal_reference', index: this.index, value: value});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
64
frontend/src/components/transactions/TransactionNotes.vue
Normal file
64
frontend/src/components/transactions/TransactionNotes.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<!--
|
||||
- TransactionNotes.vue
|
||||
- Copyright (c) 2021 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/>.
|
||||
-->
|
||||
|
||||
<template>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="text-xs d-none d-lg-block d-xl-block">
|
||||
{{ $t('firefly.notes') }}
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<textarea v-model="notes" class="form-control" placeholder="Notes"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createNamespacedHelpers} from "vuex";
|
||||
|
||||
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
|
||||
|
||||
export default {
|
||||
props: ['index'],
|
||||
name: "TransactionNotes",
|
||||
methods: {
|
||||
...mapMutations(
|
||||
[
|
||||
'updateField',
|
||||
],
|
||||
),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
notes: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
notes: function (value) {
|
||||
this.updateField({field: 'notes', index: this.index, value: value});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
112
frontend/src/components/transactions/TransactionPiggyBank.vue
Normal file
112
frontend/src/components/transactions/TransactionPiggyBank.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<!--
|
||||
- TransactionPiggyBank.vue
|
||||
- Copyright (c) 2021 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/>.
|
||||
-->
|
||||
|
||||
|
||||
<template>
|
||||
<div class="form-group">
|
||||
<div class="text-xs d-none d-lg-block d-xl-block">
|
||||
{{ $t('firefly.piggy_bank') }}
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<select
|
||||
ref="piggy_bank_id"
|
||||
:title="$t('firefly.piggy_bank')"
|
||||
v-model="piggy_bank_id"
|
||||
autocomplete="off"
|
||||
class="form-control"
|
||||
name="piggy_bank_id[]"
|
||||
v-on:submit.prevent
|
||||
>
|
||||
<option v-for="piggy in this.piggyList" :value="piggy.id" :label="piggy.name_with_balance">{{ piggy.name_with_balance }}</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {createNamespacedHelpers} from "vuex";
|
||||
|
||||
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
|
||||
|
||||
export default {
|
||||
props: ['index'],
|
||||
name: "TransactionPiggyBank",
|
||||
data() {
|
||||
return {
|
||||
piggyList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.collectData();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(
|
||||
[
|
||||
'updateField',
|
||||
],
|
||||
),
|
||||
collectData() {
|
||||
this.piggyList.push(
|
||||
{
|
||||
id: 0,
|
||||
name_with_balance: this.$t('firefly.no_piggy_bank'),
|
||||
}
|
||||
);
|
||||
this.getPiggies();
|
||||
},
|
||||
getPiggies() {
|
||||
axios.get('./api/v1/autocomplete/piggy-banks-with-balance')
|
||||
.then(response => {
|
||||
this.parsePiggies(response.data);
|
||||
}
|
||||
);
|
||||
},
|
||||
parsePiggies(data) {
|
||||
for (let key in data) {
|
||||
if (data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
|
||||
let current = data[key];
|
||||
this.piggyList.push(
|
||||
{
|
||||
id: parseInt(current.id),
|
||||
name_with_balance: current.name_with_balance
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'transactionType',
|
||||
'transactions',
|
||||
]),
|
||||
piggy_bank_id: {
|
||||
get() {
|
||||
return this.transactions[this.index].piggy_bank_id;
|
||||
},
|
||||
set(value) {
|
||||
this.updateField({field: 'piggy_bank_id', index: this.index, value: value});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
122
frontend/src/components/transactions/TransactionTags.vue
Normal file
122
frontend/src/components/transactions/TransactionTags.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<!--
|
||||
- TransactionTags.vue
|
||||
- Copyright (c) 2021 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/>.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="form-group">
|
||||
<div class="text-xs d-none d-lg-block d-xl-block">
|
||||
{{ $t('firefly.tags') }}
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<vue-tags-input
|
||||
v-model="tag"
|
||||
:add-only-from-autocomplete="false"
|
||||
:autocomplete-items="autocompleteItems"
|
||||
:tags="tags"
|
||||
:title="$t('firefly.tags')"
|
||||
v-bind:placeholder="$t('firefly.tags')"
|
||||
@tags-changed="update"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createNamespacedHelpers} from "vuex";
|
||||
|
||||
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
|
||||
import VueTagsInput from "@johmun/vue-tags-input";
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "TransactionTags",
|
||||
components: {
|
||||
VueTagsInput
|
||||
},
|
||||
props: ['value', 'error', 'index'],
|
||||
data() {
|
||||
return {
|
||||
tag: '',
|
||||
autocompleteItems: [],
|
||||
debounce: null,
|
||||
tags: this.value,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'tag': 'initItems',
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(
|
||||
[
|
||||
'updateField',
|
||||
],
|
||||
),
|
||||
update(newTags) {
|
||||
this.autocompleteItems = [];
|
||||
this.tags = newTags;
|
||||
// create array for update field thing:
|
||||
let shortList = [];
|
||||
for(let key in newTags) {
|
||||
if (newTags.hasOwnProperty(key)) {
|
||||
shortList.push(newTags[key].text);
|
||||
}
|
||||
}
|
||||
this.updateField({field: 'tags', index: this.index, value: shortList});
|
||||
},
|
||||
hasError: function () {
|
||||
return this.error.length > 0;
|
||||
},
|
||||
initItems() {
|
||||
// console.log('Now in initItems');
|
||||
if (this.tag.length < 2) {
|
||||
return;
|
||||
}
|
||||
const url = document.getElementsByTagName('base')[0].href + `api/v1/autocomplete/tags?query=${this.tag}`;
|
||||
|
||||
clearTimeout(this.debounce);
|
||||
this.debounce = setTimeout(() => {
|
||||
axios.get(url).then(response => {
|
||||
this.autocompleteItems = response.data.map(a => {
|
||||
return {text: a.tag};
|
||||
});
|
||||
}).catch(() => console.warn('Oh. Something went wrong loading tags.'));
|
||||
}, 600);
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.vue-tags-input {
|
||||
width: 100%;
|
||||
max-width: 100% !important;
|
||||
display: block;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.ti-input {
|
||||
border-radius: 0.25rem;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ti-new-tag-input {
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user