Differential D1321 Diff 3523 src/resources/vue/Wallet.vue

Changeset View

Standalone View

src/resources/vue/Wallet.vue

<template>		<template>
<div class="container" dusk="wallet-component">		<div class="container" dusk="wallet-component">
<div id="wallet" class="card">		<div id="wallet" class="card">
<div class="card-body">		<div class="card-body">
<div class="card-title">Account balance</div>		<div class="card-title">Account balance</div>
<div class="card-text">		<div class="card-text">
<p>Current account balance is		<p>Current account balance is
<span :class="balance < 0 ? 'text-danger' : 'text-success'"><strong>{{ $root.price(balance) }}</strong></span>		<span :class="balance < 0 ? 'text-danger' : 'text-success'"><strong>{{ $root.price(balance) }}</strong></span>
</p>		</p>
<button type="button" class="btn btn-primary" @click="paymentDialog()">Add credit</button>		<button type="button" class="btn btn-primary" @click="paymentDialog()">Add credit</button>
</div>		</div>
</div>		</div>
</div>		</div>

		<ul class="nav nav-tabs mt-3" role="tablist">
		<li class="nav-item">
		<a class="nav-link active" id="tab-history" href="#wallet-history" role="tab" aria-controls="wallet-history" aria-selected="true">
		History
		</a>
		</li>
		</ul>
		<div class="tab-content">
		<div class="tab-pane show active" id="wallet-history" role="tabpanel" aria-labelledby="tab-history">
		<div class="card-body">
		<div class="card-text">
		<table class="table table-sm m-0">
		<thead class="thead-light">
		<tr>
		<th scope="col">Date</th>
		<th scope="col"></th>
		<th scope="col">Description</th>
		<th scope="col" class="price">Amount</th>
		</tr>
		</thead>
		<tbody>
		<tr v-for="transaction in transactions" :id="'log' + transaction.id" :key="transaction.id">
		<td class="datetime">{{ transaction.createdAt }}</td>
		<td class="selection">
		<button class="btn btn-lg btn-link btn-action" title="Details"
		v-if="transaction.hasDetails"
		@click="loadTransaction(transaction.id)"
		>
		<svg-icon icon="info-circle"></svg-icon>
		</button>
		</td>
		<td class="description">{{ transactionDescription(transaction) }}</td>
		<td :class="'price ' + transactionClass(transaction)">{{ transactionAmount(transaction) }}</td>
		</tr>
		</tbody>
		<tfoot class="table-fake-body">
		<tr>
		<td colspan="4">There are no transactions for this account.</td>
		</tr>
		</tfoot>
		</table>
		<div class="text-center p-3" id="transactions-loader">
		<button class="btn btn-secondary" v-if="transactions_more" @click="loadTransactions(true)">Load more</button>
		</div>
		</div>
		</div>
		</div>
		</div>

<div id="payment-dialog" class="modal" tabindex="-1" role="dialog">		<div id="payment-dialog" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">		<div class="modal-dialog" role="document">
<div class="modal-content">		<div class="modal-content">
<div class="modal-header">		<div class="modal-header">
<h5 class="modal-title">{{ paymentDialogTitle }}</h5>		<h5 class="modal-title">{{ paymentDialogTitle }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">		<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>		<span aria-hidden="true">×</span>
</button>		</button>
▲ Show 20 Lines • Show All 97 Lines • ▼ Show 20 Lines	export default {
return {		return {
amount: '',		amount: '',
balance: 0,		balance: 0,
mandate: { amount: 10, balance: 0 },		mandate: { amount: 10, balance: 0 },
paymentDialogTitle: null,		paymentDialogTitle: null,
paymentForm: 'init',		paymentForm: 'init',
provider: window.config.paymentProvider,		provider: window.config.paymentProvider,
stripe: null,		stripe: null,
		transactions: [],
		transactions_more: false,
		transactions_page: 1,
wallet_currency: 'CHF'		wallet_currency: 'CHF'
}		}
},		},
mounted() {		mounted() {
this.balance = 0		this.balance = 0
// TODO: currencies, multi-wallets, accounts		// TODO: currencies, multi-wallets, accounts
this.$store.state.authInfo.wallets.forEach(wallet => {		this.$store.state.authInfo.wallets.forEach(wallet => {
this.balance += wallet.balance		this.balance += wallet.balance
this.provider = wallet.provider		this.provider = wallet.provider
})		})

		this.loadTransactions()

if (this.provider == 'stripe') {		if (this.provider == 'stripe') {
this.stripeInit()		this.stripeInit()
}		}
},		},
methods: {		methods: {
		loadTransactions(more) {
		let loader = $('#wallet-history')
		let walletId = this.$store.state.authInfo.wallets[0].id
		let param = ''

		if (more) {
		param = '?page=' + (this.transactions_page + 1)
		loader = $('#transactions-loader')
		}

		this.$root.addLoader(loader)
		axios.get('/api/v4/wallets/' + 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.transactions_more = response.data.hasMore
		this.transactions_page = response.data.page \|\| 1
		})
		.catch(error => {
		this.$root.removeLoader(loader)
		})
		},
		loadTransaction(id) {
		let walletId = this.$store.state.authInfo.wallets[0].id
		let record = $('#log' + id)
		let cell = record.find('td.description')
		let details = $('<div class="list-details"><ul></ul><div>').appendTo(cell)

		this.$root.addLoader(cell)
		axios.get('/api/v4/wallets/' + walletId + '/transactions' + '?transaction=' + id)
		.then(response => {
		this.$root.removeLoader(cell)
		record.find('button').remove()
		let list = details.find('ul')
		response.data.list.forEach(elem => {
		list.append($('<li>').text(this.transactionDescription(elem)))
		})
		})
		.catch(error => {
		this.$root.removeLoader(cell)
		})
		},
paymentDialog() {		paymentDialog() {
const dialog = $('#payment-dialog')		const dialog = $('#payment-dialog')
const mandate_form = $('#mandate-form')		const mandate_form = $('#mandate-form')

this.$root.removeLoader(mandate_form)		this.$root.removeLoader(mandate_form)

if (!this.mandate.id) {		if (!this.mandate.id) {
this.$root.addLoader(mandate_form)		this.$root.addLoader(mandate_form)
▲ Show 20 Lines • Show All 98 Lines • ▼ Show 20 Lines	export default {
sessionId: data.id		sessionId: data.id
}).then(result => {		}).then(result => {
// If it fails due to a browser or network error,		// If it fails due to a browser or network error,
// display the localized error message to the user		// display the localized error message to the user
if (result.error) {		if (result.error) {
this.$toast.error(result.error.message)		this.$toast.error(result.error.message)
}		}
})		})
		},
		transactionAmount(transaction) {
		return this.$root.price(transaction.amount)
		},
		transactionClass(transaction) {
		return transaction.amount < 0 ? 'text-danger' : 'text-success';
		},
		transactionDescription(transaction) {
		let desc = transaction.description
		if (/^(billed\|created\|deleted)$/.test(transaction.type)) {
		desc += ' (' + this.$root.price(transaction.amount) + ')'
		}
		return desc
}		}
}		}
}		}
</script>		</script>