flaschengeist-frontend/src/plugins/balance/pages/Admin.vue

<template>
  <div>
    <q-page padding>
      <q-card>
        <q-card-section>
          <q-table :data="rows" row-key="userid" :columns="columns" />
        </q-card-section>
      </q-card>
    </q-page>
  </div>
</template>

<script lang="ts">
// TODO: Fill usefull data

import { ref, defineComponent, onMounted } from 'vue';
import { StateInterfaceBalance, BalancesResponse } from '../store/balance';
import { Store, useStore } from 'vuex';
export default defineComponent({
  // name: 'PageName'
  setup() {
    //const store = <Store<StateInterfaceBalance>>root.$store;
    const store = useStore();

    onMounted(
      () =>
        void store
          .dispatch('balance/getBalances')
          .then((balances: Array<BalancesResponse>) => rows.value.push(...balances))
    );

    const rows = ref(new Array<BalancesResponse>());

    const columns = [
      {
        name: 'userid',
        label: 'Benutzer ID',
        field: 'userid',
        required: true,
        align: 'left',
        sortable: true,
      },
      {
        name: 'credit',
        label: 'Haben',
        field: 'credit',
        format: (val: number) => val.toFixed(2),
      },
      {
        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 };
  },
});
</script>