Permalink
Browse files

Create filter counties page and make it possible bulk update of count…

…ries state
  • Loading branch information...
ignar committed Oct 23, 2012
1 parent 4140939 commit 831a8577d298af948b1474f89128e1bd869cf370
Showing with 102 additions and 22 deletions.
  1. +29 −19 app/views/countries/index.html.erb
  2. +4 −0 ctracker.org
  3. +7 −0 db/seeds.rb
  4. +54 −3 public/javascripts/countries.js
  5. +8 −0 public/stylesheets/scaffold.css
@@ -14,26 +14,36 @@
<h1>Countries</h1>
+ <div class="filter">
+ <label for="name-filter">Name</label>
+ <input id="name-filter" name="name" type="text" />
+ <input type="button" value="Check/Uncheck All" id="select-all-controll" data-action="check" disabled="disabled" />
+ </div>
+
<table id="countries">
- <tr>
- <th>Visited</th>
- <th>Name</th>
- <th>Code</th>
- <th>Status</th>
- <th></th>
- </tr>
+ <thead>
+ <tr>
+ <th>Visited</th>
+ <th>Name</th>
+ <th>Code</th>
+ <th>Status</th>
+ <th></th>
+ </tr>
+ </thead>
- <% @countries.each do |country| %>
- <tr id="country_record_<%= country.code %>">
- <td><%= check_box_tag("country[]", country.code, current_user.visited?(country),
- :id => "country_#{country.code}",
- :"data-code" => country.code,
- :"data-url" => visit_country_path(country)) %></td>
- <td><%= country.name %></td>
- <td><%= country.code %></td>
- <td class="status"><%= current_user.visited?(country) ? 'Visited' : 'Not Visited' %></td>
- <td><%= link_to 'Show', country %></td>
- </tr>
- <% end %>
+ <tbody>
+ <% @countries.each do |country| %>
+ <tr id="country_record_<%= country.code %>">
+ <td><%= check_box_tag("country[]", country.code, current_user.visited?(country),
+ :id => "country_#{country.code}",
+ :"data-code" => country.code,
+ :"data-url" => visit_country_path(country)) %></td>
+ <td class="name"><%= country.name %></td>
+ <td class="code"><%= country.code %></td>
+ <td class="status"><%= current_user.visited?(country) ? 'Visited' : 'Not Visited' %></td>
+ <td><%= link_to 'Show', country %></td>
+ </tr>
+ <% end %>
+ </tbody>
</table>
</section>
View
@@ -100,3 +100,7 @@ Clock summary at [2012-10-23 Tue 14:22]
* DONE Fix chart data
CLOSED: [2012-10-23 Tue 14:21]
CLOCK: [2012-10-23 Tue 14:15]--[2012-10-23 Tue 14:21] => 0:06
+* DONE Filter on country page and "check/uncheck" controll
+ CLOSED: [2012-10-23 Tue 16:01]
+ CLOCK: [2012-10-23 Tue 15:41]--[2012-10-23 Tue 16:01] => 0:20
+ CLOCK: [2012-10-23 Tue 14:55]--[2012-10-23 Tue 15:39] => 0:44
View
@@ -5,3 +5,10 @@
#
# cities = City.create([{ :name => 'Chicago' }, { :name => 'Copenhagen' }])
# Mayor.create(:name => 'Daley', :city => cities.first)
+
+User.find_or_create_by_email("user1@example.com", :password => "Password123!")
+puts """
+You could login as user1
+email: user1@example.com
+password: Password123!
+"""
@@ -1,7 +1,7 @@
;$(function(){
- var table = $("table#countries");
- table.find("input[type='checkbox']").on("change", function(e){
- var checkbox = $(e.currentTarget);
+ var update_countries_collection = function(collection){
+ if(collection.length == 0) return;
+ var checkbox = $(collection.shift());
$.ajax({
url: $(checkbox).data("url")
, dataType: "json"
@@ -26,7 +26,58 @@
};
chart.render();
});
+ update_countries_collection(collection);
}
});
+ };
+
+ var table = $("table#countries");
+ table.find("input[type='checkbox']").on("change", function(e){
+ var checkbox = $(e.currentTarget);
+ update_countries_collection([checkbox]);
+ });
+
+ var check_controll = $("#select-all-controll");
+ var filter = $("#name-filter");
+ var filter_updated_callback = function(e){
+ var target = $(e.currentTarget);
+ if(target.val().length >= 1) {
+ // reset check all button to initial state
+ check_controll.attr("disabled", false);
+ check_controll.data("action", "check");
+ check_controll.val("Check All");
+ table.find("tbody tr").each(function(ind, elem){
+ var el = $(elem);
+ var pattern = new RegExp("^"+target.val(), "i");
+ if(pattern.test($(elem).find("td.name").html())){
+ el.removeClass("hidden");
+ } else {
+ el.addClass("hidden");
+ }
+ });
+ } else if(target.val().length == 0) {
+ check_controll.attr("disabled", true);
+ table.find("tbody tr").removeClass("hidden");
+ }
+ };
+ filter.on("change", filter_updated_callback);
+ filter.on("keyup", filter_updated_callback);
+
+ check_controll.on("click", function(e){
+ e.preventDefault();
+ var el = $(e.currentTarget);
+ action = el.data("action");
+ if(action === "check") {
+ el.val("Uncheck All");
+ el.data("action", "uncheck")
+ chk = true
+ } else {
+ el.val("Check All");
+ el.data("action", "check")
+ chk = false;
+ }
+ var checkboxes = table.find("tbody tr:visible input[type='checkbox']")
+ checkboxes.attr("checked", chk);
+ update_countries_collection($.makeArray(checkboxes));
});
});
@@ -68,6 +68,10 @@ table td {
border: 1px solid #999;
}
+table tbody tr.hidden {
+ display: none;
+}
+
/* Flash Notices / Errors */
#notice {
@@ -222,3 +226,7 @@ form ul.form_errors {
form ul.form_errors li {
list-style-type: none;
}
+
+div.filter {
+ clear: both;
+}

0 comments on commit 831a857

Please sign in to comment.