[balance] modify balance transfer in admin page

src/plugins/balance/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,37 +11,20 @@
 <script lang="ts">
 import { computed, ref, defineComponent } from 'vue';
 import { hasPermission } from 'src/utils/permission';
-import UserSelector from 'src/plugins/user/components/UserSelector.vue';
 import BalanceHeader from '../components/BalanceHeader.vue';
+import BalanceTransferBody from 'src/plugins/balance/components/BalanceTransferBody.vue';
 import PERMISSIONS from '../permissions';
-import { useBalanceStore } from '../store';
 import { useMainStore } from 'src/stores';
 
 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');
@@ -63,11 +32,7 @@ export default defineComponent({
 
     return {
       sender,
-      receiver,
-      amount,
-      sendAmount,
       showSelector,
-      sendDisabled,
       openHistory,
     };
   },

src/plugins/balance/components/BalanceTransferBody.vue

@@ -0,0 +1,82 @@
+<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 'src/plugins/user/components/UserSelector.vue';
+import { useBalanceStore } from '../store';
+import { useUserStore } from '../../user/store';
+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>

src/plugins/balance/pages/Admin.vue

@@ -26,9 +26,31 @@
               {{ 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-tab-panels v-model="tab" animated>
+                      <q-tab-panel name="add" class="fit column q-gutter-sm">
+                        <balance-add-body :user="props.row.userid" @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>
+                  <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>
@@ -46,9 +68,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';
+import BalanceTransferBody from 'src/plugins/balance/components/BalanceTransferBody.vue';
 
 export default defineComponent({
-  components: { BalanceAddBody },
+  components: { BalanceTransferBody, BalanceAddBody },
   // name: 'PageName'
   setup() {
     const store = useBalanceStore();
@@ -116,6 +139,13 @@ export default defineComponent({
       void store.getBalance(user);
     }
 
+    function updateBalances(sender: FG.User, receiver: FG.User) {
+      updateBalance(sender);
+      updateBalance(receiver);
+    }
+
+    const tab = ref('add');
+
     return {
       rows,
       columns,
@@ -125,6 +155,8 @@ export default defineComponent({
       getLimit,
       getBalance,
       updateBalance,
+      updateBalances,
+      tab,
     };
   },
 });