--- Admin.html ----

remove hide link on groups form.
fix widths of columns for "User Count" and delete button.
--- admin.js ----
removed unused params from methods.
removed auto adding a blank group item to form on startup (assign null/hide form on load).
fix issues with page flickering in certain conditions (on group delete).
#64
This commit is contained in:
chris.watts90@outlook.com 2017-03-18 16:14:20 +00:00
parent 8d51f3545f
commit d97343409c
2 changed files with 20 additions and 21 deletions

View File

@ -40,7 +40,7 @@
<div id="GroupAdminPage" class="container"> <div id="GroupAdminPage" class="container">
<div class="row"> <div class="row">
<h2 class="col-md-4">Groups</h2> <h2 class="col-md-4">Groups</h2>
<button class="col-md-1 btn btn-default pull-right" style="margin-top: 20px;" data-bind="click: $root.clearGroupForm"> <button class="col-md-1 btn btn-default pull-right" style="margin-top: 20px;" data-bind="click: $root.newGroupForm">
<span class="glyphicon glyphicon-plus"></span> <span class="glyphicon glyphicon-plus"></span>
</button> </button>
</div> </div>
@ -51,8 +51,8 @@
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>User Count</th> <th class="col-md-3">User Count</th>
<th></th> <th class="col-md-1"></th>
</tr> </tr>
</thead> </thead>
<tbody data-bind="foreach: Groups"> <tbody data-bind="foreach: Groups">
@ -71,10 +71,9 @@
<input for="Name" type="text" class="form-control" id="groupNameEdit" placeholder="Group Name" data-bind="value: Name"/> <input for="Name" type="text" class="form-control" id="groupNameEdit" placeholder="Group Name" data-bind="value: Name"/>
</div> </div>
<button pageDestination="Users" class="btn btn-secondary" type="button" <button pageDestination="Users" class="btn btn-secondary" type="button"
data-bind="click: $root.clearGroupForm">Cancel</button> data-bind="click: $root.hideGroupForm">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>

View File

@ -1,7 +1,7 @@
function AdminVM() { function AdminVM() {
var self = this; var self = this;
self.groupsList = ko.observable(null); self.groupsList = ko.observable(null);
self.groupEditItem = ko.observable({Id:-1,Name:""}); self.groupEditItem = ko.observable(null);
self.helpers = new Helpers(); self.helpers = new Helpers();
self.uiPages = { self.uiPages = {
overview: "overview", overview: "overview",
@ -13,18 +13,21 @@
getGroups: "/api/groups", getGroups: "/api/groups",
editGroup: "/api/groups/edit" editGroup: "/api/groups/edit"
}; };
self.clearGroupForm = function (data, event) { self.clearGroupForm = function () {
self.goToMenuOption(self.uiPages.group);
self.groupEditItem({ Id: -1, Name: "" });
};
self.hideGroupForm = function (data, event) {
self.helpers.goToMenuOption(self.uiPages.group); self.helpers.goToMenuOption(self.uiPages.group);
self.groupEditItem(null); self.groupEditItem(null);
}; };
self.hideGroupForm = function () {
self.groupEditItem(null);
};
self.newGroupForm = function () {
self.groupEditItem({ Id: -1, Name: "" });
self.helpers.goToMenuOption(self.uiPages.group);
};
self.groupFormHidden = ko.computed(function () { self.groupFormHidden = ko.computed(function () {
return self.groupEditItem() == null; return self.groupEditItem() == null;
}, self); }, self);
self.editGroupClick = function (data, event) { self.editGroupClick = function (data) {
self.helpers.goToMenuOption(self.uiPages.group); self.helpers.goToMenuOption(self.uiPages.group);
self.groupEditItem(data); self.groupEditItem(data);
}; };
@ -32,12 +35,9 @@
var url = self.helpers.createRequestUrl(self.apiEndpoints.getGroups, null, false); var url = self.helpers.createRequestUrl(self.apiEndpoints.getGroups, null, false);
$.getJSON(url, function (res) { $.getJSON(url, function (res) {
self.groupsList(res); self.groupsList(res);
//console.log(res);
}).fail(function (resp, status, error) { }).fail(function (resp, status, error) {
console.log("error - getGroups"); console.log("error - getGroups");
//var errObj = self.processRequestFailure(resp, status, error); var errorObj = self.helpers.processRequestFailure(resp, status, error);
//self.assignErrorObject(errObj.errorCode, errObj.errorMessage, "getGroups");
//self.goToMenuOption(self.uiPages.home());
}); });
}; };
self.deleteGroup = function (groupId) { self.deleteGroup = function (groupId) {
@ -48,11 +48,10 @@
$.ajax({ $.ajax({
url: url, url: url,
type: 'DELETE', type: 'DELETE',
success: function (result) { success: function () {
console.log("deleted " + groupId); console.log("deleted " + groupId);
self.hideGroupForm();
self.helpers.goToMenuOption(self.uiPages.home()); self.helpers.goToMenuOption(self.uiPages.home());
self.clearGroupForm();
// Do something with the result
} }
}); });
console.log("delete: " + groupId); console.log("delete: " + groupId);
@ -67,11 +66,12 @@
}) })
.fail(function (resp, status, error) { .fail(function (resp, status, error) {
self.helpers.goToMenuOption(self.uiPages.home()); self.helpers.goToMenuOption(self.uiPages.home());
}); var errorObj = self.helpers.processRequestFailure(resp, status, error);
});
}; };
Sammy(function () { Sammy(function () {
this.disable_push_state = true;
this.get("#overview", function () { this.get("#overview", function () {
self.clearGroupForm();
self.getGroups(); self.getGroups();
}); });
this.post("#editgroup", function () { this.post("#editgroup", function () {