mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-12-21 18:51:21 +00:00
Clean up top boxes
This commit is contained in:
James Cole
60
frontend/src/pages/administration/Index.vue
Normal file
60
frontend/src/pages/administration/Index.vue
Normal 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>
|
||||
@@ -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"> </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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </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> </p>
|
||||
<p> </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;
|
||||
|
||||
Reference in New Issue
Block a user