ruby-html-table 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 244c57db696c6f2e1e89481d89e5d91632e73e1cf9ca4e4e204ab4fde1de76e1
+  data.tar.gz: 25eb28e3b73f53165aab45a2fbef55a54303ea752ca70fe342e2162803ff4799
+SHA512:
+  metadata.gz: d6612527c7bdea0562b53c552ad2ef903f9992466154dcf633668400f8be13a279cc4cb32a49e607303d631ca4cd002ab6fa28c71e894bdb40a65ac482cc1433
+  data.tar.gz: 4c9a3ec73fbe00c5553652675941bb727e053bbfa9d553045990e517c524de164492f9aec40a6e588a8fffbbddb5dcb4bb1977f5f996e59ea641c1845080618f

data/lib/assets/css/table_template.css

@@ -0,0 +1,136 @@
+/* Table Styles */
+
+.table-wrapper{
+  margin: 10px 10px 10px;
+  box-shadow: 0px 10px 10px rgba( 0, 0, 0, 0.2 );
+}
+
+.fl-table {
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: normal;
+  border: none;
+  border-collapse: collapse;
+  width: 100%;
+  max-width: 100%;
+  white-space: nowrap;
+  background-color: white;
+}
+
+.fl-table td, .fl-table th {
+  text-align: center;
+  padding: 8px;
+}
+
+.fl-table td {
+  border-right: 1px solid #f8f8f8;
+  font-size: 12px;
+}
+
+.fl-table thead th {
+  color: #ffffff;
+  /*PRIMARY_COLOR*/
+}
+
+#fl-table-even {
+  color: #ffffff;
+  /*PRIMARY_COLOR*/
+}
+
+#fl-table-odd {
+  color: #ffffff;
+  /*SECONDARY_COLOR*/
+}
+
+
+.fl-table thead th:nth-child(odd) {
+  color: #ffffff;
+  /*PRIMARY_COLOR*/
+}
+
+.fl-table tr:nth-child(even) {
+  background: #F8F8F8;
+}
+
+/* Responsive */
+
+@media (max-width: 767px) {
+  .fl-table {
+      display: block;
+      width: 100%;
+  }
+  .table-wrapper:before{
+      content: "Scroll horizontally >";
+      display: block;
+      text-align: right;
+      font-size: 11px;
+      color: white;
+      padding: 0 0 10px;
+  }
+  .fl-table thead, .fl-table tbody, .fl-table thead th {
+      display: block;
+  }
+  .fl-table thead th:last-child{
+      border-bottom: none;
+  }
+  .fl-table thead {
+      float: left;
+  }
+  .fl-table tbody {
+      width: auto;
+      position: relative;
+      overflow-x: auto;
+  }
+  .fl-table td, .fl-table th {
+      padding: 20px .625em .625em .625em;
+      height: 60px;
+      vertical-align: middle;
+      box-sizing: border-box;
+      overflow-x: hidden;
+      overflow-y: auto;
+      width: 120px;
+      font-size: 13px;
+      text-overflow: ellipsis;
+  }
+  .fl-table thead th {
+      text-align: left;
+      border-bottom: 1px solid #f7f7f9;
+  }
+  .fl-table tbody tr {
+      display: table-cell;
+  }
+  .fl-table tbody tr:nth-child(odd) {
+      background: none;
+  }
+  .fl-table tr:nth-child(even) {
+      background: transparent;
+  }
+  .fl-table tr td:nth-child(odd) {
+      background: #F8F8F8;
+      border-right: 1px solid #E6E4E4;
+  }
+  .fl-table tr td:nth-child(even) {
+      border-right: 1px solid #E6E4E4;
+  }
+  .fl-table tbody td {
+      display: block;
+      text-align: center;
+  }
+}
+
+.pagination_footer ul {
+  width: fit-content;
+  margin-left: auto;
+  margin-right: 10px;
+}
+
+.pagination_footer ul li {
+  margin: 6px;
+}
+
+.pagination_header {
+  width: fit-content;
+  margin-left: auto;
+  margin-right: 10px;
+  margin-bottom: 3px;
+}

data/lib/assets/icons/show.icon

@@ -0,0 +1 @@
+data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEkAAAArCAIAAAC7LTLaAAAACXBIWXMAABYlAAAWJQFJUiTwAAACiElEQVRo3u1aO67rIBDlSllBpEh06VKyCq8hEpugyQpYQKpZg5v0dClZAWUalC7CUio6InG7yALbYOzkXaHnNplhzsyZD58f7z362Nd13e12u9/v8U/7/f5wOOx2u8+tjvzan1IKAJqmyTSgaRoAUEqtbglaERJjbKGjGWMrgvxZyMnX63W5XE6n0+PxmIhMwL2u667X69j/Mcbn8/l4PG42m3/DSWst53zMOM65lNJaO61BSsk5xxgP6uGcT2tYn5POubZtY1MIIQCgtS7QqbUGAEJIrLZtW+fcN7BJKWM3U0rXyhOlFKU0JoKU8oPYrLXxqpTSskAlwzi41iyKouJwNU2TRGWMEUIMWimEMMYkEQa9ZFYAUU52BcUdYyyEmCs1VvSTuSSECNyaI5XGZowJ8psxliSGUmqs9A0W1WSuWmsDTxFCkmFH+TzM4YNzDgBiBgKAlFJrLaUEgJilAJAMxVx70AQTguxK+sl7HwCbIE9MWgBI6jfGBBk4kR3D2IKmzDnP4bdSahbTYvbmiDjnYvNysQWSmXXJOfe2EmOc323LBKWUSXhoAtisgtsn2Nw+3g84Y6ysLcXw0ASwnAR7p0GBcWOumbXuBDy0HFhQeMpmP+dcTnmYBQ8tB+a9f9d0SmnxnFWsZAwe8t73h/oCYP0dYE4dz+kfc2UDeG3beu9Rv+CUAetjK5jWB0tfgXgAT0qJ+iNVsWVvDUv2BFrrt56yLWnfO4SQquNWc75VXicr72+VzyWVz5OV7wMq379Vvu+u/Lyk8nOuys8nKz9XXvE+IL8xfPU+YCKANdzj9N1f5/1bn6J//N70/313Xp78tXcKNb8vWcrJWe+Cns/ndrv92rugX48eV9CIZ3WwAAAAAElFTkSuQmCC

data/lib/assets/js/table_template.js

@@ -0,0 +1,141 @@
+getPagination('#table-id');
+
+function getPagination(table) {
+  var lastPage = 1;
+
+  $('#maxRows')
+    .on('change', function(evt) {
+      //$('.paginationprev').html('');						// reset pagination
+
+     lastPage = 1;
+      $('.pagination')
+        .find('li')
+        .slice(1, -1)
+        .remove();
+      var trnum = 0; // reset tr counter
+      var maxRows = parseInt($(this).val()); // get Max Rows from select option
+
+      if (maxRows >= 5000) {
+        $('.pagination').hide();
+      } else {
+        $('.pagination').show();
+      }
+
+      var totalRows = $(table + ' tbody tr').length; // numbers of rows
+      $(table + ' tr:gt(0)').each(function() {
+        // each TR in  table and not the header
+        trnum++; // Start Counter
+        if (trnum > maxRows) {
+          // if tr number gt maxRows
+
+          $(this).hide(); // fade it out
+        }
+        if (trnum <= maxRows) {
+          $(this).show();
+        } // else fade in Important in case if it ..
+      }); //  was fade out to fade it in
+      if (totalRows > maxRows) {
+        // if tr total rows gt max rows option
+        var pagenum = Math.ceil(totalRows / maxRows); // ceil total(rows/maxrows) to get ..
+        //	numbers of pages
+        for (var i = 1; i <= pagenum; ) {
+          // for each page append pagination li
+          $('.pagination #prev')
+            .before(
+              '<li style=\'cursor: pointer; display: inline-block;\' data-page="' +
+                i +
+                '">\
+								  <span>' +
+                i++ +
+                '<span class="sr-only">(current)</span></span>\
+								</li>'
+            )
+            .show();
+        } // end for i
+      } // end if row count > max rows
+      $('.pagination [data-page="1"]').addClass('active'); // add active class to the first li
+      $('.pagination li').on('click', function(evt) {
+        // on click each page
+        evt.stopImmediatePropagation();
+        evt.preventDefault();
+        var pageNum = $(this).attr('data-page'); // get it's number
+
+        var maxRows = parseInt($('#maxRows').val()); // get Max Rows from select option
+
+        if (pageNum == 'prev') {
+          if (lastPage == 1) {
+            return;
+          }
+          pageNum = --lastPage;
+        }
+        if (pageNum == 'next') {
+          if (lastPage == $('.pagination li').length - 2) {
+            return;
+          }
+          pageNum = ++lastPage;
+        }
+
+        lastPage = pageNum;
+        var trIndex = 0; // reset tr counter
+        $('.pagination li').removeClass('active'); // remove active class from all li
+        $('.pagination [data-page="' + lastPage + '"]').addClass('active'); // add active class to the clicked
+        // $(this).addClass('active');					// add active class to the clicked
+	  	limitPagging();
+        $(table + ' tr:gt(0)').each(function() {
+          // each tr in table not the header
+          trIndex++; // tr index counter
+          // if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out
+          if (
+            trIndex > maxRows * pageNum ||
+            trIndex <= maxRows * pageNum - maxRows
+          ) {
+            $(this).hide();
+          } else {
+            $(this).show();
+          } //else fade in
+        }); // end of for each tr in table
+      }); // end of on click pagination list
+	  limitPagging();
+    })
+    .val(5)
+    .change();
+
+  // end of on select change
+
+  // END OF PAGINATION
+}
+
+function limitPagging(){
+	// alert($('.pagination li').length)
+
+	if($('.pagination li').length > 7 ){
+			if( $('.pagination li.active').attr('data-page') <= 3 ){
+			$('.pagination li:gt(5)').hide();
+			$('.pagination li:lt(5)').show();
+			$('.pagination [data-page="next"]').show();
+		}if ($('.pagination li.active').attr('data-page') > 3){
+			$('.pagination li:gt(0)').hide();
+			$('.pagination [data-page="next"]').show();
+			for( let i = ( parseInt($('.pagination li.active').attr('data-page'))  -2 )  ; i <= ( parseInt($('.pagination li.active').attr('data-page'))  + 2 ) ; i++ ){
+				$('.pagination [data-page="'+i+'"]').show();
+
+			}
+
+		}
+	}
+}
+
+$(function() {
+  // Just to append id number for each row
+  $('#table-id tr:eq(0)').prepend('<th></th>');
+
+  var id = 0;
+
+  $('#table-id tr:gt(0)').each(function() {
+    id++;
+    $(this).prepend('<td>' + id + '</td>');
+  });
+});
+
+//  Developed By Yasser Mas
+// yasser.mas2@gmail.com

data/lib/html_table.rb

@@ -0,0 +1,220 @@
+# frozen_string_literal: true
+
+require 'active_support/all'
+require 'securerandom'
+
+##
+# Manage HTML table
+#
+class HtmlTable
+  #
+  # Constants
+  #
+  DEFAULT_COLOR = '#5bc0de'
+  DEFAULT_PAGINATION_OPTIONS = [5, 10, 20, 40].freeze
+
+  #
+  # Virtual attributes
+  #
+
+  attr_accessor :attributes, :base_url, :pagination_options, :primary_color, :resources, :resources_class,
+                :resources_count, :secondary_color, :show_resource_link, :table_id
+
+  ##
+  # Initialize class
+  #
+  def initialize(resources_class, resources, attributes, params = {})
+    @attributes = attributes&.to_a
+    @resources = resources&.to_a
+    @resources_class = resources_class
+    @resources_count = resources.size
+    @base_url = params[:base_url]
+    @table_id = params[:table_id] || SecureRandom.hex
+    @show_resource_link = params[:show_resource_link] != false && resources_class.method_defined?('id')
+    @pagination_options = params[:pagination_options] || DEFAULT_PAGINATION_OPTIONS
+    @primary_color = params[:primary_color] || DEFAULT_COLOR
+    @secondary_color = params[:secondary_color] || DEFAULT_COLOR
+  end
+
+  ##
+  # Generate HTML table
+  #
+  def generate!
+    return '' if invalid_data
+
+    complete_css + complete_div + complete_js
+  end
+
+  private
+
+  ##
+  # Complete table css
+  #
+  def complete_css
+    "<style>#{css_file}</style>"
+  end
+
+  ##
+  # Complete table divs
+  #
+  def complete_div
+    "<div class='table-wrapper'>
+      #{pagination_header}
+      <table class='fl-table' id='#{table_id}'>
+          <thead>
+            <tr>#{table_head}</tr>
+          </thead>
+          <tbody>
+            #{table_body}
+          <tbody>
+      </table>
+    </div>
+    #{pagination_footer}"
+  end
+
+  ##
+  # Complete table JS
+  #
+  def complete_js
+    "<script>#{js_file}</script>"
+  end
+
+  ##
+  # Pagination header
+  #
+  def pagination_header
+    "<div class='pagination_header'>Registros por página:
+      <select name='state' id='#{table_id}maxRows'>
+        <option value='#{resources_count}'>Mostrar Todos</option>
+        #{ pagination_options.map do |pagination_option|
+             "<option value='#{pagination_option}'>#{pagination_option}</option>"
+           end }
+      </select>
+    </div>"
+  end
+
+  ##
+  # Pagination Footer
+  #
+  def pagination_footer
+    "<div class='pagination_footer'><nav>
+        <ul class='#{table_id}pagination'>
+          <li style='cursor: pointer; display: inline-block;' data-page='prev'>
+            <span> <b><</b> <span class='sr-only'>(current)</span></span>
+          </li>
+          <li style='cursor: pointer; display: inline-block;' data-page='next' id='prev'>
+            <span> <b>></b> <span class='sr-only'>(current)</span></span>
+          </li>
+        </ul>
+      </nav></div>"
+  end
+
+  ##
+  # Table head
+  #
+  def table_head
+    block = String.new
+    attributes.each do |attribute|
+      block << '<th>' << head_cell_value(attribute) << '</th>'
+    end
+    block << "<th id='#{attributes.size.odd? ? 'fl-table-odd' : 'fl-table-even'}'></th>" if show_resource_link
+    block
+  end
+
+  ##
+  # Head cell value
+  #
+  def head_cell_value(attribute)
+    return '-' if attribute.blank?
+
+    result = if resources_class.respond_to?('translated_field')
+               resources_class.translated_field(attribute.to_s)
+             else
+               attribute
+             end
+    (result.present? ? result : '-').to_s.titleize
+  end
+
+  ##
+  # Table body
+  #
+  def table_body
+    block = String.new
+    resources.each do |resource|
+      block << '<tr>'
+      attributes.each do |attribute|
+        block << '<td>' << body_cell_value(resource, attribute) << '</td>'
+      end
+      block << resource_link(resource) if show_resource_link
+      block << '</tr>'
+    end
+    block
+  end
+
+  ##
+  # Body cell value
+  #
+  def body_cell_value(resource, attribute)
+    return '-' if resource.blank? || attribute.blank?
+
+    result = if resource.respond_to?('enum_translation')
+               resource.send('enum_translation', attribute, resource.send(attribute))
+             else
+               resource.send(attribute)
+             end
+    result.present? ? result : '-'
+  end
+
+  ##
+  # Generate link to resource
+  #
+  def resource_link(resource, size = 0.4)
+    block = String.new
+    block << "<td width='#{146 * size}px'>"
+    block << "<a href='#{base_url}/admin/#{resource.class.name.underscore}/#{resource.id}' target='_blank'>"
+    block << "<img width='#{73 * size}px' height='#{43 * size}px'
+              src='#{resource_link_icon}'>"
+    block << '</a></td>'
+    block
+  end
+
+  ##
+  # Open show icon
+  #
+  def resource_link_icon
+    File.open("#{__dir__}/assets/icons/show.icon").read
+  end
+
+  ##
+  # Parsed CSS file
+  #
+  def css_file
+    File.open("#{__dir__}/assets/css/table_template.css")
+        .read
+        .gsub('/*PRIMARY_COLOR*/', "background: #{primary_color};")
+        .gsub('/*SECONDARY_COLOR*/', "background: #{secondary_color};")
+  end
+
+  ##
+  # Parsed JS file
+  #
+  def js_file
+    js_file = File.open("#{__dir__}/assets/js/table_template.js").read
+    js_file.gsub('table-id', table_id)
+           .gsub('pagination', "#{table_id}pagination")
+           .gsub('maxRows', "#{table_id}maxRows")
+           .gsub('5000', resources_count.to_s)
+  end
+
+  ##
+  # Check if all parameters is valid
+  #
+  def invalid_data
+    if !resources.is_a?(Array) || !attributes.is_a?(Array)
+      true
+    elsif [resources_class, resources, attributes, table_id].any?(&:blank?) || attributes.any?(&:blank?)
+      true
+    end
+    false
+  end
+end

metadata

@@ -0,0 +1,60 @@
+--- !ruby/object:Gem::Specification
+name: ruby-html-table
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Arthur Ferraz
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2021-04-06 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: activesupport
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 4.2.6
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 4.2.6
+description: A simple gem to generate a HTML table based on object array
+email: guidance.team.dev@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/assets/css/table_template.css
+- lib/assets/icons/show.icon
+- lib/assets/js/table_template.js
+- lib/html_table.rb
+homepage: ''
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '2.6'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.1.4
+signing_key: 
+specification_version: 4
+summary: HTML Table
+test_files: []