initial source commit
This commit is contained in:
Gary Sharp
@@ -0,0 +1,270 @@
|
||||
@model Disco.Web.Areas.Config.Models.DeviceModel.DeviceComponentsModel
|
||||
@{
|
||||
Html.BundleDeferred("~/ClientScripts/Modules/Disco-jQueryExtensions");
|
||||
}
|
||||
<table id="deviceComponents" data-devicemodelid="@(Model.DeviceModelId.HasValue ? Model.DeviceModelId.Value.ToString() : string.Empty)">
|
||||
<tr>
|
||||
<th>
|
||||
Description
|
||||
</th>
|
||||
<th>
|
||||
Cost
|
||||
</th>
|
||||
<th>
|
||||
Job Types
|
||||
</th>
|
||||
<th class="actions">
|
||||
|
||||
</th>
|
||||
</tr>
|
||||
@foreach (var item in Model.DeviceComponents)
|
||||
{
|
||||
<tr data-devicecomponentid="@item.Id">
|
||||
<td>
|
||||
<input type="text" class="description" value="@item.Description" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" class="cost" value="@item.Cost.ToString("C")" />
|
||||
</td>
|
||||
<td>
|
||||
<span class="edit@(item.JobSubTypes.Count > 0 ? " editAlert" : string.Empty)"></span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="remove"></span>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<a href="#" id="addDeviceComponent">Add Component</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
var $deviceComponents = $('#deviceComponents');
|
||||
|
||||
$('#addDeviceComponent').click(function () {
|
||||
var dc = $('<tr><td><input type="text" class="description" /></td><td><input type="text" class="cost" /></td><td><span class="edit"></span></td><td><span class="remove"></span></td></tr>');
|
||||
dc.find('input').focus(function () { $(this).select() })
|
||||
dc.insertBefore($deviceComponents.find('tr').last());
|
||||
dc.find('input.description').focus();
|
||||
return false;
|
||||
});
|
||||
|
||||
var removeComponentConfirmed = function (id, row) {
|
||||
var data = { id: id };
|
||||
$.ajax({
|
||||
url: '@Url.Action(MVC.API.DeviceModel.ComponentRemove())',
|
||||
dataType: 'json',
|
||||
data: data,
|
||||
success: function (d) {
|
||||
if (d == 'OK') {
|
||||
row.remove();
|
||||
} else {
|
||||
alert('Unable to remove component: ' + d);
|
||||
}
|
||||
},
|
||||
error: function (jqXHR, textStatus, errorThrown) {
|
||||
alert('Unable to remove component: ' + textStatus);
|
||||
}
|
||||
});
|
||||
}
|
||||
var removeComponent = function () {
|
||||
var componentRow = $(this).closest('tr');
|
||||
var id = componentRow.attr('data-devicecomponentid');
|
||||
if (id) {
|
||||
var dialog = $("#dialogConfirmRemove");
|
||||
var buttons = dialog.dialog("option", "buttons");
|
||||
buttons['Remove'] = function () { removeComponentConfirmed(id, componentRow); $(this).dialog("close"); };
|
||||
var buttons = dialog.dialog("option", "buttons", buttons);
|
||||
dialog.dialog('open');
|
||||
} else {
|
||||
// New - Remove
|
||||
componentRow.remove();
|
||||
}
|
||||
}
|
||||
var updateComponent = function () {
|
||||
var componentRow = $(this).closest('tr');
|
||||
componentRow.find('input').attr('disabled', true).addClass('updating');
|
||||
|
||||
var id = componentRow.attr('data-devicecomponentid');
|
||||
if (id) {
|
||||
// Update
|
||||
var data = {
|
||||
id: id,
|
||||
Description: componentRow.find('input.description').val(),
|
||||
Cost: componentRow.find('input.cost').val()
|
||||
};
|
||||
$.ajax({
|
||||
url: '@Url.Action(MVC.API.DeviceModel.ComponentUpdate())',
|
||||
dataType: 'json',
|
||||
type: 'POST',
|
||||
data: data,
|
||||
success: function (d) {
|
||||
componentRow.find('input').attr('disabled', false).removeClass('updating');
|
||||
if (d.Result == 'OK') {
|
||||
componentRow.find('input.description').val(d.Component.Description);
|
||||
componentRow.find('input.cost').val(d.Component.Cost);
|
||||
} else {
|
||||
alert('Unable to update component: ' + d.Result);
|
||||
}
|
||||
},
|
||||
error: function (jqXHR, textStatus, errorThrown) {
|
||||
alert('Unable to update component: ' + textStatus);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Add
|
||||
id = componentRow.closest('table').attr('data-devicemodelid');
|
||||
var data = {
|
||||
id: id,
|
||||
Description: componentRow.find('input.description').val(),
|
||||
Cost: componentRow.find('input.cost').val()
|
||||
};
|
||||
$.ajax({
|
||||
url: '@Url.Action(MVC.API.DeviceModel.ComponentAdd(null, null, null))',
|
||||
dataType: 'json',
|
||||
type: 'POST',
|
||||
data: data,
|
||||
success: function (d) {
|
||||
componentRow.find('input').attr('disabled', false).removeClass('updating');
|
||||
if (d.Result == 'OK') {
|
||||
componentRow.attr('data-devicecomponentid', d.Component.Id);
|
||||
componentRow.find('input.description').val(d.Component.Description);
|
||||
componentRow.find('input.cost').val(d.Component.Cost);
|
||||
} else {
|
||||
alert('Unable to add component: ' + d.Result);
|
||||
}
|
||||
},
|
||||
error: function (jqXHR, textStatus, errorThrown) {
|
||||
alert('Unable to add component: ' + textStatus);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
var editComponentJobTypes = function () {
|
||||
var edit$this = $(this);
|
||||
var componentRow = edit$this.closest('tr');
|
||||
|
||||
var id = componentRow.attr('data-devicecomponentid');
|
||||
|
||||
if (id) {
|
||||
var data = {
|
||||
id: id
|
||||
};
|
||||
$.ajax({
|
||||
url: '@Url.Action(MVC.API.DeviceModel.Component())',
|
||||
dataType: 'json',
|
||||
data: data,
|
||||
success: function (d) {
|
||||
componentRow.find('input').attr('disabled', false).removeClass('updating');
|
||||
if (d.Result == 'OK') {
|
||||
$dialogUpdateJobTypes = $('#dialogUpdateJobTypes');
|
||||
$dialogUpdateJobTypes.find('input:checked').each(function () { $(this).attr('checked', false) });
|
||||
for (var i = 0; i < d.Component.JobSubTypes.length; i++) {
|
||||
var sjt = d.Component.JobSubTypes[i];
|
||||
$dialogUpdateJobTypes.find('#SubTypes_' + sjt).attr('checked', true);
|
||||
}
|
||||
$('#CheckboxBulkSelect_dialogUpdateJobTypes').checkboxBulkSelect('update');
|
||||
var buttons = $dialogUpdateJobTypes.dialog("option", "buttons");
|
||||
buttons['Save'] = function () {
|
||||
$dialogUpdateJobTypes.dialog("disable");
|
||||
var selectedSJTs = [];
|
||||
$dialogUpdateJobTypes.find('input:checked').each(function () { selectedSJTs.push($(this).val()) });
|
||||
|
||||
var data = {
|
||||
id: id,
|
||||
JobSubTypes: selectedSJTs
|
||||
};
|
||||
$.ajax({
|
||||
url: '@Url.Action(MVC.API.DeviceModel.ComponentUpdateJobSubTypes())',
|
||||
dataType: 'json',
|
||||
type: 'POST',
|
||||
traditional: true,
|
||||
data: data,
|
||||
success: function (d) {
|
||||
if (d.Result == 'OK') {
|
||||
if (d.Component.JobSubTypes.length > 0) {
|
||||
edit$this.addClass('editAlert');
|
||||
} else {
|
||||
edit$this.removeClass('editAlert');
|
||||
}
|
||||
$dialogUpdateJobTypes.dialog("enable");
|
||||
$dialogUpdateJobTypes.dialog("close");
|
||||
} else {
|
||||
alert('Unable to update component sub types: ' + d.Result);
|
||||
}
|
||||
},
|
||||
error: function (jqXHR, textStatus, errorThrown) {
|
||||
alert('Unable to update component sub types: ' + textStatus);
|
||||
}
|
||||
});
|
||||
};
|
||||
var buttons = $dialogUpdateJobTypes.dialog("option", "buttons", buttons);
|
||||
$dialogUpdateJobTypes.dialog('open');
|
||||
} else {
|
||||
alert('Unable to load component: ' + d.Result);
|
||||
}
|
||||
},
|
||||
error: function (jqXHR, textStatus, errorThrown) {
|
||||
alert('Unable to load component: ' + textStatus);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$("#dialogConfirmRemove").dialog({
|
||||
resizable: false,
|
||||
height: 140,
|
||||
modal: true,
|
||||
autoOpen: false,
|
||||
buttons: {
|
||||
"Remove": function () {
|
||||
$(this).dialog("close");
|
||||
},
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#dialogUpdateJobTypes').dialog({
|
||||
resizable: false,
|
||||
modal: true,
|
||||
autoOpen: false,
|
||||
width: 550,
|
||||
buttons: {
|
||||
"Save": function () {
|
||||
$(this).dialog("close");
|
||||
},
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#CheckboxBulkSelect_dialogUpdateJobTypes').checkboxBulkSelect({ parentSelector: 'div' });
|
||||
|
||||
$deviceComponents.find('input').live('change', updateComponent).focus(function () { $(this).select() });
|
||||
$deviceComponents.find('span.remove').live('click', removeComponent);
|
||||
$deviceComponents.find('span.edit').live('click', editComponentJobTypes);
|
||||
|
||||
});
|
||||
</script>
|
||||
<div id="dialogUpdateJobTypes" title="Update Job Types">
|
||||
<div>
|
||||
<h2>
|
||||
Hardware Non-Warranty Job Types</h2>
|
||||
@CommonHelpers.CheckBoxList("SubTypes", Model.JobSubTypes.ToSelectListItems(), 2)
|
||||
<br />
|
||||
<span id="CheckboxBulkSelect_dialogUpdateJobTypes" class="checkboxBulkSelectContainer">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dialogConfirmRemove" title="Delete this Component?">
|
||||
<p>
|
||||
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
|
||||
This item will be permanently deleted and cannot be recovered. Are you sure?</p>
|
||||
</div>
|
||||
Reference in New Issue
Block a user