[balance] modify balance in admin page

src/plugins/balance/components/BalanceAdd.vue

@@ -21,37 +21,7 @@
       </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,13 +30,14 @@
 import { computed, ref, defineComponent, onBeforeMount } from 'vue';
 import { hasPermission } from 'src/utils/permission';
 import BalanceHeader from '../components/BalanceHeader.vue';
+import BalanceAddBody from 'src/plugins/balance/components/BalanceAddBody.vue';
 import PERMISSIONS from '../permissions';
 import { useBalanceStore } from '../store';
 import { useMainStore } from 'src/stores';
 
 export default defineComponent({
   name: 'BalanceAdd',
-  components: { BalanceHeader },
+  components: { BalanceHeader, BalanceAddBody },
   emits: { 'open-history': () => true },
   setup(_, { emit }) {
     const store = useBalanceStore();
@@ -76,39 +47,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/plugins/balance/components/BalanceAddBody.vue

@@ -0,0 +1,78 @@
+<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>Rechtsklick um Betrag als Verknüpfung hinzuzufügen</q-tooltip>
+      <q-menu 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 } from '../../../utils/permission';
+import PERMISSIONS from '../permissions';
+import { useUserStore } from '../../user/store';
+export default defineComponent({
+  name: 'BalanceAddBody',
+  props: {
+    user: {
+      type: [Object, String] as PropType<FG.User | string>,
+      required: true,
+    },
+  },
+  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>

src/plugins/balance/components/BalanceHeader.vue

@@ -2,7 +2,7 @@
   <q-card-section class="fit row justify-between 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?.toFixed(2) }} €
         <q-badge v-if="isLocked" color="negative" align="top"> gesperrt </q-badge>
       </div>
       <q-spinner v-else color="primary" size="3em" />

src/plugins/balance/pages/Admin.vue

@@ -16,6 +16,24 @@
             <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-td>
+            <q-td key="balance" :props="props">
+              {{ getBalance(props.row.debit, props.row.credit) }}€
+              <q-menu anchor="bottom middle" self="top middle">
+                <q-card>
+                  <q-card-section class="fit column q-gutter-sm">
+                    <balance-add-body :user="props.row.userid" @changeBalance="updateBalance" />
+                  </q-card-section>
+                </q-card>
+              </q-menu>
+            </q-td>
+          </q-tr>
+        </template>
       </q-table>
     </q-page>
   </div>
@@ -27,8 +45,10 @@
 import { ref, defineComponent, computed, onBeforeMount } from 'vue';
 import { useBalanceStore } from '../store';
 import { useUserStore } from 'src/plugins/user/store';
+import BalanceAddBody from 'src/plugins/balance/components/BalanceAddBody.vue';
 
 export default defineComponent({
+  components: { BalanceAddBody },
   // name: 'PageName'
   setup() {
     const store = useBalanceStore();
@@ -51,7 +71,7 @@ export default defineComponent({
         required: true,
         align: 'left',
         sortable: true,
-        format: (val: string) => userStore.users.find((a) => a.userid === val)?.display_name,
+        format: getName,
       },
       /*{
         name: 'credit',
@@ -68,18 +88,44 @@ export default defineComponent({
       {
         name: 'limit',
         label: 'Limit',
-        format: (_: undefined, row: { userid: string }) =>
-          store.user_limits.find((a) => a.userid === row.userid)?.limit?.toFixed(2),
+        align: 'right',
+        format: (_: undefined, row: { userid: string }) => getLimit(row.userid),
       },
       {
         name: 'balance',
         label: 'Kontostand',
+        align: 'right',
         format: (_: undefined, row: { debit: number; credit: number }) =>
-          (row.credit - row.debit).toFixed(2),
+          getBalance(row.debit, row.credit),
       },
     ];
 
-    return { rows, columns, limit, setLimits: store.setLimits };
+    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);
+    }
+
+    return {
+      rows,
+      columns,
+      limit,
+      setLimits: store.setLimits,
+      getName,
+      getLimit,
+      getBalance,
+      updateBalance,
+    };
   },
 });
 </script>