gh-mirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-12-18 17:21:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Frontend updates

Browse Source
This commit is contained in:
James Cole
2022-05-02 18:54:43 +02:00
parent 8c64c1d5e4
commit 0babe84a33
11 changed files with 834 additions and 452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/pages/Index.vue
View File

@@ -22,7 +22,7 @@
<q-page>
<div class="q-ma-md" v-if="0 === assetCount">
<NewUser
v-on:created-accounts="refreshThenCount"
v-on:created-accounts="refreshThenCount"
></NewUser>
</div>
<div class="q-ma-md" v-if="assetCount > 0">
@@ -114,7 +114,8 @@
<script>
import {defineAsyncComponent, defineComponent} from "vue";
import List from "../api/accounts/list";
import {mapGetters} from "vuex";
//import {mapGetters} from "vuex";
import {useFireflyIIIStore} from '../stores/fireflyiii'
export default defineComponent(
{
@@ -130,19 +131,21 @@ export default defineComponent(
}
},
computed: {
...mapGetters('fireflyiii', ['getCacheKey']),
//...mapGetters('fireflyiii', ['getCacheKey']),
},
mounted() {
this.countAssetAccounts();
},
methods: {
refreshThenCount: function() {
this.$store.dispatch('fireflyiii/refreshCacheKey');
refreshThenCount: function () {
const store = useFireflyIIIStore();
store.refreshCacheKey();
//this.$store.dispatch('fireflyiii/refreshCacheKey');
this.countAssetAccounts();
},
countAssetAccounts: function () {
let list = new List;
list.list('asset',1, this.getCacheKey).then((response) => {
list.list('asset', 1, this.getCacheKey).then((response) => {
this.assetCount = parseInt(response.data.meta.pagination.total);
});
}

48
frontend/src/pages/dashboard/Boxes.vue
View File

@@ -82,12 +82,13 @@
<script>
import Basic from "src/api/summary/basic";
import {mapGetters, useStore} from "vuex";
//import {mapGetters, useStore} from "vuex";
import {useFireflyIIIStore} from '../../stores/fireflyiii'
export default {
name: 'Boxes',
computed: {
...mapGetters('fireflyiii', ['getCurrencyCode', 'getCurrencyId', 'getRange','getCacheKey']),
//...mapGetters('fireflyiii', ['getCurrencyCode', 'getCurrencyId', 'getRange','getCacheKey']),
prefBillsUnpaid: function () {
return this.filterOnCurrency(this.billsUnpaid);
},
@@ -119,36 +120,43 @@ export default {
range: {
start: null,
end: null,
}
},
store: null
}
},
mounted() {
this.store = useFireflyIIIStore();
if (null === this.range.start || null === this.range.end) {
// subscribe, then update:
const $store = useStore();
$store.subscribe((mutation) => {
if ('fireflyiii/setRange' === mutation.type) {
this.range = mutation.payload;
this.triggerUpdate();
this.store.$onAction(
({name, $store, args, after, onError,}) => {
after((result) => {
if (name === 'setRange') {
this.range = result;
this.triggerUpdate();
}
})
}
});
)
}
if (null !== this.getRange.start && null !== this.getRange.end) {
this.start = this.getRange.start;
this.end = this.getRange.end;
if (null !== this.store.getRange.start && null !== this.store.getRange.end) {
this.start = this.store.getRange.start;
this.end = this.store.getRange.end;
this.triggerUpdate();
}
},
methods: {
triggerForcedUpgrade: function() {
this.$store.dispatch('fireflyiii/refreshCacheKey');
triggerForcedUpgrade: function () {
this.store.refreshCacheKey();
this.triggerUpdate();
},
triggerUpdate: function () {
if (null !== this.getRange.start && null !== this.getRange.end) {
if (null !== this.store.getRange.start && null !== this.store.getRange.end) {
const basic = new Basic;
basic.list({start: this.getRange.start, end: this.getRange.end}, this.getCacheKey).then(data => {
basic.list({start: this.store.getRange.start, end: this.store.getRange.end}, this.store.getCacheKey).then(data => {
this.netWorth = this.getKeyedEntries(data.data, 'net-worth-in-');
this.leftToSpend = this.getKeyedEntries(data.data, 'left-to-spend-in-');
this.billsPaid = this.getKeyedEntries(data.data, 'bills-paid-in-');
@@ -171,7 +179,7 @@ export default {
let ret = [];
for (const key in array) {
if (array.hasOwnProperty(key)) {
if (array[key].currency_id === this.getCurrencyId) {
if (array[key].currency_id === this.store.getCurrencyId) {
ret.push(array[key]);
}
}
@@ -186,7 +194,7 @@ export default {
let ret = [];
for (const key in array) {
if (array.hasOwnProperty(key)) {
if (array[key].currency_id !== this.getCurrencyId) {
if (array[key].currency_id !== this.store.getCurrencyId) {
ret.push(array[key]);
}
}
@@ -196,7 +204,3 @@ export default {
}
}
</script>
<style scoped>
</style>

31
frontend/src/pages/dashboard/HomeChart.vue
View File

@@ -28,14 +28,15 @@
import {defineAsyncComponent} from "vue";
import Overview from '../../api/chart/account/overview';
import {mapGetters, useStore} from "vuex";
//import {mapGetters, useStore} from "vuex";
import format from "date-fns/format";
import {useQuasar} from "quasar";
import {useFireflyIIIStore} from "../../stores/fireflyiii";
export default {
name: "HomeChart",
computed: {
...mapGetters('fireflyiii', ['getRange', 'getCacheKey']),
//...mapGetters('fireflyiii', ['getRange', 'getCacheKey']),
},
data() {
return {
@@ -79,6 +80,7 @@ export default {
series: [],
locale: 'en-US',
dateFormat: 'MMMM d, y',
store: null,
}
},
created() {
@@ -89,17 +91,22 @@ export default {
mounted() {
const $q = useQuasar();
this.options.theme.mode = $q.dark.isActive ? 'dark' : 'light';
this.store = useFireflyIIIStore();
if (null === this.range.start || null === this.range.end) {
// subscribe, then update:
const $store = useStore();
$store.subscribe((mutation, state) => {
if ('fireflyiii/setRange' === mutation.type) {
this.range = mutation.payload;
this.buildChart();
this.store.$onAction(
({name, $store, args, after, onError,}) => {
after((result) => {
if (name === 'setRange') {
this.range = result;
this.buildChart();
}
})
}
});
)
}
if (null !== this.getRange.start && null !== this.getRange.end) {
if (null !== this.store.getRange.start && null !== this.store.getRange.end) {
this.buildChart();
}
},
@@ -109,9 +116,9 @@ export default {
return Intl.NumberFormat(this.locale, {style: 'currency', currency: currencyCode}).format(value);
},
buildChart: function () {
if (null !== this.getRange.start && null !== this.getRange.end) {
let start = this.getRange.start;
let end = this.getRange.end;
if (null !== this.store.getRange.start && null !== this.store.getRange.end) {
let start = this.store.getRange.start;
let end = this.store.getRange.end;
if (false === this.loading) {
this.loading = true;
const overview = new Overview();