309 lines
11 KiB
HTML
309 lines
11 KiB
HTML
<div id="subcategories" class="page">
|
|
<div id="listView" class="view">
|
|
<div class="buttonContainer">
|
|
<!-- Main Page Content -->
|
|
<h1><span class="fa fa-users"></span> Manage Subcategories</h1>
|
|
|
|
<div class="dt-buttons btn-group" style="display: inline-block">
|
|
<a id="createButton" class="btn btn-default buttons-create" tabindex="0" href="#!/subcategories-create"><span>New</span></a>
|
|
<a id="editButton" class="btn btn-default buttons-selected buttons-edit" tabindex="0" href="#!/subcategories-edit"><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>
|
|
<a id="restoreButton" class="btn btn-default buttons-selected buttons-restore" tabindex="0" href="javaScript:void(0);"><span>Restore</span></a>
|
|
</div>
|
|
<div class="checkbox checkbox-slider checkbox-slider--b-flat" style="display: inline-block; margin-left: 20px">
|
|
<label>
|
|
<input id="includeDeletedToggle" type="checkbox"><span style="margin-left: 0; padding-left: 24px;">Include Deleted</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<table id="dataTable" 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>
|
|
<!-- Create/Edit View -->
|
|
<div id="editorView" class="view" style="display: none;" data-menu="false">
|
|
<div class="modal-dialog">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title"></h4>
|
|
</div>
|
|
<form role="form" autocomplete="off">
|
|
<div class="modal-body">
|
|
<label for="DFName">Name</label>
|
|
<div class="form-group">
|
|
<input name="name" id="DFName" type="text" class="form-control" tabindex="0" placeholder="Jam" required/>
|
|
</div>
|
|
<label for="DFCategory">Category</label>
|
|
<div class="form-group">
|
|
<input name="categoryId" id="DFCategoryId" type="hidden"/>
|
|
<input name="category" id="DFCategory" class="form-control" tabindex="0" required/>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="DFSave" type="button" class="btn btn-default btn-primary btn-md" tabindex="0">Save</button>
|
|
<button id="DFCreate" type="button" class="btn btn-default btn-primary btn-md" tabindex="0">Create</button>
|
|
<button id="DFCreatePlus" type="button" class="btn btn-primary btn-md" tabindex="0">Create++</button>
|
|
<button id="DFCancel" type="button" class="btn" data-dismiss="modal" tabindex="0" onclick="location.href='#!/subcategories'">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete View -->
|
|
<div id="deleteView" 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 Item</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
Are you certain you wish to delete the subcategory <span id="deleteName"></span>?
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="DFDelete" type="button" class="btn btn-warning btn-md" tabindex="0">Delete</button>
|
|
<button id="DFCancelDelete" type="button" class="btn btn-primary btn-default" data-dismiss="modal" tabindex="1">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script language="JavaScript" type="text/javascript">//# sourceURL=subcategories.html
|
|
$(function() {
|
|
var $page = $('#subcategories');
|
|
var $btnCreate = $page.find("#createButton");
|
|
var $btnEdit = $page.find("#editButton");
|
|
var $btnDelete = $page.find("#deleteButton");
|
|
var $btnRestore = $page.find("#restoreButton");
|
|
|
|
$btnEdit.disable(true);
|
|
$btnDelete.disable(true);
|
|
$btnRestore.disable(true);
|
|
|
|
var selectionChanged = function($tr, model) {
|
|
if($tr && model) {
|
|
//If the object was deleted (hidden), then allow it to be restored, otherwise allow the model to be deleted.
|
|
if(model.deletedAt) {
|
|
$btnRestore.disable(false);
|
|
$btnDelete.disable(true);
|
|
$btnEdit.disable(true);
|
|
}
|
|
else {
|
|
$btnRestore.disable(true);
|
|
$btnDelete.disable(false);
|
|
$btnEdit.disable(false);
|
|
}
|
|
}
|
|
else {
|
|
$btnEdit.disable(true);
|
|
$btnDelete.disable(true);
|
|
$btnRestore.disable(true);
|
|
}
|
|
};
|
|
|
|
var $table = $page.find('#dataTable');
|
|
$table.buildTable({
|
|
url: "data/Subcategory/readAll",
|
|
attr: "data-key-name",
|
|
selection: "row",
|
|
parameters: function() {
|
|
return {paranoid: !$page.find('#includeDeletedToggle').is(":checked")};
|
|
},
|
|
selectionChanged: selectionChanged,
|
|
supportingData: [{name: "categories", url: "data/Category/readAll", 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;
|
|
}, {});
|
|
|
|
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>");
|
|
}
|
|
},
|
|
postUpdateRowHandler: function($row, dataObject) {
|
|
if(dataObject.deletedAt) {
|
|
$("td:first", $row).prepend("<span class='glyphicon glyphicon-remove-circle' style='margin-right: 10px;' aria-hidden='true'></span>");
|
|
}
|
|
|
|
if($row.is(dataTable.getSelectedRow())) {
|
|
selectionChanged($row, dataObject);
|
|
}
|
|
}
|
|
});
|
|
var dataTable = $table.getTable();
|
|
|
|
$page.find('#dataTable').on('dblclick', 'tr', function(event) {
|
|
if(dataTable.getSelectedRow()) {
|
|
location.hash = "#!/subcategories-edit";
|
|
}
|
|
});
|
|
|
|
//Refresh the data table if the user toggles the button to show/hide deleted elements.
|
|
$page.find('#includeDeletedToggle').on('click', function(event) {
|
|
dataTable.refresh();
|
|
});
|
|
|
|
//Restore the selected model so it is no longer considered 'deleted'.
|
|
$btnRestore.on("click", function(event) {
|
|
var model = dataTable.getSelectedRow() ? dataTable.getSelectedRow().data('model') : undefined;
|
|
|
|
if(model && model.deletedAt) {
|
|
$.post("data/Subcategory/restore", {id: model.id}, "json").done(function(data) {
|
|
dataTable.refresh();
|
|
}).fail(function(data) {
|
|
alert("Failed to restore the desired object due to a server side error.");
|
|
});
|
|
}
|
|
});
|
|
|
|
var $listView = $page.find('#listView');
|
|
var $editorView = $page.find('#editorView');
|
|
var $deleteView = $page.find('#deleteView');
|
|
|
|
//+++++++++++++++++++++++++++++++++++++++++++++++
|
|
// ++++++++++++ Create/Edit Views ++++++++++++
|
|
|
|
var $editorForm = $editorView.find('form');
|
|
var queries = [$.get("data/Category/readAll", {request: JSON.stringify({order: ['name', ['name']]})})];
|
|
|
|
//Update the dialog drop downs when the queries finish.
|
|
$.when.apply($, queries).then(function(query1) {
|
|
//Initialize the drop down menu.
|
|
$editorForm.find("#DFCategory").buildCombo(query1, {textAttr: 'name', listClass: 'comboList'});
|
|
//Initialize the validator
|
|
$editorForm.validator();
|
|
});
|
|
|
|
//Setup a display-handler that will be called when the hash changes - allowing us to configure this page as necessary.
|
|
$page.data('display-handler', function(data, internal) {
|
|
switch(data) {
|
|
case 'create':
|
|
//Configure the dialog to create a new element.
|
|
$editorView.find("#DFCreate, #DFCreatePlus").show();
|
|
$editorView.find("#DFSave").hide();
|
|
$editorView.find(".modal-title").text("Create Subcategory");
|
|
//Reset fields to default values.
|
|
$editorView.find("#DFName").val("");
|
|
showView($editorView, $editorView.find("#DFName"), internal);
|
|
break;
|
|
case 'edit':
|
|
if(dataTable.getSelectedRow() != null) {
|
|
//Configure the dialog to edit an existing element.
|
|
$editorView.find("#DFCreate, #DFCreatePlus").hide();
|
|
$editorView.find("#DFSave").show();
|
|
$editorView.find(".modal-title").text("Edit Subcategory");
|
|
//Reset fields to selected values.
|
|
$editorView.find('#DFName').val(dataTable.getSelectedRow().data("model").name);
|
|
$editorView.find('#DFCategoryId').val(dataTable.getSelectedRow().data("model").categoryId).trigger("change");
|
|
showView($editorView, $editorView.find("#DFName"), internal);
|
|
}
|
|
else {
|
|
//Change the hash without adding to the history.
|
|
history.replaceState(undefined, undefined, "#!/sales")
|
|
}
|
|
break;
|
|
default:
|
|
if(internal) dataTable.refresh();
|
|
showView($listView, null, internal);
|
|
break;
|
|
}
|
|
});
|
|
|
|
//Handle the Create Button being clicked.
|
|
var createFunction = function(close) {
|
|
$editorForm.data('bs.validator').validate(function(isValid) {
|
|
if(isValid) {
|
|
$.ajax({url: "data/Subcategory/create", type: "POST", dataType: "json", data: encodeData({
|
|
name: $editorForm.find("#DFName").val(),
|
|
categoryId: parseInt($editorForm.find("#DFCategoryId").val())
|
|
})}).done(function(data) {
|
|
if(close) window.location.hash = "#!/subcategories";
|
|
}).fail(function(data) {
|
|
alert("Server call failed.");
|
|
});
|
|
}
|
|
});
|
|
};
|
|
$editorView.find('#DFCreatePlus').on('click', function(event) {
|
|
createFunction(false);
|
|
});
|
|
$editorView.find('#DFCreate').on('click', function(event) {
|
|
createFunction(true);
|
|
});
|
|
//Handle the Save Button being clicked.
|
|
$editorView.find('#DFSave').on('click', function(event) {
|
|
$editorForm.data('bs.validator').validate(function(isValid) {
|
|
if(isValid) {
|
|
$.ajax({url: "data/Subcategory/edit", type: "POST", dataType: "json", data: encodeData({
|
|
id: dataTable.getSelectedRow().data("model").id,
|
|
name: $editorForm.find("#DFName").val(),
|
|
categoryId: parseInt($editorForm.find("#DFCategory").val())
|
|
})}).done(function(data) {
|
|
if(close) window.location.hash = "#!/subcategories";
|
|
}).fail(function(data) {
|
|
alert("Server call failed.");
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
//Close the view if the user uses the escape key and it isn't handled at the widget level.
|
|
$editorView.on('keyup', function(event) {
|
|
switch(event.keyCode) {
|
|
case 27:
|
|
if(!event.isDefaultPrevented())
|
|
history.back();
|
|
break;
|
|
}
|
|
});
|
|
|
|
//++++++++++++++++++++++++++++++++++++++
|
|
// ++++++++++ Delete View +++++++++++
|
|
|
|
//Open the dialog.
|
|
$btnDelete.on("click", function(event) {
|
|
//debugger;
|
|
if(dataTable.getSelectedRow() != null) {
|
|
$deleteView.find("#deleteName").html(dataTable.getSelectedRow().data("model").name);
|
|
$deleteView.modal();
|
|
}
|
|
});
|
|
//Delete the element and close the dialog.
|
|
$deleteView.find('#DFDelete').on("click", function(event) {
|
|
if(dataTable.getSelectedRow() != null) {
|
|
$.ajax({url: "data/Subcategory/delete", type: "POST", dataType: "json", data: encodeData({where: {id: dataTable.getSelectedRow().data("model").id}})}).done(function(data) {
|
|
$deleteView.modal("hide");
|
|
dataTable.refresh();
|
|
}).fail(function(data) {
|
|
alert("Server call failed.");
|
|
});
|
|
}
|
|
});
|
|
$deleteView.find('#DFCancelDelete').on('click', function(event) {
|
|
$deleteView.modal('hide');
|
|
});
|
|
//Set the initial focus control.
|
|
$editorView.on('shown.bs.modal', function() {
|
|
$deleteView.find('#DFCancelDelete').focus();
|
|
});
|
|
});
|
|
</script> |