Balance Admin: Load all balances

src/plugins/balance/pages/Admin.vue

@@ -11,25 +11,24 @@
 </template>
 
 <script lang="ts">
-// TODO: Load all users / balances
-
 // TODO: Fill usefull data
 
-import { computed, defineComponent } from '@vue/composition-api';
-import { StateInterfaceBalance } from '../store/balance';
+import { ref, defineComponent, onMounted } from '@vue/composition-api';
+import { StateInterfaceBalance, BalancesResponse } from '../store/balance';
 import { Store } from 'vuex';
 export default defineComponent({
   // name: 'PageName'
   setup(_, { root }) {
     const store = <Store<StateInterfaceBalance>>root.$store;
 
-    const rows = computed(() => {
-      const fo: Array<{ userid: string; balance: number }> = [];
-      store.state.balance.balances.forEach((value, key) =>
-        fo.push(Object.assign(value, { userid: key }))
+    onMounted(
+      () =>
+        void store
+          .dispatch('balance/getBalances')
+          .then((balances: Array<BalancesResponse>) => rows.value.push(...balances))
     );
-      return fo;
-    });
+
+    const rows = ref(new Array<BalancesResponse>());
 
     const columns = [
       {
@@ -41,16 +40,22 @@ export default defineComponent({
         sortable: true
       },
       {
-        name: 'balance',
-        label: 'Kontostand',
-        field: 'balance',
+        name: 'credit',
+        label: 'Haben',
+        field: 'credit',
         format: (val: number) => val.toFixed(2)
       },
       {
-        name: 'limit',
-        label: 'Limit',
-        field: 'limit',
-        format: (val: number) => (val === null ? 'keins' : val)
+        name: 'debit',
+        label: 'Soll',
+        field: 'debit',
+        format: (val: number) => val.toFixed(2)
+      },
+      {
+        name: 'balance',
+        label: 'Kontostand',
+        format: (_: undefined, row: { debit: number; credit: number }) =>
+          (row.credit - row.debit).toFixed(2)
       }
     ];
     return { rows, columns };

src/plugins/balance/store/balance.ts

@@ -9,6 +9,10 @@ interface BalanceResponse {
   debit: number;
 }
 
+export interface BalancesResponse extends BalanceResponse {
+  userid: string;
+}
+
 export interface TransactionsResponse {
   transactions: Array<FG.Transaction>;
   count?: number;
@@ -122,6 +126,11 @@ const actions: ActionTree<BalanceInterface, StateInterface> = {
       })
       .finally(() => commit('setLoading', false));
   },
+  getBalances() {
+    return axios.get('/balance').then(({ data }: AxiosResponse<Array<BalancesResponse>>) => {
+      return data;
+    });
+  },
   getTransactions(
     { commit, rootState },
     payload: {