Work event item frontend

This commit is contained in:
Tom Price
2014-12-05 00:16:47 +00:00
parent 3a816dfe63
commit f9ff2459ca
3 changed files with 100 additions and 87 deletions

View File

@@ -1,77 +1,48 @@
function setupItemTable(items_json) { function setupItemTable(items_json) {
objectitems = JSON.parse(items_json) objectitems = JSON.parse(items_json)
$.each(objectitems, function(key, val) { $.each(objectitems, function (key, val) {
objectitems[key] = JSON.parse(val); objectitems[key] = JSON.parse(val);
}) })
newitem = -1 newitem = -1;
} }
function updatePrices() { function updatePrices() {
// individual rows // individual rows
$('.item_row').each(function() { var sum = 0;
var pk = $(this).data('pk'); for (var pk in objectitems) {
var fields = objectitems[pk].fields; var fields = objectitems[pk].fields;
var sub = fields.cost * fields.quantity; var sub = fields.cost * fields.quantity;
$('#item-'+pk+' .sub-total').html(parseFloat(sub).toFixed(2)).data('subtotal', sub); $('#item-' + pk + ' .sub-total').html(parseFloat(sub).toFixed(2)).data('subtotal', sub);
})
var sum = 0; sum += Number(sub);
$('.sub-total').each(function() {
sum += Number($(this).data('subtotal'));
});
$('#sumtotal').text(parseFloat(sum).toFixed(2));
var vat = sum * Number($('#vat-rate').data('rate'));
$('#vat').text(parseFloat(vat).toFixed(2));
$('#total').text(parseFloat(sum+vat).toFixed(2));
}
function addItemRow(url) {
$tbody = $('#item-table tbody');
$.ajax({
url:url,
success:function(r) {
$tbody.append(r);
updatePrices();
}
});
}
var csrftoken = $.cookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
crossDomain: false, // obviates need for sameOrigin test
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type)) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
} }
});
$('#item-table').on('click', '.item-delete', function() { $('#sumtotal').text(parseFloat(sum).toFixed(2));
delete objectitems[$(this).data('pk')] var vat = sum * Number($('#vat-rate').data('rate'));
$('#item-'+$(this).data('pk')).remove(); $('#vat').text(parseFloat(vat).toFixed(2));
$('#total').text(parseFloat(sum + vat).toFixed(2));
}
$('#item-table').on('click', '.item-delete', function () {
delete objectitems[$(this).data('pk')]
$('#item-' + $(this).data('pk')).remove();
updatePrices(); updatePrices();
}); });
$('#item-table').on('click', '.item-add', function() { $('#item-table').on('click', '.item-add', function () {
$('#item-form').data('pk', newitem--); $('#item-form').data('pk', newitem);
// Set the form values // Set the form values
var fields = objectitems[pk].fields;
$('#item_name').val(''); $('#item_name').val('');
$('#item_description').val(''); $('#item_description').val('');
$('#item_quantity').val(''); $('#item_quantity').val('');
$('#item_cost').val(''); $('#item_cost').val('');
}); });
$('#item-table').on('click', '.item-edit', function() { $('#item-table').on('click', '.item-edit', function () {
// set the pk as we will need this later // set the pk as we will need this later
var pk = $(this).data('pk'); var pk = $(this).data('pk');
$('#item-form').data('pk', pk); $('#item-form').data('pk', pk);
// Set the form values // Set the form values
var fields = objectitems[pk].fields; var fields = objectitems[pk].fields;
@@ -81,54 +52,74 @@ $('#item-table').on('click', '.item-edit', function() {
$('#item_cost').val(fields.cost); $('#item_cost').val(fields.cost);
}); });
$('body').on('submit','#item-form', function(e) { $('body').on('submit', '#item-form', function (e) {
e.preventDefault(); e.preventDefault();
var pk = $(this).data('pk'); var pk = $(this).data('pk');
$('#itemModal').modal('hide'); $('#itemModal').modal('hide');
if(pk < 0) { var fields;
// @todo: Add new item if (pk == newitem--) {
// Create the new data structure and add it on.
fields = new Object();
fields['name'] = $('#item_name').val()
fields['description'] = $('#item_description').val();
fields['cost'] = $('#item_cost').val();
fields['quantity'] = $('#item_quantity').val();
var order = 0;
for (item in objectitems) {
order++;
}
fields['order'] = order;
objectitems[pk] = new Object();
objectitems[pk]['fields'] = fields;
// Add the new table
$('#new-item-row').clone().attr('id', 'item-' + pk).data('pk', pk).appendTo('#item-table-body');
} else { } else {
// Existing item
// update data structure // update data structure
var fields = objectitems[pk].fields; fields = objectitems[pk].fields;
fields.name = $('#item_name').val() fields.name = $('#item_name').val()
fields.description = $('#item_description').val(); fields.description = $('#item_description').val();
fields.cost = $('#item_cost').val(); fields.cost = $('#item_cost').val();
fields.quantity = $('#item_quantity').val(); fields.quantity = $('#item_quantity').val();
objectitems[pk].fields = fields; 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();
} }
// 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) { $('body').on('submit', '.itemised_form', function (e) {
$('#id_items_json').val(JSON.stringify(objectitems)); $('#id_items_json').val(JSON.stringify(objectitems));
}); });
// Return a helper with preserved width of cells // Return a helper with preserved width of cells
var fixHelper = function(e, ui) { var fixHelper = function (e, ui) {
ui.children().each(function() { ui.children().each(function () {
$(this).width($(this).width()); $(this).width($(this).width());
}); });
return ui; return ui;
}; };
$("#item-table tbody").sortable({ $("#item-table tbody").sortable({
helper: fixHelper, helper: fixHelper,
update: function(e, ui) { update: function (e, ui) {
info = $(this).sortable("toArray"); info = $(this).sortable("toArray");
itemorder = new Array(); itemorder = new Array();
$.each(info, function(key, value) { $.each(info, function (key, value) {
pk = $('#'+value).data('pk'); pk = $('#' + value).data('pk');
objectitems[pk].fields.order = key; objectitems[pk].fields.order = key;
}); });
} }
}); });

View File

@@ -1,11 +1,9 @@
<tr id="item-{{item.pk}}" data-url="{% url 'api_secure' item.pk %}" data-pk="{{item.pk}}" class="item_row"> <tr id="item-{{item.pk}}" data-pk="{{item.pk}}" class="item_row">
<td> <td>
<span class="name">{{ item.name }}</span> <span class="name">{{ item.name }}</span>
{% if item.description %} <div>
<div class="description"> <em class="description">{{item.description|linebreaksbr}}</em>
<em>{{item.description|linebreaksbr}}</em> </div>
</div>
{% endif %}
</td> </td>
<td>£&nbsp;<span class="cost">{{item.cost|floatformat:2}}</span></td> <td>£&nbsp;<span class="cost">{{item.cost|floatformat:2}}</span></td>
<td class="quantity">{{item.quantity}}</td> <td class="quantity">{{item.quantity}}</td>

View File

@@ -17,7 +17,7 @@
{% endif %} {% endif %}
</tr> </tr>
</thead> </thead>
<tbody> <tbody id="item-table-body">
{% for item in object.items.all %} {% for item in object.items.all %}
{% include 'RIGS/item_row.html' %} {% include 'RIGS/item_row.html' %}
{% endfor %} {% endfor %}
@@ -26,17 +26,41 @@
<tr> <tr>
<td rowspan="3" colspan="2"></td> <td rowspan="3" colspan="2"></td>
<td>Sum Total</td> <td>Sum Total</td>
<td colspan="2">£ <span id="sumtotal">{{object.sum_total}}</span></td> <td colspan="2">£ <span id="sumtotal">{{object.sum_total|default:0|floatformat:2}}</span></td>
</tr> </tr>
<tr> <tr>
<td id="vat-rate" data-rate="{{object.vat_rate.rate}}">VAT @ <td id="vat-rate" data-rate="{{object.vat_rate.rate}}">VAT @
{{object.vat_rate.as_percent|floatformat}}%</td> {{object.vat_rate.as_percent|floatformat|default:"TBD"}}%</td>
<td colspan="2">£ <span id="vat">{{object.vat|floatformat:2}}</span></td> <td colspan="2">£ <span id="vat">{{object.vat|default:0|floatformat:2}}</span></td>
</tr> </tr>
<tr> <tr>
<td>Total</td> <td>Total</td>
<td colspan="2">£ <span id="total">{{object.total|floatformat:2}}</span></td> <td colspan="2">£ <span id="total">{{object.total|default:0|floatformat:2}}</span></td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
</div> </div>
<table class="hidden invisible">
<tr id="new-item-row" class="item_row">
<td>
<span class="name"></span>
<div class="description">
<em></em>
</div>
</td>
<td>£&nbsp;<span class="cost"></span></td>
<td class="quantity"></td>
<td>£&nbsp;<span class="sub-total"></span></td>
{% if edit %}
<td class="vert-align text-right">
<button type="button" class="item-edit btn btn-xs btn-default"
data-toggle="modal" data-target="#itemModal">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="item-delete btn btn-xs btn-danger">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
{% endif %}
</tr>
</table>