Simple search filtering for part list

- Needs to be 'generecised'
- Working well for now
This commit is contained in:
Oliver 2018-04-24 09:06:30 +10:00
parent 08ed128bea
commit 25fcd3e9f1
5 changed files with 99 additions and 19 deletions

View File

@ -25,6 +25,7 @@
</a>
</div>
<script type="text/javascript" src="{% static 'script/delay.js' %}"></script>
<script type="text/javascript" src="{% static 'script/filter_company.js' %}">
</script>

View File

@ -1,12 +1,88 @@
<table class="table table-striped">
<div class='container'>
<div class='input-group'>
<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>
<th>Part</th>
<th>Description</th>
<th>Category</th>
</tr>
{% for part in parts %}
<tr>
<td><a href="{% url 'part-detail' part.id %}">{{ part.name }}</a></td>
<td>{{ part.description }}</td>
</tr>
{% endfor %}
</table>
</div>
{% 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 += "category: " + part.category;
}
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);
})
}
});
}
$(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

@ -24,7 +24,7 @@ class PartIndex(ListView):
context_object_name = 'parts'
def get_queryset(self):
return Part.objects.filter(category=None)
return Part.objects.all() # filter(category=None)
def get_context_data(self, **kwargs):

View File

@ -0,0 +1,12 @@
var msDelay = 0;
var delay = (function(){
return function(callback, ms){
clearTimeout(msDelay);
msDelay = setTimeout(callback, ms);
};
})();
function cancelTimer(){
clearTimeout(msDelay);
}

View File

@ -1,12 +1,3 @@
var keyDelay = 0;
var delay = (function(){
return function(callback, ms){
clearTimeout(keyDelay);
keyDelay = setTimeout(callback, ms);
};
})();
function add_company(company){
@ -47,8 +38,8 @@ $(document).ready(function(){
$("#company-filter").keyup(function(e) {
if (e.keyCode == 27){ // Escape key
clearTimeout(keyDelay);
$("#company-filter").val('');
cancelTimer();
filter('');
}
else {