Change User Role in Admin Panel - meteor

Question

I'm creating an admin panel where I am able to change the user roles via a select control while using alanning:roles. The issue I am having is I am unable to get the user that is associated with each select control. I referenced this tutorial on creating an admin panel with Meteor, but when I call the method to changeRoles, the console returns this error:
Original Issue: Solved
Error: Missing 'users' param
I20190218-14:59:27.319(-6)? at Object._updateUserRoles (packages/alanning_roles.js:684:23)
I20190218-14:59:27.319(-6)? at Object.setUserRoles (packages/alanning_roles.js:250:11)
I20190218-14:59:27.320(-6)? at MethodInvocation.changeRole (server/main.js:88:13)`
Changed code from:
Template.userHome.events({
'click #confirmChanges': function (event) {
let currentRole = $(event.target).find('option:selected').val();
let userId = $(event.target.id).val();
console.log(userId);
if (window.confirm("Change User Roles?")) {
Meteor.call("changeRole", {
role: currentRole,
user: userId
})
window.location.reload();
}
}
})
To this (change in how I set userId value):
Template.userHome.events({
'change [name="userRole"]': function (event) {
let currentRole = $(event.target).find('option:selected').val();
let userId = $(event.target.id);
console.log(currentRole);
if (window.confirm("Change User Roles?")) {
Meteor.call("changeRole", {
role: currentRole,
user: userId
})
window.location.reload();
}
}
})
Now, Roles.setUserRoles() is not working yet parameters have values
console.log(options.role) returns the correct value and
console.log(options.user) returns:
I20190219-20:37:37.527(-6)? { length: 0,
I20190219-20:37:37.528(-6)? prevObject:
I20190219-20:37:37.529(-6)? { length: 0,
I20190219-20:37:37.529(-6)? prevObject:
I20190219-20:37:37.529(-6)? { length: 0,
I20190219-20:37:37.530(-6)? prevObject: [Object],
I20190219-20:37:37.530(-6)? context: [Object],
I20190219-20:37:37.531(-6)? selector: '3FzfDhZWcGFg6ggTE' },
I20190219-20:37:37.531(-6)? context: { location: [Object] } },
I20190219-20:37:37.532(-6)? context:
I20190219-20:37:37.532(-6)? { location:
I20190219-20:37:37.532(-6)? { href: 'http://localhost:3000/userHome',
I20190219-20:37:37.533(-6)? ancestorOrigins: {},
I20190219-20:37:37.533(-6)? origin: 'http://localhost:3000',
I20190219-20:37:37.534(-6)? protocol: 'http:',
I20190219-20:37:37.534(-6)? host: 'localhost:3000',
I20190219-20:37:37.534(-6)? hostname: 'localhost',
I20190219-20:37:37.534(-6)? port: '3000',
I20190219-20:37:37.535(-6)? pathname: '/userHome',
I20190219-20:37:37.535(-6)? search: '',
I20190219-20:37:37.536(-6)? hash: '' } } }
Client Code:
Template.userHome.events({
'change [name="userRole"]': function (event) {
let currentRole = $(event.target).find('option:selected').val();
let userId = $(event.target.id);
console.log(currentRole);
if (window.confirm("Change User Roles?")) {
Meteor.call("changeRole", {
role: currentRole,
user: userId
})
window.location.reload();
}
}
})
Server Code:
Meteor.methods({
changeRole( options ) {
console.log("Change User is Being Called");
try {
Roles.setUserRoles( options.user, [ options.role ] );
console.log(options.role)
} catch( exception ) {
console.log(exception);
}
}
});
UserHome Template
<div class="nav">
<p class="welcomeUser">Welcome, {{#with userInfo}}{{profile.firstname}} {{profile.lastname}}{{/with}}</p>
<button id="logout" class="universalButton">Log Out</button>
</div>
<div class="pageContent">
{{#if userIsAdmin}}
<div class="adminPanel">
<table id="userTable">
<caption>Admin Panel</caption>
<tr>
<th class="usertableHead">Username</th>
<th class="usertableHead">Role</th>
</tr>
{{#each users}}
<tr>
<td class="usertableData">{{username}}</td>
<td class="usertableData">
<div class="styled-select purple rounded">
<select id={{_id}} name="userRole">
<option value={{roles}}>{{roles}}</option>
<option value="Teacher">Teacher</option>
</select>
</div>
</td>
</tr>
{{/each}}
</table>
<button id="confirmChanges" class="universalButton">Confirm Changes</button>
</div>
{{/if}}
</div>

Answer 1

console.log(options.user) should print the _id of the user, not a jQuery object. In your change [name="userRole"] event, replace let userId = $(event.target.id); with let userId = event.target.id;
The better way of assigning and retrieving values is as below:
HTML:
...
<select data-id={{_id}} name="userRole">
<option value={{roles}}>{{roles}}</option>
<option value="Teacher">Teacher</option>
</select>
...
JS:
Template.userHome.events({
'change [name="userRole"]': function (event) {
let userId = event.target.dataset.id;
let currentRole = event.target.value;
console.log(userId, currentRole);
...
}
})