kenmirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-10-09 14:18:59 +00:00
Code Issues Projects Releases Wiki Activity

Clean up top boxes

Browse Source
This commit is contained in:
James Cole
2023-01-21 17:14:24 +01:00
parent c269913510
commit 6c2486faa7
16 changed files with 954 additions and 850 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,14 +22,13 @@
<!-- TODO most left? q-mr-sm -->
<!-- TODO middle? dan q-mx-sm -->
<!-- TODO right? dan q-ml-sm -->
<div class="q-mr-sm">
<q-card bordered>
<q-card bordered flat class="fit">
<q-item>
<q-item-section>
<q-item-label><strong>{{ $t('firefly.bills_to_pay') }}</strong></q-item-label>
<q-item-label><strong>{{ $t('firefly.bills') }} </strong></q-item-label>
</q-item-section>
</q-item>
<q-separator/>
<q-separator />
<q-card-section horizontal>
<q-card-section>
<q-circular-progress
@@ -63,7 +62,6 @@
</q-card-section>
</q-card-section>
</q-card>
</div>
</template>
<script>

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

@@ -22,8 +22,7 @@
<!-- TODO most left? q-mr-sm -->
<!-- TODO middle? dan q-mx-sm -->
<!-- TODO right? dan q-ml-sm -->
<div class="q-ml-sm">
<q-card bordered>
<q-card bordered flat class="fit">
<q-item>
<q-item-section>
<q-item-label><strong>{{ $t('firefly.net_worth') }}</strong></q-item-label>
@@ -47,7 +46,6 @@
</q-card-section>
</q-card-section>
</q-card>
</div>
</template>
<script>

6
frontend/src/components/dashboard/SpendInsightBox.vue
View File

@@ -22,11 +22,10 @@
<!-- TODO most left? q-mr-sm -->
<!-- TODO middle? dan q-mx-sm -->
<!-- TODO right? dan q-ml-sm -->
<div class="q-mx-sm">
<q-card bordered>
<q-card bordered flat>
<q-item>
<q-item-section>
<q-item-label><strong>{{ $t('firefly.left_to_spend') }}</strong></q-item-label>
<q-item-label><strong>{{ $t('firefly.left_to_spend') }} x</strong></q-item-label>
</q-item-section>
</q-item>
<q-separator/>
@@ -66,7 +65,6 @@
</q-card-section>
</q-card-section>
</q-card>
</div>
</template>
<script>

1
frontend/src/components/transactions/LargeTable.vue
View File

@@ -24,7 +24,6 @@
:columns="columns"
:loading="loading"
:rows="rows"
:title="title"
class="q-ma-md"
row-key="group_id"
@request="onRequest"

90
frontend/src/layouts/MainLayout.vue
View File

@@ -18,10 +18,24 @@
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-->
<!--
instructions for padding and margin
menu: top padding under top bar: q-pt-xs (padding top, xs)
page container: q-ma-xs (margin all, xs) AND q-mb-md to give the page content some space.
TODO main DIV always use q-ma-md for the main holder
TODO rows use a q-mb-sm to give them space
-->
<template>
<q-layout view="hHh lpR fFf">
<q-header class="bg-primary text-white" elevated>
<q-header reveal class="bg-primary text-white">
<q-toolbar>
<q-btn dense flat icon="fas fa-bars" round @click="toggleLeftDrawer"/>
@@ -101,7 +115,7 @@
<q-item-section>Currencies</q-item-section>
</q-item>
<q-item :to="{ name: 'admin.index' }" clickable>
<q-item-section>Administration</q-item-section>
<q-item-section>System settings</q-item-section>
</q-item>
</q-list>
</q-menu>
@@ -119,9 +133,12 @@
<q-item :to="{ name: 'profile.index' }" clickable>
<q-item-section> Profile</q-item-section>
</q-item>
<q-item :to="{ name: 'profile.daa' }" clickable>
<q-item :to="{ name: 'profile.data' }" clickable>
<q-item-section> Data management</q-item-section>
</q-item>
<q-item :to="{ name: 'administration.index' }" clickable>
<q-item-section>Administration management</q-item-section>
</q-item>
<q-item :to="{ name: 'preferences.index' }" clickable>
<q-item-section>Preferences</q-item-section>
</q-item>
@@ -137,11 +154,11 @@
</q-btn>
</q-toolbar>
</q-header>
<q-drawer v-model="leftDrawerOpen" bordered show-if-above side="left">
<q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
<q-scroll-area class="fit">
<div class="q-pa-md">
<q-list>
<q-item v-ripple :to="{ name: 'index' }" clickable>
<div class="q-pt-xs">
<q-list :dense="true">
<q-item v-ripple :to="{ name: 'index' }" clickable :dense="true">
<q-item-section avatar>
<q-icon name="fas fa-tachometer-alt"/>
</q-item-section>
@@ -149,7 +166,7 @@
Dashboard
</q-item-section>
</q-item>
<q-item v-ripple :to="{ name: 'budgets.index' }" clickable>
<q-item v-ripple :to="{ name: 'budgets.index' }" clickable :dense="true">
<q-item-section avatar>
<q-icon name="fas fa-chart-pie"/>
</q-item-section>
@@ -157,7 +174,7 @@
Budgets
</q-item-section>
</q-item>
<q-item v-ripple :to="{ name: 'subscriptions.index' }" clickable>
<q-item v-ripple :to="{ name: 'subscriptions.index' }" clickable :dense="true">
<q-item-section avatar>
<q-icon name="far fa-calendar-alt"/>
</q-item-section>
@@ -165,7 +182,7 @@
Subscriptions
</q-item-section>
</q-item>
<q-item v-ripple :to="{ name: 'piggy-banks.index' }" clickable>
<q-item v-ripple :to="{ name: 'piggy-banks.index' }" clickable :dense="true">
<q-item-section avatar>
<q-icon name="fas fa-piggy-bank"/>
</q-item-section>
@@ -174,48 +191,55 @@
</q-item-section>
</q-item>
<q-expansion-item
<q-expansion-item :dense="true"
:default-opened="this.$route.name === 'transactions.index' || this.$route.name === 'transactions.show'"
expand-separator
icon="fas fa-exchange-alt"
label="Transactions"
>
<q-item v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'withdrawal'} }"
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'withdrawal'} }"
clickable>
<q-item-section>
Withdrawals
</q-item-section>
</q-item>
<q-item v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'deposit'} }"
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'deposit'} }"
clickable>
<q-item-section>
Deposits
</q-item-section>
</q-item>
<q-item v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'transfers'} }"
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'transfers'} }"
clickable>
<q-item-section>
Transfers
</q-item-section>
</q-item>
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'all'} }"
clickable>
<q-item-section>
All transactions
</q-item-section>
</q-item>
</q-expansion-item>
<q-expansion-item
<q-expansion-item :dense="true"
default-unopened
expand-separator
icon="fas fa-microchip"
label="Automation"
>
<q-item v-ripple :inset-level="1" :to="{ name: 'rules.index' }" clickable>
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'rules.index' }" clickable>
<q-item-section>
Rules
</q-item-section>
</q-item>
<q-item v-ripple :inset-level="1" :to="{ name: 'recurring.index' }" clickable>
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'recurring.index' }" clickable>
<q-item-section>
Recurring transactions
</q-item-section>
@@ -223,18 +247,18 @@
</q-expansion-item>
<q-expansion-item
<q-expansion-item :dense="true"
:default-opened="this.$route.name === 'accounts.index' || this.$route.name === 'accounts.show'"
expand-separator
icon="fas fa-credit-card"
label="Accounts"
>
<q-item v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'asset'} }" clickable>
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'asset'} }" clickable>
<q-item-section>
Asset accounts
</q-item-section>
</q-item>
<q-item v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'expense'} }" clickable>
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'expense'} }" clickable>
<q-item-section>
Expense accounts
</q-item-section>
@@ -244,7 +268,7 @@
Revenue accounts
</q-item-section>
</q-item>
<q-item v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'liabilities'} }"
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'liabilities'} }"
clickable>
<q-item-section>
Liabilities
@@ -253,29 +277,29 @@
</q-expansion-item>
<q-expansion-item
<q-expansion-item :dense="true"
default-unopened
expand-separator
icon="fas fa-tags"
label="Classification"
>
<q-item v-ripple :inset-level="1" :to="{ name: 'categories.index' }" clickable>
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'categories.index' }" clickable>
<q-item-section>
Categories
</q-item-section>
</q-item>
<q-item v-ripple :inset-level="1" :to="{ name: 'tags.index' }" clickable>
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'tags.index' }" clickable>
<q-item-section>
Tags
</q-item-section>
</q-item>
<q-item v-ripple :inset-level="1" :to="{ name: 'groups.index'}" clickable>
<q-item :dense="true" v-ripple :inset-level="1" :to="{ name: 'groups.index'}" clickable>
<q-item-section>
Groups
</q-item-section>
</q-item>
</q-expansion-item>
<q-item v-ripple :to="{ name: 'reports.index'}" clickable>
<q-item :dense="true" v-ripple :to="{ name: 'reports.index'}" clickable>
<q-item-section avatar>
<q-icon name="far fa-chart-bar"/>
</q-item-section>
@@ -289,14 +313,15 @@
</q-drawer>
<q-page-container>
<q-page-container class="q-ma-xs">
<Alert></Alert>
<!-- breadcrumb, page title? -->
<div class="q-ma-md">
<div class="q-mb-md">
<div class="row">
<div class="col-6">
<h4 class="q-ma-none q-pa-none">{{ $t($route.meta.pageTitle || 'firefly.welcome_back') }}</h4>
<h4 class="q-ma-none q-pa-none">
<em class="fa-solid fa-fire"></em>
{{ $t($route.meta.pageTitle || 'firefly.welcome_back') }}</h4>
</div>
<div class="col-6">
<q-breadcrumbs align="right">
@@ -314,7 +339,7 @@
<q-footer class="bg-grey-8 text-white" elevated>
<q-toolbar>
<div>
<small>Firefly III v TODO &copy; James Cole, AGPL-3.0-or-later.</small>
<small>Firefly III v v6.0.0-alpha.2 &copy; James Cole, AGPL-3.0-or-later.</small>
</div>
</q-toolbar>
</q-footer>
@@ -327,6 +352,7 @@
import {defineComponent, ref} from 'vue';
import DateRange from "../components/DateRange";
import Alert from '../components/Alert';
import {useQuasar} from "quasar";
export default defineComponent(
{
@@ -339,7 +365,7 @@ export default defineComponent(
setup() {
const leftDrawerOpen = ref(true)
const search = ref('')
const $q = useQuasar();
return {
search,
leftDrawerOpen,

60
frontend/src/pages/administration/Index.vue Normal file
View File

@@ -0,0 +1,60 @@
<!--
- Index.vue
- Copyright (c) 2023 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>
<div class="q-ma-md">
<div class="row q-mb-sm">
<div class="col">
<div class="q-mt-sm q-mr-sm">
<q-card bordered>
<q-item>
<q-item-section>
<q-item-label><strong>Financial administration</strong></q-item-label>
</q-item-section>
</q-item>
<q-separator/>
<q-card-section>
<p>
Bla bla bla
List of groups.
Edit members, edit group, delete group.
add new administration.
switch to new administration.
</p>
</q-card-section>
</q-card>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Index"
}
</script>
<style scoped>
</style>

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

@@ -1,207 +0,0 @@
<!--
- Boxes.vue
- Copyright (c) 2021 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="row">
<div class="col-4 q-pr-sm q-pr-sm">
<q-card bordered>
<q-card-section class="q-pt-xs">
<div class="text-overline">
{{ $t('firefly.bills_to_pay') }}
<span class="float-right">
<span class="text-grey-4 fas fa-redo-alt" style="cursor: pointer;" @click="triggerForcedUpgrade"></span>
</span>
</div>
</q-card-section>
<q-card-section class="q-pt-xs">
<span v-for="balance in prefBillsUnpaid">{{ balance.value_parsed }}</span>
<span v-for="(bill, index) in notPrefBillsUnpaid">
{{ bill.value_parsed }}<span v-if="index+1 !== notPrefBillsUnpaid.length">, </span>
</span>
</q-card-section>
</q-card>
</div>
<div class="col-4 q-pr-sm q-pl-sm">
<q-card bordered>
<q-card-section class="q-pt-xs">
<div class="text-overline">
{{ $t('firefly.left_to_spend') }}
<span class="float-right">
<span class="text-grey-4 fas fa-redo-alt" style="cursor: pointer;" @click="triggerForcedUpgrade"></span>
</span>
</div>
</q-card-section>
<q-card-section class="q-pt-xs">
<!-- left to spend in preferred currency -->
<span v-for="left in prefLeftToSpend" :title="left.sub_title">{{ left.value_parsed }}</span>
<span v-for="(left, index) in notPrefLeftToSpend">
{{ left.value_parsed }}<span v-if="index+1 !== notPrefLeftToSpend.length">, </span>
</span>
</q-card-section>
</q-card>
</div>
<div class="col-4 q-pl-sm">
<q-card bordered>
<q-card-section class="q-pt-xs">
<div class="text-overline">
{{ $t('firefly.net_worth') }}
<span class="float-right">
<span class="text-grey-4 fas fa-redo-alt" style="cursor: pointer;" @click="triggerForcedUpgrade"></span>
</span>
</div>
</q-card-section>
<q-card-section class="q-pt-xs">
<span v-for="nw in prefNetWorth" :title="nw.sub_title">{{ nw.value_parsed }}</span>
<span v-for="(nw, index) in notPrefNetWorth">
{{ nw.value_parsed }}<span v-if="index+1 !== notPrefNetWorth.length">, </span>
</span>
<span v-if="0===notPrefNetWorth.length">&nbsp;</span>
</q-card-section>
</q-card>
</div>
</div>
</template>
<script>
import Basic from "src/api/summary/basic";
import {useFireflyIIIStore} from '../../stores/fireflyiii'
export default {
name: 'Boxes',
computed: {
prefBillsUnpaid: function () {
return this.filterOnCurrency(this.billsUnpaid);
},
notPrefBillsUnpaid: function () {
return this.filterOnNotCurrency(this.billsUnpaid);
},
prefLeftToSpend: function () {
return this.filterOnCurrency(this.leftToSpend);
},
notPrefLeftToSpend: function () {
return this.filterOnNotCurrency(this.leftToSpend);
},
prefNetWorth: function () {
return this.filterOnCurrency(this.netWorth);
},
notPrefNetWorth: function () {
return this.filterOnNotCurrency(this.netWorth);
},
},
created() {
},
data() {
return {
summary: [],
billsPaid: [],
billsUnpaid: [],
leftToSpend: [],
netWorth: [],
range: {
start: null,
end: null,
},
store: null
}
},
mounted() {
this.store = useFireflyIIIStore();
if (null === this.range.start || null === this.range.end) {
// subscribe, then update:
this.store.$onAction(
({name, $store, args, after, onError,}) => {
after((result) => {
if (name === 'setRange') {
this.range = result;
this.triggerUpdate();
}
})
}
)
}
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.refreshCacheKey();
this.triggerUpdate();
},
triggerUpdate: function () {
if (null !== this.store.getRange.start && null !== this.store.getRange.end) {
const basic = new Basic;
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-');
this.billsUnpaid = this.getKeyedEntries(data.data, 'bills-unpaid-in-');
});
}
},
getKeyedEntries(array, expected) {
let result = [];
for (const key in array) {
if (array.hasOwnProperty(key)) {
if (expected === key.substr(0, expected.length)) {
result.push(array[key]);
}
}
}
return result;
},
filterOnCurrency(array) {
let ret = [];
for (const key in array) {
if (array.hasOwnProperty(key)) {
if (array[key].currency_id === this.store.getCurrencyId) {
ret.push(array[key]);
}
}
}
// or just the first one:
if (0 === ret.length && array.hasOwnProperty(0)) {
ret.push(array[0]);
}
return ret;
},
filterOnNotCurrency(array) {
let ret = [];
for (const key in array) {
if (array.hasOwnProperty(key)) {
if (array[key].currency_id !== this.store.getCurrencyId) {
ret.push(array[key]);
}
}
}
return ret;
},
}
}
</script>

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

@@ -19,31 +19,29 @@
-->
<template>
<!-- TODO main DIV always use q-ma-md for the main holder-->
<!-- TODO rows use a q-mb-sm to give them space -->
<div class="q-ma-md">
<div class="row q-mb-sm">
<div class="col">
<div>
<div class="row">
<div class="col q-mr-sm">
<BillInsightBox/>
</div>
<div class="col">
<div class="col q-mx-sm">
<SpendInsightBox/>
</div>
<div class="col">
<div class="col q-ml-sm">
<NetWorthInsightBox/>
</div>
</div>
<div class="row q-mb-sm">
<div class="row">
<div class="col">
<AccountChart/>
</div>
</div>
<div class="row q-mb-sm">
<div class="row">
<div class="col">
<TransactionLists/>
</div>
</div>
<div class="row q-mb-sm">
<div class="row">
<div class="col">
<BudgetBox/>
</div>
@@ -51,7 +49,7 @@
Category box
</div>
</div>
<div class="row q-mb-sm">
<div class="row">
<div class="col">
Expense Box
</div>
@@ -59,7 +57,7 @@
Revenue Box
</div>
</div>
<div class="row q-mb-sm">
<div class="row">
<div class="col">
Piggy box
</div>

0
frontend/src/pages/admin/Index.vue → frontend/src/pages/system/Index.vue
View File

156
frontend/src/pages/transactions/Index.vue
View File

@@ -20,23 +20,114 @@
<template>
<q-page>
<div class="row q-mx-md q-mb-sm">
<!-- search box -->
<div class="col q-mr-sm">
<q-card bordered>
<q-card-section>
<div class="row items-center no-wrap">
<div class="col">
Search and filter
</div>
<!-- insert LargeTable -->
<LargeTable ref="table"
:loading="loading"
:page="page"
:rows="rows"
:rows-number="rowsNumber"
:rows-per-page="rowsPerPage"
:title="$t('firefly.title_' + this.type)"
v-on:on-request="onRequest"
>
<div class="col-auto">
<q-btn color="grey" round flat dense
:icon="searchExpanded ? 'fas fa-chevron-up' : 'fas fa-chevron-down'" @click="searchExpanded = !searchExpanded">
</q-btn>
</div>
</div>
</q-card-section>
<q-slide-transition>
<div v-show="searchExpanded">
<q-separator />
<q-card-section>
Here be stuff
</q-card-section>
</div>
</q-slide-transition>
</q-card>
</div>
<!-- date and range box -->
<div class="col q-ml-sm">
<q-card bordered>
</LargeTable>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<q-card-section>
<div class="row items-center no-wrap">
<div class="col">
Dates and ranges
</div>
<div class="col-auto">
<q-btn color="grey" round flat dense
:icon="dateExpanded ? 'fas fa-chevron-up' : 'fas fa-chevron-down'" @click="dateExpanded = !dateExpanded">
</q-btn>
</div>
</div>
</q-card-section>
<q-slide-transition>
<div v-show="dateExpanded">
<q-separator />
<q-card-section>
Here be stuff
</q-card-section>
</div>
</q-slide-transition>
</q-card>
</div>
</div>
<div class="row q-mx-md">
<div class="col">
<q-card bordered>
<q-card-section>
<div class="row items-center no-wrap">
<div class="col">
Stats
</div>
<div class="col-auto">
<q-btn color="grey" round flat dense
:icon="statsExpanded ? 'fas fa-chevron-up' : 'fas fa-chevron-down'" @click="statsExpanded = !statsExpanded">
</q-btn>
</div>
</div>
</q-card-section>
<q-slide-transition>
<div v-show="statsExpanded">
<q-separator />
<q-card-section>
Here be stuff
</q-card-section>
</div>
</q-slide-transition>
</q-card>
</div>
</div>
<div class="row">
<div class="col">
<!-- insert LargeTable -->
<LargeTable ref="table"
:loading="loading"
:page="page"
:rows="rows"
class="mb-5"
:rows-number="rowsNumber"
:rows-per-page="rowsPerPage"
:title="$t('firefly.title_' + this.type)"
v-on:on-request="onRequest"
>
</LargeTable>
</div>
</div>
<div class="box">
<div class="row">
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>
<q-page-sticky :offset="[18, 18]" position="bottom-right">
<q-fab
color="green"
@@ -47,12 +138,15 @@
square
vertical-actions-align="right"
>
<q-fab-action :to="{ name: 'transactions.create', params: {type: 'transfer'} }" color="primary" icon="fas fa-exchange-alt"
<q-fab-action :to="{ name: 'transactions.create', params: {type: 'transfer'} }" color="primary"
icon="fas fa-exchange-alt"
label="New transfer" square/>
<q-fab-action :to="{ name: 'transactions.create', params: {type: 'deposit'} }" color="primary" icon="fas fa-long-arrow-alt-right"
<q-fab-action :to="{ name: 'transactions.create', params: {type: 'deposit'} }" color="primary"
icon="fas fa-long-arrow-alt-right"
label="New deposit"
square/>
<q-fab-action :to="{ name: 'transactions.create', params: {type: 'withdrawal'} }" color="primary" icon="fas fa-long-arrow-alt-left"
<q-fab-action :to="{ name: 'transactions.create', params: {type: 'withdrawal'} }" color="primary"
icon="fas fa-long-arrow-alt-left"
label="New withdrawal"
square/>
@@ -66,6 +160,7 @@
import List from "../../api/transactions/list";
import LargeTable from "../../components/transactions/LargeTable";
import Parser from "../../api/transactions/parser";
import {useFireflyIIIStore} from "stores/fireflyiii";
export default {
name: 'Index',
@@ -92,27 +187,26 @@ export default {
columns: [
{name: 'type', label: ' ', field: 'type', style: 'width: 30px'},
{name: 'description', label: 'Description', field: 'description', align: 'left'},
{
name: 'amount', label: 'Amount', field: 'amount'
},
{
name: 'date', label: 'Date', field: 'date',
align: 'left',
},
{name: 'source', label: 'Source', field: 'source', align: 'left'},
{name: 'destination', label: 'Destination', field: 'destination', align: 'left'},
{name: 'category', label: 'Category', field: 'category', align: 'left'},
{name: 'budget', label: 'Budget', field: 'budget', align: 'left'},
{name: 'amount', label: 'Amount', field: 'amount'},
{name: 'date', label: 'Date', field: 'date', align: 'left',},
//{name: 'source', label: 'Source', field: 'source', align: 'left'},
//{name: 'destination', label: 'Destination', field: 'destination', align: 'left'},
//{name: 'category', label: 'Category', field: 'category', align: 'left'},
//{name: 'budget', label: 'Budget', field: 'budget', align: 'left'},
{name: 'menu', label: ' ', field: 'menu', align: 'left'},
],
type: 'withdrawal',
page: 1,
rowsPerPage: 50,
rowsNumber: 100,
store: null,
range: {
start: null,
end: null
}
},
searchExpanded: false, // TODO store in cookie.
dateExpanded : false,
statsExpanded: false,
}
},
computed: {
@@ -120,6 +214,8 @@ export default {
},
created() {
this.rowsPerPage = this.getListPageSize;
this.store = useFireflyIIIStore();
},
mounted() {
this.type = this.$route.params.type;

26
frontend/src/router/routes.js vendored
View File

@@ -900,6 +900,22 @@ const routes = [
}
]
},
// financial administration
{
path: '/administrations',
component: () => import('layouts/MainLayout.vue'),
children: [
{
path: '',
component: () => import('pages/administration/Index.vue'),
name: 'administration.index',
meta: {
pageTitle: 'firefly.administration_index'
}
}
]
},
// profile
{
path: '/profile',
@@ -946,17 +962,17 @@ const routes = [
]
},
// administration
// administration (system settings)
{
path: '/admin',
path: '/system',
component: () => import('layouts/MainLayout.vue'),
children: [
{
path: '',
component: () => import('pages/admin/Index.vue'),
name: 'admin.index',
component: () => import('pages/system/Index.vue'),
name: 'system.index',
meta: {
pageTitle: 'firefly.administration'
pageTitle: 'firefly.system'
}
}
]