rrs: Improve recipes filtering

Now filter recipes are done by JS this avoid to made request for every
change in the filters also add support for share filters between pages.

Signed-off-by: Aníbal Limón <anibal.limon@linux.intel.com>
This commit is contained in:
Aníbal Limón 2015-02-06 17:25:41 -06:00 committed by Paul Eggleton
parent 0013db9bc7
commit 831464466c
4 changed files with 189 additions and 79 deletions

View File

@ -143,9 +143,6 @@ class RecipeListView(ListView):
recipe, recipe_upstream_history) recipe, recipe_upstream_history)
if recipe_upstream is None: if recipe_upstream is None:
if self.upstream_status != 'All':
continue
upstream_status = '' upstream_status = ''
upstream_version = '' upstream_version = ''
else: else:
@ -157,23 +154,13 @@ class RecipeListView(ListView):
if upstream_status == 'Downgrade': if upstream_status == 'Downgrade':
upstream_status = 'Unknown' # Downgrade is displayed as Unknown upstream_status = 'Unknown' # Downgrade is displayed as Unknown
if self.upstream_status != 'All' and \
self.upstream_status != upstream_status:
continue
upstream_version = recipe_upstream.version upstream_version = recipe_upstream.version
maintainer = RecipeMaintainer.get_maintainer_by_recipe_and_history( maintainer = RecipeMaintainer.get_maintainer_by_recipe_and_history(
recipe, self.recipe_maintainer_history) recipe, self.recipe_maintainer_history)
if maintainer is None: if maintainer is None:
if self.maintainer_name != 'All':
continue
maintainer_name = '' maintainer_name = ''
else: else:
if self.maintainer_name != 'All' and self.maintainer_name != maintainer.name:
continue
maintainer_name = maintainer.name maintainer_name = maintainer.name
recipe_list_item = RecipeList(recipe.id, recipe.pn, recipe.summary) recipe_list_item = RecipeList(recipe.id, recipe.pn, recipe.summary)

View File

@ -50,7 +50,7 @@
<li class="divider-vertical"></li> <li class="divider-vertical"></li>
<li class="lead" id="unknown-recipes">Unknown: <span class="text-warning">{{ recipes_unknown }}</strong></li> <li class="lead" id="unknown-recipes">Unknown: <span class="text-warning">{{ recipes_unknown }}</strong></li>
</ul> </ul>
<a href="#" class="btn pull-right">Export recipe list</a>
<ul class="nav"> <ul class="nav">
{% block navs %}{% endblock %} {% block navs %}{% endblock %}
</ul> </ul>

View File

@ -33,10 +33,10 @@
{% if maintainer_count == 0 %} {% if maintainer_count == 0 %}
<div class="alert"> No maintainers found</div> <div class="alert"> No maintainers found</div>
{% else %} {% else %}
<table class="table table-bordered table-hover statisticstable"> <table class="table table-bordered table-hovere" id="statistics-table">
<thead> <thead>
<tr> <tr>
<th>Maintainer</th> <th class="sorted">Maintainer<b class="caret"/></th>
<th class="muted">Assigned recipes</th> <th class="muted">Assigned recipes</th>
<th class="muted">Up-to-date</th> <th class="muted">Up-to-date</th>
<th>Not updated</th> <th>Not updated</th>
@ -106,11 +106,33 @@
{% block scripts %} {% block scripts %}
{% if maintainer_count > 0 %} {% if maintainer_count > 0 %}
<script src="{% static "js/uitablefilter.js" %}"></script> <script src="{% static "js/uitablefilter.js" %}"></script>
<script src="{% static "js/jquery.tablesorter.js" %}"></script>
<script> <script>
$(document).ready(function() { $(document).ready(function() {
statisticsTable = $('#statistics-table');
$(statisticsTable).tablesorter({
sortList: [[0,0]],
headers: {
1: { sorter: false },
2: { sorter: false },
3: { sorter: false },
4: { sorter: false },
5: { sorter: false },
6: { sorter: false },
7: { sorter: false },
8: { sorter: false },
9: { sorter: false },
10: { sorter: false },
11: { sorter: false },
12: { sorter: false },
13: { sorter: false },
14: { sorter: false },
}
});
$("#filter").keyup(function() { $("#filter").keyup(function() {
var table = $('.statisticstable'); $.uiTableFilter(statisticsTable, this.value);
$.uiTableFilter(table, this.value);
}); });
}); });
</script> </script>

View File

@ -21,80 +21,36 @@
<div class="navbar-inner table-controls"> <div class="navbar-inner table-controls">
<ul class="nav"> <ul class="nav">
<li class="dropdown"> <li class="dropdown">
<span class="badge">{{ recipe_list_count }} recipes</span> <span class="badge"></span>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle" id="selected-status"> <a data-toggle="dropdown" href="#" class="dropdown-toggle" id="selected-status">
Upstream status: <strong>{{ upstream_status }}</strong> Upstream status: <strong></strong>
<b class="caret"></b> <b class="caret"></b>
</a> </a>
<ul class="dropdown-menu" id="select-status"> <ul class="dropdown-menu" id="select-status">
{% for us in upstream_status_set_choices %} {% for us in upstream_status_set_choices %}
{% if us = upstream_status %} <li><a href="#">{{ us }}</a></li>
<li class="active">
<a href="#">
{% else %}
<li>
<a href="{% url this_url_name milestone_name %}?upstream_status={{ us|urlencode }}&maintainer_name={{ maintainer_name|urlencode }}">
{% endif %}
{{ us }}
</a>
</li>
{% endfor %} {% endfor %}
<li class="divider"/> <li class="divider"/>
{% for us in upstream_status_choices %} {% for us in upstream_status_choices %}
{% if us = upstream_status %} <li><a href="#">{{ us }}</a></li>
<li class="active">
<a href="#">
{% else %}
<li>
<a href="{% url this_url_name milestone_name %}?upstream_status={{ us|urlencode }}&maintainer_name={{ maintainer_name|urlencode }}">
{% endif %}
{{ us }}
</a>
</li>
{% endfor %} {% endfor %}
</ul> </ul>
</li> </li>
<li><p>and</p></li> <li><p>and</p></li>
<li class="dropdown"> <li class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle" id="select-maintainer"> <a data-toggle="dropdown" href="#" class="dropdown-toggle" id="selected-maintainer">
Maintainer: <strong>{{ maintainer_name }}</strong> Maintainer: <strong></strong>
<b class="caret"></b> <b class="caret"></b>
</a> </a>
<ul class="dropdown-menu" id="selected-maintainer" style="overflow:scroll;max-height:40em;"> <ul class="dropdown-menu" id="select-maintainer" style="overflow:scroll;max-height:40em;">
{% for m in set_maintainers %} {% for m in set_maintainers %}
{% if m = maintainer_name %} <li><a href="#">{{ m }}</a></li>
<li class="active">
<a href="#">
{% else %}
<li>
<a href="{% url this_url_name milestone_name %}?upstream_status={{ upstream_status|urlencode }}&maintainer_name={{ m|urlencode }}">
{% endif %}
{{ m }}</a>
</li>
{% endfor %} {% endfor %}
<li class="divider"/> <li class="divider"/>
{% for m in all_maintainers %} {% for m in all_maintainers %}
{% if m = maintainer_name %} <li class="active"><a href="#">{{ m }}</a></li>
<li class="active">
<a href="#">
{% else %}
<li>
<a href="{% url this_url_name milestone_name %}?upstream_status={{ upstream_status|urlencode }}&maintainer_name={{ m|urlencode }}">
{% endif %}
{{ m }}</a>
</li>
{% endfor %} {% endfor %}
</ul> </ul>
</li> </li>
@ -106,22 +62,23 @@
</div> </div>
</div> </div>
<table class="table table-bordered tablesorter table-hover recipestable"> <div id="no_recipes_alert" class="alert">
No recipes found <a href="#" id="view-all-recipes" style="margin-left:10px;">View all recipes</a>
</div>
<table class="table table-bordered tablesorter table-hover" id="recipestable">
<thead> <thead>
<tr> <tr>
<th class="upstream_status_column span2 sorted">Upstream status<b class="caret"/></th>
<th class="recipe_column">Recipe</th> <th class="recipe_column">Recipe</th>
<th class="version_column muted">Version</th> <th class="version_column muted">Version</th>
<th class="upstream_status_column"><b>Upstream status</b></th> <th class="upstream_version_column muted header">Upstream version</th>
<th class="upstream_version_column muted">Upstream version</th>
<th class="maintainer_column"><b>Maintainer</b></th> <th class="maintainer_column"><b>Maintainer</b></th>
<th class="summary_column muted span5">Summary</th> <th class="summary_column muted span5 header">Summary</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for r in recipe_list %} {% for r in recipe_list %}
<tr> <tr>
<td class="recipe_column"><a href="{% url "recipedetail" r.pk %}">{{ r.name }}</a></td>
<td class="version_column">{{ r.version }}</td>
{% if r.upstream_status == "Up-to-date" %} {% if r.upstream_status == "Up-to-date" %}
<td class="text-success"> <td class="text-success">
{% elif r.upstream_status == "Not updated" %} {% elif r.upstream_status == "Not updated" %}
@ -133,6 +90,8 @@
{% endif %} {% endif %}
{{ r.upstream_status }} {{ r.upstream_status }}
</td> </td>
<td class="recipe_column"><a href="{% url "recipedetail" r.pk %}">{{ r.name }}</a></td>
<td class="version_column">{{ r.version }}</td>
<td class="upstream_version_column">{{ r.upstream_version }}</td> <td class="upstream_version_column">{{ r.upstream_version }}</td>
<td class="maintainer_column">{{ r.maintainer_name }}</td> <td class="maintainer_column">{{ r.maintainer_name }}</td>
<td class="summary_column">{{ r.summary }}</td> <td class="summary_column">{{ r.summary }}</td>
@ -144,12 +103,154 @@
{% block scripts %} {% block scripts %}
<script src="{% static "js/uitablefilter.js" %}"></script> <script src="{% static "js/uitablefilter.js" %}"></script>
<script src="{% static "js/jquery.tablesorter.js" %}"></script>
<script>
(function($) {
$.fn.multiFilter = function(filters) {
var $table = $(this);
return $table.find('tbody > tr').each(function() {
var tr = $(this);
// Make it an array to avoid special cases later.
if(!$.isArray(filters))
filters = [ filters ];
howMany = 0;
for(i = 0, f = filters[0]; i < filters.length; f = filters[++i]) {
var index = 0;
$table.find('thead > tr > th').each(function(i) {
if($(this).text() == f.column) {
index = i;
return false;
}
});
var text = tr.find('td:eq(' + index + ')').text();
if(text.toLowerCase().indexOf(f.word.toLowerCase()) != -1)
++howMany;
}
if(howMany == filters.length)
tr.show();
else
tr.hide();
});
};
})(jQuery);
</script>
<script> <script>
$(document).ready(function() { $(document).ready(function() {
recipesTable = $('#recipestable')
upstreamStatus = '{{ upstream_status }}'
maintainer = '{{ maintainer_name }}'
function updateRecipeCount() {
$('#recipestable').show()
$('#no_recipes_alert').hide()
var count = 0;
$('tr:visible').each(function() {
count++
});
if (count == 1) {
$('#recipestable').hide()
$('#no_recipes_alert').show()
}
if (count == 2) {
$('.badge').html("1 recipe");
} else {
$('.badge').html((count - 1) + " recipes");
}
}
function updateStatusSelected() {
$("#selected-status strong").html(upstreamStatus)
statusList = document.getElementById("select-status").getElementsByTagName("li")
for (var i = 0; i < statusList.length; i++) {
if (statusList[i].textContent == upstreamStatus) {
$(statusList[i]).addClass("active")
} else {
$(statusList[i]).removeClass("active")
}
}
}
function updateMaintainerSelected() {
$("#selected-maintainer strong").html(maintainer)
maintainerList = document.getElementById("select-maintainer").getElementsByTagName("li")
for (var i = 0; i < maintainerList.length; i++) {
if (maintainerList[i].textContent == maintainer) {
$(maintainerList[i]).addClass("active")
} else {
$(maintainerList[i]).removeClass("active")
}
}
}
function applyFilters() {
if (upstreamStatus == 'All') {
upstreamStatusFilter = ''
} else {
upstreamStatusFilter = upstreamStatus
}
if (maintainer == 'All') {
maintainerFilter = ''
} else {
maintainerFilter = maintainer
}
$(recipesTable).multiFilter([
{ column: 'Upstream status', word: upstreamStatusFilter },
{ column: 'Maintainer', word: maintainerFilter },
]);
updateStatusSelected()
updateMaintainerSelected()
}
$(recipesTable).tablesorter({
sortList: [[0,0]],
headers: {
1: { sorter: false },
2: { sorter: false },
3: { sorter: false },
4: { sorter: false },
5: { sorter: false },
}
});
$("#filter").keyup(function() { $("#filter").keyup(function() {
var recipestable = $('.recipestable'); upstreamStatus = 'All'
$.uiTableFilter(recipestable, this.value); maintainer = 'All'
applyFilters()
$.uiTableFilter(recipesTable, this.value);
updateRecipeCount()
}); });
$("#select-status a").click(function() {
upstreamStatus = this.text
applyFilters()
updateRecipeCount()
});
$("#select-maintainer a").click(function() {
maintainer = this.text
applyFilters()
updateRecipeCount()
});
$("#view-all-recipes").click(function() {
upstreamStatus = 'All'
maintainer = 'All'
applyFilters()
updateRecipeCount()
})
applyFilters()
updateRecipeCount()
}); });
</script> </script>
{% endblock %} {% endblock %}