PetitTeton/public/admin/items.html

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

		<!-- Main Page Content -->
		<h1><span class="fa fa-users"></span> Manage Items</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>
				<th data-key-name="category">Category</th>
				<th data-key-name="subcategory">Subcategory</th>
				<th data-key-name="defaultPrice">Default Price</th>
				<th data-key-name="measures">Measures</th>
				<th data-key-name="aliases">Aliases</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="Strawberry Jam" required>
						</div>
						<label for="DFSubcategory">Subcategory</label>
						<div class="form-group">
							<select name="subcategory" id="DFSubcategory" class="js-states form-control" style="width: 100%;" required></select>
						</div>
						<label for="DFPrice">Default Price</label>
						<div class="input-group">
							<span class="input-group-addon">$</span><input name="defaultPrice" id="DFPrice" type="number" min="0.00" step="0.50" value="10.00" data-number-to-fixed="2" class="form-control currency" tabindex="0" required>
						</div>
						<label for="DFMeasures">Measures</label>
						<div class="form-group">
							<select class="js-states form-control" name="measures" id="DFMeasures" multiple="multiple" tabindex="0" style="width: 100%;" required></select>
						</div>
						<label for="DFNewAlias">Aliases</label>
						<div class="input-group">
							<input name="newAlias" id="DFNewAlias" type="text" class="form-control text" tabindex="0"><span class="input-group-btn"><button id="DFNewAliasAdd" class="btn" type="button">Add</button></span>
						</div>
						<div id="DFAliases" class="list-group" tabindex="0">
						</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 item <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=items.html
			$(function() {
				var $page = $('#items');
				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/Item/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();
						}
					},
					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;
						}},
						{name: "subcategories", url: "data/Subcategory/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, item, supportingData) {
						try {
							var subcategory = supportingData.subcategories[item.subcategoryId];
							var category = supportingData.categories[subcategory.categoryId];

							$cell.html(category.name);
						} catch(err) {
							console.log(err);
							$cell.html("Not Found");
						}
					}, subcategory: function($cell, item, supportingData) {
						try {
							var subcategory = supportingData.subcategories[item.subcategoryId];

							$cell.html(subcategory.name);
						} catch(err) {
							console.log(err);
							$cell.html("Not Found");
						}
					}},
					postAddRowHandler: function($row, dataObject) {
						if(dataObject.deletedAt) {
							$page.find("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/Item/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({paranoid: true, include: [{model: 'Subcategory', paranoid: true, as: 'subcategories'}], order: ['name', ['name']]})}),
						$.get('data/Measure/readAll', {request: JSON.stringify({paranoid: true, order: ['name']})})
				];

				//Update the dialog drop downs when the queries finish.
				$.when.apply($, queries).then(function(query1, query2) {
					var categories = query1[0];
					var measures = query2[0];
					var categoriesData = [];
					var measureData = [];

					//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];
						//If the category has subcategories then add it, otherwise ignore it.
						if(nextCategory.subcategories) {
							var category = {text: nextCategory.name, children: []};
							for(var sub = 0; sub < nextCategory.subcategories.length; sub++) {
								var next = nextCategory.subcategories[sub];
								category.children.push({id: "" + next.id, text: next.name});
							}
							categoriesData.push(category);
						}
					}

					//Build the measures list.
					for(var i = 0; i < measures.length; i++) {
						var nextMeasure = measures[i];
						measureData.push({id: '' + nextMeasure.id, text: nextMeasure.name});
					}

					//Initialize the data for the dropdown.
					$editorForm.find("#DFSubcategory").select2({data: categoriesData}).focus(function() {$(this).select2('focus')});
					//Initialize the measures selector.
					$editorForm.find('#DFMeasures').select2({data: measureData}).focus(function() {$(this).select2('focus')});
					//Initialize the validator
					$editorForm.validator();
					//Debug Events
//					$('#createDialog form').find('*').on('focusout focus change input', function(event) {
//						console.log("Event [" + event.type + "] on " + event.target + (event.target.name ? "." + event.target.name : event.target.id ? "." + event.target.id : "") + "{" + event.target.classList + "}");
//					});

					$editorForm.find('#DFMeasures').on('select2:select', function(event) {
						var $el = $(event.params.data.element);

						$el.detach();
						$(this).append($el);
						$(this).trigger("change");
					})
				});

				//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 Item");
					//Reset fields to default values.
					$editorDialog.find("#DFName").val("");
					$editorDialog.find("#DFPrice").val("10.00");
					//Open the dialog.
					$editorDialog.modal();
				});
				//Handle opening the edit dialog.
				$btnEdit.on("click", function(event) {
					//debugger;
					if(dataTable.getSelectedRow() != null) {
						var model = dataTable.getSelectedRow().data("model");

						//Configure the dialog to edit an existing element.
						$editorDialog.find("#DFCreate, #DFCreatePlus").hide();
						$editorDialog.find("#DFSave").show();
						$editorDialog.find(".modal-title").text("Edit Item");
						//Reset fields to selected values.
						$editorDialog.find('#DFName').val(model.name);
						$editorDialog.find('#DFSubcategory').val(model.subcategoryId);
						$editorDialog.find('#DFPrice').val(model.defaultPrice);
						$editorDialog.find('#DFMeasures').val(model.measures);

						if(model.aliases && model.aliases.length) {
							var $aliasesList = $editorDialog.find('DFAliases');

							for(var a = 0; a < model.aliases.length; a++) {
								var alias = model.aliases[a];
								$aliasesList.append("<li>" + alias + "</li>");
							}
						}


						//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/Item/create", type: "POST", dataType: "json", data: encodeData({
								name: $editorForm.find("#DFName").val(),
								subcategoryId: parseInt($editorForm.find("#DFSubcategory").val()),
								defaultPrice: $editorForm.find("#DFPrice").val(),
								measures: JSON.stringify($editorForm.find("#DFMeasures").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/Item/edit", type: "POST", dataType: "json", data: encodeData({
								id: dataTable.getSelectedRow().data("model").id,
								name: $editorForm.find("#DFName").val(),
								subcategoryId: parseInt($editorForm.find("#DFSubcategory").val()),
								defaultPrice: $editorForm.find("#DFPrice").val(),
								measures: JSON.stringify($editorForm.find("#DFMeasures").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');
				});
				//Add a new alias to the alias list.
				$editorDialog.find('#DFNewAliasAdd').on('click', function(event) {
					//Add the text in the DFNewAlias input as an alias in the list.
					var $aliasInput = $editorDialog.find('#DFNewAlias');
					var text = $aliasInput.val();

					if(text) text = text.trim();

					if(text && text.length) {
						var $aliases = $editorDialog.find('#DFAliases');

						$("<span>", {
							roll: 'button',
							tabindex: '0',
							text: text
						}).appendTo($aliases);

						$aliasInput.val("");
					}

					$editorDialog.find('#DFNewAlias').focus();
				});
				//When the alias list is focused, select the first alias if none was previously selected.
				$editorDialog.find('#DFAliases').on('focus', function(event) {
					var $selected = $(event.target).children('.selected');

					//If there isn't a selected list element, then select the first.
					if(!$selected.length) {
						$(event.target).children(':first').addClass('selected');
					}
				});
				//Allow navigation of the selection with arrow keys, allow deletion with the delete key.
				$editorDialog.find('#DFAliases').on('keyup', function(event) {
					switch(event.keyCode) {
						case 46:
							var $selected = $(event.target).children('.selected');

							$selected.prev().addClass('selected').siblings().removeClass('selected');
							$selected.remove();
							break;
						case 38:
							var $selected = $(event.target).children('.selected');
							var $nextSelected = $selected.length ? $selected.prev().length ? $selected.prev() : $(event.target).children(':last') : $(event.target).children(':first');

							$nextSelected.addClass('selected').siblings().removeClass('selected');
							break;
						case 40:
							var $selected = $(event.target).children('.selected');
							var $nextSelected = $selected.length ? $selected.next().length ? $selected.next() : $(event.target).children(':first') : $(event.target).children(':first');

							$nextSelected.addClass('selected').siblings().removeClass('selected');
							break;
					}
				});
				//Allow the user to click to select an alias.
				$editorDialog.find('#DFAliases').on('click', 'span', function(event) {
					$(event.target).addClass('selected').siblings().removeClass('selected');
				});
				//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/Item/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>