Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Widgets/TransactionLog.vue
Show All 20 Lines | <div> | ||||
> | > | ||||
<svg-icon icon="info-circle"></svg-icon> | <svg-icon icon="info-circle"></svg-icon> | ||||
</button> | </button> | ||||
</td> | </td> | ||||
<td class="description">{{ description(transaction) }}</td> | <td class="description">{{ description(transaction) }}</td> | ||||
<td :class="'price ' + className(transaction)">{{ amount(transaction) }}</td> | <td :class="'price ' + className(transaction)">{{ amount(transaction) }}</td> | ||||
</tr> | </tr> | ||||
</tbody> | </tbody> | ||||
<tfoot class="table-fake-body"> | <list-foot :text="$t('wallet.transactions-none')" :colspan="isAdmin ? 5 : 4"></list-foot> | ||||
<tr> | |||||
<td :colspan="isAdmin ? 5 : 4">{{ $t('wallet.transactions-none') }}</td> | |||||
</tr> | |||||
</tfoot> | |||||
</table> | </table> | ||||
<div class="text-center p-3" id="transactions-loader" v-if="hasMore"> | <list-more v-if="hasMore" :on-click="loadLog"></list-more> | ||||
<button class="btn btn-secondary" @click="loadLog(true)">{{ $t('nav.more') }}</button> | |||||
</div> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import ListTools from './ListTools' | |||||
export default { | export default { | ||||
mixins: [ ListTools ], | |||||
props: { | props: { | ||||
walletId: { type: String, default: null }, | walletId: { type: String, default: null }, | ||||
isAdmin: { type: Boolean, default: false }, | isAdmin: { type: Boolean, default: false }, | ||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
transactions: [], | transactions: [] | ||||
hasMore: false, | |||||
page: 1 | |||||
} | } | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.loadLog() | this.loadLog({ reset: true }) | ||||
}, | }, | ||||
methods: { | methods: { | ||||
loadLog(more) { | loadLog(params) { | ||||
if (!this.walletId) { | if (this.walletId) { | ||||
return | this.listSearch('transactions', '/api/v4/wallets/' + this.walletId + '/transactions', params) | ||||
} | |||||
let loader = $(this.$el) | |||||
let param = '' | |||||
if (more) { | |||||
param = '?page=' + (this.page + 1) | |||||
loader = $('#transactions-loader') | |||||
} | } | ||||
this.$root.addLoader(loader) | |||||
axios.get('/api/v4/wallets/' + this.walletId + '/transactions' + param) | |||||
.then(response => { | |||||
this.$root.removeLoader(loader) | |||||
// Note: In Vue we can't just use .concat() | |||||
for (let i in response.data.list) { | |||||
this.$set(this.transactions, this.transactions.length, response.data.list[i]) | |||||
} | |||||
this.hasMore = response.data.hasMore | |||||
this.page = response.data.page || 1 | |||||
}) | |||||
.catch(error => { | |||||
this.$root.removeLoader(loader) | |||||
}) | |||||
}, | }, | ||||
loadTransaction(id) { | loadTransaction(id) { | ||||
let record = $('#log' + id) | let record = $('#log' + id) | ||||
let cell = record.find('td.description') | let cell = record.find('td.description') | ||||
let details = $('<div class="list-details"><ul></ul><div>').appendTo(cell) | let details = $('<div class="list-details"><ul></ul><div>').appendTo(cell) | ||||
this.$root.addLoader(cell) | this.$root.addLoader(cell) | ||||
axios.get('/api/v4/wallets/' + this.walletId + '/transactions' + '?transaction=' + id) | axios.get('/api/v4/wallets/' + this.walletId + '/transactions' + '?transaction=' + id) | ||||
Show All 30 Lines |