add viewmodel methods for disabling/enabling controls in conditions:

disable group in dropdown using getCurrentGroupFilter()
   enable clear filter button if the user has selected a group filter, or search term has been entered.
changed users route to compensate for an undefined groupId.
#64
This commit is contained in:
chris.watts90@outlook.com 2017-03-18 16:21:14 +00:00
parent d97343409c
commit f72ee9c794
2 changed files with 30 additions and 4 deletions

View File

@ -50,7 +50,7 @@
<!-- Home page > All User List -->
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-xs-8">
<div class="col-md-6">
<form class="input-group" action="#users" method="get">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button>
@ -58,19 +58,21 @@
<input type="text" class="form-control" placeholder="Search for..." name="query" data-bind="value: Query">
</form>
</div>
<div class="dropdown col-xs-2" data-bind="with: $root.groupsList">
<div class="dropdown col-md-2" data-bind="with: $root.groupsList">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Group Filter
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<!-- ko foreach: Groups -->
<li data-bind="css:{disabled:$root.userList().GroupFilter.Name===Name}">
<li data-bind="css:{disabled:$root.getCurrentGroupFilter()===Name}">
<a data-bind="click: function(){$root.groupFilter(Id);}, text: Name"></a>
</li>
<!-- /ko -->
</ul>
</div>
<button class="btn btn-default col-md-2"
data-bind="click: $root.clearGroupFilter, enable: ($root.hasGroupFilter() || $root.hasQuery())">Clear Filter</button>
<button class="btn btn-default pull-right" data-bind="click: $root.returnButtonClick"
pagedestination="newUser"><span class="glyphicon glyphicon-plus"></span> Add New User</button>
</div>

View File

@ -183,6 +183,30 @@
self.setPagination(self.userList().PageSize, data);
}
};
self.getCurrentGroupFilter = function() {
if (self.userList() !== null) {
if (self.userList().GroupFilter !== null) {
return self.userList().GroupFilter.Name;
}
}
return "";
};
self.clearGroupFilter = function () {
self.setPagination(20, 1);
};
self.hasGroupFilter = function() {
if(self.userList() !== null)
if (self.userList().GroupFilter)
return true;
return false;
};
self.hasQuery = function() {
if (self.userList() !== null) {
if (self.userList().Query && self.userList().Query !== "")
return true;
}
return false;
};
self.groupFilter = function(data) {
console.log("filter by group: " + data);
var args = [
@ -374,7 +398,7 @@
self.getGroups(function (data) { self.groupsList(data); });
if (query)
self.searchUsers(query);
else if (groupId !== -1)
else if (groupId && groupId > 0)
self.getUserList(null, null, groupId);
else
self.getUserList(pageSize, pageNumber);