Balance: Fixed paginated transactions

src/plugins/balance/pages/Overview.vue

@@ -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(

src/plugins/balance/store/balance.ts

@@ -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