feature: add bod action details

app/src/components/sections/SingleTeamView/modals/ApproveRevokeAction.vue

@@ -1,42 +1,77 @@
 <template>
   <div class="flex flex-col gap-8">
     <div class="flex flex-row gap-5 items-center">
-      <h2>Action #{{ action.actionId }}</h2>
-      <div class="badge badge-sm" :class="`${isApproved ? 'badge-primary' : 'badge-secondary'}`">
+      <h2 data-test="action-title">Action #{{ action.actionId }}</h2>
+      <div
+        data-test="action-status"
+        class="badge badge-sm"
+        :class="`${isApproved ? 'badge-primary' : 'badge-secondary'}`"
+      >
         {{ isApproved ? 'Approved by You' : 'Waiting for your approval' }}
       </div>
     </div>
 
     <SkeletonLoading v-if="isApprovedLoading || approvalCountLoading" class="w-96 h-6" />
     <div v-else>
       <div class="flex flex-col justify-between gap-1 text-sm">
-        <p>Description: {{ action.description }}</p>
-        <p>
+        <p data-test="action-description">Description: {{ action.description }}</p>
+        <p data-test="action-target-address">
           Target Address:
           <span class="text-xs badge badge-sm badge-primary"
             >{{ action.targetAddress }}
-            {{ action.targetAddress == team.bankAddress ? '(Bank)' : '' }}</span
+            {{
+              action.targetAddress == team.bankAddress
+                ? '(Bank)'
+                : action.targetAddress == team.expenseAccountAddress
+                  ? '(Expense Account)'
+                  : '(Unknown)'
+            }}</span
           >
         </p>
-        <p>Is Executed: {{ action.isExecuted }}</p>
-        <p>
+        <p data-test="action-function-name">
+          Function Name:
+          {{
+            action.targetAddress == team.bankAddress
+              ? bankFunctionName
+              : action.targetAddress == team.expenseAccountAddress
+                ? expenseFunctionName
+                : 'Unknown'
+          }}
+        </p>
+        <p data-test="action-parameters-title">Parameters:</p>
+        <ul
+          data-test="action-parameters-expense"
+          v-if="action.targetAddress == team.expenseAccountAddress"
+        >
+          <li data-test="expense-params" v-for="(arg, index) in expenseArgs" :key="index">
+            {{ '  ' }} - {{ expenseInputs?.[index] }}: {{ arg }}
+          </li>
+        </ul>
+        <ul data-test="action-parameters-bank" v-if="action.targetAddress == team.bankAddress">
+          <li data-test="bank-params" v-for="(arg, index) in bankArgs" :key="index">
+            {{ '  ' }} - {{ bankInputs?.[index] }}: {{ arg }}
+          </li>
+        </ul>
+        <p data-test="action-is-executed">Is Executed: {{ action.isExecuted }}</p>
+        <p data-test="action-approval-count">
           Approvals {{ approvalCount }}/{{ boardOfDirectors.length }} board of directors approved
         </p>
-        <p>
+        <p data-test="action-created-by">
           Created By:
           <span class="text-xs badge badge-sm badge-primary"
             >{{ action.userAddress }}
             {{
-              team.members?.filter((member) => member.address == action.userAddress)?.[0].name
+              team.members?.filter((member) => member.address == action.userAddress)?.[0]?.name
             }}</span
           >
         </p>
       </div>
     </div>
 
     <div
-      v-if="!action.isExecuted || !boardOfDirectors.includes(currentAddress as Address)"
+      v-if="!action.isExecuted && boardOfDirectors.includes(currentAddress as Address)"
       class="flex justify-center"
+      data-test="button-flex"
     >
       <LoadingButton
         v-if="loadingApprove || loadingRevoke"
@@ -46,6 +81,7 @@
       <button
         v-else
         class="btn btn-primary w-48"
+        data-test="approve-revoke-button"
         @click="async () => (isApproved ? await revokeAction() : await approveAction())"
       >
         {{ isApproved ? 'Revoke' : 'Approve' }}
@@ -68,6 +104,8 @@
 } from '@/composables/bod'
 import { onMounted, watch } from 'vue'
 import { useCustomFetch } from '@/composables/useCustomFetch'
+import { useBankGetFunction } from '@/composables/bank'
+import { useExpenseGetFunction } from '@/composables/useExpenseAccount'
 
 const { addErrorToast, addSuccessToast } = useToastStore()
 const { address: currentAddress } = useUserDataStore()
@@ -102,8 +140,20 @@
   team: Partial<Team>
   boardOfDirectors: Address[]
 }>()
-const emits = defineEmits(['closeModal'])
+const emits = defineEmits(['closeModal', 'onExecuted'])
 
+const {
+  data: bankFunctionName,
+  args: bankArgs,
+  inputs: bankInputs,
+  execute: getBankFunctionName
+} = useBankGetFunction(props.team.bankAddress!)
+const {
+  data: expenseFunctionName,
+  args: expenseArgs,
+  inputs: expenseInputs,
+  execute: getExpenseFunctionName
+} = useExpenseGetFunction(props.team.expenseAccountAddress!)
 const approveAction = async () => {
   await approve(props.team.boardOfDirectorsAddress!, props.action.actionId)
   if (errorApprove.value) {
@@ -112,9 +162,10 @@
 
   await executeIsExecuted(props.team.boardOfDirectorsAddress!, props.action.actionId)
   if (isExecuted.value) {
-    useCustomFetch(`actions/${props.action.id}`, {
+    await useCustomFetch(`actions/${props.action.id}`, {
       immediate: true
     }).patch()
+    emits('onExecuted')
   }
 
   emits('closeModal')
@@ -147,13 +198,11 @@
 watch(successApprove, () => {
   if (successApprove.value) {
     addSuccessToast('Action approved')
-    emits('closeModal')
   }
 })
 watch(successRevoke, () => {
   if (successRevoke.value) {
     addSuccessToast('Action revoked')
-    emits('closeModal')
   }
 })
 watch(errorApprovalCount, () => {
@@ -169,5 +218,10 @@
     currentAddress
   )
   await executeApprovalCount(props.team.boardOfDirectorsAddress!, props.action.actionId)
+  if (props.action.targetAddress == props.team.bankAddress) {
+    await getBankFunctionName(props.action.data)
+  } else if (props.action.targetAddress == props.team.expenseAccountAddress) {
+    await getExpenseFunctionName(props.action.data)
+  }
 })
 </script>