create add button to enable an expanding side panel to edit/add groups to the system.

add button to hide side panel.
#30
This commit is contained in:
chris.watts90@outlook.com 2017-03-15 23:13:17 +00:00
parent 8b8bd9e808
commit f27a124751

View File

@ -38,9 +38,15 @@
</div> </div>
</nav> </nav>
<div id="GroupAdminPage" class="container"> <div id="GroupAdminPage" class="container">
<h2>Groups</h2>
<div class="row"> <div class="row">
<div data-bind="with: groupsList" class="col-md-8"> <h2 class="col-md-4">Groups</h2>
<button class="col-md-1 btn btn-default pull-right" style="margin-top: 20px;">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
<hr/>
<div class="row">
<div data-bind="with: groupsList, css:{'col-md-8': !$root.groupFormHidden(), 'col-md-12':$root.groupFormHidden()}">
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<tr> <tr>
@ -50,14 +56,13 @@
</thead> </thead>
<tbody data-bind="foreach: Groups"> <tbody data-bind="foreach: Groups">
<tr data-bind="click: $root.editGroupClick"> <tr data-bind="click: $root.editGroupClick">
<!--<td data-bind="text: Name"></td>--> <td data-bind="text: Name"></td>
<td><input data-bind="value: Name" /></td>
<td data-bind="text: UserCount"></td> <td data-bind="text: UserCount"></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<form method="post" action="#editgroup" class="col-md-4" data-bind="with: $root.groupEditItem"> <form method="post" action="#editgroup" data-bind="with: $root.groupEditItem(), css:{'col-md-4':!$root.groupFormHidden()}">
<input type="hidden" name="id" data-bind="value: Id"> <input type="hidden" name="id" data-bind="value: Id">
<div class="form-group"> <div class="form-group">
<label for="groupNameEdit">Group Name</label> <label for="groupNameEdit">Group Name</label>
@ -67,6 +72,7 @@
data-bind="click: $root.clearGroupForm">Cancel</button> data-bind="click: $root.clearGroupForm">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
<button class="btn btn-link pull-right" data-bind="click: $root.hideGroupForm" type="button">Hide</button>
</form> </form>
</div> </div>
</div> </div>