226 lines
8.3 KiB
HTML
226 lines
8.3 KiB
HTML
<div id="subcategories" class="page">
|
|
<div class="col-sm-12 col-sm-offset-0">
|
|
<h1><span class="fa fa-users"></span> Manage Subcategories</h1>
|
|
|
|
<div class="col-sm-6">
|
|
<div class="dt-buttons btn-group" style="display: inline-block">
|
|
<a id="createButton" class="btn btn-default buttons-create" tabindex="0" href="javaScript:void(0);"><span>New</span></a>
|
|
<a id="editButton" class="btn btn-default buttons-selected buttons-edit" tabindex="0" href="javaScript:void(0);"><span>Edit</span></a>
|
|
<a id="deleteButton" class="btn btn-default buttons-selected buttons-remove" tabindex="0" href="javaScript:void(0);"><span>Delete</span></a>
|
|
</div>
|
|
<div class="checkbox checkbox-slider checkbox-slider--b-flat" style="display: inline-block; margin-left: 20px">
|
|
<label>
|
|
<input type="checkbox" id="includeDeletedToggle"><span style="margin-left: 0; padding-left: 24px;">Include Deleted</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<table id="subcategory-table" class="table table-striped table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th data-key-name="name">Name</th>
|
|
<th data-key-name="category">Category</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
|
|
<div id="createDialog" class="modal fade" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
<h4 class="modal-title">Create Subcategory</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label>Name</label>
|
|
<input type="text" class="form-control" name="name" id="createDialog_NameField" tabindex="0">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Category</label>
|
|
<div id="createDialog_categoryDropdown" style="position: relative;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default btn-md" id="createDialog_CreateButton" tabindex="0">Create</button>
|
|
<button type="button" class="btn" data-dismiss="modal" tabindex="0">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="editDialog" class="modal fade" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
<h4 class="modal-title">Edit Subcategory</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label>Name</label>
|
|
<input type="text" class="form-control" name="name" id="editDialog_NameField" tabindex="0">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Category</label>
|
|
<div id="editDialog_categoryDropdown" style="position: relative;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default btn-md" id="editDialog_SaveButton" tabindex="0">Save</button>
|
|
<button type="button" class="btn" data-dismiss="modal" tabindex="0">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="deleteDialog" class="modal fade" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
<h4 class="modal-title">Delete Subcategory</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
Are you certain you wish to delete the subcategory <span id="deleteDialog_NameField"></span>?
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-warning btn-md" id="deleteDialog_DeleteButton" tabindex="0">Delete</button>
|
|
<button type="button" class="btn btn-default" data-dismiss="modal" tabindex="1">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script language="JavaScript" type="text/javascript">
|
|
$(function() {
|
|
var categoriesById;
|
|
|
|
//# sourceURL=subcategories.html
|
|
var dataTable = new LinkedTable($('#subcategory-table'), {
|
|
url: "subcategories/list",
|
|
attr: "data-key-name",
|
|
selection: "row",
|
|
parameters: function() {
|
|
return {showDeleted: $('#includeDeletedToggle').is(":checked") ? true : false};
|
|
},
|
|
supportingData: [{name: "categories", url: "categories/List", parameters: {showDeleted: true}, postProcess: function(data) {
|
|
var byId;
|
|
|
|
//Convert the category list into a map by category id.
|
|
byId = data.reduce(function(map, category) {
|
|
map[category.id] = category;
|
|
return map;
|
|
}, {});
|
|
|
|
//Setup the two dialogs (new & edit).
|
|
$('#createDialog_categoryDropdown').buildDropdown(data, {textAttr: 'name', defaultText: 'Pick One', selectionClass: 'dropdownSelection', buttonStyling: 'min-width: 100px;'});
|
|
$('#editDialog_categoryDropdown').buildDropdown(data, {textAttr: 'name', defaultText: 'Pick One', selectionClass: 'dropdownSelection', buttonStyling: 'min-width: 100px;'});
|
|
|
|
//Save the categories by id for use when setting the editor dialog's dropdown selection.
|
|
categoriesById = byId;
|
|
|
|
return byId;
|
|
}}],
|
|
cellDataHandlers: {category: function($cell, subcategory, supportingData) {
|
|
try {
|
|
var category = supportingData.categories[subcategory.categoryId];
|
|
|
|
$cell.html(category.name);
|
|
}catch(err) {
|
|
console.log(err);
|
|
$cell.html("Not Found");
|
|
}
|
|
}},
|
|
postAddRowHandler: function($row, dataObject) {
|
|
if(dataObject.deletedAt) {
|
|
$("td:first", $row).prepend("<span class='glyphicon glyphicon-remove-circle' style='margin-right: 10px;' aria-hidden='true'></span>");
|
|
}
|
|
}
|
|
});
|
|
|
|
//Call the refresh user table function once initially.
|
|
dataTable.refresh();
|
|
|
|
//---- Create Dialog ----
|
|
$("#subcategories #createButton").on("click", function(event) {
|
|
$("#subcategories #createDialog").modal();
|
|
});
|
|
$("#subcategories #createDialog_CreateButton").on("click", function(event) {
|
|
try {
|
|
$.post("/admin/subcategories/create", {
|
|
name: $("#subcategories #createDialog_NameField").val(),
|
|
categoryId: $('#subcategories #createDialog_CategoryDropdown').dropdown().getSelection().id
|
|
}, function(data) {
|
|
if(data.result == "success") {
|
|
$("#subcategories #createDialog").modal("hide");
|
|
dataTable.refresh();
|
|
}
|
|
else {
|
|
alert(data.result);
|
|
}
|
|
}, "json");
|
|
} catch(e) {
|
|
alert(e);
|
|
}
|
|
});
|
|
$("#subcategories #createDialog").on('shown.bs.modal', function() {
|
|
$('#createDialog_NameField').focus();
|
|
});
|
|
//----------------------------
|
|
|
|
//---- Delete Dialog ----
|
|
$("#subcategories #deleteButton").on("click", function(event) {
|
|
//debugger;
|
|
if(dataTable.getSelectedRow() != null) {
|
|
$("#subcategories #deleteDialog_NameField").html(dataTable.getSelectedRow().data("model").name);
|
|
$("#subcategories #deleteDialog").modal();
|
|
}
|
|
});
|
|
$("#subcategories #deleteDialog_DeleteButton").on("click", function(event) {
|
|
if(dataTable.getSelectedRow() != null) {
|
|
$.post("/admin/subcategories/delete", {id: dataTable.getSelectedRow().data("model").id}, function(data) {
|
|
if(data.result == "success") {
|
|
$("#subcategories #deleteDialog").modal("hide");
|
|
dataTable.refresh();
|
|
}
|
|
else {
|
|
alert(data.result);
|
|
}
|
|
}, "json");
|
|
}
|
|
});
|
|
//-----------------------------
|
|
|
|
//----- Edit Dialog ----
|
|
$("#subcategories #editButton").on("click", function(event) {
|
|
//debugger;
|
|
if(dataTable.getSelectedRow() != null) {
|
|
var selectedModel = dataTable.getSelectedRow().data("model");
|
|
|
|
$('#editDialog_NameField').val(selectedModel.name);
|
|
$('#subcategories #editDialog_categoryDropdown').dropdown().setSelection(categoriesById[selectedModel.categoryId]);
|
|
$("#subcategories #editDialog").modal();
|
|
}
|
|
});
|
|
$("#subcategories #editDialog_SaveButton").on("click", function(event) {
|
|
if(dataTable.getSelectedRow() != null) {
|
|
$.post("/admin/subcategories/edit", {
|
|
id: dataTable.getSelectedRow().data("model").id,
|
|
name: $("#subcategories #editDialog_NameField").val()
|
|
}, function(data) {
|
|
if(data.result == "success") {
|
|
$("#subcategories #editDialog").modal("hide");
|
|
dataTable.refresh();
|
|
}
|
|
else {
|
|
alert(data.result);
|
|
}
|
|
}, "json");
|
|
}
|
|
});
|
|
$("#subcategories #editDialog").on('shown.bs.modal', function() {
|
|
$('#editDialog_NameField').focus().select();
|
|
});
|
|
//---------------------
|
|
|
|
$('#includeDeletedToggle').on('click', function(event) {
|
|
dataTable.refresh();
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
</div> |