First try with an overview page for the balance
This commit is contained in:
parent
502c40329c
commit
d396940071
|
|
@ -1,71 +1,140 @@
|
|||
<template>
|
||||
<div>
|
||||
<q-page padding>
|
||||
<q-card>
|
||||
<q-card-section class="text-center">
|
||||
<div class="text-h4">Aktueller Stand</div>
|
||||
<div style="font-size: 2em">{{ balance.toFixed(2) }} €</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section>
|
||||
<q-table :data="rows" row-key="userid" :columns="columns" />
|
||||
<q-table
|
||||
title="Buchungen"
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
:pagination.sync="pagination"
|
||||
:loading="loading"
|
||||
@request="onRequest"
|
||||
binary-state-sort
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-page>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
// TODO: Load all users / balances
|
||||
|
||||
// TODO: Fill usefull data
|
||||
|
||||
import { computed, defineComponent } from '@vue/composition-api';
|
||||
import { computed, defineComponent, onMounted, ref } from '@vue/composition-api';
|
||||
import { StateInterfaceBalance } from '../store/balance';
|
||||
import { Store } from 'vuex';
|
||||
import { formatDateTime } from 'src/utils/datetime';
|
||||
|
||||
export default defineComponent({
|
||||
// name: 'PageName'
|
||||
setup(_, { root }) {
|
||||
const store = <Store<StateInterfaceBalance>>root.$store;
|
||||
|
||||
const rows = [];
|
||||
onMounted(() => {
|
||||
void store.dispatch('balance/getBalance');
|
||||
onRequest({
|
||||
pagination: pagination.value,
|
||||
filter: undefined
|
||||
});
|
||||
});
|
||||
|
||||
const data = ref<FG.Transaction[]>([]);
|
||||
const loading = ref(false);
|
||||
const pagination = ref({
|
||||
sortBy: 'desc',
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 3,
|
||||
rowsNumber: 10
|
||||
});
|
||||
|
||||
interface PaginationInterface {
|
||||
sortBy: string;
|
||||
descending: boolean;
|
||||
page: number;
|
||||
rowsPerPage: number;
|
||||
rowsNumber: number;
|
||||
}
|
||||
|
||||
function onRequest(props: { pagination: PaginationInterface; filter?: string }) {
|
||||
const { page, rowsPerPage, sortBy, descending } = props.pagination;
|
||||
const filter = props.filter;
|
||||
|
||||
loading.value = true;
|
||||
|
||||
void store.dispatch('balance/getTransactionsCount', filter).then((value: number) => {
|
||||
pagination.value.rowsNumber = value;
|
||||
|
||||
// get all rows if "All" (0) is selected
|
||||
const fetchCount = rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage;
|
||||
// calculate starting row of data
|
||||
const startRow = (page - 1) * rowsPerPage;
|
||||
|
||||
// fetch data from "server"
|
||||
store
|
||||
.dispatch('balance/getTransactions', {
|
||||
filter: { row: startRow, limit: fetchCount }
|
||||
})
|
||||
.then((gotTransactions: FG.Transaction[]) => {
|
||||
// clear out existing data and add new
|
||||
data.value.splice(0, data.value.length, ...gotTransactions);
|
||||
// don't forget to update local pagination object
|
||||
pagination.value.page = page;
|
||||
pagination.value.rowsPerPage = rowsPerPage;
|
||||
pagination.value.sortBy = sortBy;
|
||||
pagination.value.descending = descending;
|
||||
})
|
||||
.finally(() => (loading.value = false));
|
||||
});
|
||||
}
|
||||
|
||||
const balance = computed(
|
||||
() =>
|
||||
store.state.balance.balances.get((<FG.User>store.state.user.currentUser).userid)?.balance ||
|
||||
NaN
|
||||
);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
name: 'userid',
|
||||
name: 'time',
|
||||
label: 'Datum',
|
||||
field: 'userid',
|
||||
field: 'time',
|
||||
required: true,
|
||||
align: 'left',
|
||||
sortable: true
|
||||
sortable: true,
|
||||
format: (val: Date) => formatDateTime(new Date(val), true, true, true)
|
||||
},
|
||||
{
|
||||
name: 'balance',
|
||||
name: 'text',
|
||||
label: 'Text',
|
||||
field: 'balance',
|
||||
format: (val: number) => val.toFixed(2)
|
||||
format: (_: undefined, row: FG.Transaction) => {
|
||||
if (row.sender_id == null) return 'Gutschrift';
|
||||
else {
|
||||
if (row.receiver_id == null) return 'Angeschrieben';
|
||||
else {
|
||||
if (row.receiver_id === store.state.user.currentUser?.userid) return 'Bekommen von X';
|
||||
else return 'Gesendet an X';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'limit',
|
||||
name: 'amount',
|
||||
label: 'Betrag',
|
||||
field: 'limit',
|
||||
format: (val: number) => (val === null ? 'keins' : val)
|
||||
field: 'amount',
|
||||
format: (val: number) => `${val.toFixed(2)}€`
|
||||
},
|
||||
{
|
||||
name: 'limit',
|
||||
name: 'author_id',
|
||||
label: 'Benutzer',
|
||||
field: 'limit',
|
||||
format: (val: number) => (val === null ? 'keins' : val)
|
||||
},
|
||||
{
|
||||
name: 'limit',
|
||||
label: 'Storniert',
|
||||
field: 'limit',
|
||||
format: (val: number) => (val === null ? 'keins' : val)
|
||||
},
|
||||
{
|
||||
name: 'limit',
|
||||
label: 'Löschen',
|
||||
field: 'limit',
|
||||
format: (val: number) => (val === null ? 'keins' : val)
|
||||
field: 'author_id',
|
||||
format: (val: string) => store.state.user.users.filter(x => x.userid == val)[0].display_name
|
||||
}
|
||||
];
|
||||
return { rows, columns };
|
||||
|
||||
return { data, pagination, onRequest, loading, balance, columns };
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ const mutations: MutationTree<BalanceInterface> = {
|
|||
},
|
||||
reverseTransaction(state, data: { transaction: FG.Transaction; reversal: FG.Transaction }) {
|
||||
const idx = state.transactions.findIndex(value => value.id === data.transaction.id);
|
||||
data.transaction.reversal = data.reversal;
|
||||
data.transaction.reversal_id = data.reversal.id;
|
||||
if (idx > -1) state.transactions[idx] = data.transaction;
|
||||
else state.transactions.push(data.transaction);
|
||||
}
|
||||
|
|
@ -78,7 +78,7 @@ const mutations: MutationTree<BalanceInterface> = {
|
|||
const actions: ActionTree<BalanceInterface, StateInterface> = {
|
||||
addShortcut({ commit, state, rootState }, shortcut) {
|
||||
const sc = [...state.shortcuts, shortcut];
|
||||
sc.sort().reverse();
|
||||
sc.sort();
|
||||
|
||||
const user = <FG.User>rootState.user.currentUser;
|
||||
return axios.put(`/users/${user.userid}/balance/shortcuts`, sc).then(() => {
|
||||
|
|
@ -136,6 +136,15 @@ const actions: ActionTree<BalanceInterface, StateInterface> = {
|
|||
})
|
||||
.finally(() => commit('setLoading', false));
|
||||
},
|
||||
getTransactionsCount(
|
||||
{ state },
|
||||
payload: {
|
||||
userid?: string;
|
||||
filter?: { limit?: number; offset?: number; from?: Date; to?: Date };
|
||||
}
|
||||
) {
|
||||
return Promise.resolve(3);
|
||||
},
|
||||
getLimit({ rootState, commit }) {
|
||||
commit('setLoading');
|
||||
axios
|
||||
|
|
|
|||
Loading…
Reference in New Issue