60 lines
1.3 KiB
Vue
60 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<q-page padding>
|
|
<q-card>
|
|
<q-card-section>
|
|
<q-table :rows="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 { useBalanceStore } from '../store';
|
|
|
|
export default defineComponent({
|
|
// name: 'PageName'
|
|
setup() {
|
|
const store = useBalanceStore();
|
|
|
|
onMounted(() => void store.getBalances().then((balances) => rows.value.push(...balances)));
|
|
|
|
const rows = ref(store.balances);
|
|
|
|
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>
|