Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Admin/User.vue
Show First 20 Lines • Show All 46 Lines • ▼ Show 20 Lines | <div class="container"> | ||||
<span class="form-control-plaintext" id="phone">{{ user.phone }}</span> | <span class="form-control-plaintext" id="phone">{{ user.phone }}</span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row mb-0"> | <div class="form-group row mb-0"> | ||||
<label for="external_email" class="col-sm-4 col-form-label">External email</label> | <label for="external_email" class="col-sm-4 col-form-label">External email</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<span class="form-control-plaintext" id="external_email"> | <span class="form-control-plaintext" id="external_email"> | ||||
<a v-if="user.external_email" :href="'mailto:' + user.external_email">{{ user.external_email }}</a> | <a v-if="user.external_email" :href="'mailto:' + user.external_email">{{ user.external_email }}</a> | ||||
<button type="button" class="btn btn-secondary btn-sm">Edit</button> | <button type="button" class="btn btn-secondary btn-sm" @click="emailEdit">Edit</button> | ||||
</span> | </span> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row mb-0" v-if="user.billing_address"> | <div class="form-group row mb-0" v-if="user.billing_address"> | ||||
<label for="billing_address" class="col-sm-4 col-form-label">Address</label> | <label for="billing_address" class="col-sm-4 col-form-label">Address</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<span class="form-control-plaintext" style="white-space:pre" id="billing_address">{{ user.billing_address }}</span> | <span class="form-control-plaintext" style="white-space:pre" id="billing_address">{{ user.billing_address }}</span> | ||||
</div> | </div> | ||||
▲ Show 20 Lines • Show All 181 Lines • ▼ Show 20 Lines | <div class="container"> | ||||
<button type="button" class="btn btn-secondary modal-cancel" data-dismiss="modal">Cancel</button> | <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()"> | <button type="button" class="btn btn-primary modal-action" @click="submitDiscount()"> | ||||
<svg-icon icon="check"></svg-icon> Submit | <svg-icon icon="check"></svg-icon> Submit | ||||
</button> | </button> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div id="email-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">External email</h5> | |||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |||||
<span aria-hidden="true">×</span> | |||||
</button> | |||||
</div> | |||||
<div class="modal-body"> | |||||
<p class="form-group"> | |||||
<input v-model="external_email" name="external_email" class="form-control"> | |||||
</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="submitEmail()"> | |||||
<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: [], | discounts: [], | ||||
external_email: '', | |||||
wallet_discount: 0, | wallet_discount: 0, | ||||
wallet_discount_description: '', | wallet_discount_description: '', | ||||
wallet_discount_id: '', | wallet_discount_id: '', | ||||
domains: [], | domains: [], | ||||
skus: [], | skus: [], | ||||
users: [], | users: [], | ||||
user: { | user: { | ||||
aliases: [], | aliases: [], | ||||
▲ Show 20 Lines • Show All 79 Lines • ▼ Show 20 Lines | export default { | ||||
$(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() { | discountEdit() { | ||||
$('#discount-dialog') | $('#discount-dialog') | ||||
.on('shown.bs.modal', (e, a) => { | .on('shown.bs.modal', e => { | ||||
$(e.target).find('select').focus() | $(e.target).find('select').focus() | ||||
}) | }) | ||||
.modal() | .modal() | ||||
if (!this.discounts.length) { | if (!this.discounts.length) { | ||||
// Fetch discounts | // Fetch discounts | ||||
axios.get('/api/v4/discounts') | axios.get('/api/v4/discounts') | ||||
.then(response => { | .then(response => { | ||||
this.discounts = response.data.list | this.discounts = response.data.list | ||||
}) | }) | ||||
} | } | ||||
}, | }, | ||||
emailEdit() { | |||||
this.external_email = this.user.external_email | |||||
this.$root.clearFormValidation($('#email-dialog')) | |||||
$('#email-dialog') | |||||
.on('shown.bs.modal', e => { | |||||
$(e.target).find('input').focus() | |||||
}) | |||||
.modal() | |||||
}, | |||||
submitDiscount() { | submitDiscount() { | ||||
let dialog = $('#discount-dialog').modal('hide') | $('#discount-dialog').modal('hide') | ||||
axios.put('/api/v4/wallets/' + this.user.wallets[0].id, { discount: this.wallet_discount_id }) | axios.put('/api/v4/wallets/' + this.user.wallets[0].id, { discount: this.wallet_discount_id }) | ||||
.then(response => { | .then(response => { | ||||
if (response.data.status == 'success') { | if (response.data.status == 'success') { | ||||
this.$toast.success(response.data.message) | this.$toast.success(response.data.message) | ||||
this.wallet_discount = response.data.discount | this.wallet_discount = response.data.discount | ||||
this.wallet_discount_id = response.data.discount_id || '' | this.wallet_discount_id = response.data.discount_id || '' | ||||
this.wallet_discount_description = response.data.discount_description | this.wallet_discount_description = response.data.discount_description | ||||
// Update prices in Subscriptions tab | // Update prices in Subscriptions tab | ||||
if (this.user.wallet.id == response.data.id) { | if (this.user.wallet.id == response.data.id) { | ||||
this.discount = this.wallet_discount | this.discount = this.wallet_discount | ||||
this.discount_description = this.wallet_discount_description | this.discount_description = this.wallet_discount_description | ||||
this.skus.forEach(sku => { | this.skus.forEach(sku => { | ||||
sku.price = this.$root.priceLabel(sku.cost, sku.units, this.discount) | sku.price = this.$root.priceLabel(sku.cost, sku.units, this.discount) | ||||
}) | }) | ||||
} | } | ||||
} | } | ||||
}) | }) | ||||
}, | }, | ||||
submitEmail() { | |||||
axios.put('/api/v4/users/' + this.user.id, { external_email: this.external_email }) | |||||
.then(response => { | |||||
if (response.data.status == 'success') { | |||||
$('#email-dialog').modal('hide') | |||||
this.$toast.success(response.data.message) | |||||
this.user.external_email = this.external_email | |||||
this.external_email = null // required because of Vue | |||||
} | |||||
}) | |||||
} | |||||
} | } | ||||
} | } | ||||
</script> | </script> |