From 39d9278363a257493d797856d09ebd600e395842 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 11 Feb 2022 10:29:00 +0100
Subject: [PATCH] add collaps icon in gdt list

---
 frontend/src/components/Transaction.vue       | 26 ++++++++++++++++---
 .../AccountOverview/GddTransactionList.vue    | 12 +++++++++
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Transaction.vue b/frontend/src/components/Transaction.vue
index f1deca565..103dec652 100644
--- a/frontend/src/components/Transaction.vue
+++ b/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>
diff --git a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
index 73373c4b0..a104bbae6 100644
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
+++ b/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 {