Page MenuHomePhorge
Differential D1063 Diff 2890 src/resources/vue/User/Info.vue

Changeset View

Standalone View

View Options

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">
&sup1; 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">
&sup1; 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