60 lines
1.4 KiB
Vue
60 lines
1.4 KiB
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: Load all users / balances
|
|
|
|
// TODO: Fill usefull data
|
|
|
|
import { computed, defineComponent } from '@vue/composition-api';
|
|
import { StateInterfaceBalance } 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 }))
|
|
);
|
|
return fo;
|
|
});
|
|
|
|
const columns = [
|
|
{
|
|
name: 'userid',
|
|
label: 'Benutzer ID',
|
|
field: 'userid',
|
|
required: true,
|
|
align: 'left',
|
|
sortable: true
|
|
},
|
|
{
|
|
name: 'balance',
|
|
label: 'Kontostand',
|
|
field: 'balance',
|
|
format: (val: number) => val.toFixed(2)
|
|
},
|
|
{
|
|
name: 'limit',
|
|
label: 'Limit',
|
|
field: 'limit',
|
|
format: (val: number) => (val === null ? 'keins' : val)
|
|
}
|
|
];
|
|
return { rows, columns };
|
|
}
|
|
});
|
|
</script>
|