PetitTeton/public/admin/categories.html

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

		<!-- Main Page Content -->
		<h1><span class="fa fa-users"></span> Manage Categories</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>
				<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>
			</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="VAP" 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">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 category <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=categories.html
			$(function() {
				var $page = $('#categories');
				var $btnCreate = $page.find("#createButton");
				var $btnEdit = $page.find("#editButton");
				var $btnDelete = $page.find("#deleteButton");
				var $btnRestore = $page.find("#restoreButton");

				var dataTable = new LinkedTable($page.find('#dataTable'), {
					url: "data/Category/readAll",
					attr: "data-key-name",
					selection: "row",
					parameters: function() {
						return {paranoid: !$page.find('#includeDeletedToggle').is(":checked")};
					},
					selectionChanged: function($tr, model) {
						if($tr && model) {
							$btnEdit.show();

							//If the object was deleted (hidden), then allow it to be restored, otherwise allow the model to be deleted.
							if(model.deletedAt) {
								$btnRestore.show();
								$btnDelete.hide();
							}
							else {
								$btnRestore.hide();
								$btnDelete.show();
							}
						}
						else {
							$btnEdit.hide();
							$btnDelete.hide();
							$btnRestore.hide();
						}
					},
					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();

				//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/Category/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');

				//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 Category");
					//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 Category");
						//Reset fields to selected values.
						$editorDialog.find('#DFName').val(dataTable.getSelectedRow().data("model").name);
						//Open the dialog.
						$editorDialog.modal();
					}
				});

				//Handle the Create Button being clicked.
				var createFunction = function(close) {
					$editorForm.data('bs.validator').validate(function(isValid) {
						if(isValid) {
							try {
								$.post("data/Category/create", {
									name: $editorForm.find("#DFName").val()
								}, function(data) {
									if(data.result == "success") {
										if(close) $editorDialog.modal("hide");
										dataTable.refresh();
									}
									else {
										alert(data.result);
									}
								}, "json");
							} catch(e) {
								alert(e);
							}
						}
					});
				};
				$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) {
							try {
								$.post("data/Category/edit", {
									id: dataTable.getSelectedRow().data("model").id,
									name: $editorForm.find("#DFName").val()
								}, function(data) {
									if(data.result == "success") {
										$editorDialog.modal("hide");
										dataTable.refresh();
									}
									else {
										alert(data.result);
									}
								}, "json");
							} catch(e) {
								alert(e);
							}
						}
					});
				});
				$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) {
						$.post("data/Category/delete", {where: {id: dataTable.getSelectedRow().data("model").id}}, function(data) {
							if(data.result == "success") {
								$deleteDialog.modal("hide");
								dataTable.refresh();
							}
							else {
								alert(data.result);
							}
						}, "json");
					}
				});
				$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>