From 3fd5c1841160b4b2fd29150db5a712f761d5ee4c Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Wed, 3 Mar 2021 11:31:29 +0100
Subject: [PATCH] add collaps componente in transactions-list

---
 frontend/src/views/KontoOverview/GddTable.vue | 51 +++++--------------
 1 file changed, 14 insertions(+), 37 deletions(-)

diff --git a/frontend/src/views/KontoOverview/GddTable.vue b/frontend/src/views/KontoOverview/GddTable.vue
index 59fb55fde..7f3f754b6 100644
--- a/frontend/src/views/KontoOverview/GddTable.vue
+++ b/frontend/src/views/KontoOverview/GddTable.vue
@@ -1,50 +1,27 @@
 <template>
   <div>
   
-        <b-table striped hover :items="items" :fields="fields" :tbody-tr-class="rowClass" responsive="true" >
-          <template  #cell(status)="row">   
-            <img  v-if="row.item.type === 'send' " src="img/icons/gradido/minus.png" width="50" />          
-            <img  v-else src="img/icons/gradido/plus-low.png" width="50" />            
-          </template>
-          <template #cell(details)="row">
-            <b-button size="md" @click="row.toggleDetails" class="mr-2">
-               {{ row.detailsShowing ? $t('site.overview.table.hide')  : $t('site.overview.table.view') }}
-            </b-button>        
-          </template>
-
-          <!-- Table details  -->
-          <template #row-details="row">
-            <b-card>
-              <b-row class="mb-2">
-                <b-col sm="3" class="text-sm-right"><b>{{ $t('site.overview.table.amount') }}:</b></b-col>
-                <b-col>{{ row.item.balance }} GDD</b-col>
-              </b-row>
-              <b-row class="mb-2">
-                <b-col sm="3" class="text-sm-right"><b>{{ $t('site.overview.table.decay') }}: </b></b-col>
-                <b-col>{{ row.item.memo }} </b-col>
-              </b-row>
-              <b-row class="mb-2">
-                <b-col sm="3" class="text-sm-right"><b>{{ $t('site.overview.table.sender') }}: </b></b-col>
-                <b-col>{{ row.item.name }}</b-col>
-                <b-col>{{ row.item.date }}</b-col>
-              </b-row>
-
-              <b-button size="sm" @click="row.toggleDetails">{{ $t('site.overview.table.hide_details') }}</b-button>
-            </b-card>
-          </template>
-        </b-table>
-    
-        <hr>
-
         <b-list-group > 
           <b-list-group-item v-for="item in items" :key="item.id"> 
           <div class="d-flex w-100 justify-content-between"  @click="toogle(item)" >
             <b-icon v-if="item.type === 'send'" icon="box-arrow-left"   class="m-1"  font-scale="2" style="color:red"></b-icon>
             <b-icon v-else icon="box-arrow-right" class="m-1"  font-scale="2" style="color:green" ></b-icon>       
               <h1 class="mb-1">{{ setComma(item.balance) }} <small>GDD</small></h1>
-              <h2 class="text-muted"><small>{{item.date}}</small> - {{item.name}}</h2>
+              <h2 class="text-muted">{{item.name}}</h2>
+                <b-button v-b-toggle="'a'+item.transaction_id" variant="primary"><b>i</b></b-button>
             </div>
+             <b-collapse :id="'a'+item.transaction_id" class="mt-2">
+              <b-card>
+                <p class="card-text">{{item}}</p>
+                <b-button v-b-toggle="'collapse-1-inner'+ item.transaction_id" size="sm">\i/ more</b-button>
+                <b-collapse :id="'collapse-1-inner'+ item.transaction_id" class="mt-2">
+                  <b-card>{{item}}</b-card>
+                </b-collapse>
+              </b-card>
+            </b-collapse>
           </b-list-group-item>
+          
+ 
         </b-list-group>
 
   </div>
@@ -76,7 +53,7 @@ export default {
      console.log("result.transactions",result.data.transactions)
      //commit('transactions', result.data.transactions)
       this.$store.state.user.balance_gdt =  result.data.gdtSum
-      this.items = JSON.parse(result.data.transactions)
+      this.items = result.data.transactions
      
    }, (error) => {
      console.log(error);