Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/User/Info.vue
| Show First 20 Lines • Show All 82 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, 1, discount) }} | {{ $root.priceLabel(pkg.cost, discount) }} | ||||
| </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.click="pkg.description"> | <button v-if="pkg.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip.click="pkg.description"> | ||||
| <svg-icon icon="info-circle"></svg-icon> | <svg-icon icon="info-circle"></svg-icon> | ||||
| <span class="sr-only">More information</span> | <span class="sr-only">More information</span> | ||||
| </button> | </button> | ||||
| </td> | </td> | ||||
| </tr> | </tr> | ||||
| Show All 35 Lines | <div class="container"> | ||||
| type="range" class="custom-range" @input="rangeUpdate" | type="range" class="custom-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, 1, discount) }} | {{ $root.priceLabel(sku.cost, discount) }} | ||||
| </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.click="sku.description"> | <button v-if="sku.description" type="button" class="btn btn-link btn-lg p-0" v-tooltip.click="sku.description"> | ||||
| <svg-icon icon="info-circle"></svg-icon> | <svg-icon icon="info-circle"></svg-icon> | ||||
| <span class="sr-only">More information</span> | <span class="sr-only">More information</span> | ||||
| </button> | </button> | ||||
| </td> | </td> | ||||
| </tr> | </tr> | ||||
| ▲ Show 20 Lines • Show All 97 Lines • ▼ Show 20 Lines | export default { | ||||
| this.discount_description = this.user.wallet.discount_description | this.discount_description = this.user.wallet.discount_description | ||||
| this.status = response.data.statusInfo | this.status = response.data.statusInfo | ||||
| axios.get('/api/v4/users/' + this.user_id + '/skus?type=user') | axios.get('/api/v4/users/' + this.user_id + '/skus?type=user') | ||||
| .then(response => { | .then(response => { | ||||
| // "merge" SKUs with user entitlement-SKUs | // "merge" SKUs with user entitlement-SKUs | ||||
| this.skus = response.data | this.skus = response.data | ||||
| .map(sku => { | .map(sku => { | ||||
| if (sku.id in this.user.skus) { | const userSku = this.user.skus[sku.id] | ||||
| if (userSku) { | |||||
| sku.enabled = true | sku.enabled = true | ||||
| sku.value = this.user.skus[sku.id].count | sku.skuCost = sku.cost | ||||
| sku.cost = userSku.costs.reduce((sum, current) => sum + current) | |||||
| sku.value = userSku.count | |||||
| sku.costs = userSku.costs | |||||
| } else if (!sku.readonly) { | } else if (!sku.readonly) { | ||||
| sku.enabled = false | sku.enabled = false | ||||
| } | } | ||||
| return sku | return sku | ||||
| }) | }) | ||||
| // Update all range inputs (and price) | // Update all range inputs (and price) | ||||
| ▲ Show 20 Lines • Show All 107 Lines • ▼ Show 20 Lines | export default { | ||||
| this.package_id = $(e.target).prop('checked', false).val() | this.package_id = $(e.target).prop('checked', false).val() | ||||
| }, | }, | ||||
| rangeUpdate(e) { | rangeUpdate(e) { | ||||
| let input = $(e.target || e) | let input = $(e.target || e) | ||||
| let value = input.val() | let value = input.val() | ||||
| let record = input.parents('tr').first() | let record = input.parents('tr').first() | ||||
| let sku_id = record.find('input[type=checkbox]').val() | let sku_id = record.find('input[type=checkbox]').val() | ||||
| let sku = this.findSku(sku_id) | let sku = this.findSku(sku_id) | ||||
| let cost = sku.cost | let existing = sku.costs ? sku.costs.length : 0 | ||||
| let cost | |||||
| // Calculate cost, considering both existing entitlement cost and sku cost | |||||
| if (existing) { | |||||
| cost = sku.costs | |||||
| .sort((a, b) => a - b) // sort by cost ascending (free units first) | |||||
| .slice(0, value) | |||||
| .reduce((sum, current) => sum + current) | |||||
| if (value > existing) { | |||||
| cost += sku.skuCost * (value - existing) | |||||
| } | |||||
| } else { | |||||
| 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, value - sku.units_free, this.discount)) | record.find('.price').text(this.$root.priceLabel(cost, this.discount)) | ||||
| }, | }, | ||||
| 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 29 Lines | |||||