src/plugins/balance/pages/Overview.vue

@@ -0,0 +1,71 @@
+<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 = [];
+
+    const columns = [
+      {
+        name: 'userid',
+        label: 'Datum',
+        field: 'userid',
+        required: true,
+        align: 'left',
+        sortable: true
+      },
+      {
+        name: 'balance',
+        label: 'Text',
+        field: 'balance',
+        format: (val: number) => val.toFixed(2)
+      },
+      {
+        name: 'limit',
+        label: 'Betrag',
+        field: 'limit',
+        format: (val: number) => (val === null ? 'keins' : val)
+      },
+      {
+        name: 'limit',
+        label: 'Benutzer',
+        field: 'limit',
+        format: (val: number) => (val === null ? 'keins' : val)
+      },
+      {
+        name: 'limit',
+        label: 'Storniert',
+        field: 'limit',
+        format: (val: number) => (val === null ? 'keins' : val)
+      },
+      {
+        name: 'limit',
+        label: 'Löschen',
+        field: 'limit',
+        format: (val: number) => (val === null ? 'keins' : val)
+      }
+    ];
+    return { rows, columns };
+  }
+});
+</script>