Flaschengeist/flaschengeist-frontend
Flaschengeist
/
flaschengeist-frontend
9
0
Fork 1
Code Issues Pull Requests Projects Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/plugins/balance/pages/Overview.vue
View File

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

20
src/plugins/balance/store/balance.ts
View File

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