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

Rebuild FP

Browse Source
This commit is contained in:
James Cole
2020-12-22 19:29:44 +01:00
parent 1a8fd25ec3
commit 6be1f5819f
21 changed files with 306 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,18 +48,14 @@
</div>
</div>
<!--
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<main-piggy-list/>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<main-bills-list/>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<main-piggy-list/>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<main-bills-list/>
</div>
</div>
-->
</div>
</template>

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

@@ -19,71 +19,78 @@
-->
<template>
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ $t('firefly.bills') }}</h3>
</div>
<div class="card-body table-responsive p-0">
<table class="table table-striped">
<caption style="display:none;">{{ $t('firefly.bills') }}</caption>
<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>~{{ Intl.NumberFormat('en-US', {style: 'currency', currency: bill.attributes.currency_code}).format((bill.attributes.amount_min +
bill.attributes.amount_max) / 2) }}
</td>
<td>
<span v-for="payDate in bill.attributes.pay_dates">
{{ payDate }}<br />
</span>
</td>
</tr>
</tbody>
</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>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ $t('firefly.bills') }}</h3>
</div>
<div class="card-body table-responsive p-0">
<table class="table table-striped">
<caption style="display:none;">{{ $t('firefly.bills') }}</caption>
<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>~{{
Intl.NumberFormat(locale, {style: 'currency', currency: bill.attributes.currency_code}).format((parseFloat(bill.attributes.amount_min) +
parseFloat(bill.attributes.amount_max)) / 2)
}}
</td>
<td>
<span v-for="payDate in bill.attributes.pay_dates">
{{ new Intl.DateTimeFormat(locale, {year: 'numeric', month: 'long', day: 'numeric'}).format(new Date(payDate)) }}
<br />
</span>
</td>
</tr>
</tbody>
</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>
</div>
</div>
</template>
<script>
export default {
name: "MainBillsList",
created() {
axios.get('./api/v1/bills?start=' + window.sessionStart + '&end=' + window.sessionEnd)
.then(response => {
this.loadBills(response.data.data);
}
);
},
components: {},
methods: {
loadBills(data) {
for (let key in data) {
if (data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
let bill = data[key];
let active = bill.attributes.active;
if (bill.attributes.pay_dates.length > 0 && active) {
this.bills.push(bill);
}
}
}
}
},
data() {
return {
bills: []
}
},
computed: {},
export default {
name: "MainBillsList",
computed: {
locale() {
return this.$store.getters.locale;
}
},
created() {
axios.get('./api/v1/bills?start=' + window.sessionStart + '&end=' + window.sessionEnd)
.then(response => {
this.loadBills(response.data.data);
}
);
},
components: {},
methods: {
loadBills(data) {
for (let key in data) {
if (data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
let bill = data[key];
let active = bill.attributes.active;
if (bill.attributes.pay_dates.length > 0 && active) {
this.bills.push(bill);
}
}
}
}
},
data() {
return {
bills: []
}
},
}
</script>

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

@@ -19,82 +19,94 @@
-->
<template>
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ $t('firefly.piggy_banks') }}</h3>
</div>
<div class="card-body table-responsive p-0">
<table class="table table-striped">
<caption style="display:none;">{{ $t('firefly.piggy_banks') }}</caption>
<thead>
<tr>
<th scope="col" style="width:35%;">{{ $t('list.piggy_bank') }}</th>
<th scope="col" style="width:40%;">{{ $t('list.percentage') }}</th>
<th scope="col" style="width:25%;text-align: right;">{{ $t('list.amount') }}</th>
</tr>
</thead>
<tbody>
<tr v-for="piggy in this.piggy_banks">
<td>{{ piggy.attributes.name }}
<br /><small class="text-muted">{{ piggy.attributes.object_group_title }}</small>
</td>
<td>
<div class="progress-group">
<div class="progress progress-sm">
<div class="progress-bar primary" v-if="piggy.attributes.pct < 100" :style="{'width': piggy.attributes.pct + '%'}"></div>
<div class="progress-bar bg-success" v-if="100 === piggy.attributes.pct" :style="{'width': piggy.attributes.pct + '%'}"></div>
</div>
</div>
</td>
<td style="text-align: right;">
<span class="text-success">
{{ Intl.NumberFormat('en-US', {style: 'currency', currency: piggy.attributes.currency_code}).format(piggy.attributes.current_amount) }}
</span>
of
<span class="text-success">{{ Intl.NumberFormat('en-US', {style: 'currency', currency: piggy.attributes.currency_code}).format(piggy.attributes.target_amount) }}</span>
</td>
</tr>
</tbody>
</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>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ $t('firefly.piggy_banks') }}</h3>
</div>
<div class="card-body table-responsive p-0">
<table class="table table-striped">
<caption style="display:none;">{{ $t('firefly.piggy_banks') }}</caption>
<thead>
<tr>
<th scope="col" style="width:35%;">{{ $t('list.piggy_bank') }}</th>
<th scope="col" style="width:40%;">{{ $t('list.percentage') }} <small>/ {{ $t('list.amount') }}</small></th>
</tr>
</thead>
<tbody>
<tr v-for="piggy in this.piggy_banks">
<td>{{ piggy.attributes.name }}
<small v-if="piggy.attributes.object_group_title" class="text-muted">
<br/>
{{ piggy.attributes.object_group_title }}
</small>
</td>
<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>
</div>
<span class="text-success">
{{
Intl.NumberFormat(locale, {style: 'currency', currency: piggy.attributes.currency_code}).format(piggy.attributes.current_amount)
}}
</span>
of
<span class="text-success">{{
Intl.NumberFormat(locale, {
style: 'currency',
currency: piggy.attributes.currency_code
}).format(piggy.attributes.target_amount)
}}</span>
</td>
</tr>
</tbody>
</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>
</div>
</div>
</template>
<script>
export default {
name: "MainPiggyList",
created() {
axios.get('./api/v1/piggy_banks')
.then(response => {
this.loadPiggyBanks(response.data.data);
}
);
},
methods: {
loadPiggyBanks(data) {
for (let key in data) {
if (data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
let piggy = data[key];
if(0.0 !== parseFloat(piggy.attributes.left_to_save)) {
piggy.attributes.pct = (parseFloat(piggy.attributes.current_amount) / parseFloat(piggy.attributes.target_amount)) * 100;
this.piggy_banks.push(piggy);
}
}
}
this.piggy_banks.sort(function(a, b) {
return b.attributes.pct - a.attributes.pct;
});
}
},
data() {
return {
piggy_banks: []
}
}
export default {
name: "MainPiggyList",
created() {
axios.get('./api/v1/piggy_banks')
.then(response => {
this.loadPiggyBanks(response.data.data);
}
);
},
computed: {
locale() {
return this.$store.getters.locale;
}
},
methods: {
loadPiggyBanks(data) {
for (let key in data) {
if (data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
let piggy = data[key];
if (0.0 !== parseFloat(piggy.attributes.left_to_save)) {
piggy.attributes.pct = (parseFloat(piggy.attributes.current_amount) / parseFloat(piggy.attributes.target_amount)) * 100;
this.piggy_banks.push(piggy);
}
}
}
this.piggy_banks.sort(function (a, b) {
return b.attributes.pct - a.attributes.pct;
});
}
},
data() {
return {
piggy_banks: []
}
}
}
</script>
<style scoped>

35
frontend/src/components/store/index.js vendored
View File

@@ -19,25 +19,38 @@
*/
import Vue from 'vue'
import Vuex from 'vuex'
import Vuex, {createLogger} from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store(
{
modules: [],
strict: true,
plugins: [],
plugins: [createLogger()],
state: {
currencyPreference: {},
locale: 'en-US'
},
mutations: {
setCurrencyPreference(state, object) {
console.log('mutation: setCurrencyPreference');
state.currencyPreference = object;
},
initialiseStore(state) {
console.log('initialiseStore');
console.log('mutation: initialiseStore');
// if locale in local storage:
if (localStorage.locale) {
state.locale = localStorage.locale;
return;
}
// set locale from HTML:
let localeToken = document.head.querySelector('meta[name="locale"]');
if (localeToken) {
state.locale = localeToken.content;
localStorage.locale = localeToken.content;
}
}
},
getters: {
@@ -46,19 +59,31 @@ export default new Vuex.Store(
},
currencyId: state => {
return state.currencyPreference.id;
},
locale: state => {
return state.locale;
}
},
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 => {
context.commit('setCurrencyPreference', {
console.log('action: from axios');
let currencyResponse = {
id: parseInt(response.data.data.id),
name: response.data.data.attributes.name,
symbol: response.data.data.attributes.symbol,
code: response.data.data.attributes.code,
decimal_places: parseInt(response.data.data.attributes.decimal_places),
});
};
localStorage.currencyPreference = currencyResponse;
context.commit('setCurrencyPreference', currencyResponse);
}).catch(err => {
console.log('Got error response.');
console.error(err);