From a1a8285a3698920834fab041581a90b035619a04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Tue, 29 Jun 2021 11:42:10 +0200
Subject: [PATCH] update balance from last local commit
 3b185e677ca6055bfb9ad7d9a6ed2e0deca66725

---
 package.json                           |   7 +-
 src/api.d.ts                           |  20 +--
 src/components/BalanceAdd.vue          |  63 ++-------
 src/components/BalanceAddBody.vue      |  82 +++++++++++
 src/components/BalanceHeader.vue       |   2 +-
 src/components/BalanceTransfer.vue     |  50 ++-----
 src/components/BalanceTransferBody.vue |  81 +++++++++++
 src/pages/Admin.vue                    | 187 ++++++++++++++++++++++---
 src/pages/Overview.vue                 |  54 ++++---
 src/store.ts                           |  60 +++++---
 10 files changed, 435 insertions(+), 171 deletions(-)
 create mode 100644 src/components/BalanceAddBody.vue
 create mode 100644 src/components/BalanceTransferBody.vue

diff --git a/package.json b/package.json
index 7d13a58..ee2c89c 100644
--- a/package.json
+++ b/package.json
@@ -20,16 +20,16 @@
     },
     "devDependencies": {
       "@flaschengeist/types": "^1.0.0-alpha.1",
-      "@quasar/app": "^3.0.0-beta.25",
+      "@quasar/app": "^3.0.0",
       "@typescript-eslint/eslint-plugin": "^4.24.0",
       "@typescript-eslint/parser": "^4.24.0",
       "axios": "^0.21.1",
       "eslint": "^7.26.0",
       "eslint-config-prettier": "^8.3.0",
       "eslint-plugin-vue": "^7.9.0",
-      "pinia": "^2.0.0-alpha.19",
+      "pinia": "^2.0.0-beta.3",
       "prettier": "^2.3.0",
-      "quasar": "^2.0.0-beta.18",
+      "quasar": "^2.0.0",
       "typescript": "^4.2.4"
     },
     "peerDependencies": {
@@ -43,4 +43,3 @@
       "arrowParens": "always"
     }
   }
-  
\ No newline at end of file
diff --git a/src/api.d.ts b/src/api.d.ts
index 5170819..5e497ca 100644
--- a/src/api.d.ts
+++ b/src/api.d.ts
@@ -1,12 +1,12 @@
 declare namespace FG {
-	interface Transaction {
-		id: number;
-		time: Date;
-		amount: number;
-		reversal_id?: number;
-		author_id?: string;
-		sender_id?: string;
-		original_id?: number;
-		receiver_id?: string;
-	}
+  interface Transaction {
+    id: number;
+    time: Date;
+    amount: number;
+    reversal_id?: number;
+    author_id?: string;
+    sender_id?: string;
+    original_id?: number;
+    receiver_id?: string;
+  }
 }
diff --git a/src/components/BalanceAdd.vue b/src/components/BalanceAdd.vue
index ef17e10..fd4e5de 100644
--- a/src/components/BalanceAdd.vue
+++ b/src/components/BalanceAdd.vue
@@ -13,45 +13,15 @@
           :label="shortcut.toFixed(2).toString() + ' €'"
           @click="changeBalance(shortcut)"
         >
-          <q-popup-proxy context-menu>
+          <q-menu anchor="bottom middle" self="top middle" context-menu>
             <q-btn label="Entfernen" @click="removeShortcut(shortcut)" />
-          </q-popup-proxy>
-          <q-tooltip>Rechtsklick um Verknüpfung zu entfernen</q-tooltip>
+          </q-menu>
+          <q-tooltip> Rechtsklick um Verknüpfung zu entfernen </q-tooltip>
         </q-btn>
-      </div></q-card-section
-    >
+      </div>
+    </q-card-section>
     <q-card-section class="row q-col-gutter-md items-center">
-      <div class="col-sm-4 col-xs-12">
-        <q-input
-          v-model.number="amount"
-          type="number"
-          filled
-          label="Eigener Betrag"
-          step="0.1"
-          min="0"
-        />
-      </div>
-      <div class="col-sm-4 col-xs-6">
-        <q-btn
-          style="width: 100%"
-          color="primary"
-          label="Anschreiben"
-          @click="changeBalance(amount * -1)"
-          ><q-tooltip>Rechtsklick um Betrag als Verknüpfung hinzuzufügen</q-tooltip>
-          <q-popup-proxy v-model="showAddShortcut" context-menu>
-            <q-btn label="neue Verknüpfung" @click="addShortcut"></q-btn>
-          </q-popup-proxy>
-        </q-btn>
-      </div>
-      <div class="col-sm-4 col-xs-6">
-        <q-btn
-          v-if="canAddCredit"
-          style="width: 100%"
-          color="secondary"
-          label="Gutschreiben"
-          @click="changeBalance(amount)"
-        />
-      </div>
+      <balance-add-body :user="user" />
     </q-card-section>
   </q-card>
 </template>
@@ -60,12 +30,13 @@
 import { computed, ref, defineComponent, onBeforeMount } from 'vue';
 import { hasPermission, useMainStore } from '@flaschengeist/api';
 import BalanceHeader from '../components/BalanceHeader.vue';
+import BalanceAddBody from '../components/BalanceAddBody.vue';
 import PERMISSIONS from '../permissions';
 import { useBalanceStore } from '../store';
 
 export default defineComponent({
   name: 'BalanceAdd',
-  components: { BalanceHeader },
+  components: { BalanceHeader, BalanceAddBody },
   emits: { 'open-history': () => true },
   setup(_, { emit }) {
     const store = useBalanceStore();
@@ -75,39 +46,29 @@ export default defineComponent({
       void store.getShortcuts();
     });
 
-    const amount = ref<number>(0);
-    const showAddShortcut = ref(false);
     const user = ref(mainStore.currentUser);
     const shortCuts = computed(() => store.shortcuts);
 
-    const canAddCredit = hasPermission(PERMISSIONS.CREDIT);
     const showSelector = hasPermission(PERMISSIONS.DEBIT) || hasPermission(PERMISSIONS.CREDIT);
 
-    function addShortcut() {
-      if (amount.value != 0) void store.createShortcut(amount.value * -1);
-    }
     function removeShortcut(shortcut: number) {
       void store.removeShortcut(shortcut);
     }
-    async function changeBalance(amount: number) {
-      await store.changeBalance(amount, user.value);
-    }
 
     function openHistory() {
       emit('open-history');
     }
+    async function changeBalance(amount: number) {
+      await store.changeBalance(amount, user.value);
+    }
 
     return {
       user,
-      addShortcut,
-      canAddCredit,
       removeShortcut,
-      showAddShortcut,
-      changeBalance,
-      amount,
       showSelector,
       shortCuts,
       openHistory,
+      changeBalance,
     };
   },
 });
diff --git a/src/components/BalanceAddBody.vue b/src/components/BalanceAddBody.vue
new file mode 100644
index 0000000..f89afd2
--- /dev/null
+++ b/src/components/BalanceAddBody.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="col-sm-4 col-xs-12">
+    <q-input
+      v-model.number="amount"
+      type="number"
+      filled
+      label="Eigener Betrag"
+      step="0.1"
+      min="0"
+      suffix="€"
+    />
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <q-btn
+      v-close-popup
+      style="width: 100%"
+      color="primary"
+      label="Anschreiben"
+      @click="changeBalance(amount * -1)"
+    >
+      <q-tooltip v-if="canAddShortcut">
+        Rechtsklick um Betrag als Verknüpfung hinzuzufügen
+      </q-tooltip>
+      <q-menu v-if="canAddShortcut" anchor="bottom middle" self="top middle" context-menu>
+        <q-btn label="neue Verknüpfung" @click="addShortcut"></q-btn>
+      </q-menu>
+    </q-btn>
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <q-btn
+      v-if="canAddCredit"
+      v-close-popup
+      style="width: 100%"
+      color="secondary"
+      label="Gutschreiben"
+      @click="changeBalance(amount)"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref, PropType, computed } from 'vue';
+import { useBalanceStore } from '../store';
+import { hasPermission, useUserStore } from '@flaschengeist/api';
+import PERMISSIONS from '../permissions';
+export default defineComponent({
+  name: 'BalanceAddBody',
+  props: {
+    user: {
+      type: [Object, String] as PropType<FG.User | string>,
+      required: true,
+    },
+    canAddShortcut: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: {
+    changeBalance: (user: FG.User) => user,
+  },
+  setup(props, { emit }) {
+    const store = useBalanceStore();
+    const userStore = useUserStore();
+    const amount = ref<number>(0);
+    async function changeBalance(amount: number) {
+      await store.changeBalance(amount, user.value);
+      emit('changeBalance', user.value);
+    }
+    function addShortcut() {
+      if (amount.value != 0) void store.createShortcut(amount.value * -1);
+    }
+    const canAddCredit = hasPermission(PERMISSIONS.CREDIT);
+    const user = computed(() =>
+      (<FG.User>props.user).userid
+        ? <FG.User>props.user
+        : <FG.User>userStore.users.find((a) => a.userid === <string>props.user)
+    );
+    return { changeBalance, addShortcut, canAddCredit, amount };
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/src/components/BalanceHeader.vue b/src/components/BalanceHeader.vue
index 7a6a5b5..c38f8db 100644
--- a/src/components/BalanceHeader.vue
+++ b/src/components/BalanceHeader.vue
@@ -2,7 +2,7 @@
   <q-card-section class="fit row justify-left content-center items-center q-col-gutter-sm">
     <div class="col-5">
       <div v-if="balance" class="text-h6">
-        Aktueller Stand: {{ balance.balance.toFixed(2) }} €
+        Aktueller Stand: {{ balance.balance ? balance.balance.toFixed(2) : "" }} €
         <q-badge v-if="isLocked" color="negative" align="top"> gesperrt </q-badge>
       </div>
       <q-spinner v-else color="primary" size="3em" />
diff --git a/src/components/BalanceTransfer.vue b/src/components/BalanceTransfer.vue
index d4429b8..1499fb1 100644
--- a/src/components/BalanceTransfer.vue
+++ b/src/components/BalanceTransfer.vue
@@ -1,60 +1,30 @@
 <template>
   <q-card>
-    <BalanceHeader v-model="sender" :show-selector="showSelector" @open-history="openHistory" />
-    <q-separator />
-    <q-card-section class="row q-col-gutter-md items-center">
-      <div class="col-sm-4 col-xs-12">
-        <q-input v-model.number="amount" type="number" filled label="Betrag" step="0.1" min="0" />
-      </div>
-      <div class="col-sm-4 col-xs-6">
-        <UserSelector v-model="receiver" label="Empfänger" />
-      </div>
-      <div class="col-sm-4 col-xs-6">
-        <q-btn
-          style="width: 100%"
-          color="primary"
-          :disable="sendDisabled"
-          label="Senden"
-          @click="sendAmount"
-        />
-      </div>
-    </q-card-section>
+      <BalanceHeader v-model="sender" :show-selector="showSelector" @open-history="openHistory" />
+      <q-separator />
+      <q-card-section class="row q-col-gutter-md items-center">
+        <balance-transfer-body :user="sender" />
+      </q-card-section>
   </q-card>
 </template>
 
 <script lang="ts">
 import { computed, ref, defineComponent } from 'vue';
 import { hasPermission, useMainStore } from '@flaschengeist/api';
-import UserSelector from '@flaschengeist/users/src/components/UserSelector.vue';
 import BalanceHeader from '../components/BalanceHeader.vue';
+import BalanceTransferBody from '../components/BalanceTransferBody.vue';
+
 import PERMISSIONS from '../permissions';
-import { useBalanceStore } from '../store';
 
 export default defineComponent({
   name: 'BalanceTransfer',
-  components: { BalanceHeader, UserSelector },
+  components: { BalanceHeader, BalanceTransferBody },
   emits: { 'open-history': () => true },
   setup(_, { emit }) {
-    const store = useBalanceStore();
     const mainStore = useMainStore();
 
     const showSelector = computed(() => hasPermission(PERMISSIONS.SEND_OTHER));
     const sender = ref<FG.User | undefined>(mainStore.currentUser);
-    const receiver = ref<FG.User | undefined>(undefined);
-    const amount = ref<number>(0);
-
-    const sendDisabled = computed(() => {
-      return !(
-        receiver.value &&
-        sender.value &&
-        sender.value.userid != receiver.value.userid &&
-        amount.value > 0
-      );
-    });
-
-    async function sendAmount() {
-      if (receiver.value) await store.changeBalance(amount.value, receiver.value, sender.value);
-    }
 
     function openHistory() {
       emit('open-history');
@@ -62,11 +32,7 @@ export default defineComponent({
 
     return {
       sender,
-      receiver,
-      amount,
-      sendAmount,
       showSelector,
-      sendDisabled,
       openHistory,
     };
   },
diff --git a/src/components/BalanceTransferBody.vue b/src/components/BalanceTransferBody.vue
new file mode 100644
index 0000000..f3a267b
--- /dev/null
+++ b/src/components/BalanceTransferBody.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="col-sm-4 col-xs-12">
+    <q-input
+      v-model.number="amount"
+      type="number"
+      filled
+      label="Betrag"
+      step="0.1"
+      min="0"
+      suffix="€"
+    />
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <UserSelector v-model="receiver" label="Empfänger" />
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <q-btn
+      v-close-popup
+      style="width: 100%"
+      color="primary"
+      :disable="sendDisabled"
+      label="Senden"
+      @click="sendAmount"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from 'vue';
+import UserSelector from '@flaschengeist/users/src/components/UserSelector.vue';
+import { useBalanceStore } from '../store';
+import { useUserStore } from '@flaschengeist/api';
+export default defineComponent({
+  name: 'BalanceTransferBody',
+  components: { UserSelector },
+  props: {
+    user: {
+      type: [Object, String] as PropType<FG.User | string>,
+      required: true,
+    },
+  },
+  emits: {
+    changeBalance: (sender: FG.User, receiver: FG.User) => sender && receiver,
+  },
+  setup(props, { emit }) {
+    const store = useBalanceStore();
+    const userStore = useUserStore();
+    const receiver = ref<FG.User | undefined>(undefined);
+    const amount = ref<number>(0);
+    const sender = computed(() =>
+      (<FG.User>props.user).userid
+        ? <FG.User>props.user
+        : <FG.User>userStore.users.find((a) => a.userid === <string>props.user)
+    );
+
+    const sendDisabled = computed(() => {
+      return !(
+        receiver.value &&
+        sender.value &&
+        sender.value.userid != receiver.value.userid &&
+        amount.value > 0
+      );
+    });
+
+    async function sendAmount() {
+      if (receiver.value) {
+        await store.changeBalance(amount.value, receiver.value, sender.value);
+        emit('changeBalance', sender.value, receiver.value);
+      }
+    }
+    return {
+      receiver,
+      sender,
+      amount,
+      sendAmount,
+      sendDisabled,
+    };
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/src/pages/Admin.vue b/src/pages/Admin.vue
index eeab423..d4970cc 100644
--- a/src/pages/Admin.vue
+++ b/src/pages/Admin.vue
@@ -1,11 +1,90 @@
 <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-table :rows="rows" row-key="userid" :columns="columns">
+        <template #top-right>
+          <div class="full-width row q-gutter-sm">
+            <q-input
+              v-model.number="limit"
+              label="Limit"
+              type="number"
+              step="0.01"
+              suffix="€"
+              filled
+              dense
+            />
+            <q-btn label="Limits Setzen" color="primary" dense @click="setLimits(limit)" />
+          </div>
+        </template>
+        <template #body="props">
+          <q-tr :props="props">
+            <q-td key="userid" :props="props">
+              {{ getName(props.row.userid) }}
+            </q-td>
+            <q-td key="limit" :props="props">
+              {{ getLimit(props.row.userid) }}€
+              <q-popup-edit
+                v-slot="scope"
+                v-model="limit"
+                buttons
+                label-cancel="Abbrechen"
+                label-set="Speichern"
+                @save="setLimit(props.row.userid)"
+                @cancel="limit = undefined"
+              >
+                <q-input
+                  v-model.number="scope.value"
+                  label="Limit"
+                  type="number"
+                  step="0.01"
+                  suffix="€"
+                  filled
+                  dense
+                />
+              </q-popup-edit>
+            </q-td>
+            <q-td key="balance" :props="props">
+              {{ getBalance(props.row.debit, props.row.credit) }}€
+              <q-menu anchor="bottom middle" self="top middle" :persistent="$q.platform.is.mobile">
+                <q-card>
+                  <q-card-section>
+                    <q-tab-panels v-model="tab" animated>
+                      <q-tab-panel name="add" class="fit column q-gutter-sm">
+                        <balance-add-body
+                          :user="props.row.userid"
+                          :can-add-shortcut="false"
+                          @changeBalance="updateBalance"
+                        />
+                      </q-tab-panel>
+                      <q-tab-panel name="transfer" class="fit column q-gutter-sm">
+                        <balance-transfer-body
+                          :user="props.row.userid"
+                          @changeBalance="updateBalances"
+                        />
+                      </q-tab-panel>
+                    </q-tab-panels>
+                  </q-card-section>
+                  <div v-if="$q.platform.is.mobile" class="full-width row justify-center">
+                    <q-btn v-close-popup label="Abbrechen" flat color="primary" />
+                  </div>
+                  <q-tabs
+                    v-model="tab"
+                    dense
+                    class="text-grey"
+                    active-color="primary"
+                    indicator-color="primary"
+                    align="justify"
+                    narrow-indicator
+                  >
+                    <q-tab name="add" label="Anschreiben" />
+                    <q-tab name="transfer" label="Übertragen" />
+                  </q-tabs>
+                </q-card>
+              </q-menu>
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
     </q-page>
   </div>
 </template>
@@ -13,17 +92,27 @@
 <script lang="ts">
 // TODO: Fill usefull data
 
-import { ref, defineComponent, onMounted } from 'vue';
+import { ref, defineComponent, computed, onBeforeMount } from 'vue';
 import { useBalanceStore } from '../store';
+import {useUserStore} from '@flaschengeist/api';
+import BalanceAddBody from '../components/BalanceAddBody.vue';
+import BalanceTransferBody from '../components/BalanceTransferBody.vue';
 
 export default defineComponent({
+  components: { BalanceTransferBody, BalanceAddBody },
   // name: 'PageName'
   setup() {
     const store = useBalanceStore();
+    const userStore = useUserStore();
 
-    onMounted(() => void store.getBalances().then((balances) => rows.value.push(...balances)));
+    onBeforeMount(() => {
+      void store.getBalances();
+      void userStore.getUsers();
+      void store.getLimits();
+    });
 
-    const rows = ref(store.balances);
+    const rows = computed(() => store.balances);
+    const limit = ref<number>();
 
     const columns = [
       {
@@ -32,28 +121,94 @@ export default defineComponent({
         field: 'userid',
         required: true,
         align: 'left',
-        sortable: true
+        sortable: true,
+        format: getName,
       },
-      {
+      /*{
         name: 'credit',
         label: 'Haben',
         field: 'credit',
-        format: (val: number) => val.toFixed(2)
+        format: (val: number) => val.toFixed(2),
       },
       {
         name: 'debit',
         label: 'Soll',
         field: 'debit',
-        format: (val: number) => val.toFixed(2)
+        format: (val: number) => val.toFixed(2),
+      },*/
+      {
+        name: 'limit',
+        label: 'Limit',
+        align: 'right',
+        field: 'userid',
+        format: (_: undefined, row: { userid: string }) => getLimit(row.userid),
       },
       {
         name: 'balance',
         label: 'Kontostand',
+        align: 'right',
+        field: 'userid',
         format: (_: undefined, row: { debit: number; credit: number }) =>
-          (row.credit - row.debit).toFixed(2)
-      }
+          getBalance(row.debit, row.credit),
+        sortable: true,
+        sort: (
+          _: undefined,
+          __: undefined,
+          a: { debit: number; credit: number },
+          b: { debit: number; credit: number }
+        ) => {
+          return (
+            parseFloat(getBalance(a.debit, a.credit)) - parseFloat(getBalance(b.debit, b.credit))
+          );
+        },
+      },
     ];
-    return { rows, columns };
-  }
+
+    function getName(val: string) {
+      return userStore.users.find((a) => a.userid === val)?.display_name;
+    }
+
+    function getLimit(val: string) {
+      return store.user_limits.find((a) => a.userid === val)?.limit?.toFixed(2);
+    }
+
+    function getBalance(debit: number, credit: number) {
+      return (credit - debit).toFixed(2);
+    }
+
+    function updateBalance(user: FG.User) {
+      void store.getBalance(user);
+    }
+
+    function updateBalances(sender: FG.User, receiver: FG.User) {
+      updateBalance(sender);
+      updateBalance(receiver);
+    }
+
+    function setLimit(userid: string) {
+      setTimeout(() => {
+        void store.setLimit(<number>limit.value, userid);
+      }, 50);
+      setTimeout(() => {
+        limit.value = undefined;
+      }, 100);
+    }
+
+    const tab = ref('add');
+
+    return {
+      rows,
+      columns,
+      limit,
+      setLimits: store.setLimits,
+      getName,
+      getLimit,
+      setLimit,
+      getBalance,
+      updateBalance,
+      updateBalances,
+      tab,
+    };
+  },
 });
 </script>
diff --git a/src/pages/Overview.vue b/src/pages/Overview.vue
index fc421dd..2797f43 100644
--- a/src/pages/Overview.vue
+++ b/src/pages/Overview.vue
@@ -17,8 +17,12 @@
           binary-state-sort
           @request="onRequest"
         >
-          <template #top>
-            <q-toggle v-model="showCancelled" label="Stornierte einblenden" />
+          <template #top="props">
+            <q-toggle
+              v-model="showCancelled"
+              label="Stornierte einblenden"
+              @update:model-value="onRequest({ pagination: props.pagination })"
+            />
           </template>
           <template #body-cell="props">
             <q-td :props="props" :class="{ 'bg-grey': props.row.reversal_id != null }">
@@ -48,7 +52,7 @@ export default defineComponent({
       void userStore.getUsers().then(() =>
         onRequest({
           pagination: pagination.value,
-          filter: undefined
+          filter: undefined,
         })
       );
     });
@@ -58,10 +62,10 @@ export default defineComponent({
     const loading = ref(false);
     const pagination = ref({
       sortBy: 'time',
-      descending: false,
+      descending: true,
       page: 1,
-      rowsPerPage: 3,
-      rowsNumber: 10
+      rowsPerPage: 10,
+      rowsNumber: 10,
     });
 
     interface PaginationInterface {
@@ -85,7 +89,8 @@ export default defineComponent({
           offset: startRow,
           limit: fetchCount,
           showCancelled: showCancelled.value,
-          showReversals: false
+          showReversals: false,
+          descending,
         });
         // clear out existing data and add new
         data.value.splice(0, data.value.length, ...result.transactions);
@@ -110,7 +115,7 @@ export default defineComponent({
         field: 'time',
         required: true,
         sortable: true,
-        format: (val: Date) => formatDateTime(new Date(val), true, true, true)
+        format: (val: Date) => formatDateTime(new Date(val), true, true, true),
       },
       {
         name: 'type',
@@ -120,31 +125,18 @@ export default defineComponent({
           else {
             if (row.receiver_id == null) return 'Angeschrieben';
             else {
-              if (row.receiver_id === mainStore.currentUser.userid) return 'Bekommen von X';
-              else return 'Gesendet an X';
+              if (row.receiver_id === mainStore.currentUser.userid)
+                return `Bekommen von ${<string>getName(row.sender_id)}`;
+              else return `Gesendet an ${<string>getName(row.receiver_id)}`;
             }
           }
-        }
-      },
-      {
-        name: 'text',
-        label: 'Text',
-        format: (_: undefined, row: FG.Transaction) => {
-          if (row.sender_id == null) return 'Gutschrift';
-          else {
-            if (row.receiver_id == null) return 'Angeschrieben';
-            else {
-              if (row.receiver_id === mainStore.currentUser.userid) return 'Bekommen von X';
-              else return 'Gesendet an X';
-            }
-          }
-        }
+        },
       },
       {
         name: 'amount',
         label: 'Betrag',
         field: 'amount',
-        format: (val: number) => `${val.toFixed(2)}€`
+        format: (val: number) => `${val.toFixed(2)}€`,
       },
       {
         name: 'author_id',
@@ -154,11 +146,15 @@ export default defineComponent({
           const user = userStore.users.filter((x) => x.userid == val);
           if (user.length > 0) return user[0].display_name;
           else return val;
-        }
-      }
+        },
+      },
     ];
 
+    function getName(userid: string) {
+      return userStore.users.find((a) => a.userid === userid)?.display_name;
+    }
+
     return { data, pagination, onRequest, loading, balance, columns, showCancelled };
-  }
+  },
 });
 </script>
diff --git a/src/store.ts b/src/store.ts
index 6394acc..d997519 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,4 +1,4 @@
-import { api, useMainStore } from '@flaschengeist/api';
+import { api, useMainStore, useUserStore } from '@flaschengeist/api';
 import { defineStore } from 'pinia';
 import { AxiosResponse } from 'axios';
 import { Notify } from 'quasar';
@@ -19,6 +19,11 @@ export interface TransactionsResponse {
   count?: number;
 }
 
+export interface UserLimit {
+  userid: string;
+  limit?: number;
+}
+
 function fixTransaction(t: FG.Transaction) {
   t.time = new Date(t.time);
 }
@@ -31,10 +36,11 @@ export const useBalanceStore = defineStore({
     shortcuts: [] as number[],
     transactions: [] as FG.Transaction[],
     _balances_dirty: 0,
+    user_limits: [] as Array<UserLimit>,
   }),
 
   getters: {
-    balance(): BalancesResponse | undefined {
+    balance() {
       const mainStore = useMainStore();
       return this.balances.find((v) => v.userid === mainStore.user?.userid);
     },
@@ -58,9 +64,7 @@ export const useBalanceStore = defineStore({
     async getShortcuts(force = false) {
       if (force || this.shortcuts.length == 0) {
         const mainStore = useMainStore();
-        const { data } = await api.get<number[]>(
-          `/users/${mainStore.currentUser.userid}/balance/shortcuts`
-        );
+        const { data } = await api.get<number[]>(`/users/${mainStore.currentUser.userid}/balance/shortcuts`);
         this.shortcuts = data;
       }
     },
@@ -74,11 +78,7 @@ export const useBalanceStore = defineStore({
     },
 
     async getBalances(force = false) {
-      if (
-        force ||
-        this.balances.length == 0 ||
-        new Date().getTime() - this._balances_dirty > 60000
-      ) {
+      if (force || this.balances.length == 0 || new Date().getTime() - this._balances_dirty > 60000) {
         const { data } = await api.get<BalancesResponse[]>('/balance');
         this.balances = data;
       }
@@ -94,10 +94,7 @@ export const useBalanceStore = defineStore({
           sender: sender?.userid,
         });
         fixTransaction(data);
-        if (
-          user.userid === mainStore.currentUser.userid ||
-          sender?.userid === mainStore.currentUser.userid
-        )
+        if (user.userid === mainStore.currentUser.userid || sender?.userid === mainStore.currentUser.userid)
           this.transactions.push(data);
         const f = this.balances.find((x) => x.userid === user.userid);
         if (f) f.balance += amount;
@@ -134,14 +131,14 @@ export const useBalanceStore = defineStore({
             to?: Date;
             showReversals?: boolean;
             showCancelled?: boolean;
+            descending?: boolean;
           }
         | undefined = undefined
     ) {
       if (!filter) filter = { limit: 10 };
-      const { data } = await api.get<TransactionsResponse>(
-        `/users/${user.userid}/balance/transactions`,
-        { params: filter }
-      );
+      const { data } = await api.get<TransactionsResponse>(`/users/${user.userid}/balance/transactions`, {
+        params: filter,
+      });
       data.transactions.forEach((t) => fixTransaction(t));
       if (data.transactions) this.transactions.push(...data.transactions);
       return data;
@@ -160,5 +157,32 @@ export const useBalanceStore = defineStore({
       }
       this._balances_dirty = 0;
     },
+
+    async getLimits() {
+      const { data } = await api.get<Array<UserLimit>>('users/balance/limit');
+      this.user_limits = data;
+    },
+
+    async setLimits(limit: number) {
+      await api.put('users/balance/limit', { limit });
+      useUserStore().users.forEach((user) => {
+        const user_limit = this.user_limits.find((a) => a.userid === user.userid);
+        if (user_limit) {
+          user_limit.limit = limit;
+        } else {
+          this.user_limits.push({ userid: user.userid, limit });
+        }
+      });
+    },
+
+    async setLimit(limit: number, userid: string) {
+      await api.put(`users/${userid}/balance/limit`, { limit });
+      const user_limit = this.user_limits.find((a) => a.userid === userid);
+      if (user_limit) {
+        user_limit.limit = limit;
+      } else {
+        this.user_limits.push({ userid, limit });
+      }
+    },
   },
 });