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"> | ||||
| <div class="card-text"> | <div class="card-text"> | ||||
| <table class="table table-sm m-0"> | <table class="table table-sm m-0"> | ||||
| <thead class="thead-light"> | <thead class="thead-light"> | ||||
| <tr> | <tr> | ||||
| <th scope="col">Date</th> | <th scope="col">Date</th> | ||||
| <th scope="col"></th> | <th scope="col"></th> | ||||
| <th scope="col">Description</th> | <th scope="col">Description</th> | ||||
| ▲ Show 20 Lines • Show All 136 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: [], | transactions: [], | ||||
| transactions_more: false, | transactions_more: false, | ||||
| transactions_page: 1, | transactions_page: 1, | ||||
| 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 | |||||
| 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() | this.loadTransactions() | ||||
| } | |||||
| }) | |||||
| if (this.provider == 'stripe') { | if (this.provider == 'stripe') { | ||||
| this.stripeInit() | this.stripeInit() | ||||
| } | } | ||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| loadTransactions(more) { | loadTransactions(more) { | ||||
| let loader = $('#wallet-history') | let loader = $('#wallet-history') | ||||
| let walletId = this.$store.state.authInfo.wallets[0].id | |||||
| let param = '' | let param = '' | ||||
| if (more) { | if (more) { | ||||
| param = '?page=' + (this.transactions_page + 1) | param = '?page=' + (this.transactions_page + 1) | ||||
| loader = $('#transactions-loader') | loader = $('#transactions-loader') | ||||
| } | } | ||||
| this.$root.addLoader(loader) | this.$root.addLoader(loader) | ||||
| axios.get('/api/v4/wallets/' + walletId + '/transactions' + param) | axios.get('/api/v4/wallets/' + this.walletId + '/transactions' + param) | ||||
| .then(response => { | .then(response => { | ||||
| this.$root.removeLoader(loader) | this.$root.removeLoader(loader) | ||||
| // Note: In Vue we can't just use .concat() | // Note: In Vue we can't just use .concat() | ||||
| for (let i in response.data.list) { | for (let i in response.data.list) { | ||||
| this.$set(this.transactions, this.transactions.length, response.data.list[i]) | this.$set(this.transactions, this.transactions.length, response.data.list[i]) | ||||
| } | } | ||||
| this.transactions_more = response.data.hasMore | this.transactions_more = response.data.hasMore | ||||
| this.transactions_page = response.data.page || 1 | this.transactions_page = response.data.page || 1 | ||||
| }) | }) | ||||
| .catch(error => { | .catch(error => { | ||||
| this.$root.removeLoader(loader) | this.$root.removeLoader(loader) | ||||
| }) | }) | ||||
| }, | }, | ||||
| loadTransaction(id) { | loadTransaction(id) { | ||||
| let walletId = this.$store.state.authInfo.wallets[0].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/' + walletId + '/transactions' + '?transaction=' + id) | axios.get('/api/v4/wallets/' + this.walletId + '/transactions' + '?transaction=' + id) | ||||
| .then(response => { | .then(response => { | ||||
| this.$root.removeLoader(cell) | this.$root.removeLoader(cell) | ||||
| record.find('button').remove() | record.find('button').remove() | ||||
| let list = details.find('ul') | let list = details.find('ul') | ||||
| response.data.list.forEach(elem => { | response.data.list.forEach(elem => { | ||||
| list.append($('<li>').text(this.transactionDescription(elem))) | list.append($('<li>').text(this.transactionDescription(elem))) | ||||
| }) | }) | ||||
| }) | }) | ||||
| ▲ Show 20 Lines • Show All 78 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 20 Lines • Show All 41 Lines • Show Last 20 Lines | |||||