Inline deletion for BOM items

This commit is contained in:
Oliver 2018-04-27 00:54:01 +10:00
parent 507e3de05b
commit 5162c1d11f
10 changed files with 134 additions and 109 deletions

View File

@ -1,10 +1,5 @@
{% extends "delete_obj.html" %}
{% block del_title %}
Are you sure you want to delete this BOM item? Are you sure you want to delete this BOM item?
{% endblock %} <br>
{% block del_body %}
Deleting this entry will remove the BOM row from the following part: Deleting this entry will remove the BOM row from the following part:
<ul class='list-group'> <ul class='list-group'>
@ -12,4 +7,3 @@
<b>{{ item.part.name }}</b> - <i>{{ item.part.description }}</i> <b>{{ item.part.name }}</b> - <i>{{ item.part.description }}</i>
</li> </li>
</ul> </ul>
{% endblock %}

View File

@ -12,6 +12,7 @@
{% include 'part/tabs.html' with tab='bom' %} {% include 'part/tabs.html' with tab='bom' %}
{% include 'modal.html' %} {% include 'modal.html' %}
{% include 'modal_delete.html' %}
<h3>Bill of Materials</h3> <h3>Bill of Materials</h3>
@ -21,7 +22,7 @@
<th>Part</th> <th>Part</th>
<th>Description</th> <th>Description</th>
<th data-type='number'>Quantity</th> <th data-type='number'>Quantity</th>
<th data-sortable='false'>Edit</th> <th data-sortable='false'></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -33,6 +34,7 @@
<td>{{ bom_item.quantity }}</td> <td>{{ bom_item.quantity }}</td>
<td> <td>
<button type='button' url="{% url 'bom-item-edit' bom_item.id %}" class='btn btn-success edit-row-button'>Edit</button> <button type='button' url="{% url 'bom-item-edit' bom_item.id %}" class='btn btn-success edit-row-button'>Edit</button>
<button type='button' url="{% url 'bom-item-delete' bom_item.id %}" class='btn btn-danger delete-row-button'>Delete</button>
</td> </td>
</tr> </tr>
{% endwith %} {% endwith %}
@ -55,6 +57,13 @@
$(document).ready(function(){ $(document).ready(function(){
$('#bom-table').footable(); $('#bom-table').footable();
$('#bom-table').on('click', '.delete-row-button', function () {
var button = $(this);
launchDeleteForm("#modal-delete",
button.attr('url'));
});
$('#bom-table').on('click', '.edit-row-button', function () { $('#bom-table').on('click', '.edit-row-button', function () {
var button = $(this); var button = $(this);

View File

@ -42,10 +42,12 @@
{% endblock %} {% endblock %}
{% block javascript %} {% block javascript %}
<script type='text/javascript' src="{% static 'script/footable.js' %}"></script>``
<script type='text/javascript' src="{% static 'script/modal_form.js' %}"></script> <script type='text/javascript' src="{% static 'script/modal_form.js' %}"></script>
<script type='text/javascript'> <script type='text/javascript'>
$(document).ready(function (){
$('#part-list').footable();
$("#create-cat").click(function() { $("#create-cat").click(function() {
launchModalForm("#modal-form", launchModalForm("#modal-form",
@ -60,8 +62,7 @@
{data: {category: {{ category.id }} {data: {category: {{ category.id }}
}}); }});
}); });
});
</script> </script>
{% endblock %} {% endblock %}

View File

@ -1,90 +1,24 @@
<div class='container'> <table class="table table-striped" data-sorting='true' id="part-list">
<div class='input-group'> <thead>
<input class='form-control' id='part-filter' type='text' placeholder='Search...'>
<span class='input-group-btn'>
<button type='button' class='btn' id='clear-filter'>Clear</button>
</span>
</div>
<table class="table table-striped" id="part-list">
<tr> <tr>
<th>Part</th> <th>Part</th>
<th>Description</th> <th>Description</th>
<th>Category</th> <th>Category</th>
<th data-type='number'>Stock</th>
</tr> </tr>
</table> </thead>
<tbody>
</div> {% for part in parts %}
<tr>
{% load static %} <td><a href="{% url 'part-detail' part.id %}">{{ part.name }}</a></td>
<td>{{ part.description }}</td>
<script type="text/javascript" src="{% static 'script/delay.js' %}"> <td>
</script> {% if part.category %}
<a href="{% url 'category-detail' part.category.id %}">{{ part.category_path }}</a>
<script type="text/javascript">
function add_part(part) {
var text = "<tr>";
text += "<td><a href='" + part.url + "'>" + part.name + "</a></td>";
text += "<td>" + part.description + "</td>";
text += "<td>";
// TODO - Work out how to add in category name + link...
if (part.category){
text += '<a href="/part/category/' + part.category + '/">';
text += part.category_path;
text += '</a>';
}
text += "</td>";
text += "</tr>";
$("#part-list").append(text);
}
function filter_parts(text) {
$.ajax({
url: "{% url 'api-part-list' %}",
data: {
{% if category %}
'category': {{ category.id }},
{% endif %} {% endif %}
'search': text </td>
}, <td>{{ part.total_stock }}</td>
success: function(result) { </tr>
$("#part-list").find("tr:gt(0)").remove(); {% endfor %}
$.each(result.results, function(i, part) { </tbody>
add_part(part); </table>
})
}
});
}
$(document).ready(function() {
$("#part-filter").keyup(function(e) {
if (e.keyCode == 27){ // Escape key
cancelTimer();
$("#part-filter").val('');
}
else {
var value = $(this).val().toLowerCase();
delay(function() {
filter_parts(value);
}, 500);
}
});
$("#clear-filter").click(function(){
clearTimeout(keyDelay);
$("#company-filter").val('');
filter_parts('');
});
filter_parts('');
});
</script>

View File

@ -25,10 +25,12 @@
{% block javascript %} {% block javascript %}
<script type='text/javascript' src="{% static 'script/footable.js' %}"></script>
<script type='text/javascript' src="{% static 'script/modal_form.js' %}"></script> <script type='text/javascript' src="{% static 'script/modal_form.js' %}"></script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function () { $(document).ready(function () {
$('#part-list').footable();
$("#create-cat").click(function() { $("#create-cat").click(function() {
launchModalForm("#modal-form", "{% url 'category-create' %}"); launchModalForm("#modal-form", "{% url 'category-create' %}");

View File

@ -1,3 +1,5 @@
Are you sure you want to delete part '{{ part.name }}'?
{% if part.used_in_count %} {% if part.used_in_count %}
<p>This part is used in BOMs for {{ part.used_in_count }} other parts. If you delete this part, the BOMs for the following parts will be updated: <p>This part is used in BOMs for {{ part.used_in_count }} other parts. If you delete this part, the BOMs for the following parts will be updated:
<ul class="list-group"> <ul class="list-group">

View File

@ -20,7 +20,7 @@
{% if part.purchaseable %} {% if part.purchaseable %}
<li{% ifequal tab 'suppliers' %} class="active"{% endifequal %}> <li{% ifequal tab 'suppliers' %} class="active"{% endifequal %}>
<a href="{% url 'part-suppliers' part.id %}">Suppliers <a href="{% url 'part-suppliers' part.id %}">Suppliers
<span class="badge">{{ part.supplier_count }}<span> <span class="badge">{{ part.supplier_count }}</span>
</a></li> </a></li>
{% endif %} {% endif %}
{% if part.trackable %} {% if part.trackable %}

View File

@ -205,19 +205,21 @@ class BomItemEdit(AjaxUpdateView):
ajax_form_title = 'Edit BOM item' ajax_form_title = 'Edit BOM item'
class BomItemDelete(DeleteView): class BomItemDelete(AjaxDeleteView):
model = BomItem model = BomItem
template_name = 'part/bom-delete.html' template_name = 'part/bom-delete.html'
context_object_name = 'item' context_object_name = 'item'
ajax_form_title = 'Confim BOM item deletion'
success_url = '/part' #success_url = '/part'
"""
def post(self, request, *args, **kwargs): def post(self, request, *args, **kwargs):
if 'confirm' in request.POST: if 'confirm' in request.POST:
return super(BomItemDelete, self).post(request, *args, **kwargs) return super(BomItemDelete, self).post(request, *args, **kwargs)
else: else:
return HttpResponseRedirect(self.get_object().get_absolute_url()) return HttpResponseRedirect(self.get_object().get_absolute_url())
"""
class SupplierPartDetail(DetailView): class SupplierPartDetail(DetailView):
model = SupplierPart model = SupplierPart

View File

@ -8,7 +8,8 @@ function attachSelect(modal) {
}); });
} }
function launchDeleteForm(modal, url, options) { function launchDeleteForm(modal, url, options = {}) {
$(modal).on('shown.bs.modal', function() { $(modal).on('shown.bs.modal', function() {
$(modal + ' .modal-form-content').scrollTop(0); $(modal + ' .modal-form-content').scrollTop(0);
}); });
@ -62,7 +63,7 @@ function launchDeleteForm(modal, url, options) {
}); });
} }
function launchModalForm(modal, url, options) { function launchModalForm(modal, url, options = {}) {
$(modal).on('shown.bs.modal', function () { $(modal).on('shown.bs.modal', function () {
$(modal + ' .modal-form-content').scrollTop(0); $(modal + ' .modal-form-content').scrollTop(0);
@ -119,8 +120,17 @@ function launchModalForm(modal, url, options) {
dataType: 'json', dataType: 'json',
success: function (response) { success: function (response) {
if (response.form_valid) { if (response.form_valid) {
alert("Success!");
$(modal).modal('hide'); $(modal).modal('hide');
if (options.redirect) {
window.location.href = options.redirect;
}
if (options.success) {
options.success();
}
} }
else if (response.html_form) { else if (response.html_form) {
var target = modal + ' .modal-form-content'; var target = modal + ' .modal-form-content';

71
wip/ajax_request.js Normal file
View File

@ -0,0 +1,71 @@
{% load static %}
<script type="text/javascript" src="{% static 'script/delay.js' %}">
</script>
<script type="text/javascript">
function add_part(part) {
var text = "<tr>";
text += "<td><a href='" + part.url + "'>" + part.name + "</a></td>";
text += "<td>" + part.description + "</td>";
text += "<td>";
// TODO - Work out how to add in category name + link...
if (part.category){
text += '<a href="/part/category/' + part.category + '/">';
text += part.category_path;
text += '</a>';
}
text += "</td>";
text += "</tr>";
$("#part-list").append(text);
}
function filter_parts(text) {
$.ajax({
url: "{% url 'api-part-list' %}",
data: {
{% if category %}
'category': {{ category.id }},
{% endif %}
'search': text
},
success: function(result) {
$("#part-list").find("tr:gt(0)").remove();
$.each(result.results, function(i, part) {
add_part(part);
})
}
});
}
$("#part-filter").keyup(function(e) {
if (e.keyCode == 27){ // Escape key
cancelTimer();
$("#part-filter").val('');
}
else {
var value = $(this).val().toLowerCase();
delay(function() {
filter_parts(value);
}, 500);
}
});
$("#clear-filter").click(function(){
clearTimeout(keyDelay);
$("#company-filter").val('');
filter_parts('');
});
filter_parts('');
</script>