* view model used for users grid
*/
UsersViewModel=function() {
- this.users = ko.observableArray([]);
var self = this;
+ this.users = ko.observableArray([]);
+ this.originalUsers=ko.observableArray([]);
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.users,
columns: [
{
headerText: "User Name",
- rowText: "username"},
+ rowText: "username",
+ filter: true
+ },
{
headerText: "Full Name",
- rowText: "fullName"},
+ rowText: "fullName",
+ filter: true
+ },
{
headerText: "Email",
- rowText: "email"}
+ rowText: "email",
+ filter: true
+ }
],
pageSize: 10
});
-
+ clearFilters=function(){
+ self.users(self.originalUsers());
+ };
this.addUser=function() {
clearUserMessages();
var mainContent = $("#main-content");
}
+ applyAutocompleteOnHeader=function(property,usersViewModel){
+ $("#main-content").find("#users-grid-filter-auto-"+property ).autocomplete({
+ minLength: 0,
+ source: function(request, response){
+ var founds=[];
+ $.log("source:"+request.term+",users:"+usersViewModel.users().length)
+ $(usersViewModel.users()).each(function(idx,user){
+ if(user[property] && user[property]() && user[property]().indexOf(request.term)>=0){
+ founds.push(user[property]());
+ }
+ });
+ response(unifyArray(founds,true));
+ },
+ select: function( event, ui ) {
+ $.log("property:"+property+','+ui.item.value);
+ var users=[];
+ $(usersViewModel.users()).each(function(idx,user){
+ if(user[property] && user[property]() && user[property]().indexOf(ui.item.value)>=0){
+ users.push(user);
+ }
+ });
+ $.log("property:"+property+','+ui.item.value+",size:"+users.length);
+ usersViewModel.users(users);
+ return false;
+ }
+ });
+ }
+
/**
* called from the menu to display tabs with users grid
*/
});
var usersViewModel = new UsersViewModel();
usersViewModel.users(mappedUsers);
+ usersViewModel.originalUsers(mappedUsers);
ko.applyBindings(usersViewModel,jQuery("#main-content").get(0));
mainContent.find("#users-view-tabs a:first").tab('show');
mainContent.find("#users-view-tabs a[data-toggle='tab']").on('show', function (e) {
- //$.log( $(e.target).attr("href") ); // activated tab
- //e.relatedTarget // previous tab
- $.log("tabs shown");
if ($(e.target).attr("href")=="#createUserForm") {
usersViewModel.addUser();
}
})
mainContent.find("#users-view-tabs-content #users-view").addClass("active");
+ applyAutocompleteOnHeader("username",usersViewModel);
+ applyAutocompleteOnHeader("fullName",usersViewModel);
+ applyAutocompleteOnHeader("email",usersViewModel);
}
}
);
</script>
<script id='ko_usersGrid_grid' type='text/html'>
+
<thead>
- <tr>
- {{each(i, columnDefinition) columns}}
- <th>${ columnDefinition.headerText }</th>
- {{/each}}
- <th>${$.i18n.prop('edit')}</th>
- <th>${$.i18n.prop('delete')}</th>
- <th>${$.i18n.prop('user.list.locked')}</th>
- <th>${$.i18n.prop('user.change.password.required')}</th>
- </tr>
+ <tr>
+ {{each(i, columnDefinition) columns}}
+ <th>${ columnDefinition.headerText }</th>
+ {{/each}}
+ <th>${$.i18n.prop('edit')}</th>
+ <th>${$.i18n.prop('delete')}</th>
+ <th>${$.i18n.prop('user.list.locked')}</th>
+ <th>${$.i18n.prop('user.change.password.required')}</th>
+ </tr>
+ <tr>
+ {{each(i, columnDefinition) columns}}
+ <th>
+ {{if columnDefinition.filter }}
+ <input type="text" class="form-search input-medium" id="users-grid-filter-auto-${columnDefinition.rowText}"
+ placeholder="${$.i18n.prop('search.artifact.result.grid.filter')}"/>
+ {{/if}}
+ </th>
+ {{/each}}
+ <th></th>
+ <th></th>
+ <th>locked ?</th>
+ <th>chg pwd</th>
+ </tr>
</thead>
<tbody>
{{each(i, row) itemsOnCurrentPage()}}
<button data-bind='click: sortByName' class="btn">
${$.i18n.prop('users.sort.byname')}
</button>
+ <a href="#" class="btn btn-warning" data-bind="click: clearFilters" id="remove-filter-id">${$.i18n.prop('search.artifact.result.filter')}</a>
<table class="table table-striped table-bordered" id="usersTable"
data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_usersGrid_grid',pageLinksId:'usersPagination'">
</table>