Changeset View
Changeset View
Standalone 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"> | <ul class="nav nav-tabs mt-3" role="tablist"> | ||||
<li class="nav-item"> | <li class="nav-item"> | ||||
<a class="nav-link active" id="tab-history" href="#wallet-history" role="tab" aria-controls="wallet-history" aria-selected="true"> | <a class="nav-link active" id="tab-receipts" href="#wallet-receipts" role="tab" aria-controls="wallet-receipts" aria-selected="true"> | ||||
Receipts | |||||
</a> | |||||
</li> | |||||
<li class="nav-item"> | |||||
<a class="nav-link" id="tab-history" href="#wallet-history" role="tab" aria-controls="wallet-history" aria-selected="false"> | |||||
History | History | ||||
</a> | </a> | ||||
</li> | </li> | ||||
</ul> | </ul> | ||||
<div class="tab-content"> | <div class="tab-content"> | ||||
<div class="tab-pane show active" id="wallet-history" role="tabpanel" aria-labelledby="tab-history"> | <div class="tab-pane show active" id="wallet-receipts" role="tabpanel" aria-labelledby="tab-receipts"> | ||||
<div class="card-body"> | |||||
<div class="card-text"> | |||||
<p v-if="receipts.length"> | |||||
Here you can download receipts (in PDF format) for payments in specified period. | |||||
Select the period and press the Download button. | |||||
</p> | |||||
<div v-if="receipts.length" class="input-group"> | |||||
<select id="receipt-id" class="form-control"> | |||||
<option v-for="(receipt, index) in receipts" :key="index" :value="receipt">{{ receipt }}</option> | |||||
</select> | |||||
<div class="input-group-append"> | |||||
<button type="button" class="btn btn-secondary" @click="receiptDownload"> | |||||
<svg-icon icon="download"></svg-icon> Download | |||||
</button> | |||||
</div> | |||||
</div> | |||||
<p v-if="!receipts.length"> | |||||
There are no receipts for payments in this account. Please, note that you can download | |||||
receipts after the month ends. | |||||
</p> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="tab-pane show" id="wallet-history" role="tabpanel" aria-labelledby="tab-history"> | |||||
<div class="card-body"> | <div class="card-body"> | ||||
<transaction-log v-if="walletId" class="card-text" :wallet-id="walletId"></transaction-log> | <transaction-log v-if="walletId && loadTransactions" class="card-text" :wallet-id="walletId"></transaction-log> | ||||
</div> | </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"> | ||||
▲ Show 20 Lines • Show All 105 Lines • ▼ Show 20 Lines | export default { | ||||
data() { | data() { | ||||
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, | ||||
receipts: [], | |||||
stripe: null, | stripe: null, | ||||
transactions: [], | loadTransactions: false, | ||||
transactions_more: false, | |||||
transactions_page: 1, | |||||
walletId: null, | walletId: null, | ||||
wallet_currency: 'CHF' | wallet_currency: 'CHF' | ||||
} | } | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
$('#wallet button').focus() | |||||
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.walletId = this.$store.state.authInfo.wallets[0].id | this.walletId = this.$store.state.authInfo.wallets[0].id | ||||
const receiptsTab = $('#wallet-receipts') | |||||
this.$root.addLoader(receiptsTab) | |||||
axios.get('/api/v4/wallets/' + this.walletId + '/receipts') | |||||
.then(response => { | |||||
this.$root.removeLoader(receiptsTab) | |||||
this.receipts = response.data.list | |||||
}) | |||||
.catch(error => { | |||||
this.$root.removeLoader(receiptsTab) | |||||
}) | |||||
$(this.$el).find('ul.nav-tabs a').on('click', e => { | |||||
e.preventDefault() | |||||
$(e.target).tab('show') | |||||
if ($(e.target).is('#tab-history')) { | |||||
this.loadTransactions = true | |||||
} | |||||
}) | |||||
if (this.provider == 'stripe') { | if (this.provider == 'stripe') { | ||||
this.stripeInit() | this.stripeInit() | ||||
} | } | ||||
}, | }, | ||||
methods: { | methods: { | ||||
paymentDialog() { | paymentDialog() { | ||||
const dialog = $('#payment-dialog') | const dialog = $('#payment-dialog') | ||||
const mandate_form = $('#mandate-form') | const mandate_form = $('#mandate-form') | ||||
▲ Show 20 Lines • Show All 71 Lines • ▼ Show 20 Lines | export default { | ||||
} | } | ||||
}) | }) | ||||
}, | }, | ||||
autoPaymentForm(event, title) { | autoPaymentForm(event, title) { | ||||
this.paymentForm = 'auto' | this.paymentForm = 'auto' | ||||
this.paymentDialogTitle = title || 'Add auto-payment' | this.paymentDialogTitle = title || 'Add auto-payment' | ||||
setTimeout(() => { this.dialog.find('#mandate_amount').focus()}, 10) | setTimeout(() => { this.dialog.find('#mandate_amount').focus()}, 10) | ||||
}, | }, | ||||
receiptDownload() { | |||||
const receipt = $('#receipt-id').val() | |||||
this.$root.downloadFile('/api/v4/wallets/' + this.walletId + '/receipts/' + receipt) | |||||
}, | |||||
stripeInit() { | stripeInit() { | ||||
let script = $('#stripe-script') | let script = $('#stripe-script') | ||||
if (!script.length) { | if (!script.length) { | ||||
script = document.createElement('script') | script = document.createElement('script') | ||||
script.onload = () => { | script.onload = () => { | ||||
this.stripe = Stripe(window.config.stripePK) | this.stripe = Stripe(window.config.stripePK) | ||||
Show All 28 Lines |