Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/User/Info.vue
Show First 20 Lines • Show All 63 Lines • ▼ Show 20 Lines | <div class="container"> | ||||
<tr v-for="pkg in packages" :id="'p' + pkg.id" :key="pkg.id"> | <tr v-for="pkg in packages" :id="'p' + pkg.id" :key="pkg.id"> | ||||
<td class="selection"> | <td class="selection"> | ||||
<input type="checkbox" :value="pkg.id" @click="selectPackage" :checked="pkg.id == package_id"> | <input type="checkbox" :value="pkg.id" @click="selectPackage" :checked="pkg.id == package_id"> | ||||
</td> | </td> | ||||
<td class="name"> | <td class="name"> | ||||
{{ pkg.name }} | {{ pkg.name }} | ||||
</td> | </td> | ||||
<td class="price text-nowrap"> | <td class="price text-nowrap"> | ||||
{{ $root.price(pkg.cost) + '/month' }} | {{ price(pkg.cost) }} | ||||
</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> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
<small v-if="discount > 0" class="hint"> | |||||
<hr class="m-0"> | |||||
¹ applied discount: {{ discount }}% - {{ discount_description }} | |||||
</small> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div v-if="user_id !== 'new'" id="user-skus" class="form-group row"> | <div v-if="user_id !== 'new'" id="user-skus" class="form-group row"> | ||||
<label class="col-sm-4 col-form-label">Subscriptions</label> | <label class="col-sm-4 col-form-label">Subscriptions</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<table class="table form-list"> | <table class="table form-list"> | ||||
<thead class="thead-light sr-only"> | <thead class="thead-light sr-only"> | ||||
<tr> | <tr> | ||||
Show All 21 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.price(sku.cost) + '/month' }} | {{ price(sku.cost) }} | ||||
</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> | ||||
</tbody> | </tbody> | ||||
</table> | </table> | ||||
<small v-if="discount > 0" class="hint"> | |||||
<hr class="m-0"> | |||||
¹ applied discount: {{ discount }}% - {{ discount_description }} | |||||
</small> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Submit</button> | <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Submit</button> | ||||
</form> | </form> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
export default { | export default { | ||||
data() { | data() { | ||||
return { | return { | ||||
discount: 0, | |||||
discount_description: '', | |||||
user_id: null, | user_id: null, | ||||
user: {}, | user: {}, | ||||
packages: [], | packages: [], | ||||
package_id: null, | package_id: null, | ||||
skus: [] | skus: [] | ||||
} | } | ||||
}, | }, | ||||
created() { | created() { | ||||
this.user_id = this.$route.params.user | this.user_id = this.$route.params.user | ||||
let wallet = this.$store.state.authInfo.accounts[0] | |||||
if (!wallet) { | |||||
wallet = this.$store.state.authInfo.wallets[0] | |||||
} | |||||
if (wallet && wallet.discount) { | |||||
this.discount = wallet.discount | |||||
this.discount_description = wallet.discount_description | |||||
} | |||||
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.packages = response.data.filter(pkg => !pkg.isDomain) | this.packages = response.data.filter(pkg => !pkg.isDomain) | ||||
this.package_id = this.packages[0].id | this.package_id = this.packages[0].id | ||||
}) | }) | ||||
.catch(this.$root.errorHandler) | .catch(this.$root.errorHandler) | ||||
} | } | ||||
else { | else { | ||||
axios.get('/api/v4/users/' + this.user_id) | axios.get('/api/v4/users/' + this.user_id) | ||||
.then(response => { | .then(response => { | ||||
this.user = response.data | this.user = response.data | ||||
this.user.first_name = response.data.settings.first_name | this.user.first_name = response.data.settings.first_name | ||||
this.user.last_name = response.data.settings.last_name | this.user.last_name = response.data.settings.last_name | ||||
this.discount = this.user.wallet.discount | |||||
this.discount_description = this.user.wallet.discount_description | |||||
$('#aliases').val(response.data.aliases.join("\n")) | $('#aliases').val(response.data.aliases.join("\n")) | ||||
listinput('#aliases') | listinput('#aliases') | ||||
axios.get('/api/v4/skus') | axios.get('/api/v4/skus') | ||||
.then(response => { | .then(response => { | ||||
// "merge" SKUs with user entitlement-SKUs | // "merge" SKUs with user entitlement-SKUs | ||||
this.skus = response.data | this.skus = response.data | ||||
.filter(sku => sku.type == 'user') | .filter(sku => sku.type == 'user') | ||||
▲ Show 20 Lines • Show All 127 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 | |||||
// 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.price(sku.cost * (value - sku.units_free)) + '/month') | record.find('.price').text(this.price(cost, value - sku.units_free)) | ||||
}, | }, | ||||
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]; | ||||
} | } | ||||
} | } | ||||
}, | |||||
price(cost, units = 1) { | |||||
let index = '' | |||||
if (this.discount) { | |||||
cost = Math.floor(cost * ((100 - this.discount) / 100)) | |||||
index = '\u00B9' | |||||
} | |||||
return this.$root.price(cost * units) + '/month' + index | |||||
} | } | ||||
} | } | ||||
} | } | ||||
// List widget | // List widget | ||||
// TODO: move it to a separate component file when needed | // TODO: move it to a separate component file when needed | ||||
function listinput(elem) | function listinput(elem) | ||||
{ | { | ||||
▲ Show 20 Lines • Show All 68 Lines • Show Last 20 Lines |