mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-11-18 07:38:29 +00:00
Rebuild FP
This commit is contained in:
James Cole
@@ -29,17 +29,17 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" style="width:35%;">{{ $t('list.name') }}</th>
|
||||
<th scope="col" style="width:40%;">{{ $t('list.amount') }}</th>
|
||||
<th scope="col" style="width:25%;">{{ $t('list.next_expected_match') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="bill in this.bills">
|
||||
<td><a :href="'./bills/show' + bill.id" :title="bill.attributes.name">{{ bill.attributes.name }}</a></td>
|
||||
<td>~{{
|
||||
<td><a :href="'./bills/show' + bill.id" :title="bill.attributes.name">{{ bill.attributes.name }}</a>
|
||||
~{{
|
||||
Intl.NumberFormat(locale, {style: 'currency', currency: bill.attributes.currency_code}).format((parseFloat(bill.attributes.amount_min) +
|
||||
parseFloat(bill.attributes.amount_max)) / 2)
|
||||
}}
|
||||
<br />
|
||||
</td>
|
||||
<td>
|
||||
<span v-for="payDate in bill.attributes.pay_dates">
|
||||
|
||||
21
frontend/src/components/store/index.js
vendored
21
frontend/src/components/store/index.js
vendored
@@ -20,26 +20,32 @@
|
||||
|
||||
import Vue from 'vue'
|
||||
import Vuex, {createLogger} from 'vuex'
|
||||
import transactions_create from './modules/transactions/create';
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
const debug = process.env.NODE_ENV !== 'production'
|
||||
|
||||
export default new Vuex.Store(
|
||||
{
|
||||
modules: [],
|
||||
strict: true,
|
||||
plugins: [createLogger()],
|
||||
modules: {
|
||||
transactions: {
|
||||
namespaced: true,
|
||||
modules: {
|
||||
create: transactions_create
|
||||
}
|
||||
}
|
||||
},
|
||||
strict: debug,
|
||||
plugins: debug ? [createLogger()] : [],
|
||||
state: {
|
||||
currencyPreference: {},
|
||||
locale: 'en-US'
|
||||
},
|
||||
mutations: {
|
||||
setCurrencyPreference(state, object) {
|
||||
console.log('mutation: setCurrencyPreference');
|
||||
state.currencyPreference = object;
|
||||
},
|
||||
initialiseStore(state) {
|
||||
console.log('mutation: initialiseStore');
|
||||
// if locale in local storage:
|
||||
if (localStorage.locale) {
|
||||
state.locale = localStorage.locale;
|
||||
@@ -66,15 +72,12 @@ export default new Vuex.Store(
|
||||
},
|
||||
actions: {
|
||||
updateCurrencyPreference(context) {
|
||||
console.log('action: updateCurrencyPreference');
|
||||
if (localStorage.currencyPreference) {
|
||||
console.log('action: from local storage');
|
||||
context.commit('setCurrencyPreference', localStorage.currencyPreference);
|
||||
return;
|
||||
}
|
||||
axios.get('./api/v1/currencies/default')
|
||||
.then(response => {
|
||||
console.log('action: from axios');
|
||||
let currencyResponse = {
|
||||
id: parseInt(response.data.data.id),
|
||||
name: response.data.data.attributes.name,
|
||||
|
||||
67
frontend/src/components/store/modules/transactions/create.js
vendored
Normal file
67
frontend/src/components/store/modules/transactions/create.js
vendored
Normal file
@@ -0,0 +1,67 @@
|
||||
/*
|
||||
* create.js
|
||||
* Copyright (c) 2020 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/>.
|
||||
*/
|
||||
|
||||
|
||||
// initial state
|
||||
const state = () => ({
|
||||
transactionType: 'any',
|
||||
transactions: []
|
||||
})
|
||||
|
||||
|
||||
// getters
|
||||
const getters = {
|
||||
transactions: state => {
|
||||
return state.transactions;
|
||||
},
|
||||
transactionType: state => {
|
||||
return state.transactionType;
|
||||
}
|
||||
// // `getters` is localized to this module's getters
|
||||
// // you can use rootGetters via 4th argument of getters
|
||||
// someGetter (state, getters, rootState, rootGetters) {
|
||||
// getters.someOtherGetter // -> 'foo/someOtherGetter'
|
||||
// rootGetters.someOtherGetter // -> 'someOtherGetter'
|
||||
// rootGetters['bar/someOtherGetter'] // -> 'bar/someOtherGetter'
|
||||
// },
|
||||
|
||||
}
|
||||
|
||||
// actions
|
||||
const actions = {}
|
||||
|
||||
// mutations
|
||||
const mutations = {
|
||||
addTransaction(state) {
|
||||
state.transactions.push(
|
||||
{
|
||||
description: '',
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state,
|
||||
getters,
|
||||
actions,
|
||||
mutations
|
||||
}
|
||||
@@ -19,100 +19,237 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Create a new transaction</h3>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<div id="accordion">
|
||||
<!-- we are adding the .class so bootstrap.js collapse plugin detects it -->
|
||||
<div class="card card-primary">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="" aria-expanded="true">
|
||||
Basic transaction information
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseOne" class="panel-collapse in collapse show" style="">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col">From</div>
|
||||
<div class="col">To</div>
|
||||
<div>
|
||||
<div class="row" v-for="(transaction, index) in transactions">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Create a new transaction</h3>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<div id="accordion">
|
||||
<!-- we are adding the .class so bootstrap.js collapse plugin detects it -->
|
||||
<div class="card card-primary">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" :href="'#collapseBasic' + index" class='' aria-expanded="true">
|
||||
Basic transaction information
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div :id="'collapseBasic' + index" class="panel-collapse in collapse show" style=''>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p>
|
||||
Source
|
||||
</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p>
|
||||
Amount
|
||||
<br>
|
||||
foreign amount
|
||||
</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p>
|
||||
Destination
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<TransactionDescription
|
||||
v-model="transaction[index].description"
|
||||
:index="index"
|
||||
></TransactionDescription>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Date<br/>
|
||||
Time
|
||||
</div>
|
||||
<div class="col">
|
||||
Other date
|
||||
</div>
|
||||
<div class="col">
|
||||
Other date
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Amount, foreign amount, description, time + date
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-secondary">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" :href="'#collapseMeta' + index" class="collapsed" aria-expanded="false">
|
||||
Meta information
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div :id="'collapseMeta' + index" class="panel-collapse collapse">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Budget<br>
|
||||
Cat<br>
|
||||
</div>
|
||||
<div class="col">
|
||||
Bill<br>
|
||||
Tags<br>
|
||||
Piggy<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-secondary">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" :href="'#collapseExtra' + index" class="collapsed" aria-expanded="false">
|
||||
Extra information
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div :id="'collapseExtra' + index" class="panel-collapse collapse">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
Internal ref<br/>
|
||||
External URL<br/>
|
||||
Notes
|
||||
</div>
|
||||
<div class="col">
|
||||
Transaction links<br/>
|
||||
Attachments
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-secondary">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed" aria-expanded="false">
|
||||
Meta information
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseTwo" class="panel-collapse collapse">
|
||||
<div class="card-body">
|
||||
Budget, category, bill, tags, contract
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-secondary">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="collapsed" aria-expanded="false">
|
||||
Extra information
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseThree" class="panel-collapse collapse">
|
||||
<div class="card-body">
|
||||
Notes, transaction links, custom fields.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- button -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<a href="#" class="btn btn-primary">Add a split</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="float-right">
|
||||
<a href="#" class="btn btn-success">Store transaction</a><br/>
|
||||
</p>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col float-right">
|
||||
<p class="text-right">
|
||||
<small class="text-muted">Create another another another <input type="checkbox"/></small><br/>
|
||||
<small class="text-muted">Return here <input type="checkbox"/></small><br/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- buttons -->
|
||||
<!-- button -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button @click="addTransaction" class="btn btn-primary">{{ $t('firefly.add_another_split') }}</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="float-right">
|
||||
<button @click="submitTransaction" :disabled="isSubmitting" class="btn btn-success">Store transaction</button>
|
||||
<br/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col float-right">
|
||||
<p class="text-right">
|
||||
<small class="text-muted">Create another another another <input type="checkbox"/></small><br/>
|
||||
<small class="text-muted">Return here <input type="checkbox"/></small><br/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TransactionDescription from "./TransactionDescription";
|
||||
import {createNamespacedHelpers} from 'vuex'
|
||||
|
||||
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
|
||||
|
||||
|
||||
export default {
|
||||
name: "Create"
|
||||
name: "Create",
|
||||
components: {TransactionDescription},
|
||||
created() {
|
||||
this.addTransaction();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
groupTitle: '',
|
||||
isSubmitting: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'transactionType', // -> this.someGetter
|
||||
'transactions', // -> this.someOtherGetter
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(
|
||||
[
|
||||
'addTransaction',
|
||||
]
|
||||
),
|
||||
/**
|
||||
*
|
||||
*/
|
||||
submitTransaction: function () {
|
||||
this.isSubmitting = true;
|
||||
console.log('Now in submit()');
|
||||
const uri = './api/v1/transactions';
|
||||
const data = this.convertData();
|
||||
|
||||
console.log('Would have submitted:');
|
||||
console.log(data);
|
||||
|
||||
this.isSubmitting = false;
|
||||
},
|
||||
/**
|
||||
*
|
||||
*/
|
||||
convertData: function () {
|
||||
console.log('now in convertData');
|
||||
let data = {
|
||||
//'group_title': null,
|
||||
'transactions': []
|
||||
};
|
||||
for (let key in this.transactions) {
|
||||
if (this.transactions.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
|
||||
data.transactions.push(this.convertSplit(key, this.transactions[key]));
|
||||
}
|
||||
}
|
||||
return data;
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @param key
|
||||
* @param array
|
||||
*/
|
||||
convertSplit: function (key, array) {
|
||||
let currentSplit = {
|
||||
description: array.description
|
||||
};
|
||||
|
||||
// return it.
|
||||
return currentSplit;
|
||||
}
|
||||
|
||||
// addTransactionToArray: function (e) {
|
||||
// console.log('Now in addTransactionToArray()');
|
||||
// this.$store.
|
||||
//
|
||||
// this.transactions.push({
|
||||
// description: '',
|
||||
// });
|
||||
// if (e) {
|
||||
// e.preventDefault();
|
||||
// }
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
<!--
|
||||
- TransactionDescription.vue
|
||||
- Copyright (c) 2020 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="col">
|
||||
<div class="input-group">
|
||||
<input
|
||||
ref="description"
|
||||
:title="$t('firefly.description')"
|
||||
:value="value"
|
||||
autocomplete="off"
|
||||
autofocus
|
||||
class="form-control"
|
||||
name="description[]"
|
||||
type="text"
|
||||
:placeholder="$t('firefly.description')"
|
||||
v-on:submit.prevent
|
||||
>
|
||||
<div class="input-group-append">
|
||||
<!-- v-on:click="clearDescription" -->
|
||||
<button class="btn btn-outline-secondary" type="button"><i class="far fa-trash-alt"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['value'],
|
||||
name: "TransactionDescription"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user