Page MenuHomePhorge
Differential D1120 Diff 2914 src/resources/vue/User/Info.vue

Changeset View

Standalone View

View Options

src/resources/vue/User/Info.vue

Show All 25 Lines <div class="container">
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="email" class="col-sm-4 col-form-label">Email</label> <label for="email" class="col-sm-4 col-form-label">Email</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input type="text" class="form-control" id="email" :disabled="user_id !== 'new'" required v-model="user.email"> <input type="text" class="form-control" id="email" :disabled="user_id !== 'new'" required v-model="user.email">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="aliases" class="col-sm-4 col-form-label">Email aliases</label> <label for="aliases-input" class="col-sm-4 col-form-label">Email aliases</label>
<div class="col-sm-8"> <div class="col-sm-8">
<textarea class="form-control listinput" id="aliases"></textarea> <list-input id="aliases" v-bind:list="user.aliases"></list-input>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="password" class="col-sm-4 col-form-label">Password</label> <label for="password" class="col-sm-4 col-form-label">Password</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input type="password" class="form-control" id="password" v-model="user.password" :required="user_id === 'new'"> <input type="password" class="form-control" id="password" v-model="user.password" :required="user_id === 'new'">
</div> </div>
</div> </div>
▲ Show 20 Lines • Show All 97 Lines • ▼ Show 20 Lines <div class="container">
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import ListInput from '../Widgets/ListInput'
export default { export default {
components: {
ListInput,
},
data() { data() {
return { return {
discount: 0, discount: 0,
discount_description: '', discount_description: '',
user_id: null, user_id: null,
user: {}, user: {},
packages: [], packages: [],
package_id: null, package_id: null,
Show All 26 Lines export default {
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 = this.user.wallet.discount
this.discount_description = this.user.wallet.discount_description this.discount_description = this.user.wallet.discount_description
$('#aliases').val(response.data.aliases.join("\n"))
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')
.map(sku => { .map(sku => {
if (sku.id in this.user.skus) { if (sku.id in this.user.skus) {
Show All 12 Lines export default {
}) })
}) })
.catch(this.$root.errorHandler) .catch(this.$root.errorHandler)
}) })
.catch(this.$root.errorHandler) .catch(this.$root.errorHandler)
} }
}, },
mounted() { mounted() {
if (this.user_id === 'new') {
listinput('#aliases')
}
$('#first_name').focus() $('#first_name').focus()
}, },
methods: { methods: {
submit() { submit() {
this.$root.clearFormValidation($('#user-info form')) this.$root.clearFormValidation($('#user-info form'))
this.user.aliases = $('#aliases').val().split("\n")
let method = 'post' let method = 'post'
let location = '/api/v4/users' let location = '/api/v4/users'
if (this.user_id !== 'new') { if (this.user_id !== 'new') {
method = 'put' method = 'put'
location += '/' + this.user_id location += '/' + this.user_id
let skus = {} let skus = {}
▲ Show 20 Lines • Show All 112 Lines • ▼ Show 20 Lines export default {
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
} }
} }
} }
// List widget
// TODO: move it to a separate component file when needed
function listinput(elem)
{
elem = $(elem).addClass('listinput');
let widget = $('<div class="listinput-widget">')
let main_row = $('<div class="input-group">')
let wrap = $('<div class="input-group-append">')
let input = $('<input type="text" class="form-control main-input">')
let add_btn = $('<a href="#" class="btn btn-outline-secondary">').text('Add')
let update = () => {
let value = []
widget.find('input:not(.main-input)').each((index, input) => {
if (input.value) {
value.push(input.value)
}
})
elem.val(value.join("\n"))
}
let add_func = (value) => {
let row = $('<div class="input-group">')
let rinput = $('<input type="text" class="form-control">').val(value)
let rwrap = $('<div class="input-group-append">')
let del_btn = $('<a href="#" class="btn btn-outline-secondary">')
.text('Remove')
.on('click', e => {
row.remove()
input.focus()
update()
})
widget.append(row.append(rinput).append(rwrap.append(del_btn)))
}
// Create the widget and add to DOM
widget.append(main_row.append(input).append(wrap.append(add_btn)))
.insertAfter(elem)
// Add rows for every line in the original textarea
let value = $.trim(elem.val())
if (value.length) {
value.split("\n").forEach(add_func)
}
// Click handler on the Add button
add_btn.on('click', e => {
let value = input.val()
if (!value) {
return;
}
input.val('').focus();
add_func(value)
update()
})
// Enter key handler on main input
input.on('keydown', function(e) {
if (e.which == 13 && this.value) {
add_btn.click()
return false
}
})
}
</script> </script>