Skip to content

Commit

Permalink
Show filter on top and display current filter
Browse files Browse the repository at this point in the history
  • Loading branch information
@Martchus
Martchus committed Sep 14, 2016
1 parent 960c9d2 commit 579d4be
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 52 deletions.
42 changes: 36 additions & 6 deletions assets/javascripts/overview.js
View file
Expand Up @@ -43,19 +43,32 @@ function setupOverview() {
var varPairs = window.location.search.substring(1).split('&');
var results = {};
var states = {};

var currentFilter = [];
var formatFilter = function(filter) {
return filter.replace(/_/g, ' ');
};

for (var j = 0; j < varPairs.length; ++j) {
var pair = varPairs[j].split('=');
if(pair.length > 1) {
var key = pair[0];
var val = pair[1];
if(val.length < 1) {
continue;
}
if (key === 'result') {
results[val] = true;
currentFilter.push(formatFilter(val));
} else if (key === 'state') {
states[val] = true;
currentFilter.push(formatFilter(val));
} else if (key === 'todo') {
$('#filter-todo').prop('checked', val !== '0');
currentFilter.push('TODO');
} else if (key === 'arch') {
$('#filter-arch').prop('value', val);
currentFilter.push(val);
} else {
var input = $('<input/>');
input.attr('value', val);
Expand All @@ -65,13 +78,30 @@ function setupOverview() {
}
}
}

// set enabled/disabled state of checkboxes (according to current filter)
$('#filter-results input').each(function(index, element) {
element.checked = results[element.id.substr(7)];

// make filter form expandable
var filterHeading = $('#filter-panel .panel-heading');
filterHeading.on('click', function() {
$('#filter-panel .panel-body').toggle(200);
});
$('#filter-states input').each(function(index, element) {
element.checked = states[element.id.substr(7)];

// set enabled/disabled state of checkboxes (according to current filter)
if(currentFilter.length > 0) {
$('#filter-results input').each(function(index, element) {
element.checked = results[element.id.substr(7)];
});
$('#filter-states input').each(function(index, element) {
element.checked = states[element.id.substr(7)];
});
filterHeading.find('span').text('current: ' + currentFilter.join(', '));
}

// don't add empty architecture to query parameters
$('#filter-form').on('submit', function() {
var archFilterElement = $('#filter-arch');
if(archFilterElement.val() === '') {
archFilterElement.remove();
}
});
}

39 changes: 26 additions & 13 deletions assets/stylesheets/overview.scss
View file
Expand Up @@ -22,22 +22,35 @@
margin-right: 8px;
}

#filter-form {
strong {
display: block;
}
#filter-panel {
.panel-heading {
cursor: pointer;

.form-group {
label {
margin-left: 0px;
padding-left: 0px;
margin-right: 20px;
font-weight: normal;
span {
float: right;
color: #555;
font-weight: 500;
}
}
.panel-body {
display: none;
}

input {
margin-right: 2px;
padding-right: 0px;
#filter-form {
strong {
display: block;
}
.form-group {
label {
margin-left: 0px;
padding-left: 0px;
margin-right: 20px;
font-weight: normal;
}
input {
margin-right: 2px;
padding-right: 0px;
}
}
}
}
11 changes: 6 additions & 5 deletions t/ui/10-tests_overview.t
View file
Expand Up @@ -157,11 +157,12 @@ my $baseurl = $driver->get_current_url();

# Test initial state of form and applying changes
$driver->get($baseurl . 'tests/overview?distri=opensuse&version=Factory&build=0048&todo=1&result=passed');
$driver->find_element('#filter-todo', 'css')->click();
$driver->find_element('#filter-passed', 'css')->click();
$driver->find_element('#filter-failed', 'css')->click();
$driver->find_element('#filter-form button', 'css')->click();
$driver->find_element('#res_DVD_x86_64_doc', 'css');
$driver->find_element('#filter-panel .panel-heading', 'css')->click();
$driver->find_element('#filter-todo', 'css')->click();
$driver->find_element('#filter-passed', 'css')->click();
$driver->find_element('#filter-failed', 'css')->click();
$driver->find_element('#filter-form button', 'css')->click();
$driver->find_element('#res_DVD_x86_64_doc', 'css');
my @filtered_out = $driver->find_elements('#res_DVD_x86_64_kde', 'css');
is(scalar @filtered_out, 0, 'result filter not correctly applied');

Expand Down
56 changes: 28 additions & 28 deletions templates/test/overview.html.ep
View file
Expand Up @@ -50,6 +50,34 @@
% }
</div>
</div>
<div class="panel panel-default" id="filter-panel">
<div class="panel-heading"><strong>Filter</strong> <span>no filter present, click to toggle filter form<span></div>
<div class="panel-body">
<form action="#" type="get" id="filter-form">
<div class="form-group" id="filter-results">
<strong>Result</strong>
% for my $result (OpenQA::Schema::Result::Jobs::RESULTS) {
<label><input value="<%= $result %>" name="result" type="checkbox" id="filter-<%= $result %>"> <%= ucfirst $result =~ s/_/ /r %></label>
% }
</div>
<div class="form-group" id="filter-states">
<strong>State</strong>
% for my $state (OpenQA::Schema::Result::Jobs::STATES) {
<label><input value="<%= $state %>" name="state" type="checkbox" id="filter-<%= $state %>"> <%= ucfirst $state =~ s/_/ /r %></label>
% }
</div>
<div class="form-group">
<strong>Architecture</strong>
<input type="text" class="form-control" name="arch" placeholder="any" id="filter-arch">
</div>
<div class="form-group">
<strong>Misc</strong>
<label><input value="1" name="todo" type="checkbox" id="filter-todo"> TODO</label>
</div>
<button type="submit" class="btn btn-default">Apply</button>
</form>
</div>
</div>
% my $failedid;
% for my $type (@$types) {
<h3>Flavor: <%= $type %></h3>
Expand Down Expand Up @@ -84,32 +112,4 @@
</tbody>
</table>
% }
<div class="panel panel-default">
<div class="panel-heading">Filter</div>
<div class="panel-body">
<form action="#" type="get" id="filter-form">
<div class="form-group" id="filter-results">
<strong>Result</strong>
% for my $result (OpenQA::Schema::Result::Jobs::RESULTS) {
<label><input value="<%= $result %>" name="result" type="checkbox" id="filter-<%= $result %>"> <%= ucfirst $result =~ s/_/ /r %></label>
% }
</div>
<div class="form-group" id="filter-states">
<strong>State</strong>
% for my $state (OpenQA::Schema::Result::Jobs::STATES) {
<label><input value="<%= $state %>" name="state" type="checkbox" id="filter-<%= $state %>"> <%= ucfirst $state =~ s/_/ /r %></label>
% }
</div>
<div class="form-group">
<strong>Architecture</strong>
<input type="text" class="form-control" name="arch" placeholder="any" id="filter-arch">
</div>
<div class="form-group">
<strong>Misc</strong>
<label><input value="1" name="todo" type="checkbox" id="filter-todo"> TODO</label>
</div>
<button type="submit" class="btn btn-default">Apply</button>
</form>
</div>
</div>
</div>

0 comments on commit 579d4be

Please sign in to comment.