add collaps componente in transactions-list

This commit is contained in:
ogerly 2021-03-03 11:31:29 +01:00
parent b98e7edda9
commit 3fd5c18411

View File

@ -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);