Fixed all known bugs; Modified the menu to hide; Fixed the tables to scroll with a fixed header.

This commit is contained in:
Wynne Crisman
2017-10-20 14:54:58 -07:00
parent 83e8268375
commit f848ea9a8f
34 changed files with 1019 additions and 821 deletions

View File

@@ -1,32 +1,39 @@
<template name="UserManagement">
<div id="userManagement">
{{#if Template.subscriptionsReady}}
<div class="insert">
{{>UserInsert}}
<div class="tableControls">
<div class="contentControls">
<a class="loadMoreLink {{#if disableLoadMore}}disabled{{/if}}" href="javascript:">Load More...</a>
</div>
</div>
<div class="tableContainer">
<table class="dataTable table table-striped table-hover">
<div class="separatedTableHeader">
<table class="table table-striped table-hover">
<thead>
<tr class="headers">
<th class="username">Username</th>
<th class="email">Email</th>
<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</th>
</tr>
<tr class="footers">
<th>{{>UserSearch columnName='username'}}</th>
<th>{{>UserSearch columnName='email' collectionQueryColumnName='name' collection='Items' collectionResultColumnName='_id'}}</th>
<th></th>
<th></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>
<tbody>
{{#each users}}
{{> User}}
{{/each}}
</tbody>
</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>
@@ -35,56 +42,35 @@
<template name="User">
<tr>
{{#if editing}}
<td><input name="username" class="form-control" type="text" value="{{username}}" required></td>
<td><input name="email" class="form-control" type="text" value="{{email}}" required></td>
<td class="roles center" style="font-size: 1.2em">
{{#each allRoles}}
<span class="role {{getRoleState this}} noselect">{{name}}</span>
{{/each}}
</td>
<td class="center tdLarge"><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>
{{> UserEditor}}
{{else}}
<td class="tdLarge noselect nonclickable">{{username}}</td>
<td class="tdLarge noselect nonclickable">{{email}}</td>
<td class="tdLarge noselect nonclickable">{{roles}}</td>
<td class="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>
<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}}
<span class="role {{getRoleState this}} noselect">{{name}}</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>
<template name="UserInsert">
<form name="insert" autocomplete="off">
<div class="grid">
<div class="col-3-12"></div>
<div class="col-6-12">
<div class="formGroupHeading">New User</div>
<div class="form-group">
<label class='control-label'>User Name</label>
<input name="username" type="text" class="form-control" required>
</div>
<div class="form-group">
<label class='control-label'>Email</label>
<input name="email" class="form-control" type="text" required/>
</div>
<div class="form-group">
<label class='control-label'>Roles</label>
<div class="roles">
{{#each allRoles}}
<span class="role">{{name}}</span>
{{/each}}
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-success" value="Create">
</div>
</div>
<div class="col-3-12"></div>
</div>
</form>
</template>