Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/User/Info.vue
| Show First 20 Lines • Show All 96 Lines • ▼ Show 20 Lines | <div class="container"> | ||||
| :checked="pkg.id == package_id" | :checked="pkg.id == package_id" | ||||
| :id="'pkg-input-' + pkg.id" | :id="'pkg-input-' + pkg.id" | ||||
| > | > | ||||
| </td> | </td> | ||||
| <td class="name"> | <td class="name"> | ||||
| <label :for="'pkg-input-' + pkg.id">{{ pkg.name }}</label> | <label :for="'pkg-input-' + pkg.id">{{ pkg.name }}</label> | ||||
| </td> | </td> | ||||
| <td class="price text-nowrap"> | <td class="price text-nowrap"> | ||||
| {{ $root.priceLabel(pkg.cost, discount) }} | {{ $root.priceLabel(pkg.cost, discount, currency) }} | ||||
| </td> | </td> | ||||
| <td class="buttons"> | <td class="buttons"> | ||||
| <button v-if="pkg.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip="pkg.description"> | <button v-if="pkg.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip="pkg.description"> | ||||
| <svg-icon icon="info-circle"></svg-icon> | <svg-icon icon="info-circle"></svg-icon> | ||||
| <span class="visually-hidden">{{ $t('btn.moreinfo') }}</span> | <span class="visually-hidden">{{ $t('btn.moreinfo') }}</span> | ||||
| </button> | </button> | ||||
| </td> | </td> | ||||
| </tr> | </tr> | ||||
| Show All 35 Lines | <div class="container"> | ||||
| type="range" class="form-range" @input="rangeUpdate" | type="range" class="form-range" @input="rangeUpdate" | ||||
| :value="sku.value || sku.range.min" | :value="sku.value || sku.range.min" | ||||
| :min="sku.range.min" | :min="sku.range.min" | ||||
| :max="sku.range.max" | :max="sku.range.max" | ||||
| > | > | ||||
| </div> | </div> | ||||
| </td> | </td> | ||||
| <td class="price text-nowrap"> | <td class="price text-nowrap"> | ||||
| {{ $root.priceLabel(sku.cost, discount) }} | {{ $root.priceLabel(sku.cost, discount, currency) }} | ||||
| </td> | </td> | ||||
| <td class="buttons"> | <td class="buttons"> | ||||
| <button v-if="sku.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip="sku.description"> | <button v-if="sku.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip="sku.description"> | ||||
| <svg-icon icon="info-circle"></svg-icon> | <svg-icon icon="info-circle"></svg-icon> | ||||
| <span class="visually-hidden">{{ $t('btn.moreinfo') }}</span> | <span class="visually-hidden">{{ $t('btn.moreinfo') }}</span> | ||||
| </button> | </button> | ||||
| </td> | </td> | ||||
| </tr> | </tr> | ||||
| ▲ Show 20 Lines • Show All 55 Lines • ▼ Show 20 Lines | <script> | ||||
| export default { | export default { | ||||
| components: { | components: { | ||||
| ListInput, | ListInput, | ||||
| StatusComponent | StatusComponent | ||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| currency: '', | |||||
| discount: 0, | discount: 0, | ||||
| discount_description: '', | discount_description: '', | ||||
| user_id: null, | user_id: null, | ||||
| user: { aliases: [], config: [] }, | user: { aliases: [], config: [] }, | ||||
| packages: [], | packages: [], | ||||
| package_id: null, | package_id: null, | ||||
| skus: [], | skus: [], | ||||
| status: {} | status: {} | ||||
| } | } | ||||
| }, | }, | ||||
| created() { | created() { | ||||
| this.user_id = this.$route.params.user | this.user_id = this.$route.params.user | ||||
| let wallet = this.$store.state.authInfo.accounts[0] | let wallet = this.$store.state.authInfo.accounts[0] | ||||
| if (!wallet) { | if (!wallet) { | ||||
| wallet = this.$store.state.authInfo.wallets[0] | wallet = this.$store.state.authInfo.wallets[0] | ||||
| } | } | ||||
| if (wallet && wallet.discount) { | if (wallet) { | ||||
| this.currency = wallet.currency | |||||
| if (wallet.discount) { | |||||
| this.discount = wallet.discount | this.discount = wallet.discount | ||||
| this.discount_description = wallet.discount_description | this.discount_description = wallet.discount_description | ||||
| } | } | ||||
| } | |||||
| this.$root.startLoading() | this.$root.startLoading() | ||||
| if (this.user_id === 'new') { | if (this.user_id === 'new') { | ||||
| // do nothing (for now) | // do nothing (for now) | ||||
| axios.get('/api/v4/packages') | axios.get('/api/v4/packages') | ||||
| .then(response => { | .then(response => { | ||||
| this.$root.stopLoading() | this.$root.stopLoading() | ||||
| ▲ Show 20 Lines • Show All 179 Lines • ▼ Show 20 Lines | export default { | ||||
| } else { | } else { | ||||
| cost = sku.cost * (value - sku.units_free) | cost = sku.cost * (value - sku.units_free) | ||||
| } | } | ||||
| // Update the label | // Update the label | ||||
| input.prev().text(value + ' ' + sku.range.unit) | input.prev().text(value + ' ' + sku.range.unit) | ||||
| // Update the price | // Update the price | ||||
| record.find('.price').text(this.$root.priceLabel(cost, this.discount)) | record.find('.price').text(this.$root.priceLabel(cost, this.discount, this.currency)) | ||||
| }, | }, | ||||
| findSku(id) { | findSku(id) { | ||||
| for (let i = 0; i < this.skus.length; i++) { | for (let i = 0; i < this.skus.length; i++) { | ||||
| if (this.skus[i].id == id) { | if (this.skus[i].id == id) { | ||||
| return this.skus[i]; | return this.skus[i]; | ||||
| } | } | ||||
| } | } | ||||
| }, | }, | ||||
| Show All 25 Lines | |||||