smart_table 0.0.8 → 0.0.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 224c0be14daa5e13ef122e4aeea2066df005abd593bd452960ae8f36d6ed3f11
-  data.tar.gz: e3cb3b5ff817ddf96700c39cdc036f06b1f89ed94bcbf8e50903e5d2887f0b55
+  metadata.gz: f4e47371d7d1983b8b3576b2a68bfcf2cbb49fa205cd53a279fa7c8c9f32ec49
+  data.tar.gz: e8c894597e4f0f542312b1c16a3307421b00c287316bd98bfa57b485cc886b90
 SHA512:
-  metadata.gz: e1d77e21f232f87f2e26f7f95e42c7b2aaa44c047bb5062f09ea2ea3625b21b8fbf6223f30fcce367c85cc0749c9a1949ef865e551a1e62a45ab361d0b71d99b
-  data.tar.gz: 928f648e82098247902534638b3c812a75c990d38e82cae55df9223d4a0e8e048690e71209c48fb038437bc549a74dba8ad48bc03d33b7e7f8ec1ba3da977609
+  metadata.gz: f8b691fca8052f533664b7a448066a1d132263fc63287ee36b659195c8ab1fb63370e380f6f0128c614acf6dfe5ffb567e14803f91263838f50a366d49181b4d
+  data.tar.gz: b3ed85987781f88f6108603cbf5194beb517e9b3028e604bdc0f24754dc4df75cc7272f3a4589baeb66dcc4806ab0aac0866d649d8e44923ca403ed75394ea2f

data/README.md

@@ -142,3 +142,52 @@ The following snippet shows how to use different input types to make custom filt
     initial_sort_order: :desc
   )
 ```
+
+### Ajax Updates
+
+In its normal mode, smart_table works by refreshing the page with different url query parameters. The main advantage of this method, is that the url completely determines the state of the table in the page, and you can easily share the url with someone else and they will have the view of the same page with the same sorting and so on (you can't guarantee the table content will be the same though, as it depends on your data source).
+
+On the other hand, this has the side-effect of refreshing the rest of the page, wiping out all the eventual state you have in your DOM, what might be a problem depending on how your app is structured. The solution to this problem is to refresh only the part of your page that must be refreshed when the user interacts with the smart_table.
+
+To enable all the links related to the smart_table to generate AJAX requests, set the following option in your controller:
+```ruby
+  smart_table_params = smart_table_params(
+    remote: true,
+    ...
+  )
+```
+
+Then in your view, use the following helper to enclose everything that must be update when the user changes a page, changes page size or does some search:
+```html
+<h1>Users</h1>
+
+<div><%= smart_table_search %></div>
+
+<%= smart_table_remote_updatable_content do %>
+  <table class='table'>
+    ...
+  </table>
+
+  <%= smart_table_paginate @current_page_users, @total_users_count, User.model_name.human %>
+  <%= smart_table_page_size_selector @total_user_count, User.model_name.human %>
+<% end %>
+```
+
+Usually, all you need to enclose in this scope is the table and the pagination controls.
+
+If you want, you can prevent the controller of rendering the view inside the layout when the request is xhr, this will spare your server some work, as the only part of the page that is actually necessary for it to render is the one enclosed by the `smart_table_remote_updatable_content` helper.
+
+smart_table will automatically identify the content to be updated and replace that part of the page by the new content. Sometimes you need to execute some javascript after replacing this content (`<script>` tags inside the replaced content will not run automatically!). In this case, use the `smart_table:ajax_update` event that is triggered on the document, as showed below:
+```javascript
+  $(document).on('smart_table:ajax_update', function(event) {
+    var replacedElementSelector = event.detail.replacedElementSelector;
+    // do whatever you need to do
+  });
+```
+
+Usually you have to setup event listeners on your table content, both after initial rendering and after an ajax update. In this case, just do your setup both on document ready and after the ajax update event:
+```javascript
+$(document).on('ready smart_table:ajax_update', function(event) {
+  // do whatever here
+});
+```

data/app/assets/javascripts/smart_table.js

@@ -7,9 +7,12 @@ var SmartTable = function() {
 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
+      if (typeof Turbolinks !== 'undefined') {
+        document.addEventListener("turbolinks:load", callback); // Turbolinks 5
+        document.addEventListener("page:load", callback); // Turbolinks classic
+      } else {
+        document.addEventListener('DOMContentLoaded', callback);
+      }
     }
     // IE <= 8
     else {
@@ -19,10 +22,29 @@ SmartTable.onPageLoad = function(callback){
     }
 };
 
-// On page load, we setup search field and extra filters
-SmartTable.onPageLoad(function() {
-  SmartTable.setupSmartTableSearch();
-  SmartTable.setupSmartTableExtraFilters();
+// make the initial setup of smart table links, filters, search, scoped under the
+// selector parameter. If no selector parameter is passed, make the setup on the
+// whole document
+SmartTable.setupSmartTableInScope = function(selector) {
+  var scopeElement;
+  if (typeof selector == 'undefined') {
+    scopeElement = document;
+  } else {
+    scopeElement = document.querySelector(selector);
+  }
+  if (scopeElement == null) {
+    return;
+  }
+
+  // call individual setup methods
+  SmartTable.setupSmartTableSearch(scopeElement);
+  SmartTable.setupSmartTableExtraFilters(scopeElement);
+  SmartTable.setupRemoteTableUpdate(scopeElement);
+}
+
+// On page load, we setup all JS elements on the whole document
+SmartTable.onPageLoad(function(event) {
+  SmartTable.setupSmartTableInScope();
 })
 
 // Gets the current page url and merges some query parameters to this url. If a
@@ -84,14 +106,75 @@ SmartTable.refreshPageWithParam = function(key, value) {
     params[key] = null;
   }
 
-  // makes the request
-  window.location = SmartTable.currentUrlWithMergedQueryParams(params);
+  // if there is section to be updated dynamically, does AJAX request, otherwise
+  // just makes the browser load the new page
+  var url = SmartTable.currentUrlWithMergedQueryParams(params);
+  if (!!document.querySelector('.smart_table_remote_updatable_content')) {
+    SmartTable.ajaxUpdate(url, '.smart_table_remote_updatable_content');
+  } else {
+    window.location = url;
+  }
+}
+
+// Updates table via ajax.
+// 1) Does XHR HTTP GET to get new content
+// 2) Uses replaceableElementSelector to select the element to be replaced in the current DOM,
+//    by the element with the same selector in the received content
+// 3) Replaces current browser url (necessary for smart_table to work properly)
+// 4) Fires the "smart_table:ajax_update" event on the document, with the newly
+// added element as target
+SmartTable.ajaxUpdate = function(url, replaceableElementSelector) {
+  // makes AJAX get request
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.onload = function() {
+      if (xhr.status === 200) {
+          // parses response
+          var domParser = new DOMParser();
+          var receivedDocument = domParser.parseFromString(xhr.responseText, "text/html");
+          var replacingElement = receivedDocument.querySelector(replaceableElementSelector);
+          if (replacingElement == null) {
+            console.log("smart_table: element with selector '" + replaceableElementSelector + "' not found in xhr response");
+            return;
+          }
+
+          // finds element to be replaced
+          var replacedElement = document.querySelector(replaceableElementSelector);
+          if (replacedElement == null) {
+            console.log("smart_table: element with selector '" + replaceableElementSelector + "' not found in current document");
+            return;
+          }
+
+          // replaces element
+          replacedElement.parentNode.replaceChild(replacingElement, replacedElement);
+
+          // re-do setup of smart_table, as it is probably inside the replaced element
+          SmartTable.setupSmartTableInScope(replaceableElementSelector);
+
+          // updates url (requires HTML5)
+          history.replaceState({}, "", url)
+
+          // fires "smart_table:ajax_update" event on document, in case there are
+          // custom user actions to be done
+          var ajaxUpdateEvent = new CustomEvent("smart_table:ajax_update", {
+            detail: {
+              replacedElementSelector: replaceableElementSelector
+            }
+          })
+          document.dispatchEvent(ajaxUpdateEvent);
+      }
+      else {
+          console.log("smart_table: xhr update failed. Response status: " + xhr.status);
+      }
+  };
+  xhr.send();
 }
 
 // Prepares table search field, so the table is refreshed when the field changes
-SmartTable.setupSmartTableSearch = function() {
+// scopeElement: scope under which all search fields will be setup. May be the document object
+SmartTable.setupSmartTableSearch = function(scopeElement) {
   // gets search text field
-  var smartTableSearch = document.getElementById('smart_table_search');
+  var smartTableSearch = scopeElement.getElementsByClassName('smart_table_search')[0];
   if (!smartTableSearch) return;
 
   // refreshes page every time search field changes
@@ -104,8 +187,9 @@ SmartTable.setupSmartTableSearch = function() {
 
 // 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');
+// scopeElement: scope under which all search fields will be setup. May be the document object
+SmartTable.setupSmartTableExtraFilters = function(scopeElement) {
+  var smartTableExtraFilters = scopeElement.getElementsByClassName('smart_table_extra_filters')[0];
   if (!smartTableExtraFilters) return;
 
   // all input fields
@@ -135,3 +219,21 @@ SmartTable.setupSmartTableExtraFilters = function() {
     }
   }
 }
+
+// Prepares all links with data-smart-table-remote-link to trigger ajax requests
+// and replace part of the document only.
+// scopeElement: scope under which all search fields will be setup. May be the document object
+SmartTable.setupRemoteTableUpdate = function(scopeElement) {
+  var remoteLinkNodes = scopeElement.querySelectorAll('a.smart-table-link[data-smart-table-remote-link]');
+  if (remoteLinkNodes.length == 0) return;
+
+  // refreshes page every time any field changes
+  for (var i=0; i<remoteLinkNodes.length; i++) {
+    var linkNode = remoteLinkNodes[i];
+    linkNode.addEventListener('click', function(event) {
+      event.preventDefault();
+      SmartTable.ajaxUpdate(event.target.href, '.smart_table_remote_updatable_content');
+      return false;
+    });
+  }
+}

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

@@ -8,7 +8,7 @@ module SmartTable
     end
 
     class Params
-      attr_accessor :sort, :page_size, :page_number, :search
+      attr_accessor :sort, :page_size, :page_number, :search, :remote
 
       def initialize
         self.sort = nil
@@ -26,10 +26,11 @@ module SmartTable
       end
     end
 
-    def smart_table_params(initial_page_size: 25, initial_sort_attribute: nil, initial_sort_order: :asc)
+    def smart_table_params(initial_page_size: 25, initial_sort_attribute: nil, initial_sort_order: :asc, remote: false)
       return @st_params if @st_params
 
       @st_params = Params.new
+      @st_params.remote = remote
 
       @st_params.sort = params[SORT_PARAM]
       if @st_params.sort.nil? && initial_sort_attribute

data/app/helpers/smart_table/smart_table_helper.rb

@@ -30,7 +30,11 @@ module SmartTable
       html_elements = []
 
       # call to Kaminari view helper
-      html_elements << paginate(paginatable_array, param_name: PAGE_PARAM, theme: "smart_table")
+      html_elements << paginate(paginatable_array,
+        param_name: PAGE_PARAM,
+        theme: 'smart_table',
+        remote: get_cached_smart_table_params.remote
+      )
 
       html_elements << content_tag(:div, class: 'text-center') do
         # call to Kaminari view helper
@@ -71,7 +75,7 @@ module SmartTable
       end
 
       link_url = current_request_url_with_merged_query_params(SORT_PARAM => "#{attribute} #{next_sort_order}")
-      link_to link_url do
+      link_to link_url, class: 'smart-table-link', data: {smart_table_remote_link: (true if get_cached_smart_table_params.remote)} do
         text.html_safe + ' ' + (
           if current_sort_attribute == attribute && current_sort_order == 'asc'
             "<span class='fa fa-sort-down'></span>".html_safe
@@ -115,7 +119,7 @@ module SmartTable
       if page_sizes.last >= total_records_count
         page_sizes.reject! {|size| size > total_records_count}
       end
-      
+
       page_sizes << SHOW_ALL
 
       content_tag(:div, class: 'text-center') do
@@ -127,7 +131,12 @@ module SmartTable
             if page_size == get_cached_smart_table_params.page_size || page_size == SHOW_ALL && get_cached_smart_table_params.page_size.nil?
               human_page_size
             else
-              link_to human_page_size, current_request_url_with_merged_query_params(PAGE_SIZE_PARAM => page_size, PAGE_PARAM => 1)
+              link_to(
+                human_page_size,
+                current_request_url_with_merged_query_params(PAGE_SIZE_PARAM => page_size, PAGE_PARAM => 1),
+                class: 'smart-table-link',
+                data: {smart_table_remote_link: (true if get_cached_smart_table_params.remote)}
+              )
             end
           end.join(' ')
         ).html_safe
@@ -163,7 +172,7 @@ module SmartTable
       text_field_tag(
         SEARCH_PARAM,
         get_cached_smart_table_params.search,
-        type: 'search', placeholder: I18n.t('smart_table.search'), class: 'smart_table_search', id: 'smart_table_search'
+        type: 'search', placeholder: I18n.t('smart_table.search'), class: 'smart_table_search'
       )
     end
 
@@ -195,6 +204,39 @@ module SmartTable
       )
     end
 
+    # Delimits part of the page to me replaced via AJAX requests when smart_table
+    # is configured with option 'remote: true'. Usage:
+    #
+    # In controller:
+    #   smart_table_params = smart_table_params(
+    #     remote: true,
+    #     ...
+    #   )
+    #
+    # In views
+    #   <%= smart_table_remote_updatable_content do %>
+    #     ...
+    #   <% end %>
+    #
+    # smart_table will automatically replace the content within this block with
+    # the content of the corresponding block within the response of the AJAX request
+
+    def smart_table_remote_updatable_content(&block)
+      raise 'smart_table_params must be called on the controller, before using smart_table_remote_updatable_content helper' unless get_cached_smart_table_params
+
+      content = capture(&block)
+
+      # only encloses content in span if remote update is enabled
+      if get_cached_smart_table_params.remote
+        content_tag(:span,
+          content,
+          class: 'smart_table_remote_updatable_content'
+        )
+      else
+        content
+      end
+    end
+
   private
 
     # generates url merging parameters to the current url

data/app/views/kaminari/smart_table/_first_page.html.erb

@@ -8,5 +8,5 @@
 -%>
 
 <% unless current_page.first? %>
-  <%= link_to t('views.pagination.first').html_safe, url, class: 'first', :remote => remote %>
+  <%= link_to t('views.pagination.first').html_safe, url, class: 'first smart-table-link', data: {smart_table_remote_link: (remote if remote)} %>
 <% end %>

data/app/views/kaminari/smart_table/_last_page.html.erb

@@ -8,5 +8,5 @@
 -%>
 
 <% unless current_page.last? %>
-  <%= link_to t('views.pagination.last').html_safe, url, class: 'last', :remote => remote %>
+  <%= link_to t('views.pagination.last').html_safe, url, class: 'last smart-table-link', data: {smart_table_remote_link: (remote if remote)} %>
 <% end %>

data/app/views/kaminari/smart_table/_next_page.html.erb

@@ -8,5 +8,5 @@
 -%>
 
 <% unless current_page.last? %>
-  <%= link_to t('views.pagination.next').html_safe, url, class: 'next', :rel => 'next', :remote => remote %>
+  <%= link_to t('views.pagination.next').html_safe, url, class: 'next smart-table-link', :rel => 'next', data: {smart_table_remote_link: (remote if remote)} %>
 <% end %>

data/app/views/kaminari/smart_table/_page.html.erb

@@ -7,4 +7,4 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<%= link_to page, url, {:remote => remote, class: "page#{ ' current' if page.current? }", :rel => page.next? ? 'next' : page.prev? ? 'prev' : nil} %>
+<%= link_to page, url, {class: "page smart-table-link#{ ' current' if page.current? }", :rel => (page.next? ? 'next' : page.prev? ? 'prev' : nil), data: {smart_table_remote_link: (remote if remote)}} %>

data/app/views/kaminari/smart_table/_paginator.html.erb

@@ -12,10 +12,10 @@
       <%= first_page_tag unless current_page.first? || total_pages <= 2 %>
       <%= prev_page_tag unless current_page.first? %>
       <% each_page do |page| -%>
-          <% if page.left_outer? || page.right_outer? || page.inside_window? -%>
-            <%= page_tag page %>
+        <% if page.left_outer? || page.right_outer? || page.inside_window? -%>
+          <%= page_tag page %>
         <% elsif !page.was_truncated? -%>
-            <%= gap_tag %>
+          <%= gap_tag %>
         <% end -%>
       <% end -%>
       <%= next_page_tag unless current_page.last? %>

data/app/views/kaminari/smart_table/_prev_page.html.erb

@@ -8,5 +8,5 @@
 -%>
 
 <% unless current_page.first? %>
-  <%= link_to t('views.pagination.previous').html_safe, url, class: 'prev', rel: 'prev', :remote => remote %>
+  <%= link_to t('views.pagination.previous').html_safe, url, class: 'prev smart-table-link', rel: 'prev', data: {smart_table_remote_link: (remote if remote)} %>
 <% end %>

data/lib/smart_table/version.rb

@@ -1,3 +1,3 @@
 module SmartTable
-  VERSION = "0.0.8"
+  VERSION = "0.0.9"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: smart_table
 version: !ruby/object:Gem::Version
-  version: 0.0.8
+  version: 0.0.9
 platform: ruby
 authors:
 - Henrique Gubert
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-07-18 00:00:00.000000000 Z
+date: 2018-07-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -187,6 +187,7 @@ files:
 - "./lib/smart_table/engine.rb"
 - "./lib/smart_table/version.rb"
 - "./smart_table-0.0.7.gem"
+- "./smart_table-0.0.8.gem"
 - "./smart_table.gemspec"
 - "./spec/dummy_app/Rakefile"
 - "./spec/dummy_app/app/assets/config/manifest.js"