Major changes to the structure of pages to utilize the flex layout system.
This commit is contained in:
Wynne Crisman
@@ -1,13 +1,10 @@
|
||||
<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 id="listView" class="view">
|
||||
<div class="buttonContainer">
|
||||
<h1><span class="fa fa-sitemap"></span> Manage Items</h1>
|
||||
<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="createButton" class="btn btn-default buttons-create" tabindex="0" href="#!/items-create"><span>New</span></a>
|
||||
<a id="editButton" class="btn btn-default buttons-selected buttons-edit" tabindex="0" href="#!/items-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>
|
||||
@@ -17,426 +14,503 @@
|
||||
</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">×</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 id="dataTable">
|
||||
<table 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>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</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">×</button>
|
||||
<h4 class="modal-title">Delete Item</h4>
|
||||
</div>
|
||||
<!-- Create/Edit View -->
|
||||
<div id="editorView" class="view" style="display: none;" data-menu="false">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h4 class="modal-title"></h4>
|
||||
</div>
|
||||
<form role="form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
Are you certain you wish to delete the item <span id="deleteName"></span>?
|
||||
<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">
|
||||
<input name="subcategoryId" id="DFSubcategoryId" type="hidden"/>
|
||||
<input name="subcategory" id="DFSubcategory" class="form-control" tabindex="0" required/>
|
||||
</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="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>
|
||||
<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='#!/items'">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 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>
|
||||
</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");
|
||||
<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();
|
||||
$btnEdit.disable(true);
|
||||
$btnDelete.disable(true);
|
||||
$btnRestore.disable(true);
|
||||
|
||||
//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;
|
||||
var selectionChanged = function($tr, model) {
|
||||
if($tr && model) {
|
||||
$btnEdit.disable(false);
|
||||
|
||||
//Convert the category list into a map by category id.
|
||||
byId = data.reduce(function(map, category) {
|
||||
map[category.id] = category;
|
||||
return map;
|
||||
}, {});
|
||||
//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);
|
||||
}
|
||||
};
|
||||
|
||||
return byId;
|
||||
}},
|
||||
{name: "subcategories", url: "data/Subcategory/readAll", parameters: {showDeleted: true}, postProcess: function(data) {
|
||||
var byId;
|
||||
var $table = $page.find('#dataTable');
|
||||
var dataTable = new LinkedTable($table, {
|
||||
url: "data/Item/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;
|
||||
}, {});
|
||||
//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];
|
||||
return byId;
|
||||
}},
|
||||
{name: "subcategories", url: "data/Subcategory/readAll", parameters: {showDeleted: true}, postProcess: function(data) {
|
||||
var byId;
|
||||
|
||||
$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];
|
||||
//Convert the category list into a map by category id.
|
||||
byId = data.reduce(function(map, category) {
|
||||
map[category.id] = category;
|
||||
return map;
|
||||
}, {});
|
||||
|
||||
$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>");
|
||||
}
|
||||
}
|
||||
});
|
||||
return byId;
|
||||
}}
|
||||
],
|
||||
cellDataHandlers: {category: function($cell, item, supportingData) {
|
||||
try {
|
||||
var subcategory = supportingData.subcategories[item.subcategoryId];
|
||||
var category = supportingData.categories[subcategory.categoryId];
|
||||
|
||||
//Call the refresh user table function once initially.
|
||||
$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>");
|
||||
}
|
||||
},
|
||||
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);
|
||||
}
|
||||
}
|
||||
});
|
||||
$page.find('#dataTable').on('dblclick', 'tr', function(event) {
|
||||
if(dataTable.getSelectedRow()) {
|
||||
location.hash = "#!/items-edit";
|
||||
}
|
||||
});
|
||||
|
||||
//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/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.");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//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');
|
||||
|
||||
//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;
|
||||
//+++++++++++++++++++++++++++++++++++++++++++++++
|
||||
// ++++++++++++ Create/Edit Views ++++++++++++
|
||||
|
||||
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.");
|
||||
});
|
||||
}
|
||||
});
|
||||
var $editorForm = $editorView.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 = [];
|
||||
|
||||
//+++++++++++++++++++++++++++++++++++++++++++++++
|
||||
// ++++++++++++ Create/Edit Dialogs ++++++++++++
|
||||
// //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);
|
||||
// }
|
||||
// }
|
||||
|
||||
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']})})
|
||||
];
|
||||
//Build the measures list.
|
||||
for(var i = 0; i < measures.length; i++) {
|
||||
var nextMeasure = measures[i];
|
||||
measureData.push({id: '' + nextMeasure.id, text: nextMeasure.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) {
|
||||
//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 drop down menu.
|
||||
$editorForm.find("#DFSubcategory").buildEditableSelect(query1[0], {textAttr: 'name', listClass: 'comboList', groupFunctions: {
|
||||
groupParents: function(category) {
|
||||
return category;
|
||||
},
|
||||
parentText: function(category) {
|
||||
return category.name;
|
||||
},
|
||||
children: function(category) {
|
||||
return category.subcategories;
|
||||
}
|
||||
}});
|
||||
//Initialize the validator
|
||||
$editorForm.validator();
|
||||
//Debug Events
|
||||
// $('#createView 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);
|
||||
$editorForm.find('#DFMeasures').on('select2:select', function(event) {
|
||||
var $el = $(event.params.data.element);
|
||||
|
||||
$el.detach();
|
||||
$(this).append($el);
|
||||
$(this).trigger("change");
|
||||
})
|
||||
});
|
||||
$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");
|
||||
//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 Item");
|
||||
//Reset fields to default values.
|
||||
$editorView.find("#DFName").val("");
|
||||
$editorView.find("#DFPrice").val("10.00");
|
||||
$editorView.find('#DFAliases').empty();
|
||||
showView($editorView, $editorView.find("#DFName"), internal);
|
||||
break;
|
||||
case 'edit':
|
||||
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);
|
||||
//Configure the dialog to edit an existing element.
|
||||
$editorView.find("#DFCreate, #DFCreatePlus").hide();
|
||||
$editorView.find("#DFSave").show();
|
||||
$editorView.find(".modal-title").text("Edit Item");
|
||||
//Reset fields to selected values.
|
||||
$editorView.find('#DFName').val(model.name);
|
||||
$editorView.find('#DFSubcategory').val(model.subcategoryId);
|
||||
$editorView.find('#DFPrice').val(model.defaultPrice);
|
||||
$editorView.find('#DFMeasures').val(model.measures);
|
||||
$editorView.find('#DFAliases').empty();
|
||||
|
||||
if(model.aliases && model.aliases.length) {
|
||||
var $aliasesList = $editorDialog.find('DFAliases');
|
||||
if(model.aliases && model.aliases.length) {
|
||||
var $aliasesList = $editorView.find('DFAliases');
|
||||
|
||||
for(var a = 0; a < model.aliases.length; a++) {
|
||||
var alias = model.aliases[a];
|
||||
$aliasesList.append("<li>" + alias + "</li>");
|
||||
}
|
||||
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');
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
||||
//If there isn't a selected list element, then select the first.
|
||||
if(!$selected.length) {
|
||||
$(event.target).children(':first').addClass('selected');
|
||||
//Handle the Create Button being clicked.
|
||||
var createFunction = function(close) {
|
||||
$editorForm.data('bs.validator').validate(function(isValid) {
|
||||
if(isValid) {
|
||||
var measures = $editorForm.find("#DFMeasures").val();
|
||||
var aliases = $editorForm.find("#DFAliases span");
|
||||
|
||||
if(aliases.length) {
|
||||
var array = [];
|
||||
|
||||
for(var i = 0; i < aliases.length; i++) {
|
||||
array.push($(aliases[i]).text());
|
||||
}
|
||||
|
||||
aliases = array;
|
||||
}
|
||||
else aliases = null;
|
||||
|
||||
//Convert the measure id's to integers.
|
||||
for(var i = 0; i < measures.length; i++) {
|
||||
measures[i] = parseInt(measures[i]);
|
||||
}
|
||||
|
||||
$.ajax({url: "data/Item/create", type: "POST", dataType: "json", data: encodeData({
|
||||
name: $editorForm.find("#DFName").val(),
|
||||
subcategoryId: parseInt($editorForm.find("#DFSubcategoryId").val()),
|
||||
defaultPrice: $editorForm.find("#DFPrice").val(),
|
||||
measures: JSON.stringify(measures),
|
||||
aliases: JSON.stringify(aliases)
|
||||
})}).done(function(data) {
|
||||
if(close) window.location.hash = "#!/items";
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
//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');
|
||||
}
|
||||
});
|
||||
};
|
||||
$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) {
|
||||
var measures = $editorForm.find("#DFMeasures").val();
|
||||
var aliases = $editorForm.find("#DFAliases span");
|
||||
|
||||
$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');
|
||||
if(aliases.length) {
|
||||
var array = [];
|
||||
|
||||
$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;
|
||||
for(var i = 0; i < aliases.length; i++) {
|
||||
array.push($(aliases[i]).text());
|
||||
}
|
||||
});
|
||||
//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 +++++++++++
|
||||
aliases = array;
|
||||
}
|
||||
else aliases = null;
|
||||
|
||||
//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();
|
||||
//Convert the measure id's to integers.
|
||||
for(var i = 0; i < measures.length; i++) {
|
||||
measures[i] = parseInt(measures[i]);
|
||||
}
|
||||
|
||||
$.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("#DFSubcategoryId").val()),
|
||||
defaultPrice: $editorForm.find("#DFPrice").val(),
|
||||
measures: JSON.stringify(measures),
|
||||
aliases: JSON.stringify(aliases)
|
||||
})}).done(function(data) {
|
||||
if(close) window.location.hash = "#!/items";
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
$editorView.find('#DFCancel').on('click', function(event) {
|
||||
closeView();
|
||||
});
|
||||
//Add a new alias to the alias list.
|
||||
$editorView.find('#DFNewAliasAdd').on('click', function(event) {
|
||||
//Add the text in the DFNewAlias input as an alias in the list.
|
||||
var $aliasInput = $editorView.find('#DFNewAlias');
|
||||
var text = $aliasInput.val();
|
||||
|
||||
if(text) text = text.trim();
|
||||
|
||||
if(text && text.length) {
|
||||
var $aliases = $editorView.find('#DFAliases');
|
||||
|
||||
$("<span>", {
|
||||
roll: 'button',
|
||||
tabindex: '0',
|
||||
text: text
|
||||
}).appendTo($aliases);
|
||||
|
||||
$aliasInput.val("");
|
||||
}
|
||||
|
||||
$editorView.find('#DFNewAlias').focus();
|
||||
});
|
||||
//When the alias list is focused, select the first alias if none was previously selected.
|
||||
$editorView.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.
|
||||
$editorView.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;
|
||||
}
|
||||
});
|
||||
|
||||
//++++++++++++++++++++++++++++++++++++++
|
||||
// ++++++++++ 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/Item/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.");
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
});
|
||||
$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>
|
||||
Reference in New Issue
Block a user