PetitTeton/public/admin/sales.html

<div id="sales" class="page">
	<div id="listView" class="view">
		<div class="buttonContainer">
			<h1><span class="fa fa-money"></span> Sales</h1>

			<div class="dt-buttons btn-group" style="display: inline-block">
				<a id="createButton" class="btn btn-default buttons-create" tabindex="0" href="#!/sales-create"><span>New</span></a>
				<a id="editButton" class="btn btn-default buttons-selected buttons-edit" tabindex="0" href="#!/sales-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>
			</div>
		</div>
		<table id="dataTable" class="table table-striped table-hover">
			<thead>
			<tr>
				<th data-key-name="date">Date</th>
				<th data-key-name="item">Item</th>
				<th data-key-name="amount">Amount</th>
				<th data-key-name="measure">Measure</th>
				<th data-key-name="price">Price</th>
				<th data-key-name="venue">Venue</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="DFDate">Date</label>
					<div class="input-group date">
						<input name="date" id="DFDate" type="text" class="form-control" tabindex="0" placeholder="" required>
						<span class="input-group-addon">
							<span class="glyphicon glyphicon-calendar"></span>
						</span>
					</div>
					<label for="DFItem">Item</label>
					<div class="form-group">
						<input name="itemId" id="DFItemId" type="hidden"/>
						<input name="item" id="DFItem" class="form-control" tabindex="0" required/>
					</div>
					<label for="DFAmount">Amount</label>
					<div class="input-group">
						<input name="amount" id="DFAmount" type="number" min="0" step="1" value="1" data-number-to-fixed="2" class="form-control" tabindex="0" required>
					</div>
					<label for="DFMeasure">Measure</label>
					<div class="form-group">
						<input name="measureId" id="DFMeasureId" type="hidden"/>
						<input name="measure" id="DFMeasure" class="form-control" tabindex="0" required/>
					</div>
					<label for="DFPrice">Price</label>
					<div class="input-group">
						<span class="input-group-addon">$</span><input name="price" 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="DFVenue">Venue</label>
					<div class="form-group">
						<input name="venueId" id="DFVenueId" type="hidden"/>
						<input name="venue" id="DFVenue" 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='#!/sales'">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">&times;</button>
				<h4 class="modal-title">Delete Item</h4>
			</div>
			<div class="modal-body">
				Are you certain you wish to delete the sale <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=sales.html
$(function() {
	var $page = $('#sales');
	var $btnCreate = $page.find("#createButton");
	var $btnEdit = $page.find("#editButton");
	var $btnDelete = $page.find("#deleteButton");

	$btnEdit.disable(true);
	$btnDelete.disable(true);

	var selectionChanged = function($tr, model) {
		if($tr && model) {
			$btnDelete.disable(false);
			$btnEdit.disable(false);
		}
		else {
			$btnEdit.disable(true);
			$btnDelete.disable(true);
		}
	};

	var $table = $page.find('#dataTable');
	$table.buildTable({
		url: "data/Sale/readAll",
		attr: "data-key-name",
		selection: "row",
		parameters: undefined,
		selectionChanged: selectionChanged,
		selectionOpened: function($tr, model) {
			history.hash = "#!/sales-edit";
		},
		supportingData: [{name: "items", url: "data/Item/readAll", parameters: {showDeleted: true}, postProcess: function(data) {
			var byId;

			//Convert the list into a map by id.
			byId = data.reduce(function(map, item) {
				map[item.id] = item;
				return map;
			}, {});

			return byId;
		}}],
		cellDataHandlers: {item: function($cell, sale, supportingData) {
			try {
				var item = supportingData.items[sale.itemId];

				$cell.html(item.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 = "#!/sales-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();
	});

	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/Item/readAll", {request: JSON.stringify({paranoid: false, order: ['name', ['name']]})}),
		$.get("data/Measure/readAll", {request: JSON.stringify({paranoid: false})}),
		$.get("data/Venue/readAll", {request: JSON.stringify({paranoid: false})})
	];

	//Update the dialog drop downs when the queries finish.
	$.when.apply($, queries).then(function(query1, query2, query3) {
		//Initialize the drop down menus.
		$editorForm.find("#DFItem").buildCombo(query1[0], {textAttr: 'name', listClass: 'comboList'});
		$editorForm.find("#DFMeasure").buildCombo(query2[0], {textAttr: 'name', listClass: 'comboList'});
		$editorForm.find("#DFVenue").buildCombo(query3[0], {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 Sale");
				//Reset fields to default values.
				$editorView.find("#DFAmount").val("1");
				$editorView.find("#DFPrice").val("");
				showView($editorView, $editorView.find("#DFDate"), 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 Sale");
					//Reset fields to selected values.
					$editorView.find('#DFDate').val(dataTable.getSelectedRow().data("model").date);
					$editorView.find('#DFPrice').val(dataTable.getSelectedRow().data("model").price);
					$editorView.find('#DFAmount').val(dataTable.getSelectedRow().data("model").amount);
					$editorView.find('#DFItemId').val(dataTable.getSelectedRow().data("model").itemId).trigger("change");
					$editorView.find('#DFVenueId').val(dataTable.getSelectedRow().data("model").venueId).trigger("change");
					$editorView.find('#DFMeasureId').val(dataTable.getSelectedRow().data("model").measureId).trigger("change");
					showView($editorView, $editorView.find("#DFDate"), 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/Sale/create", type: "POST", dataType: "json", data: encodeData({
					date: $editorForm.find("#DFDate").val(),
					price: parseFloat($editorForm.find("#DFPrice").val()),
					amount: parseFloat($editorForm.find("#DFAmount").val()),
					itemId: parseInt($editorForm.find("#DFItemId").val()),
					venueId: parseInt($editorForm.find("#DFVenueId").val()),
					measureId: parseInt($editorForm.find("#DFMeasureId").val())
				})}).done(function(data) {
					if(close) window.location.hash = "#!/sales";
				}).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) {
				try {
					$.post("data/Sale/edit", {
						id: dataTable.getSelectedRow().data("model").id,
						date: $editorForm.find("#DFDate").val(),
						price: parseFloat($editorForm.find("#DFPrice").val()),
						amount: parseFloat($editorForm.find("#DFAmount").val()),
						itemId: parseInt($editorForm.find("#DFItemId").val()),
						venueId: parseInt($editorForm.find("#DFVenueId").val()),
						measureId: parseInt($editorForm.find("#DFMeasureId").val())
					}, function(data) {
						if(data.result == "success") {
							if(close) window.location.hash = "#!/sales";
						}
						else {
							alert(data.result);
						}
					}, "json");
				} catch(e) {
					alert(e);
				}
			}
		});
	});

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

	$page.find('div.date').datetimepicker({
		viewMode: 'years',
		format: 'MM/DD/YY'
	});

	//++++++++++++++++++++++++++++++++++++++
	// ++++++++++ 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) {
			$.post("data/Sale/delete", {where: {id: dataTable.getSelectedRow().data("model").id}}, function(data) {
				if(data.result == "success") {
					$deleteView.modal("hide");
					dataTable.refresh();
				}
				else {
					alert(data.result);
				}
			}, "json");
		}
	});
	$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>