Page MenuHomePhorge
Differential D1168 Diff 3043 src/resources/vue/Admin/User.vue

Changeset View

Standalone View

View Options

src/resources/vue/Admin/User.vue

Show First 20 Lines • Show All 104 Lines • ▼ Show 20 Lines <div class="container">
<div class="card-title">Account balance <span :class="balance < 0 ? 'text-danger' : 'text-success'"><strong>{{ $root.price(balance) }}</strong></span></div> <div class="card-title">Account balance <span :class="balance < 0 ? 'text-danger' : 'text-success'"><strong>{{ $root.price(balance) }}</strong></span></div>
<div class="card-text"> <div class="card-text">
<form> <form>
<div class="form-group row mb-0"> <div class="form-group row mb-0">
<label for="first_name" class="col-sm-2 col-form-label">Discount:</label> <label for="first_name" class="col-sm-2 col-form-label">Discount:</label>
<div class="col-sm-10"> <div class="col-sm-10">
<span class="form-control-plaintext" id="discount"> <span class="form-control-plaintext" id="discount">
<span>{{ wallet_discount ? (wallet_discount + '% - ' + wallet_discount_description) : 'none' }}</span> <span>{{ wallet_discount ? (wallet_discount + '% - ' + wallet_discount_description) : 'none' }}</span>
<button type="button" class="btn btn-secondary btn-sm">Edit</button> <button type="button" class="btn btn-secondary btn-sm" @click="discountEdit">Edit</button>
</span> </span>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
<div class="tab-pane" id="user-aliases" role="tabpanel" aria-labelledby="tab-aliases"> <div class="tab-pane" id="user-aliases" role="tabpanel" aria-labelledby="tab-aliases">
▲ Show 20 Lines • Show All 96 Lines • ▼ Show 20 Lines <div class="container">
<td>There are no users in this account.</td> <td>There are no users in this account.</td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="discount-dialog" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Account discount</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p class="form-group">
<select v-model="wallet_discount_id" class="custom-select">
<option value="">- none -</option>
<option v-for="item in discounts" :value="item.id" :key="item.id">{{ item.label }}</option>
</select>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary modal-cancel" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary modal-action" @click="submitDiscount()">
<svg-icon icon="check"></svg-icon> Submit
</button>
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
beforeRouteUpdate (to, from, next) { beforeRouteUpdate (to, from, next) {
// An event called when the route that renders this component has changed, // An event called when the route that renders this component has changed,
// but this component is reused in the new route. // but this component is reused in the new route.
// Required to handle links from /user/XXX to /user/YYY // Required to handle links from /user/XXX to /user/YYY
next() next()
this.$parent.routerReload() this.$parent.routerReload()
}, },
data() { data() {
return { return {
balance: 0, balance: 0,
discount: 0, discount: 0,
discount_description: '', discount_description: '',
discounts: [],
wallet_discount: 0, wallet_discount: 0,
wallet_discount_description: '', wallet_discount_description: '',
wallet_discount_id: '',
domains: [], domains: [],
skus: [], skus: [],
users: [], users: [],
user: { user: {
aliases: [], aliases: [],
wallet: {}, wallet: {},
skus: {}, skus: {},
} }
Show All 23 Lines export default {
this.discount_description = this.user.wallet.discount_description this.discount_description = this.user.wallet.discount_description
// TODO: currencies, multi-wallets, accounts // TODO: currencies, multi-wallets, accounts
this.user.wallets.forEach(wallet => { this.user.wallets.forEach(wallet => {
this.balance += wallet.balance this.balance += wallet.balance
}) })
this.wallet_discount = this.user.wallets[0].discount this.wallet_discount = this.user.wallets[0].discount
this.wallet_discount_id = this.user.wallets[0].discount_id || ''
this.wallet_discount_description = this.user.wallets[0].discount_description this.wallet_discount_description = this.user.wallets[0].discount_description
// Create subscriptions list // Create subscriptions list
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
response.data.forEach(sku => { response.data.forEach(sku => {
if (sku.id in this.user.skus) { if (sku.id in this.user.skus) {
let count = this.user.skus[sku.id].count let count = this.user.skus[sku.id].count
let item = { let item = {
id: sku.id, id: sku.id,
name: sku.name, name: sku.name,
cost: sku.cost,
units: count - sku.units_free,
price: this.price(sku.cost, count - sku.units_free) price: this.price(sku.cost, count - sku.units_free)
} }
if (sku.range) { if (sku.range) {
item.name += ' ' + count + ' ' + sku.range.unit item.name += ' ' + count + ' ' + sku.range.unit
} }
this.skus.push(item) this.skus.push(item)
Show All 20 Lines export default {
}, },
mounted() { mounted() {
$(this.$el).find('ul.nav-tabs a').on('click', e => { $(this.$el).find('ul.nav-tabs a').on('click', e => {
e.preventDefault() e.preventDefault()
$(e.target).tab('show') $(e.target).tab('show')
}) })
}, },
methods: { methods: {
discountEdit() {
$('#discount-dialog')
.on('shown.bs.modal', (e, a) => {
$(e.target).find('select').focus()
})
.modal()
if (!this.discounts.length) {
// Fetch discounts
axios.get('/api/v4/discounts')
.then(response => {
this.discounts = response.data.list
})
}
},
price(cost, units = 1) { price(cost, units = 1) {
let index = '' let index = ''
if (units < 0) { if (units < 0) {
units = 1 units = 1
} }
if (this.discount) { if (this.discount) {
cost = Math.floor(cost * ((100 - this.discount) / 100)) cost = Math.floor(cost * ((100 - this.discount) / 100))
index = '\u00B9' index = '\u00B9'
} }
return this.$root.price(cost * units) + '/month' + index return this.$root.price(cost * units) + '/month' + index
},
submitDiscount() {
let dialog = $('#discount-dialog').modal('hide')
axios.put('/api/v4/wallets/' + this.user.wallets[0].id, { discount: this.wallet_discount_id })
.then(response => {
if (response.data.status == 'success') {
this.$toastr('success', response.data.message)
this.wallet_discount = response.data.discount
this.wallet_discount_id = response.data.discount_id || ''
this.wallet_discount_description = response.data.discount_description
// Update prices in Subscriptions tab
if (this.user.wallet.id == response.data.id) {
this.discount = this.wallet_discount
this.discount_description = this.wallet_discount_description
this.skus.forEach(sku => {
sku.price = this.price(sku.cost, sku.units)
})
}
} }
})
},
} }
} }
</script> </script>