From 612d8b736b5a9d0918f1bd951b0a81fbf25b35ae Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Sun, 27 Apr 2025 15:49:25 +0200
Subject: [PATCH 1/3] show skeleton only as long as transactionslist is loaded

---
 .../src/components/GddTransactionList.vue     |   2 +-
 frontend/src/graphql/transactions.graphql     |  56 ++++++++++
 frontend/src/layouts/DashboardLayout.vue      | 104 +++++++-----------
 frontend/src/pages/Community.vue              |   4 -
 frontend/src/pages/InfoStatistic.vue          |   8 --
 frontend/src/pages/Send.vue                   |   3 -
 6 files changed, 98 insertions(+), 79 deletions(-)
 create mode 100644 frontend/src/graphql/transactions.graphql

diff --git a/frontend/src/components/GddTransactionList.vue b/frontend/src/components/GddTransactionList.vue
index 8396f8d52..b4d188374 100644
--- a/frontend/src/components/GddTransactionList.vue
+++ b/frontend/src/components/GddTransactionList.vue
@@ -101,7 +101,7 @@ export default {
       this.updateTransactions()
     },
     timestamp: {
-      immediate: true,
+      immediate: false,
       handler: 'updateTransactions',
     },
   },
diff --git a/frontend/src/graphql/transactions.graphql b/frontend/src/graphql/transactions.graphql
new file mode 100644
index 000000000..eff0abbb5
--- /dev/null
+++ b/frontend/src/graphql/transactions.graphql
@@ -0,0 +1,56 @@
+fragment balanceFields on Balance {
+  balance
+  balanceGDT
+  count
+  linkCount
+}
+
+fragment transactionFields on Transaction {
+  id
+  typeId
+  amount
+  balance
+  previousBalance
+  balanceDate
+  memo
+  linkedUser {
+    firstName
+    lastName
+    communityUuid
+    communityName
+    gradidoID
+    alias
+  }
+  decay {
+    decay
+    start
+    end
+    duration
+  }
+  linkId
+}
+
+query transactionsQuery($currentPage: Int = 1, $pageSize: Int = 25, $order: Order = DESC) {
+  transactionList(currentPage: $currentPage, pageSize: $pageSize, order: $order) {
+    balance {
+      ...balanceFields
+    }
+    transactions {
+      ...transactionFields
+    }
+  }
+}
+
+query transactionsUserCountQuery($currentPage: Int = 1, $pageSize: Int = 25, $order: Order = DESC) {
+  transactionList(currentPage: $currentPage, pageSize: $pageSize, order: $order) {
+    balance {
+      ...balanceFields
+    }
+    transactions {
+      ...transactionFields
+    }
+  }
+  communityStatistics {
+    totalUsers
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index 95bd858f9..6ac0bcb51 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -187,11 +187,10 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed } from 'vue'
 import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
-import { useLazyQuery, useMutation } from '@vue/apollo-composable'
-import { useI18n } from 'vue-i18n'
+import { useQuery, useMutation } from '@vue/apollo-composable'
 import ContentHeader from '@/layouts/templates/ContentHeader'
 import CommunityTemplate from '@/layouts/templates/CommunityTemplate'
 import Breadcrumb from '@/components/Breadcrumb/breadcrumb'
@@ -207,41 +206,51 @@ import GdtAmount from '@/components/Template/ContentHeader/GdtAmount'
 import CommunityMember from '@/components/Template/ContentHeader/CommunityMember'
 import NavCommunity from '@/components/Template/ContentHeader/NavCommunity'
 import LastTransactions from '@/components/Template/RightSide/LastTransactions'
-import { transactionsQuery, communityStatistics } from '@/graphql/queries'
+import { transactionsUserCountQuery } from '@/graphql/transactions.graphql'
 import { logout } from '@/graphql/mutations'
 import CONFIG from '@/config'
 import { useAppToast } from '@/composables/useToast'
 
 const store = useStore()
 const router = useRouter()
-const { load: useCommunityStatsQuery } = useLazyQuery(communityStatistics)
 const {
-  load: useTransactionsQuery,
+  data: transactionQueryData,
   refetch: useRefetchTransactionsQuery,
-  result: transactionQueryResult,
-} = useLazyQuery(transactionsQuery, {}, { fetchPolicy: 'network-only' })
+  loading: transactionQueryLoading,
+  onError,
+} = useQuery(
+  transactionsUserCountQuery,
+  { currentPage: 1, pageSize: 10, order: 'DESC' },
+  { fetchPolicy: 'network-only' },
+)
 const { mutate: useLogoutMutation } = useMutation(logout)
-const { t } = useI18n()
 const { toastError } = useAppToast()
 
-const balance = ref(0)
-const GdtBalance = ref(0)
-const transactions = ref([])
-const transactionCount = ref(0)
-const transactionLinkCount = ref(0)
-const pending = ref(true)
-const visible = ref(false)
-const hamburger = ref(true)
-const darkMode = ref(false)
-const skeleton = ref(true)
-const totalUsers = ref(null)
+const pending = computed(() => {
+  return transactionQueryLoading.value
+})
 
-onMounted(() => {
-  updateTransactions({ currentPage: 1, pageSize: 10 })
-  getCommunityStatistics()
-  setTimeout(() => {
-    skeleton.value = false
-  }, 1500)
+const totalUsers = computed(() => {
+  return transactionQueryData?.value?.communityStatistics?.totalUsers || 0
+})
+const transactions = computed(() => {
+  return transactionQueryData?.value?.transactionList?.transactions || []
+})
+const transactionCount = computed(() => {
+  return transactionQueryData?.value?.transactionList?.balance?.count || 0
+})
+const transactionLinkCount = computed(() => {
+  return transactionQueryData?.value?.transactionList?.balance?.linkCount || 0
+})
+const GdtBalance = computed(() => {
+  const balanceGdt = transactionQueryData?.value?.transactionList?.balance?.balanceGDT || 0
+  return balanceGdt === null ? 0 : Number(balanceGdt)
+})
+const balance = computed(() => {
+  return Number(transactionQueryData?.value?.transactionList?.balance?.balance) || 0
+})
+const skeleton = computed(() => {
+  return pending.value || totalUsers.value === null
 })
 
 const logoutUser = async () => {
@@ -255,50 +264,19 @@ const logoutUser = async () => {
   }
 }
 
-const updateTransactions = async ({ currentPage, pageSize }) => {
-  pending.value = true
-  try {
-    await loadOrFetchTransactionQuery({ currentPage, pageSize })
-    if (!transactionQueryResult) return
-    const { transactionList } = transactionQueryResult.value
-    GdtBalance.value =
-      transactionList.balance.balanceGDT === null ? 0 : Number(transactionList.balance.balanceGDT)
-    transactions.value = transactionList.transactions
-    balance.value = Number(transactionList.balance.balance)
-    transactionCount.value = transactionList.balance.count
-    transactionLinkCount.value = transactionList.balance.linkCount
-    pending.value = false
-  } catch (error) {
-    pending.value = true
-    transactionCount.value = -1
-    toastError(error.message)
-  }
+const updateTransactions = ({ currentPage, pageSize }) => {
+  useRefetchTransactionsQuery({ currentPage, pageSize })
 }
 
-const loadOrFetchTransactionQuery = async (queryVariables = { currentPage: 1, pageSize: 25 }) => {
-  return (
-    (await useTransactionsQuery(transactionsQuery, queryVariables)) ||
-    (await useRefetchTransactionsQuery(queryVariables))
-  )
-}
-
-const getCommunityStatistics = async () => {
-  try {
-    const result = await useCommunityStatsQuery()
-    totalUsers.value = result.communityStatistics.totalUsers
-  } catch {
-    toastError(t('communityStatistics has no result, use default data'))
-  }
-}
+onError((error) => {
+  transactionCount.value = -1
+  toastError(error.message)
+})
 
 const admin = () => {
   window.location.assign(CONFIG.ADMIN_AUTH_URL + store.state.token)
   store.dispatch('logout') // logout without redirect
 }
-
-const setVisible = (bool) => {
-  visible.value = bool
-}
 </script>
 <style>
 .breadcrumb {
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index 6d7ab8ba0..d9772b7b7 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -272,10 +272,6 @@ const handleUpdateContributionForm = (item) => {
   router.push({ params: { tab: 'contribute' } })
 }
 
-const updateTransactions = (pagination) => {
-  emit('update-transactions', pagination)
-}
-
 const updateStatus = (id) => {
   const item = items.value.find((item) => item.id === id)
   if (item) {
diff --git a/frontend/src/pages/InfoStatistic.vue b/frontend/src/pages/InfoStatistic.vue
index d5cebf2b1..cf3edeb92 100644
--- a/frontend/src/pages/InfoStatistic.vue
+++ b/frontend/src/pages/InfoStatistic.vue
@@ -72,12 +72,4 @@ onContributionLinksError(() => {
 onAdminUsersError(() => {
   toastError('searchAdminUsers has no result, use default data')
 })
-
-const updateTransactions = (pagination) => {
-  emit('update-transactions', pagination)
-}
-
-onMounted(() => {
-  updateTransactions(0)
-})
 </script>
diff --git a/frontend/src/pages/Send.vue b/frontend/src/pages/Send.vue
index 2f495dcea..f4a21349d 100644
--- a/frontend/src/pages/Send.vue
+++ b/frontend/src/pages/Send.vue
@@ -172,7 +172,4 @@ function onBack() {
 function updateTransactions(pagination) {
   emit('update-transactions', pagination)
 }
-
-// Equivalent to created hook
-updateTransactions({})
 </script>

From 90a2a31513726a560cb235d348e082b855f56db3 Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Sun, 27 Apr 2025 16:47:30 +0200
Subject: [PATCH 2/3] fix tests

---
 .../src/components/GddTransactionList.spec.js |  3 ++
 frontend/src/layouts/DashboardLayout.spec.js  | 40 ++++++++++++++-----
 frontend/src/layouts/DashboardLayout.vue      |  4 +-
 3 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/GddTransactionList.spec.js b/frontend/src/components/GddTransactionList.spec.js
index c865c782d..416010301 100644
--- a/frontend/src/components/GddTransactionList.spec.js
+++ b/frontend/src/components/GddTransactionList.spec.js
@@ -95,6 +95,9 @@ describe('GddTransactionList', () => {
     })
 
     describe('timestamp property', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({ timestamp: new Date().getTime() })
+      })
       it('emits update-transactions when timestamp changes', async () => {
         await wrapper.setProps({ timestamp: 0 })
         expect(wrapper.emitted('update-transactions')).toBeTruthy()
diff --git a/frontend/src/layouts/DashboardLayout.spec.js b/frontend/src/layouts/DashboardLayout.spec.js
index 0906793ff..22cc29cc0 100644
--- a/frontend/src/layouts/DashboardLayout.spec.js
+++ b/frontend/src/layouts/DashboardLayout.spec.js
@@ -5,6 +5,7 @@ import DashboardLayout from './DashboardLayout'
 import { createStore } from 'vuex'
 import { createRouter, createWebHistory } from 'vue-router'
 import routes from '@/routes/routes'
+import { useQuery } from '@vue/apollo-composable'
 
 const toastErrorSpy = vi.fn()
 
@@ -14,18 +15,32 @@ vi.mock('@/composables/useToast', () => ({
   }),
 }))
 
-const mockQueryFn = vi.fn()
 const mockRefetchFn = vi.fn()
 const mockMutateFn = vi.fn()
+let onErrorHandler
 const mockQueryResult = ref(null)
+const data = ref({})
+const loading = ref(false)
 
 vi.mock('@vue/apollo-composable', () => ({
-  useLazyQuery: vi.fn(() => ({
-    load: mockQueryFn,
+  useQuery: vi.fn(() => ({
+    data,
     refetch: mockRefetchFn,
     result: mockQueryResult,
     onResult: vi.fn(),
-    onError: vi.fn(),
+    onError: (handler) => {
+      onErrorHandler = handler
+    },
+    loading,
+  })),
+  useLazyQuery: vi.fn(() => ({
+    refetch: mockRefetchFn,
+    result: mockQueryResult,
+    onResult: vi.fn(),
+    onError: (handler) => {
+      onErrorHandler = handler
+    },
+    loading,
   })),
   useMutation: vi.fn(() => ({
     mutate: mockMutateFn,
@@ -103,7 +118,7 @@ describe('DashboardLayout', () => {
 
   beforeEach(() => {
     vi.useFakeTimers()
-    mockQueryFn.mockResolvedValue({
+    data.value = {
       communityStatistics: {
         totalUsers: 3113,
         activeUsers: 1057,
@@ -113,7 +128,7 @@ describe('DashboardLayout', () => {
         totalGradidoAvailable: '2513565.869444365732411569',
         totalGradidoUnbookedDecayed: '-500474.6738366222166261272',
       },
-    })
+    }
     wrapper = createWrapper()
   })
 
@@ -127,6 +142,9 @@ describe('DashboardLayout', () => {
   })
 
   describe('at first', () => {
+    beforeEach(() => {
+      data.value = null
+    })
     it('renders a component Skeleton', () => {
       expect(wrapper.findComponent({ name: 'SkeletonOverview' }).exists()).toBe(true)
     })
@@ -135,12 +153,13 @@ describe('DashboardLayout', () => {
   describe('after a timeout', () => {
     beforeEach(async () => {
       vi.advanceTimersByTime(1500)
+      loading.value = false
       await nextTick()
     })
 
     describe('update transactions', () => {
       beforeEach(async () => {
-        mockQueryResult.value = {
+        data.value = {
           transactionList: {
             balance: {
               balanceGDT: '100',
@@ -152,14 +171,12 @@ describe('DashboardLayout', () => {
           },
         }
 
-        mockQueryFn.mockResolvedValue(mockQueryResult.value)
-
         await wrapper.vm.updateTransactions({ currentPage: 2, pageSize: 5 })
         await nextTick() // Ensure all promises are resolved
       })
 
       it('load call to the API', () => {
-        expect(mockQueryFn).toHaveBeenCalled()
+        expect(useQuery).toHaveBeenCalled()
       })
 
       it('updates balance', () => {
@@ -190,10 +207,10 @@ describe('DashboardLayout', () => {
 
     describe('update transactions returns error', () => {
       beforeEach(async () => {
-        mockQueryFn.mockRejectedValue(new Error('Ouch!'))
         await wrapper
           .findComponent({ ref: 'router-view' })
           .vm.$emit('update-transactions', { currentPage: 2, pageSize: 5 })
+        loading.value = true
         await nextTick()
       })
 
@@ -202,6 +219,7 @@ describe('DashboardLayout', () => {
       })
 
       it('toasts the error message', () => {
+        onErrorHandler({ message: 'Ouch!' })
         expect(toastErrorSpy).toHaveBeenCalledWith('Ouch!')
       })
     })
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index 6ac0bcb51..c7360b493 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -187,7 +187,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
 import { useQuery, useMutation } from '@vue/apollo-composable'
@@ -231,7 +231,7 @@ const pending = computed(() => {
 })
 
 const totalUsers = computed(() => {
-  return transactionQueryData?.value?.communityStatistics?.totalUsers || 0
+  return transactionQueryData?.value?.communityStatistics?.totalUsers || null
 })
 const transactions = computed(() => {
   return transactionQueryData?.value?.transactionList?.transactions || []

From 9fe876e163a2d654da881652f88292b3e811eb61 Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Sun, 27 Apr 2025 19:20:25 +0200
Subject: [PATCH 3/3] error correction

---
 frontend/src/layouts/DashboardLayout.spec.js | 47 ++++++---------
 frontend/src/layouts/DashboardLayout.vue     | 61 +++++++++++---------
 2 files changed, 53 insertions(+), 55 deletions(-)

diff --git a/frontend/src/layouts/DashboardLayout.spec.js b/frontend/src/layouts/DashboardLayout.spec.js
index 22cc29cc0..cf6680d0b 100644
--- a/frontend/src/layouts/DashboardLayout.spec.js
+++ b/frontend/src/layouts/DashboardLayout.spec.js
@@ -18,16 +18,17 @@ vi.mock('@/composables/useToast', () => ({
 const mockRefetchFn = vi.fn()
 const mockMutateFn = vi.fn()
 let onErrorHandler
+let onResultHandler
 const mockQueryResult = ref(null)
-const data = ref({})
 const loading = ref(false)
 
 vi.mock('@vue/apollo-composable', () => ({
   useQuery: vi.fn(() => ({
-    data,
     refetch: mockRefetchFn,
     result: mockQueryResult,
-    onResult: vi.fn(),
+    onResult: (handler) => {
+      onResultHandler = handler
+    },
     onError: (handler) => {
       onErrorHandler = handler
     },
@@ -36,7 +37,9 @@ vi.mock('@vue/apollo-composable', () => ({
   useLazyQuery: vi.fn(() => ({
     refetch: mockRefetchFn,
     result: mockQueryResult,
-    onResult: vi.fn(),
+    onResult: (handler) => {
+      onResultHandler = handler
+    },
     onError: (handler) => {
       onErrorHandler = handler
     },
@@ -118,17 +121,6 @@ describe('DashboardLayout', () => {
 
   beforeEach(() => {
     vi.useFakeTimers()
-    data.value = {
-      communityStatistics: {
-        totalUsers: 3113,
-        activeUsers: 1057,
-        deletedUsers: 35,
-        totalGradidoCreated: '4083774.05000000000000000000',
-        totalGradidoDecayed: '-1062639.13634129622923372197',
-        totalGradidoAvailable: '2513565.869444365732411569',
-        totalGradidoUnbookedDecayed: '-500474.6738366222166261272',
-      },
-    }
     wrapper = createWrapper()
   })
 
@@ -142,9 +134,6 @@ describe('DashboardLayout', () => {
   })
 
   describe('at first', () => {
-    beforeEach(() => {
-      data.value = null
-    })
     it('renders a component Skeleton', () => {
       expect(wrapper.findComponent({ name: 'SkeletonOverview' }).exists()).toBe(true)
     })
@@ -159,17 +148,19 @@ describe('DashboardLayout', () => {
 
     describe('update transactions', () => {
       beforeEach(async () => {
-        data.value = {
-          transactionList: {
-            balance: {
-              balanceGDT: '100',
-              count: 4,
-              linkCount: 8,
-              balance: '1450',
+        onResultHandler({
+          data: {
+            transactionList: {
+              balance: {
+                balanceGDT: '100',
+                count: 4,
+                linkCount: 8,
+                balance: '1450',
+              },
+              transactions: ['transaction1', 'transaction2', 'transaction3', 'transaction4'],
             },
-            transactions: ['transaction1', 'transaction2', 'transaction3', 'transaction4'],
           },
-        }
+        })
 
         await wrapper.vm.updateTransactions({ currentPage: 2, pageSize: 5 })
         await nextTick() // Ensure all promises are resolved
@@ -207,10 +198,10 @@ describe('DashboardLayout', () => {
 
     describe('update transactions returns error', () => {
       beforeEach(async () => {
+        wrapper.vm.skeleton = false
         await wrapper
           .findComponent({ ref: 'router-view' })
           .vm.$emit('update-transactions', { currentPage: 2, pageSize: 5 })
-        loading.value = true
         await nextTick()
       })
 
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index c7360b493..a1cbd7aef 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -187,7 +187,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
 import { useQuery, useMutation } from '@vue/apollo-composable'
@@ -214,10 +214,9 @@ import { useAppToast } from '@/composables/useToast'
 const store = useStore()
 const router = useRouter()
 const {
-  data: transactionQueryData,
   refetch: useRefetchTransactionsQuery,
-  loading: transactionQueryLoading,
   onError,
+  onResult,
 } = useQuery(
   transactionsUserCountQuery,
   { currentPage: 1, pageSize: 10, order: 'DESC' },
@@ -226,31 +225,20 @@ const {
 const { mutate: useLogoutMutation } = useMutation(logout)
 const { toastError } = useAppToast()
 
-const pending = computed(() => {
-  return transactionQueryLoading.value
-})
+const balance = ref(0)
+const GdtBalance = ref(0)
+const transactions = ref([])
+const transactionCount = ref(0)
+const transactionLinkCount = ref(0)
+const pending = ref(true)
+const skeleton = ref(true)
+const totalUsers = ref(null)
 
-const totalUsers = computed(() => {
-  return transactionQueryData?.value?.communityStatistics?.totalUsers || null
-})
-const transactions = computed(() => {
-  return transactionQueryData?.value?.transactionList?.transactions || []
-})
-const transactionCount = computed(() => {
-  return transactionQueryData?.value?.transactionList?.balance?.count || 0
-})
-const transactionLinkCount = computed(() => {
-  return transactionQueryData?.value?.transactionList?.balance?.linkCount || 0
-})
-const GdtBalance = computed(() => {
-  const balanceGdt = transactionQueryData?.value?.transactionList?.balance?.balanceGDT || 0
-  return balanceGdt === null ? 0 : Number(balanceGdt)
-})
-const balance = computed(() => {
-  return Number(transactionQueryData?.value?.transactionList?.balance?.balance) || 0
-})
-const skeleton = computed(() => {
-  return pending.value || totalUsers.value === null
+// only error correction, normally skeleton should be visible less than 1500ms
+onMounted(() => {
+  setTimeout(() => {
+    skeleton.value = false
+  }, 1500)
 })
 
 const logoutUser = async () => {
@@ -265,9 +253,28 @@ const logoutUser = async () => {
 }
 
 const updateTransactions = ({ currentPage, pageSize }) => {
+  pending.value = true
   useRefetchTransactionsQuery({ currentPage, pageSize })
 }
 
+onResult((value) => {
+  if (value && value.data) {
+    if (value.data.transactionList) {
+      const tr = value.data.transactionList
+      GdtBalance.value = tr.balance?.balanceGDT === null ? 0 : Number(tr.balance?.balanceGDT)
+      transactions.value = tr.transactions || []
+      balance.value = Number(tr.balance?.balance) || 0
+      transactionCount.value = tr.balance?.count || 0
+      transactionLinkCount.value = tr.balance?.linkCount || 0
+    }
+    if (value.data.communityStatistics) {
+      totalUsers.value = value.data.communityStatistics.totalUsers || 0
+    }
+  }
+  pending.value = false
+  skeleton.value = false
+})
+
 onError((error) => {
   transactionCount.value = -1
   toastError(error.message)