smart_table 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 23acd51b4d9ed74656af184838af799679d1af671868a33ad8469d28fa07f120
+  data.tar.gz: 18cafc003a7009ec0851a82644cc165ac1f2f4cf0434201d71f20d51f6921f40
+SHA512:
+  metadata.gz: f719177b8bc9d656a37fdb3809ad54b93c478f5a3f25a62a934fc9f196c88be002504d0b62137a3c5ca84ce013cd702b9266247826e3ad337564e79a08d8be62
+  data.tar.gz: 1f6f1ce141d46c6b02cf62fa1922079065d515fdc950746e002beaefee623c0afc41fc22b4275a70248e960c578fda5ce90047ea0d1c861927556334d7b37804

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in rails-sharding.gemspec
+gemspec

data/Gemfile.lock

@@ -0,0 +1,171 @@
+PATH
+  remote: .
+  specs:
+    smart_table (0.0.1)
+      font-awesome-rails
+      kaminari
+      rails (> 4.2.0, < 5.3.0)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    actioncable (5.2.0)
+      actionpack (= 5.2.0)
+      nio4r (~> 2.0)
+      websocket-driver (>= 0.6.1)
+    actionmailer (5.2.0)
+      actionpack (= 5.2.0)
+      actionview (= 5.2.0)
+      activejob (= 5.2.0)
+      mail (~> 2.5, >= 2.5.4)
+      rails-dom-testing (~> 2.0)
+    actionpack (5.2.0)
+      actionview (= 5.2.0)
+      activesupport (= 5.2.0)
+      rack (~> 2.0)
+      rack-test (>= 0.6.3)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.0, >= 1.0.2)
+    actionview (5.2.0)
+      activesupport (= 5.2.0)
+      builder (~> 3.1)
+      erubi (~> 1.4)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.0, >= 1.0.3)
+    activejob (5.2.0)
+      activesupport (= 5.2.0)
+      globalid (>= 0.3.6)
+    activemodel (5.2.0)
+      activesupport (= 5.2.0)
+    activerecord (5.2.0)
+      activemodel (= 5.2.0)
+      activesupport (= 5.2.0)
+      arel (>= 9.0)
+    activestorage (5.2.0)
+      actionpack (= 5.2.0)
+      activerecord (= 5.2.0)
+      marcel (~> 0.3.1)
+    activesupport (5.2.0)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 0.7, < 2)
+      minitest (~> 5.1)
+      tzinfo (~> 1.1)
+    arel (9.0.0)
+    builder (3.2.3)
+    byebug (9.1.0)
+    concurrent-ruby (1.0.5)
+    crass (1.0.4)
+    diff-lcs (1.3)
+    erubi (1.7.1)
+    font-awesome-rails (4.7.0.4)
+      railties (>= 3.2, < 6.0)
+    globalid (0.4.1)
+      activesupport (>= 4.2.0)
+    i18n (1.0.1)
+      concurrent-ruby (~> 1.0)
+    kaminari (1.1.1)
+      activesupport (>= 4.1.0)
+      kaminari-actionview (= 1.1.1)
+      kaminari-activerecord (= 1.1.1)
+      kaminari-core (= 1.1.1)
+    kaminari-actionview (1.1.1)
+      actionview
+      kaminari-core (= 1.1.1)
+    kaminari-activerecord (1.1.1)
+      activerecord
+      kaminari-core (= 1.1.1)
+    kaminari-core (1.1.1)
+    loofah (2.2.2)
+      crass (~> 1.0.2)
+      nokogiri (>= 1.5.9)
+    mail (2.7.0)
+      mini_mime (>= 0.1.1)
+    marcel (0.3.2)
+      mimemagic (~> 0.3.2)
+    method_source (0.9.0)
+    mimemagic (0.3.2)
+    mini_mime (1.0.0)
+    mini_portile2 (2.3.0)
+    minitest (5.11.3)
+    nio4r (2.3.1)
+    nokogiri (1.8.4)
+      mini_portile2 (~> 2.3.0)
+    rack (2.0.5)
+    rack-test (1.0.0)
+      rack (>= 1.0, < 3)
+    rails (5.2.0)
+      actioncable (= 5.2.0)
+      actionmailer (= 5.2.0)
+      actionpack (= 5.2.0)
+      actionview (= 5.2.0)
+      activejob (= 5.2.0)
+      activemodel (= 5.2.0)
+      activerecord (= 5.2.0)
+      activestorage (= 5.2.0)
+      activesupport (= 5.2.0)
+      bundler (>= 1.3.0)
+      railties (= 5.2.0)
+      sprockets-rails (>= 2.0.0)
+    rails-dom-testing (2.0.3)
+      activesupport (>= 4.2.0)
+      nokogiri (>= 1.6)
+    rails-html-sanitizer (1.0.4)
+      loofah (~> 2.2, >= 2.2.2)
+    railties (5.2.0)
+      actionpack (= 5.2.0)
+      activesupport (= 5.2.0)
+      method_source
+      rake (>= 0.8.7)
+      thor (>= 0.18.1, < 2.0)
+    rake (12.3.1)
+    rspec (3.7.0)
+      rspec-core (~> 3.7.0)
+      rspec-expectations (~> 3.7.0)
+      rspec-mocks (~> 3.7.0)
+    rspec-core (3.7.1)
+      rspec-support (~> 3.7.0)
+    rspec-expectations (3.7.0)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.7.0)
+    rspec-mocks (3.7.0)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.7.0)
+    rspec-rails (3.7.2)
+      actionpack (>= 3.0)
+      activesupport (>= 3.0)
+      railties (>= 3.0)
+      rspec-core (~> 3.7.0)
+      rspec-expectations (~> 3.7.0)
+      rspec-mocks (~> 3.7.0)
+      rspec-support (~> 3.7.0)
+    rspec-support (3.7.1)
+    sprockets (3.7.2)
+      concurrent-ruby (~> 1.0)
+      rack (> 1, < 3)
+    sprockets-rails (3.2.1)
+      actionpack (>= 4.0)
+      activesupport (>= 4.0)
+      sprockets (>= 3.0.0)
+    sqlite3 (1.3.13)
+    thor (0.20.0)
+    thread_safe (0.3.6)
+    tzinfo (1.2.5)
+      thread_safe (~> 0.1)
+    websocket-driver (0.7.0)
+      websocket-extensions (>= 0.1.0)
+    websocket-extensions (0.1.3)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  bundler (~> 1.16)
+  byebug (~> 9)
+  rake (~> 12.0)
+  rspec (~> 3.0)
+  rspec-rails (~> 3.7)
+  smart_table!
+  sqlite3
+
+BUNDLED WITH
+   1.16.2

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Henrique Gubert
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,132 @@
+# SmartTable
+
+Implements tables with pagination and search for Rails, with server-side content loading.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'smart_table'
+```
+
+And then execute:
+```
+bundle
+```
+
+## Getting Started
+
+### Including Assets
+SmartTable uses both JS and CSS, that must be included in your app's asset pipeline.
+```
+// Add this to your application.js or vendor.js
+//= require smart_table
+
+// Add this to your application.scss or vendor.scss
+*= require smart_table
+```
+
+### Setting up the Controller
+Add this line to your index action:
+```ruby
+  def index
+    smart_table_params = smart_table_params(initial_page_size: 20)
+
+    ...
+  end
+```
+
+You can now use the `smart_table_params` object to customize your record's loading and counting:
+```ruby
+  # smart_table_params.search => string typed by user on search box (might be nil or empty)
+  # smart_table_params.sort => string in the format of 'attribute ASC' or 'attribute DESC' (might be nil if there is no sorting specified)
+  # smart_table_params.limit => page size (nil if showing all records)
+  # smart_table_params.offset => record offset based on page number (nil if showing all records)
+
+  @current_page_records = Record.
+    where('column1 LIKE ? OR column2 LIKE ?', *Array.new(2, "%#{ActiveRecord::Base.sanitize_sql_like(smart_table_params.search)}%")).
+    order(smart_table_params.sort).
+    limit(smart_table_params.limit).
+    offset(smart_table_params.offset)
+
+  # Besides loading the records of the current page, the smart_table gem requires you
+  # to count the total number of records of the table, so it can build the pagination
+  # controls properly. Any filtering applied to record loading must be applied to
+  # counting as well.
+  @total_records_count = Record.
+    where('column1 LIKE ? OR column2 LIKE ?', *Array.new(2, "%#{ActiveRecord::Base.sanitize_sql_like(smart_table_params.search)}%")).
+    count
+```
+
+You can also use the `smart_table_params` to load/count records from another source, like an API or a NoSQL database. It is all up to you!
+
+### Setting up the View
+Now in your view, use the following helpers to enhance your table:
+
+```html
+<h1>Users</h1>
+
+<div>
+  <%# Renders text field for searching %>
+  <%= smart_table_search %>
+</div>
+
+<table class='table'>
+  <thead>
+    <tr>
+      <th></th>
+      <th><%= smart_table_sortable("Username", :username) %></th>
+      <th><%= smart_table_sortable("Email", :email) %></th>
+      <th><%= smart_table_sortable("Name", :name) %></th>
+      <th><%= User.human_attribute_name(:account_type) %></th> <%# this column is not sortable %>
+    </tr>
+  </thead>
+  <tbody>
+    <% @current_page_users.each do |user| %>
+      <tr>
+        <td><%= link_to "show", user_path(user) %></td>
+        <td><%= user.username %></td>
+        <td><%= user.email %></td>
+        <td><%= user.name %></td>
+        <td><%= user.account_type %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>
+
+<%# Renders pagination controls (page numbers, previous/next buttons, etc) %>
+<%# Requires both the records of the current page (@users) and the total count %>
+<%= smart_table_paginate @current_page_users, @total_users_count, User.model_name.human %>
+
+<%# Renders page size selector (depends on total record count) %>
+<%= smart_table_page_size_selector @total_user_count, User.model_name.human %>
+```
+
+This should be enough for your smart table to function properly.
+
+### Adding Extra Filters
+
+Sometimes a single search box is not enough. You want to provide users more advanced filtering options. In this case you can use the `smart_table_extra_filters` helpers to wrap a set of fields, that will automatically trigger a a page refresh when changed, including the field value itself in the `params` hash.
+
+You must handle the `params` hash by yourself in the controller (you will probably change the way you load your records, based on those parameters).
+
+The following snippet shows how to use different input types to make custom filters.
+
+```
+<%# Renders text field for searching %>
+<%= smart_table_extra_filters do %>
+  <%# Checkbox %>
+  <%= check_box_tag 'somekey', 'value', params['somekey'] %>
+
+  <%# Select box %>
+  <%= select_tag "credit_card", options_for_select({"VISA" => 'visa', "MasterCard" => 'master_card'}, params['credit_card']) %>
+
+  <%# Text field %>
+  <%= text_field_tag "somefield", params['somefield'] %>
+
+  <%# Radio buttons %>
+  <%= radio_button_tag("category", "", !params["category"].present?) %>
+  <%= radio_button_tag("category", "rails", params["category"] == 'rails') %>
+  <%= radio_button_tag("category", "java", params["category"] == 'java') %>
+<% end %>
+```

data/app/assets/javascripts/smart_table.js

@@ -0,0 +1,137 @@
+
+// SmartTable class constructor (empty)
+var SmartTable = function() {
+}
+
+// Helper function to setup onLoad
+SmartTable.onPageLoad = function(callback){
+    // modern browsers
+    if (document.addEventListener) {
+      document.addEventListener('DOMContentLoaded', callback);
+      document.addEventListener("turbolinks:load", callback); // Turbolinks 5
+      document.addEventListener("page:load", callback); // Turbolinks classic
+    }
+    // IE <= 8
+    else {
+      document.attachEvent('onreadystatechange', function() {
+        if (document.readyState == 'complete') callback();
+      });
+    }
+};
+
+// On page load, we setup search field and extra filters
+SmartTable.onPageLoad(function() {
+  SmartTable.setupSmartTableSearch();
+  SmartTable.setupSmartTableExtraFilters();
+})
+
+// Gets the current page url and merges some query parameters to this url. If a
+// certain parameter already exists, it is overwritten. If the value of the
+// parameter in the argument map is "null", the parameter is removed from the url.
+//   params: object containing parameters to be included in the url.
+SmartTable.currentUrlWithMergedQueryParams = function(params) {
+  // parses url and its query params
+  var location = window.location;
+  var vars = location.search.substring(1).split('&');
+  var queryParams = {};
+  if (!!vars && vars.length >0 && vars[0] != "") {
+    for (var i=0; i<vars.length; i++) {
+        var pair = vars[i].split('=');
+
+        // decodeURIComponent does not decode '+' into space, so we do some preprocessing
+        // and replace '+' for '%20', which is decoded to space by decodeURIComponent
+        pair[1] = pair[1].replace(/\+/g, '%20');
+
+        queryParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
+    }
+  }
+
+  // merges received params
+  for (var key in params) {
+    if (params[key] != null) {
+      queryParams[key] = params[key];
+    } else {
+      delete queryParams[key];
+    }
+  }
+
+  // rebuilds url
+  var newSearchString = null;
+  for (var key in queryParams) {
+    if (newSearchString == null) {
+      newSearchString = "?";
+    } else {
+      newSearchString += "&";
+    }
+    newSearchString += encodeURIComponent(key) + "=" + encodeURIComponent(queryParams[key]);
+  }
+
+  // returns new url
+  return location.origin + location.pathname + newSearchString;
+}
+
+// Refreshes the current page, adding a pair of key value to the url's query string.
+// If value is "null", the parameter is removed from the url.
+// It also adds an extra parameter "st_page" so the table goes back to first
+// page
+SmartTable.refreshPageWithParam = function(key, value) {
+  var params = {
+    st_page: 1,
+  }
+  if (!!value && value.length > 0) {
+    params[key] = value;
+  } else {
+    params[key] = null;
+  }
+
+  // makes the request
+  window.location = SmartTable.currentUrlWithMergedQueryParams(params);
+}
+
+// Prepares table search field, so the table is refreshed when the field changes
+SmartTable.setupSmartTableSearch = function() {
+  // gets search text field
+  var smartTableSearch = document.getElementById('smart_table_search');
+  if (!smartTableSearch) return;
+
+  // refreshes page every time search field changes
+  smartTableSearch.addEventListener('change', function(event) {
+    // get search string from field value
+    var searchString = event.currentTarget.value;
+    SmartTable.refreshPageWithParam("st_search", searchString);
+  });
+}
+
+// Prepares table extra filters section, so the table is refreshed when the
+// any of the input fields are changed
+SmartTable.setupSmartTableExtraFilters = function() {
+  var smartTableExtraFilters = document.getElementById('smart_table_extra_filters');
+  if (!smartTableExtraFilters) return;
+
+  // all input fields
+  var inputNodes = smartTableExtraFilters.getElementsByTagName('input');
+  var selectNodes = smartTableExtraFilters.getElementsByTagName('select');
+  var nodeCollections = [inputNodes, selectNodes];
+
+  // refreshes page every time any field changes
+  for (var i=0; i<nodeCollections.length; i++) {
+    var nodeCollection = nodeCollections[i];
+    for (var j=0; j<nodeCollection.length; j++) {
+      var node = nodeCollection[j];
+      node.addEventListener('change', function(event) {
+        if (event.target.type == 'checkbox' || event.target.type == 'radio') {
+          var checkboxOrRadio = event.target;
+          SmartTable.refreshPageWithParam(checkboxOrRadio.name, (checkboxOrRadio.checked ? checkboxOrRadio.value : ""));
+        }
+        else if (event.target.type == 'text') {
+          var textField = event.target;
+          SmartTable.refreshPageWithParam(textField.name, textField.value);
+        }
+        else if (event.target.type == 'select-one') {
+          var select = event.target;
+          SmartTable.refreshPageWithParam(select.name, select.value);
+        }
+      });
+    }
+  }
+}

data/app/assets/stylesheets/smart_table.scss

@@ -0,0 +1,85 @@
+
+ul.pagination {
+ display: inline-block;
+ padding-left: 0;
+ margin: 10px 0;
+ border-radius: 4px;
+
+ // Pagination buttons
+ &>a {
+   position: relative;
+   float: left;
+   line-height: 1.428571429;
+   padding: 6px 12px;
+   text-decoration: none;
+   color: #616161;
+   background-color: white;
+   border: 1px solid #dddddd;
+   margin-left: -1px;
+
+   // First pagination button
+   &:first-child {
+    margin-left: 0;
+    border-bottom-left-radius: 4px;
+    border-top-left-radius: 4px;
+   }
+
+   // Last pagination button
+   &:last-child {
+    margin-left: 0;
+    border-bottom-right-radius: 4px;
+    border-top-right-radius: 4px;
+   }
+
+   // Currently selected button
+   &.current {
+    z-index: 2;
+    color: white;
+    background-color: #616161;
+    border-color: #616161;
+    cursor: default;
+   }
+
+   // currently hovered button (except if selected)
+   &:hover:not(.current) {
+    color: #245151;
+    background-color: #eeeeee;
+    border-color: #dddddd;
+   }
+
+   // links inside buttons {
+   &>a {
+
+   }
+ }
+}
+
+// style for a pretty text field
+@mixin smart_table_text_field {
+  height: 34px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.428571429;
+  color: #555555;
+  background-color: white;
+  background-image: none;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+}
+
+// search field: right aligned
+.smart_table_search {
+  @include smart_table_text_field;
+  float: right;
+}
+
+.smart_table_extra_filters {
+  // text fields and select boxes inside extra filters
+  input[type="text"], select {
+    @include smart_table_text_field;
+  }
+}
+
+.text-center {
+  text-align: center;
+}

data/app/controllers/concerns/smart_table/smart_table_concern.rb

@@ -0,0 +1,58 @@
+
+module SmartTable
+  module SmartTableConcern
+    extend ActiveSupport::Concern
+
+    included do
+      helper_method :get_cached_smart_table_params
+    end
+
+    class Params
+      attr_accessor :sort, :page_size, :page_number, :search
+
+      def initialize
+        self.sort = nil
+        self.page_size = nil
+        self.page_number = 1
+        self.search = nil
+      end
+
+      def limit
+        page_size
+      end
+
+      def offset
+        page_size * (page_number-1) if page_size
+      end
+    end
+
+    def smart_table_params(initial_page_size: 25)
+      return @st_params if @st_params
+
+      @st_params = Params.new
+      @st_params.sort = params[SORT_PARAM]
+      @st_params.search = params[SEARCH_PARAM]
+      @st_params.page_size = params[PAGE_SIZE_PARAM] || initial_page_size
+      if @st_params.page_size == SHOW_ALL
+        @st_params.page_size = nil
+      else
+        @st_params.page_size = @st_params.page_size.to_i
+
+        if params[PAGE_PARAM].present? && params[PAGE_PARAM] =~ /\d+/
+          page = params[PAGE_PARAM].to_i
+          page = 1 if page < 1
+          @st_params.page_number = page
+        end
+      end
+
+      @st_params
+    end
+
+  private
+
+    def get_cached_smart_table_params
+      @st_params
+    end
+
+  end
+end