From a876f99e13cfde4d6e9f5f03d41670191419009d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Wed, 10 May 2023 00:27:41 +0200
Subject: [PATCH] fix update balance on adminpage #31

---
 src/components/BalanceAddBody.vue      |  7 ++---
 src/components/BalanceTransferBody.vue | 13 ++------
 src/pages/BalanceAdminPage.vue         | 43 +++++++++++++++++---------
 3 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/components/BalanceAddBody.vue b/src/components/BalanceAddBody.vue
index acb137b..d15b721 100644
--- a/src/components/BalanceAddBody.vue
+++ b/src/components/BalanceAddBody.vue
@@ -3,7 +3,7 @@
     <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-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>
@@ -13,7 +13,6 @@
   <div class="col-sm-4 col-xs-6">
     <q-btn
       v-if="canAddCredit"
-      v-close-popup
       style="width: 100%"
       color="secondary"
       label="Gutschreiben"
@@ -39,7 +38,7 @@ export default defineComponent({
     },
   },
   emits: {
-    changeBalance: (user: FG.User) => user,
+    'change-balance': (user: FG.User) => user,
   },
   setup(props, { emit }) {
     const store = useBalanceStore();
@@ -47,7 +46,7 @@ export default defineComponent({
     const amount = ref<number>(0);
     async function changeBalance(amount: number) {
       await store.changeBalance(amount, user.value);
-      emit('changeBalance', user.value);
+      emit('change-balance', user.value);
     }
     function addShortcut() {
       if (amount.value != 0) void store.createShortcut(amount.value * -1);
diff --git a/src/components/BalanceTransferBody.vue b/src/components/BalanceTransferBody.vue
index 8967501..471be2b 100644
--- a/src/components/BalanceTransferBody.vue
+++ b/src/components/BalanceTransferBody.vue
@@ -6,14 +6,7 @@
     <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"
-    />
+    <q-btn style="width: 100%" color="primary" :disable="sendDisabled" label="Senden" @click="sendAmount" />
   </div>
 </template>
 <script lang="ts">
@@ -31,7 +24,7 @@ export default defineComponent({
     },
   },
   emits: {
-    changeBalance: (sender: FG.User, receiver: FG.User) => sender && receiver,
+    changeBalance: ({ sender, receiver }: { sender: FG.User; receiver: FG.User }) => sender && receiver,
   },
   setup(props, { emit }) {
     const store = useBalanceStore();
@@ -51,7 +44,7 @@ export default defineComponent({
     async function sendAmount() {
       if (receiver.value) {
         await store.changeBalance(amount.value, receiver.value, sender.value);
-        emit('changeBalance', sender.value, receiver.value);
+        emit('changeBalance', { sender: sender.value, receiver: receiver.value });
       }
     }
     return {
diff --git a/src/pages/BalanceAdminPage.vue b/src/pages/BalanceAdminPage.vue
index 156ec31..8ada183 100644
--- a/src/pages/BalanceAdminPage.vue
+++ b/src/pages/BalanceAdminPage.vue
@@ -5,13 +5,13 @@
       :rows="rows"
       row-key="userid"
       :columns="columns"
-      @request="onRequest"
       :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 v-slot:append>
+            <template #append>
               <q-icon name="mdi-magnify" />
             </template>
           </q-input>
@@ -43,7 +43,12 @@
           </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-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>
@@ -51,11 +56,14 @@
                       <balance-add-body
                         :user="props.row.userid"
                         :can-add-shortcut="false"
-                        @change-balance="updateBalance"
+                        @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" />
+                      <balance-transfer-body
+                        :user="props.row.userid"
+                        @change-balance="updateBalances($event, props.row.userid)"
+                      />
                     </q-tab-panel>
                   </q-tab-panels>
                 </q-card-section>
@@ -84,8 +92,6 @@
 </template>
 
 <script lang="ts">
-// TODO: Fill usefull data
-
 import { ref, defineComponent, computed, onBeforeMount } from 'vue';
 import { useBalanceStore } from '../store';
 import { useUserStore } from '@flaschengeist/api';
@@ -99,6 +105,8 @@ export default defineComponent({
     const store = useBalanceStore();
     const userStore = useUserStore();
 
+    const showMenu = ref<{ [userid: string]: boolean }>({});
+
     onBeforeMount(() => {
       void userStore.getUsers();
       void store.getLimits();
@@ -183,7 +191,7 @@ export default defineComponent({
       } catch (error) {
         console.warn(error);
       }
-      console.log(pagination.value);
+      //console.log(pagination.value);
       loading.value = false;
     }
 
@@ -200,13 +208,18 @@ export default defineComponent({
       return (credit - debit).toFixed(2);
     }
 
-    function updateBalance(user: FG.User) {
-      void store.getBalance(user);
+    async function updateBalance(user: FG.User, ref_showMenu?: string) {
+      await store.getBalance(user);
+      if (ref_showMenu) {
+        showMenu.value[ref_showMenu] = false;
+      }
     }
-
-    function updateBalances(sender: FG.User, receiver: FG.User) {
-      updateBalance(sender);
-      updateBalance(receiver);
+    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;
+      }
     }
 
     function setLimit(userid: string) {
@@ -227,7 +240,6 @@ export default defineComponent({
     }
 
     const tab = ref('add');
-
     return {
       rows,
       columns,
@@ -245,6 +257,7 @@ export default defineComponent({
       getFirstname,
       getLastname,
       filter,
+      showMenu,
     };
   },
 });