cut-to-pack-service/target/classes/static/js/user-form.js

110 lines
3.9 KiB
JavaScript

( async function () {
Vue.prototype.$roles = window.ctp.roles;
Vue.prototype.$accounts = window.ctp.accounts;
Vue.component('authority', {
props : ['index', 'authority'],
methods: {
removeRole : function (e) {
e.preventDefault();
this.$emit('role-remove', this.index );
}
},
template: `
<div class="form-row">
<input hidden="hidden" v-bind:name="'authorities[' + index + '].username'" v-bind:value="authority.username">
<div class="col-sm-3 form-group">
<label>Role</label>
<select class="form-control" v-bind:name="'authorities[' + index + '].authority'" v-model="authority.authority" requried>
<option value="">Please Select</option>
<option v-for="(role,idx) in $roles"
v-bind:value="role"
v-bind:selected="role.authority === authority.username">{{role}}
</option>
</select>
</div>
<div class="col-sm-1 form-group" >
<label class="d-block">&nbsp;</label>
<a href="#" title="Remove" class="btn btn-light text-left" v-on:click="removeRole">
<i class="bi bi-trash"></i>
</a>
</div>
</div>
`
});
Vue.component('inventory-account',{
props : ['index','account'],
methods : {
removeAccount : function (e){
e.preventDefault();
this.$emit('account-remove', this.index );
}
},
template : `
<div class="form-row">
<input hidden="hidden" v-bind:name="'inventoryAccounts[' + index + '].username'" v-bind:value="account.username">
<div class="col-sm-3 form-group">
<label>Account</label>
<select class="form-control" v-bind:name="'inventoryAccounts[' + index + '].accountId'" v-model="account.accountId" requried>
<option value="0">Please Select</option>
<option v-for="(acc,idx) in $accounts"
v-bind:value="acc.id"
v-bind:title="acc.notes"
v-bind:selected="acc.id === account.accountId">{{acc.title}}
</option>
</select>
</div>
<div class="col-sm-1 form-group" >
<label class="d-block">&nbsp;</label>
<a href="#" title="Remove" class="btn btn-light text-left" v-on:click="removeAccount">
<i class="bi bi-trash"></i>
</a>
</div>
</div>
`,
});
let app = new Vue({
el: '#userApp',
data: {
user : {},
authorities: [],
inventoryAccounts: []
},
methods: {
addRole: function (e) {
e.preventDefault();
this.authorities.push({
'username' : '',
'authority' : ''
})
},
removeRole: function (idx) {
this.authorities.splice(idx, 1);
},
addAccount: function (e) {
e.preventDefault();
this.inventoryAccounts.push({
'username' : '',
'accountId' : 0
})
},
removeAccount: function (idx) {
this.inventoryAccounts.splice(idx, 1);
}
},
mounted: function () {
this.user = window.ctp.user;
this.authorities = this.user.authorities;
this.inventoryAccounts = this.user.inventoryAccounts;
}
})
})
(jQuery);