PetitTetonMeteor/imports/ui/UserManagement.html

<template name="UserManagement">
	<div id="userManagement">
		{{#if Template.subscriptionsReady}}
			<div class="tableControls">
				<div class="contentControls">
					<a class="loadMoreLink {{#if disableLoadMore}}disabled{{/if}}" href="javascript:">Load More...</a>
				</div>
			</div>
			<div class="separatedTableHeader">
				<table class="table table-striped table-hover">
					<thead>
					<tr>
						<th class="username">Username {{>UserSearch columnName='username'}}</th>
						<th class="email">Email {{>UserSearch columnName='email' collectionQueryColumnName='name' collection='Items' collectionResultColumnName='_id'}}</th>
						<th class="roles">Roles</th>
						<th class="actions">Actions <span class="newUserButton btn btn-success"><i class="fa fa-plus-circle" aria-hidden="true"></i><i class="fa fa-times-circle" aria-hidden="true"></i></span></th>
					</tr>
					</thead>
				</table>
			</div>
			<div class="listRow">
				<div class="listCell">
					<div class="tableContainer mCustomScrollbar" data-mcs-theme="dark">
						<table class="dataTable table table-striped table-hover">
							<tbody>
							{{#if displayNewUser}}
								<tr>{{> UserEditor isNew=true}}</tr>
							{{/if}}
							{{#each users}}
								{{> User}}
							{{/each}}
							</tbody>
						</table>
					</div>
				</div>
			</div>
		{{else}}
		{{/if}}
	</div>
</template>

<template name="User">
	<tr>
		{{#if editing}}
			{{> UserEditor}}
		{{else}}
			<td class="username tdLarge noselect nonclickable">{{username}}</td>
			<td class="email tdLarge noselect nonclickable">{{email}}</td>
			<td class="roles tdLarge noselect nonclickable">{{roles}}</td>
			<td class="actions center tdLarge"><i class="userRemove fa fa-times-circle fa-lg noselect clickable" aria-hidden="true"></i>&nbsp;/&nbsp;<i class="userEdit fa fa-pencil-square-o fa-lg noselect clickable" aria-hidden="true"></i></td>
		{{/if}}
	</tr>
</template>

<template name="UserEditor">
	<td colspan="3" class="userEditor measureEditorTd">
		<div>
			<div class="username editorDiv"><label>User Name:</label><input name="username" class="form-control" type="text" value="{{username}}" autocomplete="off" required></div>
			<div class="email editorDiv"><label>User Email:</label><input name="email" class="form-control" type="text" value="{{email}}" autocomplete="off" required></div>
			<div class="rolesContainer editorDiv"><label>Roles:</label>
				<div class="roles center" style="font-size: 1.2em">
					{{#each allRoles}}
						<!-- Roles no longer have a name, they now put the name as the _id in Mongo -->
						<span class="role {{getRoleState this}} noselect">{{_id}}</span>
					{{/each}}
				</div>
			</div>
		</div>
	</td>
	<td class="actions center measureEditorTd"><i class="editorApply fa fa-check-square-o fa-lg noselect clickable" aria-hidden="true"></i>&nbsp;/&nbsp;<i class="editorCancel fa fa-times-circle fa-lg noselect clickable" aria-hidden="true"></i></td>
</template>

<template name="UserSearch">
	<div class="">
		<input type="text" class="searchInput" placeholder="Filter..." value="{{searchValue}}" style="width: 90%"/>
	</div>
</template>