refactor: util functions, style: buttons

Signed-off-by: Hristiyan <[email protected]>
hashgraph · Feb 1, 2025 · 5330b1f · 5330b1f
1 parent 20f20cb
commit 5330b1f
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 41 deletions.
diff --git a/front-end/src/renderer/pages/TransactionGroupDetails/TransactionGroupDetails.vue b/front-end/src/renderer/pages/TransactionGroupDetails/TransactionGroupDetails.vue
@@ -350,17 +350,14 @@ watch(
                               <td class="text-center">
                                 <AppButton
                                   type="button"
-                                  color="secondary"
+                                  :color="
+                                    isWaitingForSignatures(groupItem.transaction.status)
+                                      ? 'danger'
+                                      : 'secondary'
+                                  "
                                   @click.prevent="handleSign(groupItem.transaction.id)"
                                   :data-testid="`button-group-transaction-${index}`"
-                                  ><span
-                                    :class="
-                                      isWaitingForSignatures(groupItem.transaction.status) &&
-                                      'signature-notification position-relative'
-                                    "
-                                    :data-notification="'!'"
-                                    >Details</span
-                                  >
+                                  ><span>Details</span>
                                 </AppButton>
                               </td>
                             </tr>

diff --git a/front-end/src/renderer/pages/Transactions/components/InProgress.vue b/front-end/src/renderer/pages/Transactions/components/InProgress.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ITransaction } from '@main/shared/interfaces';
 
-import { computed, onBeforeMount, reactive, ref, watch } from 'vue';
+import { computed, onBeforeMount, reactive, ref, watch, watchEffect } from 'vue';
 
 import { Transaction } from '@hashgraph/sdk';
 
@@ -75,9 +75,15 @@ const generatedClass = computed(() => {
   return sort.direction === 'desc' ? 'bi-arrow-down-short' : 'bi-arrow-up-short';
 });
 
-const waitingForSignaturesCount = computed(() =>
-  countWaitingForSignatures(new Map(transactions.value)),
-);
+const waitingForSignaturesCounts = computed(() => {
+  const counts: Record<number, number> = {};
+  transactions.value.forEach((txList, groupId) => {
+    if (groupId !== -1) {
+      counts[groupId] = countWaitingForSignatures(transactions.value, groupId);
+    }
+  });
+  return counts;
+});
 
 /* Handlers */
 const handleDetails = async (id: number) => {
@@ -193,6 +199,10 @@ watch([currentPage, pageSize, () => user.selectedOrganization], async () => {
   setGetTransactionsFunction();
   await fetchTransactions();
 });
+
+watchEffect(() => {
+  console.log(waitingForSignaturesCounts.value);
+});
 </script>
 
 <template>
@@ -264,14 +274,7 @@ watch([currentPage, pageSize, () => user.selectedOrganization], async () => {
               <template v-if="group[0] != -1">
                 <tr>
                   <td>
-                    <span
-                      :class="
-                        waitingForSignaturesCount && 'signature-notification position-relative'
-                      "
-                      :data-notification="waitingForSignaturesCount"
-                    >
-                      <i class="bi bi-stack" />
-                    </span>
+                    <i class="bi bi-stack" />
                   </td>
                   <td>{{ groups[group[0] - 1]?.description }}</td>
                   <td>
@@ -283,7 +286,15 @@ watch([currentPage, pageSize, () => user.selectedOrganization], async () => {
                   </td>
                   <td class="text-center">
                     <AppButton @click="redirectToGroupDetails($router, group[0])" color="secondary"
-                      >Details</AppButton
+                      ><span
+                        :class="
+                          waitingForSignaturesCounts[group[0]] &&
+                          'signature-notification position-relative'
+                        "
+                        :data-notification="waitingForSignaturesCounts[group[0]]"
+                      >
+                        Details
+                      </span></AppButton
                     >
                   </td>
                 </tr>

diff --git a/front-end/src/renderer/pages/Transactions/components/ReadyToSign.vue b/front-end/src/renderer/pages/Transactions/components/ReadyToSign.vue
@@ -82,9 +82,13 @@ const generatedClass = computed(() => {
   return sort.direction === 'desc' ? 'bi-arrow-down-short' : 'bi-arrow-up-short';
 });
 
-const waitingForSignaturesCount = computed(() =>
-  countWaitingForSignatures(new Map(transactions.value)),
-);
+const waitingForSignaturesCounts = computed(() => {
+  const counts: Record<number, number> = {};
+  transactions.value.forEach((txList, groupId) => {
+    counts[groupId] = countWaitingForSignatures(transactions.value, groupId);
+  });
+  return counts;
+});
 
 /* Handlers */
 const handleSign = async (id: number) => {
@@ -317,14 +321,7 @@ watch(
                   }"
                 >
                   <td>
-                    <span
-                      :class="
-                        waitingForSignaturesCount && 'signature-notification position-relative'
-                      "
-                      :data-notification="waitingForSignaturesCount"
-                    >
-                      <i class="bi bi-stack" />
-                    </span>
+                    <i class="bi bi-stack" />
                   </td>
                   <td>{{ groups[group[0] - 1]?.description }}</td>
                   <td>
@@ -339,7 +336,15 @@ watch(
                       @click="redirectToGroupDetails($router, group[0])"
                       color="secondary"
                       data-testid="button-group-details"
-                      >Details</AppButton
+                      ><span
+                        :class="
+                          waitingForSignaturesCounts[group[0]] &&
+                          'signature-notification position-relative'
+                        "
+                        :data-notification="waitingForSignaturesCounts[group[0]]"
+                      >
+                        Details
+                      </span></AppButton
                     >
                   </td>
                 </tr>

diff --git a/front-end/src/renderer/utils/notifications.ts b/front-end/src/renderer/utils/notifications.ts
@@ -28,12 +28,15 @@ export function countWaitingForSignatures(
       transactionRaw: ITransaction;
     }[]
   >,
+  groupId: number,
 ): number {
-  return Array.from(transactions)
-    .filter(group => group[0] !== -1)
-    .flatMap(group => group[1].map(tx => tx.transactionRaw))
-    .reduce(
-      (count, tx) => (tx.status === TransactionStatus.WAITING_FOR_SIGNATURES ? count + 1 : count),
-      0,
-    );
+  return (
+    transactions
+      .get(groupId)
+      ?.reduce(
+        (count, tx) =>
+          tx.transactionRaw.status === TransactionStatus.WAITING_FOR_SIGNATURES ? count + 1 : count,
+        0,
+      ) || 0
+  );
 }