mirror of
https://github.com/nottinghamtec/PyRIGS.git
synced 2026-01-17 05:22:16 +00:00
Fixed frontend for updating existing items
This commit is contained in:
Tom Price
@@ -3,10 +3,20 @@ function setupItemTable(items_json) {
|
||||
$.each(objectitems, function(key, val) {
|
||||
objectitems[key] = JSON.parse(val);
|
||||
})
|
||||
newitem = -1
|
||||
}
|
||||
|
||||
function updatePrices() {
|
||||
// individual rows
|
||||
$('.item_row').each(function() {
|
||||
var pk = $(this).data('pk');
|
||||
var fields = objectitems[pk].fields;
|
||||
var sub = fields.cost * fields.quantity;
|
||||
$('#item-'+pk+' .sub-total').html(parseFloat(sub).toFixed(2)).data('subtotal', sub);
|
||||
})
|
||||
|
||||
var sum = 0;
|
||||
|
||||
$('.sub-total').each(function() {
|
||||
sum += Number($(this).data('subtotal'));
|
||||
});
|
||||
@@ -16,18 +26,6 @@ function updatePrices() {
|
||||
$('#total').text(parseFloat(sum+vat).toFixed(2));
|
||||
}
|
||||
|
||||
function updateItemRow(pk) {
|
||||
$row = $('#item-'+pk)
|
||||
url = $row.data('url');
|
||||
$.ajax({
|
||||
url:url,
|
||||
success:function(r) {
|
||||
$row.replaceWith(r);
|
||||
updatePrices();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function addItemRow(url) {
|
||||
$tbody = $('#item-table tbody');
|
||||
$.ajax({
|
||||
@@ -54,63 +52,65 @@ $.ajaxSetup({
|
||||
});
|
||||
|
||||
$('#item-table').on('click', '.item-delete', function() {
|
||||
var row = $('#item-'+$(this).data('pk'));
|
||||
$.ajax({
|
||||
type:"POST",
|
||||
url:$(this).data('url'),
|
||||
success:function(r) {
|
||||
row.remove();
|
||||
updatePrices();
|
||||
}
|
||||
});
|
||||
delete objectitems[$(this).data('pk')]
|
||||
$('#item-'+$(this).data('pk')).remove();
|
||||
updatePrices();
|
||||
});
|
||||
|
||||
$('#item-table').on('click', '.item-add', function() {
|
||||
$.ajax({
|
||||
url:$(this).data('url'),
|
||||
success:function(r) {
|
||||
$('#itemModal .modal-content').html(r);
|
||||
$('#item-table tbody').sortable('refresh');
|
||||
}
|
||||
});
|
||||
$('#item-form').data('pk', newitem--);
|
||||
|
||||
// Set the form values
|
||||
var fields = objectitems[pk].fields;
|
||||
$('#item_name').val('');
|
||||
$('#item_description').val('');
|
||||
$('#item_quantity').val('');
|
||||
$('#item_cost').val('');
|
||||
});
|
||||
|
||||
$('#item-table').on('click', '.item-edit', function() {
|
||||
var url = $(this).data('url');
|
||||
$('#itemModal').data('pk', $(this).data('pk'));
|
||||
$.ajax({
|
||||
url:url,
|
||||
success:function(r) {
|
||||
$('#itemModal .modal-content').html(r);
|
||||
}
|
||||
})
|
||||
// set the pk as we will need this later
|
||||
var pk = $(this).data('pk');
|
||||
$('#item-form').data('pk', pk);
|
||||
|
||||
// Set the form values
|
||||
var fields = objectitems[pk].fields;
|
||||
$('#item_name').val(fields.name);
|
||||
$('#item_description').val(fields.description);
|
||||
$('#item_quantity').val(fields.quantity);
|
||||
$('#item_cost').val(fields.cost);
|
||||
});
|
||||
|
||||
$('#itemModal').on('hidden.bs.modal', function() {
|
||||
pk = $(this).data('pk');
|
||||
updateItemRow(pk);
|
||||
$('#itemModal .modal-content').html('');
|
||||
})
|
||||
|
||||
$('body').on('submit','.item-form', function(e) {
|
||||
$('body').on('submit','#item-form', function(e) {
|
||||
e.preventDefault();
|
||||
url = $(this).data('url');
|
||||
data = $(this).serialize();
|
||||
$.ajax({
|
||||
type:'POST',
|
||||
url:url,
|
||||
data:data,
|
||||
success: function(r) {
|
||||
$('#itemModal .modal-content').html(r)
|
||||
}
|
||||
})
|
||||
})
|
||||
var pk = $(this).data('pk');
|
||||
$('#itemModal').modal('hide');
|
||||
|
||||
function addItem(url) {
|
||||
$.get(url, function(r) {
|
||||
$('#item-table tbody').append(r);
|
||||
});
|
||||
}
|
||||
if(pk < 0) {
|
||||
// @todo: Add new item
|
||||
} else {
|
||||
// update data structure
|
||||
var fields = objectitems[pk].fields;
|
||||
fields.name = $('#item_name').val()
|
||||
fields.description = $('#item_description').val();
|
||||
fields.cost = $('#item_cost').val();
|
||||
fields.quantity = $('#item_quantity').val();
|
||||
objectitems[pk].fields = fields;
|
||||
|
||||
// update the table
|
||||
$row = $('#item-'+pk);
|
||||
$row.find('.name').html(fields.name);
|
||||
$row.find('.description').html(fields.description);
|
||||
$row.find('.cost').html(parseFloat(fields.cost).toFixed(2));
|
||||
$row.find('.quantity').html(fields.quantity);
|
||||
|
||||
updatePrices();
|
||||
}
|
||||
});
|
||||
|
||||
$('body').on('submit', '.itemised_form', function(e) {
|
||||
$('#id_items_json').val(JSON.stringify(objectitems));
|
||||
});
|
||||
|
||||
// Return a helper with preserved width of cells
|
||||
var fixHelper = function(e, ui) {
|
||||
@@ -127,7 +127,7 @@ $("#item-table tbody").sortable({
|
||||
itemorder = new Array();
|
||||
$.each(info, function(key, value) {
|
||||
pk = $('#'+value).data('pk');
|
||||
itemorder[key] = pk;
|
||||
objectitems[pk].fields.order = key;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
{% endif %}
|
||||
})
|
||||
|
||||
$(document).ready(function() {
|
||||
$(document).ready(function () {
|
||||
setupItemTable($("#{{ form.items_json.id_for_label }}").val());
|
||||
});
|
||||
</script>
|
||||
@@ -77,9 +77,10 @@
|
||||
{% endif %}
|
||||
</h2>
|
||||
{% include 'form_errors.html' %}
|
||||
<form class="form-horizontal" role="form" method="POST">{% csrf_token %}
|
||||
<form class="form-horizontal itemised_form" role="form" method="POST">{% csrf_token %}
|
||||
{% render_field form.is_rig style="display: none" %}
|
||||
<input type="hidden" name="{{ form.items_json.name }}" id="{{ form.items_json.id_for_label }}" value="{{ form.items_json.value }}" />
|
||||
<input type="hidden" name="{{ form.items_json.name }}" id="{{ form.items_json.id_for_label }}"
|
||||
value="{{ form.items_json.value }}"/>
|
||||
|
||||
{# New rig buttons #}
|
||||
{% if not object.pk %}
|
||||
@@ -335,7 +336,67 @@
|
||||
<div class="modal fade" id="itemModal" role="dialog" aria-labelledby="itemModal" aria-hidded="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span
|
||||
aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
</div>
|
||||
<form class="form-horizontal" id="item-form">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="item_name" class="col-sm-2 control-label">Item Name</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" placeholder="Item Name" class="form-control" required maxlength="255"
|
||||
id="item_name"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="item_description" class="col-sm-2 control-label">Description</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<textarea type="text" placeholder="Description" class="form-control"
|
||||
id="item_description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="item_quantity" class="col-sm-4 control-label">Quantity</label>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<input type="number" placeholder="Quantity" class="form-control" required
|
||||
min="1" id="item_quantity"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label for="item_cost" class="col-sm-4 control-label">Cost</label>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<div class="input-group">
|
||||
<div class="input-group-addon">£</div>
|
||||
<input type="number" placeholder="Cost" class="form-control" required
|
||||
min="-99999999.99" max="99999999.99" step="0.01"
|
||||
id="item_cost"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="col-sm-12">
|
||||
<div class="pull-right">
|
||||
<input type="submit" class="btn btn-primary">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
<tr id="item-{{item.pk}}" data-url="{% url 'api_secure' item.pk %}" data-pk="{{item.pk}}">
|
||||
<tr id="item-{{item.pk}}" data-url="{% url 'api_secure' item.pk %}" data-pk="{{item.pk}}" class="item_row">
|
||||
<td>
|
||||
{{ item.name }}
|
||||
<span class="name">{{ item.name }}</span>
|
||||
{% if item.description %}
|
||||
<br />
|
||||
<em>{{item.description|linebreaksbr}}</em>
|
||||
<div class="description">
|
||||
<em>{{item.description|linebreaksbr}}</em>
|
||||
</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>£ {{item.cost}}</td>
|
||||
<td>{{item.quantity}}</td>
|
||||
<td class="sub-total" data-subtotal="{{item.total_cost}}">£ {{item.total_cost}}</td>
|
||||
<td>£ <span class="cost">{{item.cost|floatformat:2}}</span></td>
|
||||
<td class="quantity">{{item.quantity}}</td>
|
||||
<td>£ <span class="sub-total" data-subtotal="{{item.total_cost}}">{{item.total_cost|floatformat:2}}</span></td>
|
||||
{% if edit %}
|
||||
<td class="vert-align text-right">
|
||||
<button type="button" class="item-edit btn btn-xs btn-default"
|
||||
|
||||
Reference in New Issue
Block a user