PetitTeton/public/admin/subcategories.html

<div id="subcategories" class="page">
	<div class="col-sm-12 col-sm-offset-0">

		<!-- Main Page Content -->
		<h1><span class="fa fa-users"></span> Manage Subcategories</h1>

		<div class="col-sm-12">
			<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>
				<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>

		<!-- Create/Edit Dialog -->
		<div id="editorDialog" class="modal fade" role="dialog">
			<div class="modal-dialog">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<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">
							<select name="category" id="DFCategory" class="js-states form-control" style="width: 100%;" required></select>
						</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">Cancel</button>
					</div>
				</form>
			</div>
		</div>

		<!-- Delete Dialog -->
		<div id="deleteDialog" class="modal fade" role="dialog">
			<div class="modal-dialog">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</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>

		<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) {
						$btnEdit.disable(false);

						//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);
						}
						else {
							$btnRestore.disable(true);
							$btnDelete.disable(false);
						}
					}
					else {
						$btnEdit.disable(true);
						$btnDelete.disable(true);
						$btnRestore.disable(true);
					}
				};

				var dataTable = new LinkedTable($page.find('#dataTable'), {
					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);
						}
					}
				});

				//Call the refresh user table function once initially.
				dataTable.build();

				//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.");
						});
					}
				});


				//+++++++++++++++++++++++++++++++++++++++++++++++
				// ++++++++++++ Create/Edit Dialogs ++++++++++++

				var $editorDialog = $page.find('#editorDialog');
				var $deleteDialog = $page.find('#deleteDialog');
				var $editorForm = $editorDialog.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) {
					var categories = query1;
					var categoriesData = [];

					//Iterate over the categories and their subcategories to build the tree of data for the dropdown.
					for(var cat = 0; cat < categories.length; cat++) {
						var nextCategory = categories[cat];

						categoriesData.push({id: '' + nextCategory.id, text: nextCategory.name});
					}

					//Initialize the data for the dropdown.
					$editorForm.find("#DFCategory").select2({data: categoriesData}).focus(function() {$(this).select2('focus')});
					//Initialize the validator
					$editorForm.validator();
				});

				//Handle opening the create dialog.
				$btnCreate.on("click", function(event) {
					//Configure the dialog to create a new element.
					$editorDialog.find("#DFCreate, #DFCreatePlus").show();
					$editorDialog.find("#DFSave").hide();
					$editorDialog.find(".modal-title").text("Create Subcategory");
					//Reset fields to default values.
					$editorDialog.find("#DFName").val("");
					//Open the dialog.
					$editorDialog.modal();
				});
				//Handle opening the edit dialog.
				$btnEdit.on("click", function(event) {
					//debugger;
					if(dataTable.getSelectedRow() != null) {
						//Configure the dialog to edit an existing element.
						$editorDialog.find("#DFCreate, #DFCreatePlus").hide();
						$editorDialog.find("#DFSave").show();
						$editorDialog.find(".modal-title").text("Edit Subcategory");
						//Reset fields to selected values.
						$editorDialog.find('#DFName').val(dataTable.getSelectedRow().data("model").name);
						$editorDialog.find('#DFCategory').val(dataTable.getSelectedRow().data("model").categoryId).trigger("change");
						//Open the dialog.
						$editorDialog.modal();
					}
				});

				//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("#DFCategory").val())
							})}).done(function(data) {
								if(close) $editorDialog.modal("hide");
								dataTable.refresh();
							}).fail(function(data) {
								alert("Server call failed.");
							});
						}
					});
				};
				$editorDialog.find('#DFCreatePlus').on('click', function(event) {
					createFunction(false);
				});
				$editorDialog.find('#DFCreate').on('click', function(event) {
					createFunction(true);
				});
				//Handle the Save Button being clicked.
				$editorDialog.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) $editorDialog.modal("hide");
								dataTable.refresh();
							}).fail(function(data) {
								alert("Server call failed.");
							});
						}
					});
				});
				$editorDialog.find('#DFCancel').on('click', function(event) {
					$editorDialog.modal('hide');
				});
				//Set the initial focus control.
				$editorDialog.on('shown.bs.modal', function() {
					$editorDialog.find('#DFName').focus();
				});

				//++++++++++++++++++++++++++++++++++++++
				// ++++++++++ Delete Dialog +++++++++++

				//Open the dialog.
				$btnDelete.on("click", function(event) {
					//debugger;
					if(dataTable.getSelectedRow() != null) {
						$deleteDialog.find("#deleteName").html(dataTable.getSelectedRow().data("model").name);
						$deleteDialog.modal();
					}
				});
				//Delete the element and close the dialog.
				$deleteDialog.find('#deleteButton').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) {
							$deleteDialog.modal("hide");
							dataTable.refresh();
						}).fail(function(data) {
							alert("Server call failed.");
						});
					}
				});
				$deleteDialog.find('#DFCancelDelete').on('click', function(event) {
					$deleteDialog.modal('hide');
				});
				//Set the initial focus control.
				$editorDialog.on('shown.bs.modal', function() {
					$deleteDialog.find('#DFCancelDelete').focus();
				});
			});
		</script>
	</div>
</div>