Balance: Fixed paginated transactions

This commit is contained in:
Ferdinand Thiessen 2021-01-29 20:11:13 +01:00
parent 99d3acaef5
commit 2630da3ca4
2 changed files with 29 additions and 39 deletions

View File

@ -24,7 +24,7 @@
<script lang="ts">
import { computed, defineComponent, onMounted, ref } from '@vue/composition-api';
import { StateInterfaceBalance } from '../store/balance';
import { StateInterfaceBalance, TransactionsResponse } from '../store/balance';
import { Store } from 'vuex';
import { formatDateTime } from 'src/utils/datetime';
@ -44,7 +44,7 @@ export default defineComponent({
const data = ref<FG.Transaction[]>([]);
const loading = ref(false);
const pagination = ref({
sortBy: 'desc',
sortBy: 'time',
descending: false,
page: 1,
rowsPerPage: 3,
@ -64,31 +64,25 @@ export default defineComponent({
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 }
filter: { offset: startRow, limit: fetchCount }
})
.then((gotTransactions: FG.Transaction[]) => {
.then((result: TransactionsResponse) => {
// clear out existing data and add new
data.value.splice(0, data.value.length, ...gotTransactions);
data.value.splice(0, data.value.length, ...result.transactions);
// don't forget to update local pagination object
pagination.value.page = page;
pagination.value.rowsPerPage = rowsPerPage;
pagination.value.sortBy = sortBy;
pagination.value.descending = descending;
if (result.count) pagination.value.rowsNumber = result.count;
})
.finally(() => (loading.value = false));
});
}
const balance = computed(

View File

@ -9,6 +9,11 @@ interface BalanceResponse {
debit: number;
}
export interface TransactionsResponse {
transactions: Array<FG.Transaction>;
count?: number;
}
export interface UserBalance extends BalanceResponse {
limit: number | null;
}
@ -129,22 +134,13 @@ const actions: ActionTree<BalanceInterface, StateInterface> = {
if (!payload.filter) payload.filter = { limit: 10 };
return axios
.get(`/users/${payload.userid}/balance/transactions`, { params: payload.filter || {} })
.then(({ data }: AxiosResponse<[FG.Transaction]>) => {
data.forEach(t => fixTransaction(t));
commit('addTransactions', data);
.then(({ data }: AxiosResponse<TransactionsResponse>) => {
data.transactions.forEach(t => fixTransaction(t));
commit('addTransactions', data.transactions);
return data;
})
.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