update version to 1.0.0

default, there is a negative sign (in color red)
When you click on the sign, the sign change
When the sign is a positive sigen the color ist turquoise

.eslintrc.js

@@ -17,11 +17,11 @@ module.exports = {
     project: resolve(__dirname, './tsconfig.json'),
     tsconfigRootDir: __dirname,
     ecmaVersion: 2019, // Allows for the parsing of modern ECMAScript features
-    sourceType: 'module' // Allows for the use of imports
+    sourceType: 'module', // Allows for the use of imports
   },
 
   env: {
-    browser: true
+    browser: true,
   },
 
   // Rules order is important, please avoid shuffling them
@@ -44,7 +44,7 @@ module.exports = {
 
     // https://github.com/prettier/eslint-config-prettier#installation
     // usage with Prettier, provided by 'eslint-config-prettier'.
-    'prettier', //'plugin:prettier/recommended'
+    'plugin:prettier/recommended',
   ],
 
   plugins: [
@@ -54,10 +54,6 @@ module.exports = {
     // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-file
     // required to lint *.vue files
     'vue',
-
-    // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
-    // Prettier has not been included as plugin to avoid performance impact
-    // add it as an extension for your IDE
   ],
 
   // add your custom rules here
@@ -65,11 +61,11 @@ module.exports = {
     'prefer-promise-reject-errors': 'off',
 
     // TypeScript
-    quotes: ['warn', 'single', { avoidEscape: true }],
+    quotes: ['error', 'single', { avoidEscape: true }],
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
 
     // allow debugger during development only
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  }
-}
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  },
+};

.gitignore

@@ -1,3 +1,6 @@
 node_modules
 yarn-error.log
+# No need for pinned dependencies, there are only peer dependencies
 yarn.lock
+
+.idea

.npmignore

@@ -0,0 +1,3 @@
+yarn-error.log
+
+.woodpecker/

.woodpecker/deploy.yml

@@ -0,0 +1,14 @@
+pipeline:
+  deploy:
+    when:
+      event: tag
+      tag: v*
+    image: node:lts-alpine
+    commands:
+      - echo "//registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN" > .npmrc
+      - yarn publish --non-interactive
+    secrets: [ node_auth_token ]
+
+depends_on:
+  - lint
+

.woodpecker/lint.yml

@@ -0,0 +1,9 @@
+pipeline:
+  lint:
+    when:
+      branch: [main, develop]
+    image: node:lts-alpine
+    commands:
+      - yarn install
+      - yarn lint
+

README.md

@@ -1,4 +1,5 @@
 # Flaschengeist `balance` fontend-plugin
+![status-badge](https://ci.os-sc.org/api/badges/Flaschengeist/flaschengeist-balance/status.svg)
 
 This package provides the [Flaschengeist](https://flaschengeist.dev/Flaschengeist/flaschengeist) frontend for the `balance` plugin.
 

package.json

@@ -1,46 +1,49 @@
 {
-    "license": "MIT",
-    "version": "1.0.0-alpha.1",
-    "name": "@flaschengeist/balance",
-    "author": "Ferdinand Thiessen <rpm@fthiessen.de>",
-    "homepage": "https://flaschengeist.dev/Flaschengeist",
-    "description": "Flaschengeist balance plugin",
-    "bugs": {
-      "url": "https://flaschengeist.dev/Flaschengeist/flaschengeist/issues"
-    },
-    "repository": {
-      "type": "git",
-      "url": "https://flaschengeist.dev/Flaschengeist/flaschengeist-balance"
-    },
-    "main": "src/index.ts",
-    "types": "src/api.d.ts",
-    "scripts": {
-      "pretty": "prettier --config ./package.json  --write '{,!(node_modules)/**/}*.ts'",
-      "lint": "eslint --ext .js,.ts,.vue ./src"
-    },
-    "devDependencies": {
-      "@flaschengeist/types": "^1.0.0-alpha.1",
-      "@quasar/app": "^3.0.0-beta.25",
-      "@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",
-      "prettier": "^2.3.0",
-      "quasar": "^2.0.0-beta.18",
-      "typescript": "^4.2.4"
-    },
-    "peerDependencies": {
-      "@flaschengeist/api": "1.0.0-alpha.1",
-      "@flaschengeist/users": "1.0.0-alpha.1"
-    },
-    "prettier": {
-      "singleQuote": true,
-      "semi": true,
-      "printWidth": 120,
-      "arrowParens": "always"
-    }
+  "license": "MIT",
+  "version": "1.0.0",
+  "name": "@flaschengeist/balance",
+  "author": "Ferdinand Thiessen <rpm@fthiessen.de>",
+  "homepage": "https://flaschengeist.dev/Flaschengeist",
+  "description": "Flaschengeist balance plugin",
+  "bugs": {
+    "url": "https://flaschengeist.dev/Flaschengeist/flaschengeist/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://flaschengeist.dev/Flaschengeist/flaschengeist-balance"
+  },
+  "main": "src/index.ts",
+  "types": "src/api.d.ts",
+  "scripts": {
+    "format": "prettier --config ./package.json --write '{,!(node_modules)/**/}*.{js,ts,vue}'",
+    "lint": "eslint --ext .js,.ts,.vue ./src"
+  },
+  "devDependencies": {
+    "@flaschengeist/api": "^1.0.0",
+    "@flaschengeist/types": "^1.0.0",
+    "@quasar/app-webpack": "^3.7.2",
+    "@typescript-eslint/eslint-plugin": "^5.8.0",
+    "@typescript-eslint/parser": "^5.8.0",
+    "axios": "^0.24.0",
+    "eslint": "^8.5.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.2.0",
+    "eslint-webpack-plugin": "^3.1.1",
+    "modify-source-webpack-plugin": "^3.0.0",
+    "pinia": "^2.0.8",
+    "prettier": "^2.5.1",
+    "quasar": "^2.11.10",
+    "typescript": "^4.5.4"
+  },
+  "peerDependencies": {
+    "@flaschengeist/api": "1.0.0",
+    "@flaschengeist/users": "1.0.0"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "semi": true,
+    "printWidth": 120,
+    "arrowParens": "always"
   }
-  
+}

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;
+  }
 }

src/balance.d.ts

@@ -0,0 +1,20 @@
+import { FG_Plugin } from '@flaschengeist/types';
+
+export interface SendFromNotification {
+  receiver_id: string;
+}
+
+export interface SendToNotification {
+  sender_id: string;
+}
+
+export interface TransactionNotification {
+  author_id: string;
+}
+
+export interface BalanceNotification extends FG_Plugin.Notification {
+  data: {
+    type: number;
+    amount: number;
+  } & (SendFromNotification | SendToNotification | TransactionNotification);
+}

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" can-add-shortcut />
     </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,
     };
   },
 });

src/components/BalanceAddBody.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="col-sm-4 col-xs-12">
+    <q-input
+      v-model.number="amount"
+      ref="refAmount"
+      type="number"
+      filled
+      label="Eigener Betrag"
+      step="0.1"
+      min="0"
+      suffix="€"
+      :rules="[check_cent_step]"
+    />
+  </div>
+  <div class="col-sm-4 col-xs-6">
+    <q-btn 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"
+      style="width: 100%"
+      color="secondary"
+      label="Gutschreiben"
+      @click="changeBalance(amount)"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref, PropType, computed, watch } from 'vue';
+import { QInput } from 'quasar';
+import { useBalanceStore } from '../store';
+import { hasPermission, useUserStore } from '@flaschengeist/api';
+import PERMISSIONS from '../permissions';
+import { check_cent_step } from '../utils';
+export default defineComponent({
+  name: 'BalanceAddBody',
+  props: {
+    user: {
+      type: [Object, String] as PropType<FG.User | string>,
+      required: true,
+    },
+    canAddShortcut: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: {
+    'change-balance': (user: FG.User) => user,
+  },
+  setup(props, { emit }) {
+    const store = useBalanceStore();
+    const userStore = useUserStore();
+    const amount = ref<number>(0);
+    const refAmount = ref<QInput>();
+    async function changeBalance(amount: number) {
+      await refAmount.value?.validate();
+      if (amount != 0 && !refAmount.value?.hasError) await store.changeBalance(amount, user.value);
+      emit('change-balance', user.value);
+    }
+    async function addShortcut() {
+      await refAmount.value?.validate();
+      if (amount.value != 0 && !refAmount.value?.hasError) 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)
+    );
+    watch(amount, (a) => {
+      amount.value = Math.abs(a);
+    });
+    return { changeBalance, addShortcut, canAddCredit, amount, check_cent_step, refAmount };
+  },
+});
+</script>
+
+<style scoped></style>

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) : parseInt('0').toFixed(2) }} €
         <q-badge v-if="isLocked" color="negative" align="top"> gesperrt </q-badge>
       </div>
       <q-spinner v-else color="primary" size="3em" />
@@ -10,8 +10,10 @@
     <div v-if="showSelector" class="col-6">
       <UserSelector v-model="user" />
     </div>
-    <div class="col-1 justify-end">
-      <q-btn round flat icon="mdi-format-list-checks" @click="openHistory" />
+    <div class="col">
+      <div class="row fit justify-end content-end items-end">
+        <q-btn round flat icon="mdi-format-list-checks" @click="openHistory" />
+      </div>
     </div>
   </q-card-section>
 </template>
@@ -22,7 +24,6 @@ import UserSelector from '@flaschengeist/users/src/components/UserSelector.vue';
 import { useMainStore } from '@flaschengeist/api';
 import { useBalanceStore } from '../store';
 
-
 export default defineComponent({
   name: 'BalanceHeader',
   components: { UserSelector },
@@ -40,9 +41,7 @@ export default defineComponent({
 
     onBeforeMount(() => void store.getBalance(mainStore.currentUser));
 
-    const balance = computed(() =>
-      store.balances.find((x) => x.userid === props.modelValue.userid)
-    );
+    const balance = computed(() => store.balances.find((x) => x.userid === props.modelValue.userid));
 
     const isLocked = computed(
       () =>

src/components/BalanceTransaction.vue

@@ -35,7 +35,7 @@ import { ref, computed, defineComponent, onUnmounted, onMounted, PropType } from
 import { useBalanceStore } from '../store';
 
 export default defineComponent({
-  name: 'Transaction',
+  name: 'BalanceTransaction',
   props: {
     transaction: {
       required: true,

src/components/BalanceTransfer.vue

@@ -3,21 +3,7 @@
     <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>
+      <balance-transfer-body :user="sender" />
     </q-card-section>
   </q-card>
 </template>
@@ -25,36 +11,20 @@
 <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,
     };
   },

src/components/BalanceTransferBody.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="col-sm-4 col-xs-12">
+    <q-input
+      v-model.number="amount"
+      ref="refAmount"
+      type="number"
+      filled
+      label="Betrag"
+      step="0.1"
+      min="0"
+      suffix="€"
+      :rules="[check_cent_step]"
+    />
+  </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>
+</template>
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from 'vue';
+import { QInput } from 'quasar';
+import UserSelector from '@flaschengeist/users/src/components/UserSelector.vue';
+import { useBalanceStore } from '../store';
+import { check_cent_step } from '../utils';
+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, receiver }: { 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 refAmount = ref<QInput>();
+    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 &&
+        !refAmount.value?.hasError
+      );
+    });
+
+    async function sendAmount() {
+      await refAmount.value?.validate();
+      if (receiver.value && !refAmount.value?.hasError) {
+        await store.changeBalance(amount.value, receiver.value, sender.value);
+        emit('changeBalance', { sender: sender.value, receiver: receiver.value });
+      }
+    }
+    return {
+      receiver,
+      sender,
+      amount,
+      sendAmount,
+      sendDisabled,
+      refAmount,
+      check_cent_step,
+    };
+  },
+});
+</script>
+
+<style scoped></style>

src/components/Widget.vue

@@ -21,7 +21,7 @@ export default defineComponent({
       void store.getBalance(mainStore.currentUser);
     });
 
-    const balance = computed(() => store.balance?.balance || NaN);
+    const balance = computed(() => store.balance?.balance || 0);
 
     return { balance };
   },

src/index.ts

@@ -1,13 +1,46 @@
 import { FG_Plugin } from '@flaschengeist/types';
 import { defineAsyncComponent } from 'vue';
 import routes from './routes';
+import { BalanceNotification, SendFromNotification, SendToNotification, TransactionNotification } from 'app/balance';
+import { useUserStore } from '@flaschengeist/api';
+
+const BalanceTypes = {
+  send_to: 0x01,
+  send_from: 0x02,
+  add_from: 0x03,
+  sub_from: 0x04,
+};
+
+function transpile (msg: FG_Plugin.Notification) {
+  console.log('notification:', msg);
+  const message = msg as BalanceNotification;
+  message.icon = 'mdi-cash';
+  const store = useUserStore();
+  void store.getUsers();
+  if (message.data.type === BalanceTypes.send_from) {
+    const receiver = <FG.User>store.findUser((<SendFromNotification>message.data).receiver_id);
+    const author = <FG.User>store.findUser((<SendFromNotification>message.data).author_id);
+    message.text = `${author.display_name} hat ${message.data.amount.toFixed(2)}€ von dir zu ${receiver.display_name
+      } überwiesen.`;
+  } else if (message.data.type === BalanceTypes.send_to) {
+    const sender = <FG.User>store.findUser((<SendToNotification>message.data).sender_id);
+    console.log(sender);
+    message.text = `${sender.display_name} hat dir ${message.data.amount.toFixed(2)}€ überwiesen.`;
+  } else {
+    const author = <FG.User>store.findUser((<TransactionNotification>message.data).author_id);
+    const abgebucht = message.data.type === BalanceTypes.add_from ? 'aufgeladen' : 'abgebucht';
+    message.text = `${author.display_name} hat ${message.data.amount.toFixed(2)}€ dir ${abgebucht}.`;
+  }
+  return message;
+}
 
 const plugin: FG_Plugin.Plugin = {
   id: 'balance',
   name: 'Balance',
   innerRoutes: routes,
   requiredModules: [['balance']],
-  version: '0.0.2',
+  version: '1.0.0',
+  notification: transpile,
   widgets: [
     {
       priority: 0,

src/pages/Admin.vue

@@ -1,59 +0,0 @@
-<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>

src/pages/BalanceAdminPage.vue

@@ -0,0 +1,314 @@
+<template>
+  <q-page padding>
+    <q-table
+      v-model:pagination="pagination"
+      :rows="rows"
+      row-key="userid"
+      :columns="columns"
+      :filter="filter"
+      @request="onRequest"
+    >
+      <template #top-right>
+        <div class="full-width row q-gutter-sm">
+          <q-input v-model="filter" label="Filter" filled dense debounce="300">
+            <template #append>
+              <q-icon name="mdi-magnify" />
+            </template>
+          </q-input>
+          <q-input
+            ref="refLimit"
+            v-model.number="limit"
+            label="Limit"
+            type="number"
+            step="0.01"
+            suffix="€"
+            filled
+            dense
+            :rules="[check_cent_step]"
+          >
+            <template #prepend>
+              <q-btn
+                :icon="sign === '+' ? 'mdi-plus' : 'mdi-minus'"
+                round
+                flat
+                :text-color="sign === '+' ? 'secondary' : 'negative'"
+                @click="changeSign"
+              />
+            </template>
+          </q-input>
+          <q-btn label="Limits Setzen" color="primary" dense @click="setLimits(limit)" />
+        </div>
+      </template>
+      <template #body="props">
+        <q-tr :props="props">
+          <q-td key="firstname" :props="props">
+            {{ getFirstname(props.row.userid) }}
+          </q-td>
+          <q-td key="lastname" :props="props">
+            {{ getLastname(props.row.userid) }}
+          </q-td>
+          <q-td key="limit" :props="props">
+            {{ getLimit(props.row.userid) || 'Kein Limit' }}
+            <q-popup-edit
+              v-slot="scope"
+              v-model="limit"
+              buttons
+              label-cancel="Abbrechen"
+              label-set="Speichern"
+              @save="setLimit($event, props.row.userid)"
+              @cancel="limit = undefined"
+            >
+              <q-input v-model.number="scope.value" label="Limit" type="number" step="0.01" suffix="€" filled dense>
+                <template #prepend>
+                  <q-btn :icon="sign === '+' ? 'mdi-plus' : 'mdi-minus'" round flat @click="changeSign" />
+                </template>
+              </q-input>
+            </q-popup-edit>
+          </q-td>
+          <q-td key="balance" :props="props">
+            {{ getBalance(props.row.debit, props.row.credit) }}€
+            <q-menu
+              v-model="showMenu[props.row.userid]"
+              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"
+                        @change-balance="updateBalance($event, props.row.userid)"
+                      />
+                    </q-tab-panel>
+                    <q-tab-panel name="transfer" class="fit column q-gutter-sm">
+                      <balance-transfer-body
+                        :user="props.row.userid"
+                        @change-balance="updateBalances($event, $event, props.row.userid)"
+                      />
+                    </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>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent, computed, onBeforeMount } from 'vue';
+import { QInput } from 'quasar';
+import { check_cent_step } from '../utils';
+import { useBalanceStore } from '../store';
+import { useUserStore } from '@flaschengeist/api';
+import BalanceAddBody from '../components/BalanceAddBody.vue';
+import BalanceTransferBody from '../components/BalanceTransferBody.vue';
+
+export default defineComponent({
+  name: 'BalanceAdminPage',
+  components: { BalanceTransferBody, BalanceAddBody },
+  setup() {
+    const store = useBalanceStore();
+    const userStore = useUserStore();
+
+    const showMenu = ref<{ [userid: string]: boolean }>({});
+    const refLimit = ref<QInput>();
+
+    onBeforeMount(() => {
+      void userStore.getUsers();
+      void store.getLimits();
+      void onRequest({ pagination: pagination.value, filter: filter.value });
+    });
+
+    const rows = computed(() => store.balances);
+    const limit = ref<number>();
+    const sign = ref<'+' | '-'>('-');
+    const filter = ref<string>();
+
+    const columns = [
+      {
+        name: 'firstname',
+        label: 'Vorname',
+        field: 'userid',
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'lastname',
+        label: 'Vorname',
+        field: 'userid',
+        align: 'left',
+        sortable: true,
+      },
+      {
+        name: 'limit',
+        label: 'Limit',
+        align: 'right',
+        field: 'userid',
+        format: (_: undefined, row: { userid: string }) => getLimit(row.userid),
+        sortable: true,
+      },
+      {
+        name: 'balance',
+        label: 'Kontostand',
+        align: 'right',
+        field: 'userid',
+        format: (_: undefined, row: { debit: number; credit: number }) => getBalance(row.debit, row.credit),
+        sortable: true,
+      },
+    ];
+
+    interface PaginationInterface {
+      sortBy: string;
+      descending: boolean;
+      page: number;
+      rowsPerPage: number;
+      rowsNumber: number;
+    }
+
+    const pagination = ref<PaginationInterface>({
+      sortBy: 'lastname',
+      rowsPerPage: 5,
+      rowsNumber: 10,
+      descending: false,
+      page: 1,
+    });
+
+    const loading = ref(false);
+
+    async function onRequest(props: { pagination: PaginationInterface; filter?: string }) {
+      const { page, rowsPerPage, sortBy, descending } = props.pagination;
+      const filter = props.filter;
+      loading.value = true;
+      const fetchCount = rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage;
+      const startRow = (page - 1) * rowsPerPage;
+
+      try {
+        const result = await store.getBalances({
+          limit: fetchCount,
+          offset: startRow,
+          descending: descending ? true : undefined,
+          sortBy,
+          filter,
+        });
+        pagination.value.page = page;
+        pagination.value.rowsPerPage = rowsPerPage;
+        pagination.value.sortBy = sortBy;
+        pagination.value.descending = descending;
+        if (result.count) pagination.value.rowsNumber = result.count;
+      } catch (error) {
+        console.warn(error);
+      }
+      //console.log(pagination.value);
+      loading.value = false;
+    }
+
+    function getName(val: string) {
+      return userStore.users.find((a) => a.userid === val)?.display_name;
+    }
+
+    function getLimit(val: string) {
+      const limit = store.user_limits.find((a) => a.userid === val)?.limit?.toFixed(2);
+      return limit ? `${limit} €` : undefined;
+    }
+
+    function getBalance(debit: number, credit: number) {
+      return (credit - debit).toFixed(2);
+    }
+
+    async function updateBalance(user: FG.User, ref_showMenu?: string) {
+      await store.getBalance(user);
+      if (ref_showMenu) {
+        showMenu.value[ref_showMenu] = false;
+      }
+    }
+    async function updateBalances({ sender, receiver }: { sender: FG.User; receiver: FG.User }, ref_showMenu?: string) {
+      await updateBalance(sender);
+      await updateBalance(receiver);
+      if (ref_showMenu) {
+        showMenu.value[ref_showMenu] = false;
+      }
+    }
+
+    async function setLimit(l: number, userid: string) {
+      if (sign.value === '-') {
+        l = -l;
+      }
+      await refLimit.value?.validate();
+      if (refLimit.value?.hasError) {
+        return;
+      }
+      await store.setLimit(l, userid);
+      limit.value = undefined;
+    }
+
+    function getFirstname(userid: string) {
+      return userStore.users.find((a) => a.userid === userid)?.firstname;
+    }
+
+    function getLastname(userid: string) {
+      return userStore.users.find((a) => a.userid === userid)?.lastname;
+    }
+
+    function changeSign() {
+      sign.value = sign.value === '+' ? '-' : '+';
+    }
+
+    async function setLimits(l: number) {
+      if (sign.value === '-') {
+        l = -l;
+      }
+      await refLimit.value?.validate();
+      if (refLimit.value?.hasError) {
+        return;
+      }
+      void store.setLimits(l);
+    }
+
+    const tab = ref('add');
+    return {
+      rows,
+      columns,
+      limit,
+      setLimits,
+      getName,
+      getLimit,
+      setLimit,
+      getBalance,
+      updateBalance,
+      updateBalances,
+      tab,
+      pagination,
+      onRequest,
+      getFirstname,
+      getLastname,
+      filter,
+      showMenu,
+      sign,
+      changeSign,
+      check_cent_step,
+      refLimit,
+    };
+  },
+});
+</script>

src/pages/BalanceOverviewPage.vue

@@ -10,6 +10,7 @@
         <q-table
           v-model:pagination="pagination"
           title="Buchungen"
+          flat
           :rows="data"
           :columns="columns"
           row-key="id"
@@ -17,8 +18,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 }">
@@ -33,22 +38,27 @@
 
 <script lang="ts">
 import { formatDateTime, useMainStore, useUserStore } from '@flaschengeist/api';
-import { computed, defineComponent, onMounted, ref } from 'vue';
+import { computed, defineComponent, onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { useBalanceStore } from '../store';
 
 export default defineComponent({
-  // name: 'PageName'
+  name: 'BalanceOverviewPage',
   setup() {
     const store = useBalanceStore();
     const mainStore = useMainStore();
     const userStore = useUserStore();
+    const router = useRouter();
+    const route = useRoute();
 
-    onMounted(() => {
+    onMounted(async () => {
+      if (route.query?.showCancelled == 'true') showCancelled.value = true;
+      await router.replace({ query: { showCancelled: showCancelled.value } });
       void store.getBalance(mainStore.currentUser);
       void userStore.getUsers().then(() =>
         onRequest({
           pagination: pagination.value,
-          filter: undefined
+          filter: undefined,
         })
       );
     });
@@ -58,10 +68,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 +95,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);
@@ -101,7 +112,7 @@ export default defineComponent({
       loading.value = false;
     }
 
-    const balance = computed(() => store.balance?.balance || NaN);
+    const balance = computed(() => store.balance?.balance || 0);
 
     const columns = [
       {
@@ -110,7 +121,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 +131,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 +152,23 @@ 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;
+    }
+
+    watch(showCancelled, async () => {
+      await router.replace({ query: { showCancelled: showCancelled.value } });
+      await onRequest({
+        pagination: pagination.value,
+        filter: undefined,
+      });
+    });
+
     return { data, pagination, onRequest, loading, balance, columns, showCancelled };
-  }
+  },
 });
 </script>

src/pages/MainPage.vue

@@ -1,12 +1,7 @@
 <template>
   <q-page padding class="fit row justify-center content-start items-start q-gutter-sm">
     <q-tabs v-if="$q.screen.gt.sm" v-model="tab">
-      <q-tab
-        v-for="(tabindex, index) in tabs"
-        :key="'tab' + index"
-        :name="tabindex.name"
-        :label="tabindex.label"
-      />
+      <q-tab v-for="(tabindex, index) in tabs" :key="'tab' + index" :name="tabindex.name" :label="tabindex.label" />
     </q-tabs>
     <div v-else class="fit row justify-end">
       <q-btn
@@ -33,18 +28,13 @@
       </q-list>
       <q-list v-if="show">
         <div v-for="(transaction, index) in transactions" :key="index" class="col-sm-12">
-          <Transaction v-model:transaction="transactions[index]" />
+          <balance-transaction v-model:transaction="transactions[index]" @update:transaction="updateBalance" />
         </div>
       </q-list>
     </q-drawer>
-    <q-tab-panels
-      v-model="tab"
-      style="background-color: transparent"
-      class="q-pa-none col-12"
-      animated
-    >
+    <q-tab-panels v-model="tab" style="background-color: transparent" class="q-pa-none col-12" animated>
       <q-tab-panel name="add" class="q-px-xs">
-        <BalanceAdd
+        <balance-add
           @open-history="
             showDrawer = !showDrawer;
             show = true;
@@ -52,7 +42,7 @@
         />
       </q-tab-panel>
       <q-tab-panel name="transfer" class="q-px-xs">
-        <BalanceTransfer
+        <balance-transfer
           @open-history="
             showDrawer = !showDrawer;
             show = true;
@@ -64,23 +54,31 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, onMounted } from 'vue';
+import { computed, defineComponent, ref, onMounted, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { hasSomePermissions, useMainStore } from '@flaschengeist/api';
-import BalanceTransfer from '../components/BalanceTransfer.vue';
-import Transaction from '../components/Transaction.vue';
-import BalanceAdd from '../components/BalanceAdd.vue';
 import { useBalanceStore } from '../store';
 import PERMISSIONS from '../permissions';
 
+import BalanceTransaction from '../components/BalanceTransaction.vue';
+import BalanceTransfer from '../components/BalanceTransfer.vue';
+import BalanceAdd from '../components/BalanceAdd.vue';
+
 export default defineComponent({
   name: 'BalanceManage',
-  components: { BalanceAdd, BalanceTransfer, Transaction },
+  components: { BalanceAdd, BalanceTransfer, BalanceTransaction },
   setup() {
     const balanceStore = useBalanceStore();
     const mainStore = useMainStore();
+    const router = useRouter();
+    const route = useRoute();
 
     const now = new Date();
-    onMounted(() => {
+    onMounted(async () => {
+      if (tabs.some((value) => value.name == route.query.q_tab)) {
+        tab.value = route.query.q_tab as string;
+      }
+      await router.replace({ query: { q_tab: tab.value } });
       void balanceStore.getTransactions(mainStore.currentUser, {
         from: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
       });
@@ -93,8 +91,7 @@ export default defineComponent({
         .sort((a, b) => (a.time >= b.time ? -1 : 1));
     });
 
-    const canAdd = () =>
-      hasSomePermissions([PERMISSIONS.DEBIT, PERMISSIONS.CREDIT, PERMISSIONS.DEBIT_OWN]);
+    const canAdd = () => hasSomePermissions([PERMISSIONS.DEBIT, PERMISSIONS.CREDIT, PERMISSIONS.DEBIT_OWN]);
 
     interface Tab {
       name: string;
@@ -121,6 +118,9 @@ export default defineComponent({
 */
     const showDrawer = ref<boolean>(false);
     const tab = ref<string>(canAdd() ? 'add' : 'transfer');
+    watch(tab, (val) => {
+      void router.replace({ query: { q_tab: val } });
+    });
     const show = ref<boolean>(false);
     return {
       showDrawer,
@@ -128,6 +128,7 @@ export default defineComponent({
       tabs,
       transactions,
       show,
+      updateBalance: () => balanceStore.getBalance(mainStore.currentUser),
     };
   },
 });

src/routes/index.ts

@@ -19,7 +19,7 @@ const mainRoutes: FG_Plugin.MenuRoute[] = [
         route: {
           path: 'overview',
           name: 'balance-view',
-          component: () => import('../pages/Overview.vue'),
+          component: () => import('../pages/BalanceOverviewPage.vue'),
         },
       },
       {
@@ -40,7 +40,7 @@ const mainRoutes: FG_Plugin.MenuRoute[] = [
         route: {
           path: 'admin',
           name: 'balance-admin',
-          component: () => import('../pages/Admin.vue'),
+          component: () => import('../pages/BalanceAdminPage.vue'),
         },
       },
     ],

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,6 +36,7 @@ export const useBalanceStore = defineStore({
     shortcuts: [] as number[],
     transactions: [] as FG.Transaction[],
     _balances_dirty: 0,
+    user_limits: [] as Array<UserLimit>,
   }),
 
   getters: {
@@ -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;
       }
     },
@@ -73,16 +77,18 @@ export const useBalanceStore = defineStore({
       return data;
     },
 
-    async getBalances(force = false) {
-      if (
-        force ||
-        this.balances.length == 0 ||
-        new Date().getTime() - this._balances_dirty > 60000
-      ) {
-        const { data } = await api.get<BalancesResponse[]>('/balance');
-        this.balances = data;
-      }
-      return this.balances;
+    async getBalances(filter?: {
+      limit?: number;
+      offset?: number;
+      sortBy?: string;
+      descending?: boolean;
+      filter?: string;
+    }) {
+      const { data } = await api.get<{ balances: BalancesResponse[]; count: number }>('/balance', {
+        params: filter,
+      });
+      this.balances = data.balances;
+      return { balances: this.balances, count: data.count };
     },
 
     async changeBalance(amount: number, user: FG.User, sender: FG.User | undefined = undefined) {
@@ -94,10 +100,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;
@@ -128,22 +131,28 @@ export const useBalanceStore = defineStore({
       user: FG.User,
       filter:
         | {
-            limit?: number;
-            offset?: number;
-            from?: Date;
-            to?: Date;
-            showReversals?: boolean;
-            showCancelled?: boolean;
-          }
+          limit?: number;
+          offset?: number;
+          from?: Date;
+          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);
+      if (data.transactions) {
+        data.transactions.forEach((t) => {
+          const idx = this.transactions.findIndex((x) => x.id === t.id);
+          if (idx == -1) this.transactions.push(t);
+          else this.transactions[idx] = t;
+        });
+      }
       return data;
     },
 
@@ -160,5 +169,34 @@ export const useBalanceStore = defineStore({
       }
       this._balances_dirty = 0;
     },
+
+    async getLimits(filter?: { userids: undefined | string }) {
+      const { data } = await api.get<Array<UserLimit>>('users/balance/limit', {
+        params: filter,
+      });
+      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 });
+      }
+    },
   },
 });

src/utils/index.ts

@@ -0,0 +1,3 @@
+export function check_cent_step(value: number): boolean | string {
+  return (value * 100) % 1 === 0 || 'Betrag muss in 1-Cent-Schritten angegeben werden';
+}

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@quasar/app/tsconfig-preset",
+  "extends": "@quasar/app-webpack/tsconfig-preset",
   "target": "esnext",
   "compilerOptions": {
     "baseUrl": "src/",