Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Wallet.vue
| Show All 35 Lines | <div class="container" dusk="wallet-component"> | ||||
| <btn class="btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</btn> | <btn class="btn-danger" @click="autoPaymentDelete">{{ $t('wallet.auto-payment-cancel') }}</btn> | ||||
| <btn class="btn-primary" @click="autoPaymentChange">{{ $t('wallet.auto-payment-change') }}</btn> | <btn class="btn-primary" @click="autoPaymentChange">{{ $t('wallet.auto-payment-change') }}</btn> | ||||
| </p> | </p> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <ul class="nav nav-tabs mt-3" role="tablist"> | <tabs class="mt-3" ref="tabs" :tabs="tabs"></tabs> | ||||
| <li class="nav-item"> | |||||
| <a class="nav-link active" id="tab-receipts" href="#wallet-receipts" role="tab" aria-controls="wallet-receipts" aria-selected="true"> | |||||
| {{ $t('wallet.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"> | |||||
| {{ $t('wallet.history') }} | |||||
| </a> | |||||
| </li> | |||||
| <li v-if="showPendingPayments" class="nav-item"> | |||||
| <a class="nav-link" id="tab-payments" href="#wallet-payments" role="tab" aria-controls="wallet-payments" aria-selected="false"> | |||||
| {{ $t('wallet.pending-payments') }} | |||||
| </a> | |||||
| </li> | |||||
| </ul> | |||||
| <div class="tab-content"> | <div class="tab-content"> | ||||
| <div class="tab-pane active" id="wallet-receipts" role="tabpanel" aria-labelledby="tab-receipts"> | <div class="tab-pane active" id="receipts" role="tabpanel" aria-labelledby="tab-receipts"> | ||||
| <div class="card-body"> | <div class="card-body"> | ||||
| <div class="card-text"> | <div class="card-text"> | ||||
| <p v-if="receipts.length"> | <p v-if="receipts.length"> | ||||
| {{ $t('wallet.receipts-hint') }} | {{ $t('wallet.receipts-hint') }} | ||||
| </p> | </p> | ||||
| <div v-if="receipts.length" class="input-group"> | <div v-if="receipts.length" class="input-group"> | ||||
| <select id="receipt-id" class="form-control"> | <select id="receipt-id" class="form-control"> | ||||
| <option v-for="(receipt, index) in receipts" :key="index" :value="receipt">{{ receipt }}</option> | <option v-for="(receipt, index) in receipts" :key="index" :value="receipt">{{ receipt }}</option> | ||||
| </select> | </select> | ||||
| <btn class="btn-secondary" @click="receiptDownload" icon="download">{{ $t('btn.download') }}</btn> | <btn class="btn-secondary" @click="receiptDownload" icon="download">{{ $t('btn.download') }}</btn> | ||||
| </div> | </div> | ||||
| <p v-if="!receipts.length"> | <p v-if="!receipts.length"> | ||||
| {{ $t('wallet.receipts-none') }} | {{ $t('wallet.receipts-none') }} | ||||
| </p> | </p> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="tab-pane" id="wallet-history" role="tabpanel" aria-labelledby="tab-history"> | <div class="tab-pane" id="history" role="tabpanel" aria-labelledby="tab-history"> | ||||
| <div class="card-body"> | <div class="card-body"> | ||||
| <transaction-log v-if="walletId && loadTransactions" 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 class="tab-pane" id="wallet-payments" role="tabpanel" aria-labelledby="tab-payments"> | <div class="tab-pane" id="payments" role="tabpanel" aria-labelledby="tab-payments"> | ||||
| <div class="card-body"> | <div class="card-body"> | ||||
| <payment-log v-if="walletId && loadPayments" class="card-text" :wallet-id="walletId"></payment-log> | <payment-log v-if="walletId && loadPayments" class="card-text" :wallet-id="walletId"></payment-log> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <modal-dialog id="payment-dialog" ref="paymentDialog" :title="paymentDialogTitle" @click="payment" :buttons="dialogButtons"> | <modal-dialog id="payment-dialog" ref="paymentDialog" :title="paymentDialogTitle" @click="payment" :buttons="dialogButtons"> | ||||
| <div id="payment-method" v-if="paymentForm == 'method'"> | <div id="payment-method" v-if="paymentForm == 'method'"> | ||||
| ▲ Show 20 Lines • Show All 114 Lines • ▼ Show 20 Lines | export default { | ||||
| if (this.paymentForm == 'manual' | if (this.paymentForm == 'manual' | ||||
| || (this.paymentForm == 'auto' && !this.mandate.isValid && !this.mandate.isPending) | || (this.paymentForm == 'auto' && !this.mandate.isValid && !this.mandate.isPending) | ||||
| ) { | ) { | ||||
| button.label = 'btn.continue' | button.label = 'btn.continue' | ||||
| } | } | ||||
| return [ button ] | return [ button ] | ||||
| }, | |||||
| tabs() { | |||||
| let tabs = [ 'wallet.receipts', 'wallet.history' ] | |||||
| if (this.showPendingPayments) { | |||||
| tabs.push('wallet.pending-payments') | |||||
| } | |||||
| return tabs | |||||
| } | } | ||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| $('#wallet button').focus() | $('#wallet button').focus() | ||||
| this.walletId = this.$root.authInfo.wallets[0].id | this.walletId = this.$root.authInfo.wallets[0].id | ||||
| axios.get('/api/v4/wallets/' + this.walletId, { loader: true }) | axios.get('/api/v4/wallets/' + this.walletId, { loader: true }) | ||||
| .then(response => { | .then(response => { | ||||
| this.wallet = response.data | this.wallet = response.data | ||||
| axios.get('/api/v4/wallets/' + this.walletId + '/receipts', { loader: '#wallet-receipts' }) | axios.get('/api/v4/wallets/' + this.walletId + '/receipts', { loader: '#receipts' }) | ||||
| .then(response => { | .then(response => { | ||||
| this.receipts = response.data.list | this.receipts = response.data.list | ||||
| }) | }) | ||||
| if (this.wallet.provider == 'stripe') { | if (this.wallet.provider == 'stripe') { | ||||
| this.stripeInit() | this.stripeInit() | ||||
| } | } | ||||
| }) | }) | ||||
| .catch(this.$root.errorHandler) | .catch(this.$root.errorHandler) | ||||
| this.loadMandate() | this.loadMandate() | ||||
| axios.get('/api/v4/payments/has-pending') | axios.get('/api/v4/payments/has-pending') | ||||
| .then(response => { | .then(response => { | ||||
| this.showPendingPayments = response.data.hasPending | this.showPendingPayments = response.data.hasPending | ||||
| }) | }) | ||||
| }, | |||||
| updated() { | this.$refs.tabs.clickHandler('history', () => { this.loadTransactions = true }) | ||||
| $(this.$el).find('ul.nav-tabs a').on('click', e => { | this.$refs.tabs.clickHandler('payments', () => { this.loadPayments = true }) | ||||
| this.$root.tab(e) | |||||
| if ($(e.target).is('#tab-history')) { | |||||
| this.loadTransactions = true | |||||
| } else if ($(e.target).is('#tab-payments')) { | |||||
| this.loadPayments = true | |||||
| } | |||||
| }) | |||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| loadMandate() { | loadMandate() { | ||||
| const loader = '#mandate-form' | const loader = '#mandate-form' | ||||
| this.$root.stopLoading(loader) | this.$root.stopLoading(loader) | ||||
| if (!this.mandate.id || this.mandate.isPending) { | if (!this.mandate.id || this.mandate.isPending) { | ||||
| ▲ Show 20 Lines • Show All 164 Lines • Show Last 20 Lines | |||||