kenmirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-11-01 03:29:33 +00:00
Code Issues Projects Releases Wiki Activity

Rebuild frontend.

Browse Source
This commit is contained in:
James Cole
2021-02-26 06:39:20 +01:00
parent 9aa743b31b
commit 5944cda03a
88 changed files with 733 additions and 697 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/accounts/Edit.vue
View File

@@ -23,9 +23,9 @@
</template>
<script>
export default {
name: "Edit"
}
export default {
name: "Edit"
}
</script>
<style scoped>

6
frontend/src/components/accounts/Index.vue
View File

@@ -26,10 +26,10 @@
<h3 class="card-title">Title thing</h3>
<div class="card-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control float-right" placeholder="Search">
<input class="form-control float-right" name="table_search" placeholder="Search" type="text">
<div class="input-group-append">
<button type="submit" class="btn btn-default">
<button class="btn btn-default" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
@@ -43,7 +43,7 @@
<tr>
<th scope="col">&nbsp;</th>
<th scope="col">{{ $t('list.name') }}</th>
<th scope="col" v-if="'asset' === $props.accountTypes">{{ $t('list.role') }}</th>
<th v-if="'asset' === $props.accountTypes" scope="col">{{ $t('list.role') }}</th>
<th scope="col">{{ $t('list.iban') }}</th>
<th scope="col" style="text-align: right;">{{ $t('list.currentBalance') }}</th>
<th scope="col">{{ $t('list.balanceDiff') }}</th>

12
frontend/src/components/accounts/Show.vue
View File

@@ -19,15 +19,15 @@
-->
<template>
<div>
I am a show
</div>
<div>
I am a show
</div>
</template>
<script>
export default {
name: "Show"
}
export default {
name: "Show"
}
</script>
<style scoped>

158
frontend/src/components/charts/DefaultBarOptions.vue
View File

@@ -24,91 +24,91 @@
<script>
import FormatLabel from "../charts/FormatLabel";
import FormatLabel from "../charts/FormatLabel";
export default {
name: "DefaultBarOptions",
data() {
return {}
export default {
name: "DefaultBarOptions",
data() {
return {}
},
methods: {
getDefaultOptions() {
return {
type: 'bar',
layout: {
padding: {
left: 50,
right: 50,
top: 0,
bottom: 0
},
},
methods: {
getDefaultOptions() {
return {
type: 'bar',
layout: {
padding: {
left: 50,
right: 50,
top: 0,
bottom: 0
},
},
stacked: true,
elements: {
line: {
cubicInterpolationMode: 'monotone'
}
},
legend: {
display: false,
},
animation: {
duration: 0,
},
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [
{
stacked: true,
gridLines: {
display: false
},
ticks: {
// break ticks when too long.
callback: function (value, index, values) {
return FormatLabel.methods.formatLabel(value, 20);
//return value;
}
}
}
],
yAxes: [{
stacked: false,
display: true,
drawOnChartArea: false,
offset: true,
beginAtZero: true,
ticks: {
callback: function (tickValue) {
"use strict";
let currencyCode = this.chart.data.datasets[0] ? this.chart.data.datasets[0].currency_code : 'EUR';
return new Intl.NumberFormat(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tickValue);
},
}
}]
},
tooltips: {
mode: 'label',
callbacks: {
label: function (tooltipItem, data) {
"use strict";
let currencyCode = data.datasets[tooltipItem.datasetIndex] ? data.datasets[tooltipItem.datasetIndex].currency_code : 'EUR';
let nrString = new Intl.NumberFormat(localStorage.locale, {
style: 'currency',
currency: currencyCode
}).format(tooltipItem.yLabel);
return data.datasets[tooltipItem.datasetIndex].label + ': ' + nrString;
}
}
}
};
stacked: true,
elements: {
line: {
cubicInterpolationMode: 'monotone'
}
},
legend: {
display: false,
},
animation: {
duration: 0,
},
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [
{
stacked: true,
gridLines: {
display: false
},
ticks: {
// break ticks when too long.
callback: function (value, index, values) {
return FormatLabel.methods.formatLabel(value, 20);
//return value;
}
}
}
],
yAxes: [{
stacked: false,
display: true,
drawOnChartArea: false,
offset: true,
beginAtZero: true,
ticks: {
callback: function (tickValue) {
"use strict";
let currencyCode = this.chart.data.datasets[0] ? this.chart.data.datasets[0].currency_code : 'EUR';
return new Intl.NumberFormat(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tickValue);
},
}
}]
},
tooltips: {
mode: 'label',
callbacks: {
label: function (tooltipItem, data) {
"use strict";
let currencyCode = data.datasets[tooltipItem.datasetIndex] ? data.datasets[tooltipItem.datasetIndex].currency_code : 'EUR';
let nrString = new Intl.NumberFormat(localStorage.locale, {
style: 'currency',
currency: currencyCode
}).format(tooltipItem.yLabel);
return data.datasets[tooltipItem.datasetIndex].label + ': ' + nrString;
}
}
}
};
}
}
}
</script>
<style scoped>

2
frontend/src/components/charts/DefaultLineOptions.vue
View File

@@ -105,7 +105,7 @@ export default {
callback: function (value, index, values) {
// date format
let dateObj = new Date(value);
let options = { year: 'numeric', month: 'long', day: 'numeric' };
let options = {year: 'numeric', month: 'long', day: 'numeric'};
let str = new Intl.DateTimeFormat(localStorage.locale, options).format(dateObj);
//console.log();
//return self.formatLabel(value, 20);

6
frontend/src/components/charts/DefaultPieOptions.vue
View File

@@ -23,9 +23,9 @@
</template>
<script>
export default {
name: "DefaultPieOptions"
}
export default {
name: "DefaultPieOptions"
}
</script>
<style scoped>

98
frontend/src/components/charts/FormatLabel.vue
View File

@@ -18,56 +18,56 @@
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<script>
export default {
name: "FormatLabel",
methods: {
/**
* Takes a string phrase and breaks it into separate phrases no bigger than 'maxwidth', breaks are made at complete words.
* https://stackoverflow.com/questions/21409717/chart-js-and-long-labels
*
* @param str
* @param maxwidth
* @returns {Array}
*/
formatLabel(str, maxwidth) {
var sections = [];
str = String(str);
var words = str.split(" ");
var temp = "";
export default {
name: "FormatLabel",
methods: {
/**
* Takes a string phrase and breaks it into separate phrases no bigger than 'maxwidth', breaks are made at complete words.
* https://stackoverflow.com/questions/21409717/chart-js-and-long-labels
*
* @param str
* @param maxwidth
* @returns {Array}
*/
formatLabel(str, maxwidth) {
var sections = [];
str = String(str);
var words = str.split(" ");
var temp = "";
words.forEach(function (item, index) {
if (temp.length > 0) {
var concat = temp + ' ' + item;
words.forEach(function (item, index) {
if (temp.length > 0) {
var concat = temp + ' ' + item;
if (concat.length > maxwidth) {
sections.push(temp);
temp = "";
} else {
if (index === (words.length - 1)) {
sections.push(concat);
return;
} else {
temp = concat;
return;
}
}
}
if (index === (words.length - 1)) {
sections.push(item);
return;
}
if (item.length < maxwidth) {
temp = item;
} else {
sections.push(item);
}
});
return sections;
},
if (concat.length > maxwidth) {
sections.push(temp);
temp = "";
} else {
if (index === (words.length - 1)) {
sections.push(concat);
return;
} else {
temp = concat;
return;
}
}
}
}
if (index === (words.length - 1)) {
sections.push(item);
return;
}
if (item.length < maxwidth) {
temp = item;
} else {
sections.push(item);
}
});
return sections;
},
}
}
</script>

20
frontend/src/components/dashboard/BudgetLimitRow.vue
View File

@@ -26,8 +26,8 @@
<td style="vertical-align: middle">
<div class="progress progress active">
<div class="progress-bar bg-success progress-bar-striped" role="progressbar"
:aria-valuenow="budgetLimit.pctGreen" aria-valuemin="0" aria-valuemax="100" :style="'width: '+ budgetLimit.pctGreen + '%;'">
<div :aria-valuenow="budgetLimit.pctGreen" :style="'width: '+ budgetLimit.pctGreen + '%;'"
aria-valuemax="100" aria-valuemin="0" class="progress-bar bg-success progress-bar-striped" role="progressbar">
<span v-if="budgetLimit.pctGreen > 35">
Spent
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimit.currency_code}).format(budgetLimit.spent) }}
@@ -38,8 +38,8 @@
</div>
<div class="progress-bar bg-warning progress-bar-striped" role="progressbar"
:aria-valuenow="budgetLimit.pctOrange" aria-valuemin="0" aria-valuemax="100" :style="'width: '+ budgetLimit.pctOrange + '%;'">
<div :aria-valuenow="budgetLimit.pctOrange" :style="'width: '+ budgetLimit.pctOrange + '%;'"
aria-valuemax="100" aria-valuemin="0" class="progress-bar bg-warning progress-bar-striped" role="progressbar">
<span v-if="budgetLimit.pctRed <= 50 && budgetLimit.pctOrange > 35">
Spent
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimit.currency_code}).format(budgetLimit.spent) }}
@@ -48,8 +48,8 @@
</span>
</div>
<div class="progress-bar bg-danger progress-bar-striped" role="progressbar"
:aria-valuenow="budgetLimit.pctRed" aria-valuemin="0" aria-valuemax="100" :style="'width: '+ budgetLimit.pctRed + '%;'">
<div :aria-valuenow="budgetLimit.pctRed" :style="'width: '+ budgetLimit.pctRed + '%;'"
aria-valuemax="100" aria-valuemin="0" class="progress-bar bg-danger progress-bar-striped" role="progressbar">
<span v-if="budgetLimit.pctOrange <= 50 && budgetLimit.pctRed > 35" class="text-muted">
Spent
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimit.currency_code}).format(budgetLimit.spent) }}
@@ -75,8 +75,8 @@
</small>
</td>
<td style="width:10%;" class="align-middle d-none d-lg-table-cell">
<span class="text-success" v-if="parseFloat(budgetLimit.amount) + parseFloat(budgetLimit.spent) > 0">
<td class="align-middle d-none d-lg-table-cell" style="width:10%;">
<span v-if="parseFloat(budgetLimit.amount) + parseFloat(budgetLimit.spent) > 0" class="text-success">
{{
Intl.NumberFormat(locale, {
style: 'currency',
@@ -84,10 +84,10 @@
}).format(parseFloat(budgetLimit.amount) + parseFloat(budgetLimit.spent))
}}
</span>
<span class="text-muted" v-if="0.0 === parseFloat(budgetLimit.amount) + parseFloat(budgetLimit.spent)">
<span v-if="0.0 === parseFloat(budgetLimit.amount) + parseFloat(budgetLimit.spent)" class="text-muted">
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimit.currency_code}).format(0) }}
</span>
<span class="text-danger" v-if="parseFloat(budgetLimit.amount) + parseFloat(budgetLimit.spent) < 0">
<span v-if="parseFloat(budgetLimit.amount) + parseFloat(budgetLimit.spent) < 0" class="text-danger">
{{
Intl.NumberFormat(locale, {
style: 'currency',

7
frontend/src/components/dashboard/BudgetListGroup.vue
View File

@@ -26,13 +26,13 @@
<div class="card-body table-responsive p-0">
<table class="table table-sm">
<tbody>
<BudgetLimitRow v-bind:key="key" v-for="(budgetLimit, key) in budgetLimits" :budgetLimit="budgetLimit" />
<BudgetRow v-bind:key="key" v-for="(budget, key) in budgets" :budget="budget" />
<BudgetLimitRow v-for="(budgetLimit, key) in budgetLimits" v-bind:key="key" :budgetLimit="budgetLimit"/>
<BudgetRow v-for="(budget, key) in budgets" v-bind:key="key" :budget="budget"/>
</tbody>
</table>
</div>
<div class="card-footer">
<a href="./budgets" class="btn btn-default button-sm"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_budgets') }}</a>
<a class="btn btn-default button-sm" href="./budgets"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_budgets') }}</a>
</div>
</div>
</template>
@@ -40,6 +40,7 @@
<script>
import BudgetLimitRow from "./BudgetLimitRow";
import BudgetRow from "./BudgetRow";
export default {
name: "BudgetListGroup",
components: {BudgetLimitRow, BudgetRow},

24
frontend/src/components/dashboard/Calendar.vue
View File

@@ -30,41 +30,41 @@
</div>
<date-picker
v-model="range"
mode="date"
:rows="2"
is-range
mode="date"
>
<template v-slot="{ inputValue, inputEvents, isDragging, togglePopover }">
<div class="row">
<div class="col">
<div class="btn-group btn-group-sm d-flex">
<button
class="btn btn-secondary btn-sm" :title="$t('firefly.custom_period')"
:title="$t('firefly.custom_period')" class="btn btn-secondary btn-sm"
@click="togglePopover({ placement: 'auto-start', positionFixed: true })"
><i class="fas fa-calendar-alt"></i></button>
<button @click="resetDate"
<button :title="$t('firefly.reset_to_current')"
class="btn btn-secondary"
:title="$t('firefly.reset_to_current')"
@click="resetDate"
><i class="fas fa-history"></i></button>
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
:title="$t('firefly.select_period')"
aria-expanded="false">
<button id="dropdownMenuButton" :title="$t('firefly.select_period')" aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown"
type="button">
<i class="fas fa-list"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div aria-labelledby="dropdownMenuButton" class="dropdown-menu">
<a v-for="period in periods" class="dropdown-item" href="#" @click="customDate(period.start, period.end)">{{ period.title }}</a>
</div>
</div>
<input type="hidden"
<input v-on="inputEvents.start"
:class="isDragging ? 'text-gray-600' : 'text-gray-900'"
:value="inputValue.start"
v-on="inputEvents.start"
type="hidden"
/>
<input type="hidden"
<input v-on="inputEvents.end"
:class="isDragging ? 'text-gray-600' : 'text-gray-900'"
:value="inputValue.end"
v-on="inputEvents.end"
type="hidden"
/>
</div>
</div>

4
frontend/src/components/dashboard/MainAccount.vue
View File

@@ -25,7 +25,7 @@
</div>
<div class="card-body">
<div v-if="!loading">
<MainAccountChart :chart-data="dataCollection" :options="chartOptions" v-if="!loading && !error"/>
<MainAccountChart v-if="!loading && !error" :chart-data="dataCollection" :options="chartOptions"/>
</div>
<div v-if="loading && !error" class="text-center">
<i class="fas fa-spinner fa-spin"></i>
@@ -35,7 +35,7 @@
</div>
</div>
<div class="card-footer">
<a href="./accounts/asset" class="btn btn-default button-sm"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_asset_accounts') }}</a>
<a class="btn btn-default button-sm" href="./accounts/asset"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_asset_accounts') }}</a>
</div>
</div>
</template>

8
frontend/src/components/dashboard/MainAccountChart.vue
View File

@@ -1,4 +1,3 @@
<!--
- MainAccountChart.vue
- Copyright (c) 2020 james@firefly-iii.org
@@ -21,14 +20,15 @@
<script>
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
import {Line, mixins} from 'vue-chartjs'
const {reactiveProp} = mixins
export default {
extends: Line,
mixins: [reactiveProp],
props: ['options'],
mounted () {
mounted() {
this.renderChart(this.chartData, this.options)
}
}

16
frontend/src/components/dashboard/MainAccountList.vue
View File

@@ -21,7 +21,7 @@
<template>
<div>
<!-- row if loading -->
<div class="row" v-if="loading && !error">
<div v-if="loading && !error" class="row">
<div class="col">
<div class="card">
<div class="card-body">
@@ -34,7 +34,7 @@
</div>
<!-- row if error -->
<div class="row" v-if="error">
<div v-if="error" class="row">
<div class="col">
<div class="card">
<div class="card-body">
@@ -47,10 +47,10 @@
</div>
<!-- row if normal -->
<div class="row" v-if="!loading && !error">
<div v-if="!loading && !error" class="row">
<div
v-bind:class="{ 'col-lg-12': 1 === accounts.length, 'col-lg-6': 2 === accounts.length, 'col-lg-4': accounts.length > 2 }"
v-for="account in accounts">
v-for="account in accounts"
v-bind:class="{ 'col-lg-12': 1 === accounts.length, 'col-lg-6': 2 === accounts.length, 'col-lg-4': accounts.length > 2 }">
<div class="card">
<div class="card-header">
<h3 class="card-title"><a :href="account.url">{{ account.title }}</a></h3>
@@ -62,9 +62,9 @@
</div>
<div class="card-body table-responsive p-0">
<div>
<transaction-list-large :transactions="account.transactions" v-if="1===accounts.length" :account_id="account.id"/>
<transaction-list-medium :transactions="account.transactions" v-if="2===accounts.length" :account_id="account.id"/>
<transaction-list-small :transactions="account.transactions" v-if="accounts.length > 2" :account_id="account.id"/>
<transaction-list-large v-if="1===accounts.length" :account_id="account.id" :transactions="account.transactions"/>
<transaction-list-medium v-if="2===accounts.length" :account_id="account.id" :transactions="account.transactions"/>
<transaction-list-small v-if="accounts.length > 2" :account_id="account.id" :transactions="account.transactions"/>
</div>
</div>
</div>

8
frontend/src/components/dashboard/MainBillsList.vue
View File

@@ -24,19 +24,19 @@
<h3 class="card-title">{{ $t('firefly.bills') }}</h3>
</div>
<!-- body if loading -->
<div class="card-body" v-if="loading && !error">
<div v-if="loading && !error" class="card-body">
<div class="text-center">
<i class="fas fa-spinner fa-spin"></i>
</div>
</div>
<!-- body if error -->
<div class="card-body" v-if="error">
<div v-if="error" class="card-body">
<div class="text-center">
<i class="fas fa-exclamation-triangle text-danger"></i>
</div>
</div>
<!-- body if normal -->
<div class="card-body table-responsive p-0" v-if="!loading && !error">
<div v-if="!loading && !error" class="card-body table-responsive p-0">
<table class="table table-striped">
<caption style="display:none;">{{ $t('firefly.bills') }}</caption>
<thead>
@@ -70,7 +70,7 @@
</table>
</div>
<div class="card-footer">
<a href="./bills" class="btn btn-default button-sm"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_bills') }}</a>
<a class="btn btn-default button-sm" href="./bills"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_bills') }}</a>
</div>
</div>
</template>

32
frontend/src/components/dashboard/MainBudgetList.vue
View File

@@ -21,37 +21,37 @@
<template>
<div>
<!-- daily budgets (will be the exception, I expect) -->
<div class="row" v-if="!loading">
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12" v-if="budgetLimits.daily.length > 0">
<BudgetListGroup :title="$t('firefly.daily_budgets')" :budgetLimits=budgetLimits.daily
<div v-if="!loading" class="row">
<div v-if="budgetLimits.daily.length > 0" class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<BudgetListGroup :budgetLimits=budgetLimits.daily :title="$t('firefly.daily_budgets')"
/>
</div>
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12" v-if="budgetLimits.weekly.length > 0">
<BudgetListGroup :title="$t('firefly.weekly_budgets')" :budgetLimits=budgetLimits.weekly
<div v-if="budgetLimits.weekly.length > 0" class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<BudgetListGroup :budgetLimits=budgetLimits.weekly :title="$t('firefly.weekly_budgets')"
/>
</div>
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12" v-if="budgetLimits.monthly.length > 0">
<BudgetListGroup :title="$t('firefly.monthly_budgets')" :budgetLimits=budgetLimits.monthly
<div v-if="budgetLimits.monthly.length > 0" class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<BudgetListGroup :budgetLimits=budgetLimits.monthly :title="$t('firefly.monthly_budgets')"
/>
</div>
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12" v-if="budgetLimits.quarterly.length > 0">
<BudgetListGroup :title="$t('firefly.quarterly_budgets')" :budgetLimits=budgetLimits.quarterly
<div v-if="budgetLimits.quarterly.length > 0" class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<BudgetListGroup :budgetLimits=budgetLimits.quarterly :title="$t('firefly.quarterly_budgets')"
/>
</div>
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12" v-if="budgetLimits.half_year.length > 0">
<BudgetListGroup :title="$t('firefly.half_year_budgets')" :budgetLimits=budgetLimits.half_year
<div v-if="budgetLimits.half_year.length > 0" class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<BudgetListGroup :budgetLimits=budgetLimits.half_year :title="$t('firefly.half_year_budgets')"
/>
</div>
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12" v-if="budgetLimits.yearly.length > 0">
<BudgetListGroup :title="$t('firefly.yearly_budgets')" :budgetLimits=budgetLimits.yearly
<div v-if="budgetLimits.yearly.length > 0" class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<BudgetListGroup :budgetLimits=budgetLimits.yearly :title="$t('firefly.yearly_budgets')"
/>
</div>
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12" v-if="budgetLimits.other.length > 0 || rawBudgets.length > 0">
<BudgetListGroup :title="$t('firefly.other_budgets')" :budgetLimits=budgetLimits.other :budgets="rawBudgets"
<div v-if="budgetLimits.other.length > 0 || rawBudgets.length > 0" class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<BudgetListGroup :budgetLimits=budgetLimits.other :budgets="rawBudgets" :title="$t('firefly.other_budgets')"
/>
</div>
</div>
<div class="row" v-if="loading && !error">
<div v-if="loading && !error" class="row">
<div class="col">
<div class="card">
<div class="card-body">

22
frontend/src/components/dashboard/MainCategoryList.vue
View File

@@ -24,19 +24,19 @@
<h3 class="card-title">{{ $t('firefly.categories') }}</h3>
</div>
<!-- body if loading -->
<div class="card-body" v-if="loading && !error">
<div v-if="loading && !error" class="card-body">
<div class="text-center">
<i class="fas fa-spinner fa-spin"></i>
</div>
</div>
<!-- body if error -->
<div class="card-body" v-if="error">
<div v-if="error" class="card-body">
<div class="text-center">
<i class="fas fa-exclamation-triangle text-danger"></i>
</div>
</div>
<!-- body if normal -->
<div class="card-body table-responsive p-0" v-if="!loading && !error">
<div v-if="!loading && !error" class="card-body table-responsive p-0">
<table class="table table-sm">
<tbody>
<tr v-for="category in sortedList">
@@ -45,10 +45,10 @@
</td>
<td class="align-middle">
<!-- SPENT -->
<div class="progress" v-if="category.spentPct > 0">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" :aria-valuenow="category.spentPct"
:style="{ width: category.spentPct + '%'}" aria-valuemin="0"
aria-valuemax="100">
<div v-if="category.spentPct > 0" class="progress">
<div :aria-valuenow="category.spentPct" :style="{ width: category.spentPct + '%'}" aria-valuemax="100"
aria-valuemin="0" class="progress-bar progress-bar-striped bg-danger"
role="progressbar">
<span v-if="category.spentPct > 20">
{{ Intl.NumberFormat(locale, {style: 'currency', currency: category.currency_code}).format(category.spent) }}
</span>
@@ -59,13 +59,13 @@
</div>
<!-- EARNED -->
<div class="progress justify-content-end" v-if="category.earnedPct > 0" title="hello2">
<div v-if="category.earnedPct > 0" class="progress justify-content-end" title="hello2">
<span v-if="category.earnedPct <= 20">
{{ Intl.NumberFormat(locale, {style: 'currency', currency: category.currency_code}).format(category.earned) }}
&nbsp;</span>
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" :aria-valuenow="category.earnedPct"
:style="{ width: category.earnedPct + '%'}" aria-valuemin="0"
aria-valuemax="100" title="hello">
<div :aria-valuenow="category.earnedPct" :style="{ width: category.earnedPct + '%'}" aria-valuemax="100"
aria-valuemin="0" class="progress-bar progress-bar-striped bg-success"
role="progressbar" title="hello">
<span v-if="category.earnedPct > 20">
{{ Intl.NumberFormat(locale, {style: 'currency', currency: category.currency_code}).format(category.earned) }}
</span>

18
frontend/src/components/dashboard/MainCreditList.vue
View File

@@ -24,28 +24,28 @@
<h3 class="card-title">{{ $t('firefly.revenue_accounts') }}</h3>
</div>
<!-- body if loading -->
<div class="card-body" v-if="loading && !error">
<div v-if="loading && !error" class="card-body">
<div class="text-center">
<i class="fas fa-spinner fa-spin"></i>
</div>
</div>
<!-- body if error -->
<div class="card-body" v-if="error">
<div v-if="error" class="card-body">
<div class="text-center">
<i class="fas fa-exclamation-triangle text-danger"></i>
</div>
</div>
<!-- body if normal -->
<div class="card-body table-responsive p-0" v-if="!loading && !error">
<div v-if="!loading && !error" class="card-body table-responsive p-0">
<table class="table table-sm">
<tbody>
<tr v-for="entry in income">
<td style="width:20%;"><a :href="'./accounts/show/' + entry.id">{{ entry.name }}</a></td>
<td class="align-middle">
<div class="progress" v-if="entry.pct > 0">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" :aria-valuenow="entry.pct"
:style="{ width: entry.pct + '%'}" aria-valuemin="0"
aria-valuemax="100">
<div v-if="entry.pct > 0" class="progress">
<div :aria-valuenow="entry.pct" :style="{ width: entry.pct + '%'}" aria-valuemax="100"
aria-valuemin="0" class="progress-bar progress-bar-striped bg-success"
role="progressbar">
<span v-if="entry.pct > 20">
{{ Intl.NumberFormat(locale, {style: 'currency', currency: entry.currency_code}).format(entry.difference_float) }}
</span>
@@ -60,7 +60,7 @@
</table>
</div>
<div class="card-footer">
<a href="./transactions/deposit" class="btn btn-default button-sm"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_deposits') }}</a>
<a class="btn btn-default button-sm" href="./transactions/deposit"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_deposits') }}</a>
</div>
</div>
</template>
@@ -117,7 +117,7 @@ export default {
getIncome() {
this.loading = true;
this.income = [];
this.error=false;
this.error = false;
let startStr = this.start.toISOString().split('T')[0];
let endStr = this.end.toISOString().split('T')[0];
axios.get('./api/v1/insight/income/date/basic?start=' + startStr + '&end=' + endStr)

18
frontend/src/components/dashboard/MainDebitList.vue
View File

@@ -24,28 +24,28 @@
<h3 class="card-title">{{ $t('firefly.expense_accounts') }}</h3>
</div>
<!-- body if loading -->
<div class="card-body" v-if="loading && !error">
<div v-if="loading && !error" class="card-body">
<div class="text-center">
<i class="fas fa-spinner fa-spin"></i>
</div>
</div>
<!-- body if error -->
<div class="card-body" v-if="error">
<div v-if="error" class="card-body">
<div class="text-center">
<i class="fas fa-exclamation-triangle text-danger"></i>
</div>
</div>
<!-- body if normal -->
<div class="card-body table-responsive p-0" v-if="!loading && !error">
<div v-if="!loading && !error" class="card-body table-responsive p-0">
<table class="table table-sm">
<tbody>
<tr v-for="entry in expenses">
<td style="width:20%;"><a :href="'./accounts/show/' + entry.id">{{ entry.name }}</a></td>
<td class="align-middle">
<div class="progress" v-if="entry.pct > 0">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" :aria-valuenow="entry.pct"
:style="{ width: entry.pct + '%'}" aria-valuemin="0"
aria-valuemax="100">
<div v-if="entry.pct > 0" class="progress">
<div :aria-valuenow="entry.pct" :style="{ width: entry.pct + '%'}" aria-valuemax="100"
aria-valuemin="0" class="progress-bar progress-bar-striped bg-danger"
role="progressbar">
<span v-if="entry.pct > 20">
{{ Intl.NumberFormat(locale, {style: 'currency', currency: entry.currency_code}).format(entry.difference_float) }}
</span>
@@ -60,7 +60,7 @@
</table>
</div>
<div class="card-footer">
<a href="./transactions/withdrawal" class="btn btn-default button-sm"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_withdrawals') }}</a>
<a class="btn btn-default button-sm" href="./transactions/withdrawal"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_withdrawals') }}</a>
</div>
</div>
</template>
@@ -116,7 +116,7 @@ export default {
methods: {
getExpenses() {
this.loading = true;
this.error=false;
this.error = false;
this.expenses = [];
let startStr = this.start.toISOString().split('T')[0];
let endStr = this.end.toISOString().split('T')[0];

14
frontend/src/components/dashboard/MainPiggyList.vue
View File

@@ -25,19 +25,19 @@
</div>
<!-- body if loading -->
<div class="card-body" v-if="loading && !error">
<div v-if="loading && !error" class="card-body">
<div class="text-center">
<i class="fas fa-spinner fa-spin"></i>
</div>
</div>
<!-- body if error -->
<div class="card-body" v-if="error">
<div v-if="error" class="card-body">
<div class="text-center">
<i class="fas fa-exclamation-triangle text-danger"></i>
</div>
</div>
<!-- body if normal -->
<div class="card-body table-responsive p-0" v-if="!loading && !error">
<div v-if="!loading && !error" class="card-body table-responsive p-0">
<table class="table table-striped">
<caption style="display:none;">{{ $t('firefly.piggy_banks') }}</caption>
<thead>
@@ -58,9 +58,9 @@
<td>
<div class="progress-group">
<div class="progress progress-sm">
<div class="progress-bar progress-bar-striped primary" v-if="piggy.attributes.pct < 100" :style="{'width': piggy.attributes.pct + '%'}"></div>
<div class="progress-bar progress-bar-striped bg-success" v-if="100 === piggy.attributes.pct"
:style="{'width': piggy.attributes.pct + '%'}"></div>
<div v-if="piggy.attributes.pct < 100" :style="{'width': piggy.attributes.pct + '%'}" class="progress-bar progress-bar-striped primary"></div>
<div v-if="100 === piggy.attributes.pct" :style="{'width': piggy.attributes.pct + '%'}"
class="progress-bar progress-bar-striped bg-success"></div>
</div>
</div>
<span class="text-success">
@@ -81,7 +81,7 @@
</table>
</div>
<div class="card-footer">
<a href="./piggy-banks" class="btn btn-default button-sm"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_piggies') }}</a>
<a class="btn btn-default button-sm" href="./piggy-banks"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_piggies') }}</a>
</div>
</div>
</template>

34
frontend/src/components/dashboard/TopBoxes.vue
View File

@@ -25,11 +25,11 @@
<span class="info-box-icon"><i class="far fa-bookmark text-info"></i></span>
<div class="info-box-content">
<span class="info-box-text" v-if="!loading && !error">{{ $t("firefly.balance") }}</span>
<span class="info-box-text" v-if="loading && !error"><i class="fas fa-spinner fa-spin"></i></span>
<span class="info-box-text" v-if="error"><i class="fas fa-exclamation-triangle text-danger"></i></span>
<span v-if="!loading && !error" class="info-box-text">{{ $t("firefly.balance") }}</span>
<span v-if="loading && !error" class="info-box-text"><i class="fas fa-spinner fa-spin"></i></span>
<span v-if="error" class="info-box-text"><i class="fas fa-exclamation-triangle text-danger"></i></span>
<!-- balance in preferred currency -->
<span class="info-box-number" v-for="balance in prefCurrencyBalances" :title="balance.sub_title">{{ balance.value_parsed }}</span>
<span v-for="balance in prefCurrencyBalances" :title="balance.sub_title" class="info-box-number">{{ balance.value_parsed }}</span>
<div class="progress bg-info">
<div class="progress-bar" style="width: 0"></div>
@@ -50,11 +50,11 @@
<span class="info-box-icon"><i class="far fa-calendar-alt text-teal"></i></span>
<div class="info-box-content">
<span class="info-box-text" v-if="!loading && !error">{{ $t('firefly.bills_to_pay') }}</span>
<span class="info-box-text" v-if="loading && !error"><i class="fas fa-spinner fa-spin"></i></span>
<span class="info-box-text" v-if="error"><i class="fas fa-exclamation-triangle text-danger"></i></span>
<span v-if="!loading && !error" class="info-box-text">{{ $t('firefly.bills_to_pay') }}</span>
<span v-if="loading && !error" class="info-box-text"><i class="fas fa-spinner fa-spin"></i></span>
<span v-if="error" class="info-box-text"><i class="fas fa-exclamation-triangle text-danger"></i></span>
<!-- bills unpaid, in preferred currency. -->
<span class="info-box-number" v-for="balance in prefBillsUnpaid">{{ balance.value_parsed }}</span>
<span v-for="balance in prefBillsUnpaid" class="info-box-number">{{ balance.value_parsed }}</span>
<div class="progress bg-teal">
<div class="progress-bar" style="width: 0"></div>
@@ -75,11 +75,11 @@
<span class="info-box-icon"><i class="fas fa-money-bill text-success"></i></span>
<div class="info-box-content">
<span class="info-box-text" v-if="!loading && !error">{{ $t('firefly.left_to_spend') }}</span>
<span class="info-box-text" v-if="loading && !error"><i class="fas fa-spinner fa-spin"></i></span>
<span class="info-box-text" v-if="error"><i class="fas fa-exclamation-triangle text-danger"></i></span>
<span v-if="!loading && !error" class="info-box-text">{{ $t('firefly.left_to_spend') }}</span>
<span v-if="loading && !error" class="info-box-text"><i class="fas fa-spinner fa-spin"></i></span>
<span v-if="error" class="info-box-text"><i class="fas fa-exclamation-triangle text-danger"></i></span>
<!-- left to spend in preferred currency -->
<span class="info-box-number" v-for="left in prefLeftToSpend" :title="left.sub_title">{{ left.value_parsed }}</span>
<span v-for="left in prefLeftToSpend" :title="left.sub_title" class="info-box-number">{{ left.value_parsed }}</span>
<div class="progress bg-success">
<div class="progress-bar" style="width: 0"></div>
@@ -101,10 +101,10 @@
<span class="info-box-icon"><i class="fas fa-money-bill text-success"></i></span>
<div class="info-box-content">
<span class="info-box-text" v-if="!loading && !error">{{ $t('firefly.net_worth') }}</span>
<span class="info-box-text" v-if="loading && !error"><i class="fas fa-spinner fa-spin"></i></span>
<span class="info-box-text" v-if="error"><i class="fas fa-exclamation-triangle text-danger"></i></span>
<span class="info-box-number" v-for="nw in prefNetWorth" :title="nw.sub_title">{{ nw.value_parsed }}</span>
<span v-if="!loading && !error" class="info-box-text">{{ $t('firefly.net_worth') }}</span>
<span v-if="loading && !error" class="info-box-text"><i class="fas fa-spinner fa-spin"></i></span>
<span v-if="error" class="info-box-text"><i class="fas fa-exclamation-triangle text-danger"></i></span>
<span v-for="nw in prefNetWorth" :title="nw.sub_title" class="info-box-number">{{ nw.value_parsed }}</span>
<div class="progress bg-success">
<div class="progress-bar" style="width: 0"></div>
@@ -241,7 +241,7 @@ export default {
* Prepare the component.
*/
prepareComponent() {
this.error=false;
this.error = false;
this.loading = true;
this.summary = [];
this.balances = [];

140
frontend/src/components/new-user/Index.vue
View File

@@ -21,85 +21,85 @@
<template>
<div class="row">
<div class="col">
<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">
Create new accounts
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse show">
<div class="card-body">
<div class="row">
<div class="col">
<p>Explain</p>
</div>
</div>
<div class="row">
<div class="col-lg-4">
A
</div>
<div class="col-lg-8">
B
</div>
</div>
<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-parent="#accordion" data-toggle="collapse" href="#collapseOne">
Create new accounts
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse show">
<div class="card-body">
<div class="row">
<div class="col">
<p>Explain</p>
</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">
Collapsible Group Danger
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
3
wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee
nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
<div class="row">
<div class="col-lg-4">
A
</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">
Collapsible Group Success
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
3
wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee
nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
<div class="col-lg-8">
B
</div>
</div>
</div>
</div>
</div>
<div class="card card-secondary">
<div class="card-header">
<h4 class="card-title">
<a data-parent="#accordion" data-toggle="collapse" href="#collapseTwo">
Collapsible Group Danger
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
3
wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee
nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
</div>
<div class="card card-secondary">
<div class="card-header">
<h4 class="card-title">
<a data-parent="#accordion" data-toggle="collapse" href="#collapseThree">
Collapsible Group Success
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
3
wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee
nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>

4
frontend/src/components/partials/Alert.vue
View File

@@ -18,8 +18,8 @@
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<template>
<div :class="'alert alert-' + type + ' alert-dismissible'" v-if="message.length > 0">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<div v-if="message.length > 0" :class="'alert alert-' + type + ' alert-dismissible'">
<button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
<h5>
<i v-if="'danger' === type" class="icon fas fa-ban"></i>
<i v-if="'success' === type" class="icon fas fa-thumbs-up"></i>

4
frontend/src/components/store/modules/dashboard/index.js vendored
View File

@@ -81,12 +81,12 @@ const actions = {
context.commit('setEnd', new Date(localStorage.viewRangeEnd));
}
// also set default:
if(localStorage.viewRangeDefaultStart) {
if (localStorage.viewRangeDefaultStart) {
// console.log('view range default start set from local storage.');
// console.log(localStorage.viewRangeDefaultStart);
context.commit('setDefaultStart', new Date(localStorage.viewRangeDefaultStart));
}
if(localStorage.viewRangeDefaultEnd) {
if (localStorage.viewRangeDefaultEnd) {
// console.log('view range default end set from local storage.');
// console.log(localStorage.viewRangeDefaultEnd);
context.commit('setDefaultEnd', new Date(localStorage.viewRangeDefaultEnd));

24
frontend/src/components/store/modules/transactions/create.js vendored
View File

@@ -23,14 +23,8 @@ const lodashClonedeep = require('lodash.clonedeep');
// initial state
const state = () => ({
transactionType: 'any',
date: new Date,
time: new Date,
groupTitle: '',
transactions: [],
allowedOpposingTypes: {},
accountToTransaction: {},
sourceAllowedTypes: ['Asset account', 'Loan', 'Debt', 'Mortgage', 'Revenue account'],
destinationAllowedTypes: ['Asset account', 'Loan', 'Debt', 'Mortgage', 'Expense account'],
customDateFields: {
interest_date: false,
book_date: false,
@@ -147,12 +141,6 @@ const getters = {
transactions: state => {
return state.transactions;
},
date: state => {
return state.date;
},
time: state => {
return state.time;
},
groupTitle: state => {
return state.groupTitle;
},
@@ -190,9 +178,7 @@ const getters = {
}
// actions
const actions = {
}
const actions = {}
// mutations
const mutations = {
@@ -208,12 +194,6 @@ const mutations = {
resetTransactions(state) {
state.transactions = [];
},
setDate(state, payload) {
state.date = payload.date;
},
setTime(state, payload) {
state.time = payload.time;
},
setGroupTitle(state, payload) {
state.groupTitle = payload.groupTitle;
},
@@ -224,7 +204,7 @@ const mutations = {
state.transactions.splice(payload.index, 1);
// console.log('Deleted transaction ' + payload.index);
// console.log(state.transactions);
if(0===state.transactions.length) {
if (0 === state.transactions.length) {
// console.log('array is empty!');
}
},

9
frontend/src/components/store/modules/transactions/edit.js vendored
View File

@@ -23,16 +23,13 @@ const state = () => ({});
// getters
const getters = {
};
const getters = {};
// actions
const actions = {
};
const actions = {};
// mutations
const mutations = {
};
const mutations = {};
export default {
namespaced: true,

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

@@ -27,11 +27,17 @@
<SplitForm
v-for="(transaction, index) in this.transactions"
v-bind:key="index"
:transaction="transaction"
:index="index"
:allowed-opposing-types="allowedOpposingTypes"
:count="transactions.length"
:custom-fields="customFields"
:date="date"
:destination-allowed-types="destinationAllowedTypes"
: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)"
@@ -40,13 +46,16 @@
v-on:set-time="storeTime($event)"
v-on:set-field="storeField($event)"
v-on:remove-transaction="removeTransaction($event)"
v-on:set-dest-types="setDestinationAllowedTypes($event)"
v-on:set-src-types="setSourceAllowedTypes($event)"
/>
</div>
<div class="row">
<!-- group title -->
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="card" v-if="transactions.length > 1">
<div v-if="transactions.length > 1" class="card">
<div class="card-body">
<div class="row">
<div class="col">
@@ -65,14 +74,14 @@
<div class="text-xs d-none d-lg-block d-xl-block">
&nbsp;
</div>
<button @click="addTransaction" class="btn btn-outline-primary btn-block"><i class="far fa-clone"></i> {{ $t('firefly.add_another_split') }}
<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">
&nbsp;
</div>
<button class="btn btn-success btn-block" @click="submitTransaction" :disabled="!enableSubmit">
<button :disabled="!enableSubmit" class="btn btn-success btn-block" @click="submitTransaction">
<span v-if="enableSubmit"><i class="far fa-save"></i> {{ $t('firefly.store_transaction') }}</span>
<span v-if="!enableSubmit"><i class="fas fa-spinner fa-spin"></i></span>
</button>
@@ -84,13 +93,13 @@
</div>
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" v-model="createAnother" id="createAnother">
<input id="createAnother" v-model="createAnother" class="form-check-input" type="checkbox">
<label class="form-check-label" for="createAnother">
<span class="small">{{ $t('firefly.create_another') }}</span>
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" v-model="resetFormAfter" id="resetFormAfter" :disabled="!createAnother">
<input id="resetFormAfter" v-model="resetFormAfter" :disabled="!createAnother" class="form-check-input" type="checkbox">
<label class="form-check-label" for="resetFormAfter">
<span class="small">{{ $t('firefly.reset_after') }}</span>
</label>
@@ -161,16 +170,23 @@ export default {
returnedGroupId: 0,
returnedGroupTitle: '',
// meta data:
accountToTransaction: {}
// meta data for accounts
accountToTransaction: {},
allowedOpposingTypes: {},
defaultSourceAllowedTypes: ['Asset account', 'Loan', 'Debt', 'Mortgage', 'Revenue account'],
defaultDestinationAllowedTypes: ['Asset account', 'Loan', 'Debt', 'Mortgage', 'Expense account'],
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,
}
},
computed: {
...mapGetters([
'transactionType',
'transactions',
'date',
'time',
'groupTitle'
])
},
@@ -200,14 +216,11 @@ export default {
'setGroupTitle',
'addTransaction',
'deleteTransaction',
'setAllowedOpposingTypes',
'setTransactionError',
'setTransactionType',
'resetErrors',
'updateField',
'resetTransactions',
'setDate',
'setTime'
],
),
/**
@@ -246,7 +259,6 @@ export default {
return;
}
if (false === this.inError) {
// show message:
this.errorMessage = '';
@@ -399,11 +411,11 @@ export default {
storeField: function (payload) {
this.updateField(payload);
},
storeDate: function (value) {
this.setDate(value.date)
storeDate: function (payload) {
this.date = payload.date;
},
storeTime: function (value) {
this.setTime(value.time)
storeTime: function (payload) {
this.time = payload.time;
},
storeGroupTitle: function (value) {
// console.log('set group title: ' + value);
@@ -702,9 +714,11 @@ export default {
theDate.setHours(this.time.getHours());
theDate.setMinutes(this.time.getMinutes());
theDate.setSeconds(this.time.getSeconds());
dateStr = this.toW3CString(this.date);
dateStr = this.toW3CString(theDate);
}
// console.log('dateStr = ' + dateStr);
let currentSplit = {
// basic
description: array.description,
@@ -857,8 +871,11 @@ export default {
offsetSign + offsetHours + ':' + offsetMinutes;
},
storeAllowedOpposingTypes: function () {
// take this from API:
this.setAllowedOpposingTypes(window.allowedOpposingTypes);
axios.get('./api/v1/configuration/static/firefly.allowed_opposing_types')
.then(response => {
this.allowedOpposingTypes = response.data['firefly.allowed_opposing_types'];
// console.log('Set allowedOpposingTypes');
});
},
storeAccountToTransaction: function () {
axios.get('./api/v1/configuration/static/firefly.account_to_transaction')
@@ -866,7 +883,26 @@ export default {
this.accountToTransaction = response.data['firefly.account_to_transaction'];
});
},
setDestinationAllowedTypes: function (value) {
// console.log('Create::setDestinationAllowedTypes');
// console.log(value);
if (0 === value.length) {
this.destinationAllowedTypes = this.defaultDestinationAllowedTypes;
//console.log('empty so back to defaults');
return;
}
this.destinationAllowedTypes = value;
},
setSourceAllowedTypes(value) {
// console.log('Create::setSourceAllowedTypes');
// console.log(value);
if (0 === value.length) {
this.sourceAllowedTypes = this.defaultSourceAllowedTypes;
// console.log('empty so back to defaults');
return;
}
this.sourceAllowedTypes = value;
}
},
}

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

@@ -19,7 +19,7 @@
-->
<template>
<div :class="'tab-pane' + (0===index ? ' active' : '')" :id="'split_' + index">
<div :id="'split_' + index" :class="'tab-pane' + (0===index ? ' active' : '')">
<div class="row">
<div class="col">
<div class="card">
@@ -28,7 +28,7 @@
{{ $t('firefly.basic_journal_information') }}
<span v-if="count > 1">({{ index + 1 }} / {{ count }}) </span>
</h3>
<div class="card-tools" v-if="count>1">
<div v-if="count>1" class="card-tools">
<button class="btn btn-danger btn-xs" @click="removeTransaction"><i class="fas fa-trash-alt"></i></button>
</div>
</div>
@@ -37,10 +37,10 @@
<div class="row">
<div class="col">
<TransactionDescription
v-on="$listeners"
v-model="transaction.description"
:index="index"
v-on="$listeners"
:errors="transaction.errors.description"
:index="index"
></TransactionDescription>
</div>
</div>
@@ -49,11 +49,14 @@
<div class="col-xl-5 col-lg-5 col-md-10 col-sm-12 col-xs-12">
<!-- SOURCE -->
<TransactionAccount
v-on="$listeners"
v-model="sourceAccount"
direction="source"
:index="index"
v-on="$listeners"
:allowed-opposing-types="allowedOpposingTypes"
:destination-allowed-types="destinationAllowedTypes"
:errors="transaction.errors.source"
:index="index"
:source-allowed-types="sourceAllowedTypes"
direction="source"
/>
</div>
<!-- switcharoo! -->
@@ -62,6 +65,7 @@
v-if="0 === index"
v-on="$listeners"
:index="index"
:transaction-type="transactionType"
/>
</div>
@@ -69,11 +73,14 @@
<div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-xs-12">
<!-- DESTINATION -->
<TransactionAccount
v-on="$listeners"
v-model="destinationAccount"
direction="destination"
:index="index"
v-on="$listeners"
:allowed-opposing-types="allowedOpposingTypes"
:destination-allowed-types="destinationAllowedTypes"
:errors="transaction.errors.destination"
:index="index"
:source-allowed-types="sourceAllowedTypes"
direction="destination"
/>
</div>
</div>
@@ -84,24 +91,24 @@
<div class="col-xl-5 col-lg-5 col-md-10 col-sm-12 col-xs-12">
<!-- AMOUNT -->
<TransactionAmount
:index="index"
:errors="transaction.errors.amount"
:amount="transaction.amount"
:transaction-type="this.transactionType"
:source-currency-symbol="this.transaction.source_account_currency_symbol"
:destination-currency-symbol="this.transaction.destination_account_currency_symbol"
v-on="$listeners"
:amount="transaction.amount"
:destination-currency-symbol="this.transaction.destination_account_currency_symbol"
:errors="transaction.errors.amount"
:index="index"
:source-currency-symbol="this.transaction.source_account_currency_symbol"
:transaction-type="this.transactionType"
/>
</div>
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 text-center d-none d-sm-block">
<TransactionForeignCurrency
v-on="$listeners"
v-model="transaction.foreign_currency_id"
:transaction-type="this.transactionType"
:source-currency-id="this.transaction.source_account_currency_id"
v-on="$listeners"
:destination-currency-id="this.transaction.destination_account_currency_id"
:selected-currency-id="this.transaction.foreign_currency_id"
:index="index"
:selected-currency-id="this.transaction.foreign_currency_id"
:source-currency-id="this.transaction.source_account_currency_id"
:transaction-type="this.transactionType"
/>
</div>
<div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-xs-12">
@@ -112,14 +119,14 @@
currency id is submitted to Firefly III.
-->
<TransactionForeignAmount
:index="index"
v-on="$listeners"
:errors="transaction.errors.foreign_amount"
v-model="transaction.foreign_amount"
:transaction-type="this.transactionType"
:source-currency-id="this.transaction.source_account_currency_id"
v-on="$listeners"
:destination-currency-id="this.transaction.destination_account_currency_id"
:errors="transaction.errors.foreign_amount"
:index="index"
:selected-currency-id="this.transaction.foreign_currency_id"
:source-currency-id="this.transaction.source_account_currency_id"
:transaction-type="this.transactionType"
/>
</div>
</div>
@@ -128,26 +135,26 @@
<div class="row">
<div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-xs-12">
<TransactionDate
:index="index"
v-on="$listeners"
:date="splitDate"
:time="splitTime"
:errors="transaction.errors.date"
:index="index"
:time="splitTime"
/>
</div>
<div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-xs-12 offset-xl-2 offset-lg-2">
<TransactionCustomDates
:index="index"
v-on="$listeners"
:custom-fields.sync="customFields"
:errors="transaction.errors.custom_dates"
:interest-date="transaction.interest_date"
:book-date="transaction.book_date"
:process-date="transaction.process_date"
:custom-fields.sync="customFields"
:due-date="transaction.due_date"
:payment-date="transaction.payment_date"
:errors="transaction.errors.custom_dates"
:index="index"
:interest-date="transaction.interest_date"
:invoice-date="transaction.invoice_date"
:payment-date="transaction.payment_date"
:process-date="transaction.process_date"
/>
</div>
</div>
@@ -174,39 +181,39 @@
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
<TransactionBudget
v-on="$listeners"
v-model="transaction.budget_id"
:index="index"
:errors="transaction.errors.budget"
v-if="!('Transfer' === transactionType || 'Deposit' === transactionType)"
v-model="transaction.budget_id"
v-on="$listeners"
:errors="transaction.errors.budget"
:index="index"
/>
<TransactionCategory
v-on="$listeners"
v-model="transaction.category"
:index="index"
v-on="$listeners"
:errors="transaction.errors.category"
:index="index"
/>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
<TransactionBill
v-on="$listeners"
v-model="transaction.bill_id"
:index="index"
:errors="transaction.errors.bill"
v-if="!('Transfer' === transactionType || 'Deposit' === transactionType)"
v-model="transaction.bill_id"
v-on="$listeners"
:errors="transaction.errors.bill"
:index="index"
/>
<TransactionTags
v-on="$listeners"
:index="index"
v-model="transaction.tags"
v-on="$listeners"
:errors="transaction.errors.tags"
:index="index"
/>
<TransactionPiggyBank
v-on="$listeners"
:index="index"
v-model="transaction.piggy_bank_id"
:errors="transaction.errors.piggy_bank"
v-if="!('Withdrawal' === transactionType || 'Deposit' === transactionType)"
v-model="transaction.piggy_bank_id"
v-on="$listeners"
:errors="transaction.errors.piggy_bank"
:index="index"
/>
</div>
</div>
@@ -216,7 +223,7 @@
</div>
<!-- end card for meta -->
<!-- card for extra -->
<div class="row" v-if="hasMetaFields">
<div v-if="hasMetaFields" class="row">
<div class="col">
<div class="card">
<div class="card-header">
@@ -231,52 +238,52 @@
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
<TransactionInternalReference
v-on="$listeners"
:index="index"
v-model="transaction.internal_reference"
:errors="transaction.errors.internal_reference"
v-on="$listeners"
:custom-fields.sync="customFields"
:errors="transaction.errors.internal_reference"
:index="index"
/>
<TransactionExternalUrl
v-on="$listeners"
:index="index"
v-model="transaction.external_url"
:errors="transaction.errors.external_url"
v-on="$listeners"
:custom-fields.sync="customFields"
:errors="transaction.errors.external_url"
:index="index"
/>
<TransactionNotes
v-on="$listeners"
:index="index"
v-model="transaction.notes"
:errors="transaction.errors.notes"
v-on="$listeners"
:custom-fields.sync="customFields"
:errors="transaction.errors.notes"
:index="index"
/>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
<TransactionAttachments
:index="index"
ref="attachments"
v-on="$listeners"
:transaction_journal_id="transaction.transaction_journal_id"
:submitted_transaction="submittedTransaction"
v-model="transaction.attachments"
v-on="$listeners"
:custom-fields.sync="customFields"
:index="index"
:submitted_transaction="submittedTransaction"
:transaction_journal_id="transaction.transaction_journal_id"
/>
<TransactionLocation
v-on="$listeners"
:index="index"
v-model="transaction.notes"
:errors="transaction.errors.location"
v-on="$listeners"
:custom-fields.sync="customFields"
:errors="transaction.errors.location"
:index="index"
/>
<TransactionLinks
v-on="$listeners"
:index="index"
v-model="transaction.links"
v-on="$listeners"
:custom-fields.sync="customFields"
:index="index"
/>
</div>
@@ -312,11 +319,8 @@ import TransactionNotes from "./TransactionNotes";
import TransactionLinks from "./TransactionLinks";
import TransactionAttachments from "./TransactionAttachments";
import SplitPills from "./SplitPills";
import {createNamespacedHelpers} from "vuex";
import TransactionLocation from "./TransactionLocation";
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
export default {
name: "SplitForm",
props: [
@@ -325,8 +329,19 @@ export default {
'count',
'customFields', // for custom transaction form fields.
'index',
'submittedTransaction' // need to know if transaction is submitted.
'date',
'time',
'transactionType',
'submittedTransaction', // need to know if transaction is submitted.
'sourceAllowedTypes', // allowed source account types.
'destinationAllowedTypes',
'allowedOpposingTypes'
],
// watch: {
// allowedOpposingTypes: function() {
// console.log('SplitForm noticed change in allowedOpposingTypes');
// }
// },
methods: {
removeTransaction: function () {
// console.log('Will remove transaction ' + this.index);
@@ -334,7 +349,6 @@ export default {
},
},
computed: {
...mapGetters(['transactionType', 'date', 'time']),
splitDate: function () {
return this.date;
},

2
frontend/src/components/transactions/SplitPills.vue
View File

@@ -19,7 +19,7 @@
-->
<template>
<div class="row" v-if="transactions.length > 1">
<div v-if="transactions.length > 1" class="row">
<div class="col">
<!-- tabs -->
<ul class="nav nav-pills ml-auto p-2">

20
frontend/src/components/transactions/SwitchAccount.vue
View File

@@ -21,10 +21,10 @@
<template>
<div class="form-group">
<div class="text-xs d-none d-lg-block d-xl-block">
<span class="text-muted" v-if="'any' !== this.transactionType">
<span v-if="'any' !== this.transactionType" class="text-muted">
{{ $t('firefly.' + this.transactionType) }}
</span>
<span class="text-muted" v-if="'any' === this.transactionType">&nbsp;</span>
<span v-if="'any' === this.transactionType" class="text-muted">&nbsp;</span>
</div>
<div class="btn-group d-flex">
<button class="btn btn-light" @click="switchAccounts">&harr;</button>
@@ -33,27 +33,13 @@
</template>
<script>
import {createNamespacedHelpers} from "vuex";
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
export default {
name: "SwitchAccount",
props: ['index'],
props: ['index', 'transactionType'],
methods: {
...mapMutations(
[
'updateField',
],
),
switchAccounts() {
this.$emit('switch-accounts', this.index);
}
},
computed: {
...mapGetters(['transactionType']),
}
}
</script>

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

@@ -20,39 +20,39 @@
<template>
<div class="form-group">
<div class="text-xs d-none d-lg-block d-xl-block" v-if="visible">
<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 class="text-warning" v-if="this.index > 0">{{ $t('firefly.first_split_overrules_' + this.direction) }}</span>
<span v-if="this.index > 0" class="text-warning">{{ $t('firefly.first_split_overrules_' + this.direction) }}</span>
</div>
<div class="text-xs d-none d-lg-block d-xl-block" v-if="!visible">
<div v-if="!visible" class="text-xs d-none d-lg-block d-xl-block">
&nbsp;
</div>
<vue-typeahead-bootstrap
v-if="visible"
v-model="accountName"
:data="accounts"
:showOnFocus=true
:inputClass="errors.length > 0 ? 'is-invalid' : ''"
:inputName="direction + '[]'"
:serializer="item => item.name_with_balance"
:minMatchingChars="3"
:placeholder="$t('firefly.' + direction + '_account')"
@input="lookupAccount"
:serializer="item => item.name_with_balance"
:showOnFocus=true
@hit="selectedAccount = $event"
@input="lookupAccount"
>
<template slot="suggestion" slot-scope="{ data, htmlText }">
<div class="d-flex" :title="data.type">
<div :title="data.type" class="d-flex">
<span v-html="htmlText"></span><br>
</div>
</template>
<template slot="append">
<div class="input-group-append">
<button tabindex="-1" class="btn btn-outline-secondary" v-on:click="clearAccount" type="button"><i class="far fa-trash-alt"></i></button>
<button class="btn btn-outline-secondary" tabindex="-1" type="button" v-on:click="clearAccount"><i class="far fa-trash-alt"></i></button>
</div>
</template>
</vue-typeahead-bootstrap>
<div class="form-control-static" v-if="!visible">
<div v-if="!visible" class="form-control-static">
<span class="small text-muted"><em>{{ $t('firefly.first_split_decides') }}</em></span>
</div>
<span v-if="errors.length > 0">
@@ -65,14 +65,19 @@
import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap';
import {debounce} from 'lodash';
import {createNamespacedHelpers} from "vuex";
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('transactions/create')
export default {
name: "TransactionAccount",
components: {VueTypeaheadBootstrap},
props: ['index', 'direction', 'value', 'errors'],
props: [
'index',
'direction',
'value',
'errors',
'sourceAllowedTypes',
'destinationAllowedTypes',
'allowedOpposingTypes'
],
data() {
return {
query: '',
@@ -89,13 +94,6 @@ export default {
this.createInitialSet();
},
methods: {
...mapMutations(
[
'updateField',
'setDestinationAllowedTypes',
'setSourceAllowedTypes'
],
),
getACURL: function (types, query) {
return './api/v1/autocomplete/accounts?types=' + types.join(',') + '&query=' + query;
},
@@ -110,6 +108,8 @@ export default {
// set the types from the default types for this direction:
this.accountTypes = 'source' === this.direction ? this.sourceAllowedTypes : this.destinationAllowedTypes;
}
// console.log(this.direction + ': Will search for types:');
// console.log(this.accountTypes);
// update autocomplete URL:
axios.get(this.getACURL(this.accountTypes, this.accountName))
@@ -125,6 +125,8 @@ export default {
if ('destination' === this.direction) {
types = this.destinationAllowedTypes;
}
// console.log(this.direction + ' initial set searches for');
// console.log(types);
axios.get(this.getACURL(types, ''))
.then(response => {
@@ -134,8 +136,20 @@ export default {
}
},
watch: {
// allowedOpposingTypes: function () {
// console.log(this.direction + ' account noticed change in allowedOpposingTypes');
// },
sourceAllowedTypes: function (value) {
// console.log(this.direction + ' account noticed change in sourceAllowedTypes');
// console.log(value);
this.createInitialSet();
},
destinationAllowedTypes: function (value) {
// console.log(this.direction + ' account noticed change in destinationAllowedTypes');
// console.log(value);
this.createInitialSet();
},
selectedAccount: function (value) {
// console.log('Emit on selected account');
this.selectedAccountTrigger = true;
this.account = value;
@@ -183,10 +197,10 @@ export default {
}
if ('source' === this.direction) {
this.setDestinationAllowedTypes(opposingAccounts);
this.$emit('set-dest-types', opposingAccounts);
}
if ('destination' === this.direction) {
this.setSourceAllowedTypes(opposingAccounts);
this.$emit('set-src-types', opposingAccounts);
}
},
value: function (value) {
@@ -199,53 +213,15 @@ export default {
}
},
computed: {
...mapGetters([
'transactionType',
'sourceAllowedTypes',
'destinationAllowedTypes',
'allowedOpposingTypes'
]),
// 'transactionType',
// 'sourceAllowedTypes',
// 'destinationAllowedTypes',
// 'allowedOpposingTypes'
accountKey: {
get() {
return 'source' === this.direction ? 'source_account' : 'destination_account';
}
},
emitAccountId: {
get() {
return 'set-' + this.direction + '-account-id';
}
},
emitAccount: {
get() {
return 'set-' + this.direction + '-account';
}
},
emitAccountName: {
get() {
return 'set-' + this.direction + '-account-name';
}
},
emitAccountType: {
get() {
return 'set-' + this.direction + '-account-type';
}
},
emitAccountCurrencyId: {
get() {
return 'set-' + this.direction + '-account-currency-id';
}
},
emitAccountCurrencyCode: {
get() {
return 'set-' + this.direction + '-account-currency-code';
}
},
emitAccountCurrencySymbol: {
get() {
return 'set-' + this.direction + '-account-currency-symbol';
}
},
visible: {
get() {
// index 0 is always visible:

8
frontend/src/components/transactions/TransactionAmount.vue
View File

@@ -22,17 +22,17 @@
<div class="form-group">
<div class="text-xs">{{ $t('firefly.amount') }}</div>
<div class="input-group">
<div class="input-group-prepend" v-if="currencySymbol">
<div v-if="currencySymbol" class="input-group-prepend">
<div class="input-group-text">{{ currencySymbol }}</div>
</div>
<input
v-model="transactionAmount"
:class="errors.length > 0 ? 'form-control is-invalid' : 'form-control'"
:placeholder="$t('firefly.amount')"
:title="$t('firefly.amount')"
autocomplete="off"
:class="errors.length > 0 ? 'form-control is-invalid' : 'form-control'"
name="amount[]"
type="number"
v-model="transactionAmount"
:placeholder="$t('firefly.amount')"
>
</div>
<span v-if="errors.length > 0">

8
frontend/src/components/transactions/TransactionAttachments.vue
View File

@@ -19,17 +19,17 @@
-->
<template>
<div class="form-group" v-if="showField">
<div v-if="showField" class="form-group">
<div class="text-xs d-none d-lg-block d-xl-block">
{{ $t('firefly.attachments') }}
</div>
<div class="input-group">
<input
type="file"
multiple
ref="att"
name="attachments[]"
class="form-control"
multiple
name="attachments[]"
type="file"
/>
</div>
</div>

6
frontend/src/components/transactions/TransactionBill.vue
View File

@@ -26,14 +26,14 @@
<div class="input-group">
<select
ref="bill"
:title="$t('firefly.bill')"
v-model="bill"
autocomplete="off"
:class="errors.length > 0 ? 'form-control is-invalid' : 'form-control'"
:title="$t('firefly.bill')"
autocomplete="off"
name="bill_id[]"
v-on:submit.prevent
>
<option v-for="bill in this.billList" :value="bill.id" :label="bill.name">{{ bill.name }}</option>
<option v-for="bill in this.billList" :label="bill.name" :value="bill.id">{{ bill.name }}</option>
</select>
</div>

6
frontend/src/components/transactions/TransactionBudget.vue
View File

@@ -26,14 +26,14 @@
<div class="input-group">
<select
ref="budget"
:title="$t('firefly.budget')"
v-model="budget"
autocomplete="off"
:class="errors.length > 0 ? 'form-control is-invalid' : 'form-control'"
:title="$t('firefly.budget')"
autocomplete="off"
name="budget_id[]"
v-on:submit.prevent
>
<option v-for="budget in this.budgetList" :value="budget.id" :label="budget.name">{{ budget.name }}</option>
<option v-for="budget in this.budgetList" :label="budget.name" :value="budget.id">{{ budget.name }}</option>
</select>
</div>
<span v-if="errors.length > 0">

8
frontend/src/components/transactions/TransactionCategory.vue
View File

@@ -25,20 +25,20 @@
</div>
<vue-typeahead-bootstrap
inputName="category[]"
v-model="category"
:data="categories"
:placeholder="$t('firefly.category')"
:showOnFocus=true
:inputClass="errors.length > 0 ? 'is-invalid' : ''"
:minMatchingChars="3"
:placeholder="$t('firefly.category')"
:serializer="item => item.name"
:showOnFocus=true
inputName="category[]"
@hit="selectedCategory = $event"
@input="lookupCategory"
>
<template slot="append">
<div class="input-group-append">
<button tabindex="-1" v-on:click="clearCategory" class="btn btn-outline-secondary" type="button"><i class="far fa-trash-alt"></i></button>
<button class="btn btn-outline-secondary" tabindex="-1" type="button" v-on:click="clearCategory"><i class="far fa-trash-alt"></i></button>
</div>
</template>
</vue-typeahead-bootstrap>

30
frontend/src/components/transactions/TransactionCustomDates.vue
View File

@@ -20,21 +20,21 @@
<template>
<div>
<div class="form-group" v-for="(enabled, name) in availableFields">
<div class="text-xs d-none d-lg-block d-xl-block" v-if="enabled && isDateField(name)">
<div v-for="(enabled, name) in availableFields" class="form-group">
<div v-if="enabled && isDateField(name)" class="text-xs d-none d-lg-block d-xl-block">
{{ $t('form.' + name) }}
</div>
<div class="input-group" v-if="enabled && isDateField(name)">
<div v-if="enabled && isDateField(name)" class="input-group">
<input
class="form-control"
type="date"
:ref="name"
:title="$t('form.' + name)"
:value="getFieldValue(name)"
@change="setFieldValue($event, name)"
autocomplete="off"
:name="name + '[]'"
:placeholder="$t('form.' + name)"
:title="$t('form.' + name)"
:value="getFieldValue(name)"
autocomplete="off"
class="form-control"
type="date"
@change="setFieldValue($event, name)"
v-on:submit.prevent
>
</div>
@@ -75,22 +75,22 @@ export default {
customFields: function (value) {
this.availableFields = value;
},
interestDate: function(value) {
interestDate: function (value) {
this.dates.interest_date = value;
},
bookDate: function(value) {
bookDate: function (value) {
this.dates.book_date = value;
},
processDate: function(value) {
processDate: function (value) {
this.dates.process_date = value;
},
dueDate: function(value) {
dueDate: function (value) {
this.dates.due_date = value;
},
paymentDate: function(value) {
paymentDate: function (value) {
this.dates.payment_date = value;
},
invoiceDate: function(value) {
invoiceDate: function (value) {
this.dates.invoice_date = value;
},
},

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

@@ -25,26 +25,26 @@
</div>
<div class="input-group">
<input
:class="errors.length > 0 ? 'form-control is-invalid' : 'form-control'"
type="date"
ref="date"
:title="$t('firefly.date')"
v-model="dateStr"
:class="errors.length > 0 ? 'form-control is-invalid' : 'form-control'"
:disabled="index > 0"
:placeholder="dateStr"
:title="$t('firefly.date')"
autocomplete="off"
name="date[]"
:placeholder="dateStr"
type="date"
>
<input
:class="errors.length > 0 ? 'form-control is-invalid' : 'form-control'"
type="time"
ref="time"
:title="$t('firefly.time')"
v-model="timeStr"
:class="errors.length > 0 ? 'form-control is-invalid' : 'form-control'"
:disabled="index > 0"
:placeholder="timeStr"
:title="$t('firefly.time')"
autocomplete="off"
name="time[]"
:placeholder="timeStr"
type="time"
>
</div>
<span v-if="errors.length > 0">

10
frontend/src/components/transactions/TransactionDescription.vue
View File

@@ -21,20 +21,20 @@
<template>
<div class="form-group">
<vue-typeahead-bootstrap
inputName="description[]"
v-model="description"
:data="descriptions"
:placeholder="$t('firefly.description')"
:showOnFocus=true
autofocus
:inputClass="errors.length > 0 ? 'is-invalid' : ''"
:minMatchingChars="3"
:placeholder="$t('firefly.description')"
:serializer="item => item.description"
:showOnFocus=true
autofocus
inputName="description[]"
@input="lookupDescription"
>
<template slot="append">
<div class="input-group-append">
<button tabindex="-1" v-on:click="clearDescription" class="btn btn-outline-secondary" type="button"><i class="far fa-trash-alt"></i></button>
<button class="btn btn-outline-secondary" tabindex="-1" type="button" v-on:click="clearDescription"><i class="far fa-trash-alt"></i></button>
</div>
</template>
</vue-typeahead-bootstrap>

10
frontend/src/components/transactions/TransactionExternalUrl.vue
View File

@@ -19,20 +19,20 @@
-->
<template>
<div class="form-group" v-if="showField">
<div v-if="showField" 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="url"
:class="errors.length > 0 ? 'form-control is-invalid' : 'form-control'"
:placeholder="$t('firefly.external_url')"
name="external_url[]"
type="url"
/>
<div class="input-group-append">
<button tabindex="-1" type="button" class="btn btn-outline-secondary"><i class="far fa-trash-alt"></i></button>
<button class="btn btn-outline-secondary" tabindex="-1" type="button"><i class="far fa-trash-alt"></i></button>
</div>
</div>
</div>

8
frontend/src/components/transactions/TransactionForeignAmount.vue
View File

@@ -20,17 +20,17 @@
<template>
<!-- FOREIGN AMOUNT -->
<div class="form-group" v-if="isVisible">
<div v-if="isVisible" class="form-group">
<div class="text-xs">{{ $t('form.foreign_amount') }}</div>
<div class="input-group">
<input
v-model="amount"
:class="errors.length > 0 ? 'form-control is-invalid' : 'form-control'"
:placeholder="$t('form.foreign_amount')"
:title="$t('form.foreign_amount')"
autocomplete="off"
:class="errors.length > 0 ? 'form-control is-invalid' : 'form-control'"
name="foreign_amount[]"
type="number"
v-model="amount"
:placeholder="$t('form.foreign_amount')"
>
</div>
<span v-if="errors.length > 0">

4
frontend/src/components/transactions/TransactionForeignCurrency.vue
View File

@@ -20,10 +20,10 @@
<template>
<!-- FOREIGN Currency -->
<div class="form-group" v-if="isVisible">
<div v-if="isVisible" class="form-group">
<div class="text-xs">&nbsp;</div>
<div class="input-group">
<select name="foreign_currency_id[]" v-model="selectedCurrency" class="form-control">
<select v-model="selectedCurrency" class="form-control" name="foreign_currency_id[]">
<option v-for="currency in selectableCurrencies" :label="currency.name" :value="currency.id">{{ currency.name }}</option>
</select>
</div>

14
frontend/src/components/transactions/TransactionGroupTitle.vue
View File

@@ -24,19 +24,19 @@
{{ $t('firefly.split_transaction_title') }}
</div>
<vue-typeahead-bootstrap
inputName="group_title"
v-model="title"
:data="descriptions"
:placeholder="$t('firefly.split_transaction_title')"
:showOnFocus=true
:minMatchingChars="3"
:serializer="item => item.description"
@input="lookupDescription"
:inputClass="errors.length > 0 ? 'is-invalid' : ''"
:minMatchingChars="3"
:placeholder="$t('firefly.split_transaction_title')"
:serializer="item => item.description"
:showOnFocus=true
inputName="group_title"
@input="lookupDescription"
>
<template slot="append">
<div class="input-group-append">
<button tabindex="-1" v-on:click="clearDescription" class="btn btn-outline-secondary" type="button"><i class="far fa-trash-alt"></i></button>
<button class="btn btn-outline-secondary" tabindex="-1" type="button" v-on:click="clearDescription"><i class="far fa-trash-alt"></i></button>
</div>
</template>
</vue-typeahead-bootstrap>

13
frontend/src/components/transactions/TransactionInternalReference.vue
View File

@@ -19,20 +19,20 @@
-->
<template>
<div class="form-group" v-if="showField">
<div v-if="showField" 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="reference"
:placeholder="$t('firefly.internal_reference')"
:class="errors.length > 0 ? 'form-control is-invalid' : 'form-control'"
:placeholder="$t('firefly.internal_reference')"
name="internal_reference[]"
type="text"
/>
<div class="input-group-append">
<button tabindex="-1" type="button" class="btn btn-outline-secondary"><i class="far fa-trash-alt"></i></button>
<button class="btn btn-outline-secondary" tabindex="-1" type="button"><i class="far fa-trash-alt"></i></button>
</div>
</div>
</div>
@@ -57,8 +57,7 @@ export default {
return false;
}
},
methods: {
},
methods: {},
watch: {
customFields: function (value) {
this.availableFields = value;

40
frontend/src/components/transactions/TransactionLinks.vue
View File

@@ -27,10 +27,10 @@
<div class="row">
<div class="col">
<p v-if="links.length === 0">
<button data-toggle="modal" data-target="#linkModal" class="btn btn-default btn-xs"><i class="fas fa-plus"></i> Add transaction link</button>
<button class="btn btn-default btn-xs" data-target="#linkModal" data-toggle="modal"><i class="fas fa-plus"></i> Add transaction link</button>
</p>
<ul class="list-group" v-if="links.length > 0">
<li class="list-group-item" v-for="transaction in links">
<ul v-if="links.length > 0" class="list-group">
<li v-for="transaction in links" class="list-group-item">
<em>{{ getTextForLinkType(transaction.link_type_id) }}</em>
<a :href='"./transaction/show/" + transaction.transaction_group_id'>{{ transaction.description }}</a>
@@ -59,24 +59,24 @@
}}</span>)
</span>
<div class="btn-group btn-group-xs float-right">
<a tabindex="-1" href="#" class="btn btn-xs btn-default"><i class="far fa-edit"></i></a>
<a tabindex="-1" href="#" class="btn btn-xs btn-danger"><i class="far fa-trash-alt"></i></a>
<a class="btn btn-xs btn-default" href="#" tabindex="-1"><i class="far fa-edit"></i></a>
<a class="btn btn-xs btn-danger" href="#" tabindex="-1"><i class="far fa-trash-alt"></i></a>
</div>
</li>
</ul>
<div class="form-text" v-if="links.length > 0">
<button data-toggle="modal" data-target="#linkModal" class="btn btn-default"><i class="fas fa-plus"></i></button>
<div v-if="links.length > 0" class="form-text">
<button class="btn btn-default" data-target="#linkModal" data-toggle="modal"><i class="fas fa-plus"></i></button>
</div>
</div>
</div>
</div>
<!-- modal -->
<div class="modal" tabindex="-1" id="linkModal">
<div id="linkModal" class="modal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Transaction thing dialog.</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button aria-label="Close" class="close" data-dismiss="modal" type="button">
<span aria-hidden="true">&times;</span>
</button>
</div>
@@ -94,10 +94,10 @@
<div class="col">
<form v-on:submit.prevent="search">
<div class="input-group">
<input autocomplete="off" maxlength="255" type="text" name="search" v-model="query" id="query"
class="form-control" placeholder="Search query">
<input id="query" v-model="query" autocomplete="off" class="form-control" maxlength="255" name="search"
placeholder="Search query" type="text">
<div class="input-group-append">
<button type="submit" class="btn btn-default"><i class="fas fa-search"></i> Search</button>
<button class="btn btn-default" type="submit"><i class="fas fa-search"></i> Search</button>
</div>
</div>
</form>
@@ -107,28 +107,28 @@
<div class="col">
<span v-if="searching"><i class="fas fa-spinner fa-spin"></i></span>
<h4 v-if="searchResults.length > 0">Search results</h4>
<table class="table table-sm" v-if="searchResults.length > 0">
<table v-if="searchResults.length > 0" class="table table-sm">
<thead>
<tr>
<th style="width:33%" colspan="2">Include?</th>
<th colspan="2" style="width:33%">Include?</th>
<th>Transaction</th>
</tr>
</thead>
<tbody>
<tr v-for="result in searchResults">
<td>
<input type="checkbox" class="form-control"
<input v-model="result.selected" class="form-control"
type="checkbox"
@change="selectTransaction($event)"
v-model="result.selected"
/>
</td>
<td>
<select
@change="selectLinkType($event)"
class="form-control"
v-model="result.link_type_id"
class="form-control"
@change="selectLinkType($event)"
>
<option v-for="linkType in linkTypes" :value="linkType.id + '-' + linkType.direction" :label="linkType.type">{{
<option v-for="linkType in linkTypes" :label="linkType.type" :value="linkType.id + '-' + linkType.direction">{{
linkType.type
}}
</option>
@@ -175,7 +175,7 @@
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>

16
frontend/src/components/transactions/TransactionListLarge.vue
View File

@@ -23,9 +23,9 @@
<caption style="display:none;">{{ $t('firefly.transaction_table_description') }}</caption>
<thead>
<tr>
<th scope="col" class="text-left">{{ $t('firefly.description') }}</th>
<th class="text-left" scope="col">{{ $t('firefly.description') }}</th>
<th scope="col">{{ $t('firefly.opposing_account') }}</th>
<th scope="col" class="text-right">{{ $t('firefly.amount') }}</th>
<th class="text-right" scope="col">{{ $t('firefly.amount') }}</th>
<th scope="col">{{ $t('firefly.category') }}</th>
<th scope="col">{{ $t('firefly.budget') }}</th>
</tr>
@@ -40,10 +40,10 @@
</td>
<td>
<span v-for="tr in transaction.attributes.transactions">
<a :href="'accounts/show/' + tr.destination_id" v-if="'withdrawal' === tr.type">{{ tr.destination_name }}</a>
<a :href="'accounts/show/' + tr.source_id" v-if="'deposit' === tr.type">{{ tr.source_name }}</a>
<a :href="'accounts/show/' + tr.destination_id" v-if="'transfer' === tr.type && tr.source_id === account_id">{{ tr.destination_name }}</a>
<a :href="'accounts/show/' + tr.source_id" v-if="'transfer' === tr.type && tr.destination_id === account_id">{{ tr.source_name }}</a>
<a v-if="'withdrawal' === tr.type" :href="'accounts/show/' + tr.destination_id">{{ tr.destination_name }}</a>
<a v-if="'deposit' === tr.type" :href="'accounts/show/' + tr.source_id">{{ tr.source_name }}</a>
<a v-if="'transfer' === tr.type && tr.source_id === account_id" :href="'accounts/show/' + tr.destination_id">{{ tr.destination_name }}</a>
<a v-if="'transfer' === tr.type && tr.destination_id === account_id" :href="'accounts/show/' + tr.source_id">{{ tr.source_name }}</a>
<br/>
</span>
</td>
@@ -65,12 +65,12 @@
</td>
<td>
<span v-for="tr in transaction.attributes.transactions">
<a :href="'categories/show/' + tr.category_id" v-if="0!==tr.category_id">{{ tr.category_name }}</a><br/>
<a v-if="0!==tr.category_id" :href="'categories/show/' + tr.category_id">{{ tr.category_name }}</a><br/>
</span>
</td>
<td>
<span v-for="tr in transaction.attributes.transactions">
<a :href="'budgets/show/' + tr.budget_id" v-if="0!==tr.budget_id">{{ tr.budget_name }}</a><br/>
<a v-if="0!==tr.budget_id" :href="'budgets/show/' + tr.budget_id">{{ tr.budget_name }}</a><br/>
</span>
</td>
</tr>

12
frontend/src/components/transactions/TransactionListMedium.vue
View File

@@ -23,9 +23,9 @@
<caption style="display:none;">{{ $t('firefly.transaction_table_description') }}</caption>
<thead>
<tr>
<th scope="col" class="text-left">{{ $t('firefly.description') }}</th>
<th class="text-left" scope="col">{{ $t('firefly.description') }}</th>
<th scope="col">{{ $t('firefly.opposing_account') }}</th>
<th scope="col" class="text-right">{{ $t('firefly.amount') }}</th>
<th class="text-right" scope="col">{{ $t('firefly.amount') }}</th>
</tr>
</thead>
<tbody>
@@ -38,10 +38,10 @@
</td>
<td>
<span v-for="tr in transaction.attributes.transactions">
<a :href="'accounts/show/' + tr.destination_id" v-if="'withdrawal' === tr.type">{{ tr.destination_name }}</a>
<a :href="'accounts/show/' + tr.source_id" v-if="'deposit' === tr.type">{{ tr.source_name }}</a>
<a :href="'accounts/show/' + tr.destination_id" v-if="'transfer' === tr.type && tr.source_id === account_id">{{ tr.destination_name }}</a>
<a :href="'accounts/show/' + tr.source_id" v-if="'transfer' === tr.type && tr.destination_id === account_id">{{ tr.source_name }}</a>
<a v-if="'withdrawal' === tr.type" :href="'accounts/show/' + tr.destination_id">{{ tr.destination_name }}</a>
<a v-if="'deposit' === tr.type" :href="'accounts/show/' + tr.source_id">{{ tr.source_name }}</a>
<a v-if="'transfer' === tr.type && tr.source_id === account_id" :href="'accounts/show/' + tr.destination_id">{{ tr.destination_name }}</a>
<a v-if="'transfer' === tr.type && tr.destination_id === account_id" :href="'accounts/show/' + tr.source_id">{{ tr.source_name }}</a>
<br/>
</span>
</td>

10
frontend/src/components/transactions/TransactionListSmall.vue
View File

@@ -23,14 +23,15 @@
<caption style="display:none;">{{ $t('firefly.transaction_table_description') }}</caption>
<thead>
<tr>
<th scope="col" class="text-left">{{ $t('firefly.description') }}</th>
<th scope="col" class="text-right">{{ $t('firefly.amount') }}</th>
<th class="text-left" scope="col">{{ $t('firefly.description') }}</th>
<th class="text-right" scope="col">{{ $t('firefly.amount') }}</th>
</tr>
</thead>
<tbody>
<tr v-for="transaction in this.transactions">
<td>
<a :href="'transactions/show/' + transaction.id " :title="new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }).format(new Date(transaction.attributes.transactions[0].date))">
<a :href="'transactions/show/' + transaction.id "
:title="new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }).format(new Date(transaction.attributes.transactions[0].date))">
<span v-if="transaction.attributes.transactions.length > 1">{{ transaction.attributes.group_title }}</span>
<span v-if="1===transaction.attributes.transactions.length">{{ transaction.attributes.transactions[0].description }}</span>
</a>
@@ -67,8 +68,7 @@ export default {
created() {
this.locale = localStorage.locale ?? 'en-US';
},
methods: {
},
methods: {},
props: {
transactions: {
type: Array,

8
frontend/src/components/transactions/TransactionLocation.vue
View File

@@ -19,16 +19,16 @@
-->
<template>
<div class="form-group" v-if="showField">
<div v-if="showField" class="form-group">
<div class="text-xs d-none d-lg-block d-xl-block">
{{ $t('firefly.location') }}
</div>
<div style="width:100%;height:300px;">
<l-map
style="width:100%;height:300px;"
:zoom="zoom"
ref="myMap" @ready="prepMap()"
ref="myMap"
:center="center"
:zoom="zoom" style="width:100%;height:300px;"
@ready="prepMap()"
@update:zoom="zoomUpdated"
@update:center="centerUpdated"
@update:bounds="boundsUpdated"

2
frontend/src/components/transactions/TransactionNotes.vue
View File

@@ -20,7 +20,7 @@
<template>
<div class="form-group" v-if="showField">
<div v-if="showField" class="form-group">
<div class="text-xs d-none d-lg-block d-xl-block">
{{ $t('firefly.notes') }}
</div>

6
frontend/src/components/transactions/TransactionPiggyBank.vue
View File

@@ -26,14 +26,14 @@
<div class="input-group">
<select
ref="piggy_bank_id"
:title="$t('firefly.piggy_bank')"
v-model="piggy_bank_id"
autocomplete="off"
:class="errors.length > 0 ? 'form-control is-invalid' : 'form-control'"
:title="$t('firefly.piggy_bank')"
autocomplete="off"
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>
<option v-for="piggy in this.piggyList" :label="piggy.name_with_balance" :value="piggy.id">{{ piggy.name_with_balance }}</option>
</select>
</div>