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

Add first budget view

Browse Source
This commit is contained in:
James Cole
2022-07-23 20:13:24 +02:00
parent a464ad015f
commit ea808b441b
6 changed files with 334 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/api/v2/budgets/list.js vendored Normal file
View File

@@ -0,0 +1,28 @@
/*
* list.js
* Copyright (c) 2022 james@firefly-iii.org
*
* This file is part of Firefly III (https://github.com/firefly-iii).
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {api} from "boot/axios";
export default class List {
list(page) {
let url = '/api/v2/budgets';
return api.get(url, {params: {page: page}});
}
}

110
frontend/src/components/dashboard/BudgetBox.vue Normal file
View File

@@ -0,0 +1,110 @@
<!--
- BudgetBox.vue
- Copyright (c) 2022 james@firefly-iii.org
-
- This file is part of Firefly III (https://github.com/firefly-iii).
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<template>
<div class="q-mt-sm q-mr-sm">
<q-card bordered>
<q-item>
<q-item-section>
<q-item-label><strong>
Budgets
</strong></q-item-label>
</q-item-section>
</q-item>
<q-separator/>
<q-card-section>
<div class="row">
<div class="col">
I am budget<br/>
</div>
</div>
<div class="row">
<div class="col">
<small>I am range</small>
</div>
<div class="col">
I am bar
</div>
</div>
<div class="row">
<div class="col">
<small>I am range</small>
</div>
<div class="col">
I am bar
</div>
</div>
<div class="row">
<div class="col">
I am budget<br/>
</div>
</div>
</q-card-section>
</q-card>
</div>
</template>
<script>
import {useFireflyIIIStore} from "../../stores/fireflyiii";
import List from '../../api/v2/budgets/list';
export default {
name: "BudgetBox",
data() {
return {
budgets: [],
locale: 'en-US',
page: 1
}
},
mounted() {
this.store = useFireflyIIIStore();
this.store.$onAction(
({name, store, args, after, onError,}) => {
after((result) => {
if (name === 'setRange') {
this.locale = this.store.getLocale;
this.loadBox();
}
})
}
)
if (null !== this.store.getRange.start && null !== this.store.getRange.end) {
this.loadBox();
}
},
methods: {
loadBox: function() {
(new List).list(1).then((data) => {
console.log(data.data);
});
// todo go to next page as well.
console.log('loadbox');
}
}
}
</script>
<style scoped>
</style>

28
frontend/src/pages/dashboard/Dashboard.vue
View File

@@ -24,28 +24,28 @@
<div class="q-ma-md">
<div class="row q-mb-sm">
<div class="col">
<BillInsightBox />
<BillInsightBox/>
</div>
<div class="col">
<SpendInsightBox />
<SpendInsightBox/>
</div>
<div class="col">
<NetWorthInsightBox />
<NetWorthInsightBox/>
</div>
</div>
<div class="row q-mb-sm">
<div class="col">
<AccountChart />
<AccountChart/>
</div>
</div>
<div class="row q-mb-sm">
<div class="col">
<TransactionLists />
<TransactionLists/>
</div>
</div>
<div class="row q-mb-sm">
<div class="col">
Budget box
<BudgetBox/>
</div>
<div class="col">
Category box
@@ -77,11 +77,16 @@
icon="fas fa-chevron-up"
direction="up"
>
<q-fab-action color="primary" square icon="fas fa-chart-pie" :label="$t('firefly.new_budget')" :to="{ name: 'budgets.create' }"/>
<q-fab-action color="primary" square icon="far fa-money-bill-alt" :label="$t('firefly.new_asset_account')" :to="{ name: 'accounts.create', params: {type: 'asset'} }"/>
<q-fab-action color="primary" square icon="fas fa-exchange-alt" :label="$t('firefly.newTransfer')" :to="{ name: 'transactions.create', params: {type: 'transfer'} }"/>
<q-fab-action color="primary" square icon="fas fa-long-arrow-alt-right" :label="$t('firefly.newDeposit')" :to="{ name: 'transactions.create', params: {type: 'deposit'} }"/>
<q-fab-action color="primary" square icon="fas fa-long-arrow-alt-left" :label="$t('firefly.newWithdrawal')" :to="{ name: 'transactions.create', params: {type: 'withdrawal'} }"/>
<q-fab-action color="primary" square icon="fas fa-chart-pie" :label="$t('firefly.new_budget')"
:to="{ name: 'budgets.create' }"/>
<q-fab-action color="primary" square icon="far fa-money-bill-alt" :label="$t('firefly.new_asset_account')"
:to="{ name: 'accounts.create', params: {type: 'asset'} }"/>
<q-fab-action color="primary" square icon="fas fa-exchange-alt" :label="$t('firefly.newTransfer')"
:to="{ name: 'transactions.create', params: {type: 'transfer'} }"/>
<q-fab-action color="primary" square icon="fas fa-long-arrow-alt-right" :label="$t('firefly.newDeposit')"
:to="{ name: 'transactions.create', params: {type: 'deposit'} }"/>
<q-fab-action color="primary" square icon="fas fa-long-arrow-alt-left" :label="$t('firefly.newWithdrawal')"
:to="{ name: 'transactions.create', params: {type: 'withdrawal'} }"/>
</q-fab>
</q-page-sticky>
</div>
@@ -98,6 +103,7 @@ export default {
NetWorthInsightBox: defineAsyncComponent(() => import('../../components/dashboard/NetWorthInsightBox.vue')),
BillInsightBox: defineAsyncComponent(() => import('../../components/dashboard/BillInsightBox.vue')),
SpendInsightBox: defineAsyncComponent(() => import('../../components/dashboard/SpendInsightBox.vue')),
BudgetBox: defineAsyncComponent(() => import('../../components/dashboard/BudgetBox.vue')),
}
}
</script>