add collaps icon in gdt list

frontend/src/components/Transaction.vue

@@ -9,9 +9,10 @@
 
         <!-- collaps Button  -->
         <div class="text-right" style="width: 96%; position: absolute">
-          <b-button class="btn-sm">
-            <b>i</b>
-          </b-button>
+          <b-icon
+            :icon="getCollapseState(id) ? 'caret-up-square' : 'caret-down-square'"
+            :class="getCollapseState(id) ? 'text-black' : 'text-muted'"
+          />
         </div>
 
         <!-- type  -->
@@ -85,6 +86,16 @@ export default {
     gdt: { type: Number },
     id: { type: Number },
   },
+  data() {
+    return {
+      collapseStatus: [],
+    }
+  },
+  methods: {
+    getCollapseState(id) {
+      return this.collapseStatus.includes('gdt-collapse-' + id)
+    },
+  },
   computed: {
     collapseId() {
       return 'gdt-collapse-' + String(this.id)
@@ -130,5 +141,14 @@ export default {
       }
     },
   },
+  mounted() {
+    this.$root.$on('bv::collapse::state', (collapseId, isJustShown) => {
+      if (isJustShown) {
+        this.collapseStatus.push(collapseId)
+      } else {
+        this.collapseStatus = this.collapseStatus.filter((id) => id !== collapseId)
+      }
+    })
+  },
 }
 </script>

frontend/src/views/Pages/AccountOverview/GddTransactionList.vue

@@ -28,6 +28,16 @@
         :key="transactionId"
         :style="type === 'decay' ? 'background-color:#f1e0ae3d' : ''"
       >
+        <transaction
+          :amount="balance"
+          :date="date"
+          :comment="memo"
+          :gdtEntryType="type"
+          factor="--"
+          gdt="gdt"
+          :id="transactionId"
+        ></transaction>
+
         <div
           class="list-group-item gdd-transaction-list-item"
           :class="getCollapseState(transactionId) ? 'bg-secondary' : ''"
@@ -181,6 +191,7 @@
 <script>
 import PaginationButtons from '../../../components/PaginationButtons'
 import DecayInformation from '../../../components/DecayInformation'
+import Transaction from '../../../components/Transaction.vue'
 
 const iconsByType = {
   send: { icon: 'arrow-left-circle', classes: 'text-danger', operator: '-' },
@@ -194,6 +205,7 @@ export default {
   components: {
     PaginationButtons,
     DecayInformation,
+    Transaction,
   },
   data() {
     return {