matestack-ui-bootstrap 1.4.0

data/app/concepts/matestack/ui/bootstrap/components/tooltip.js

@@ -0,0 +1,26 @@
+import * as bootstrap from 'bootstrap'
+
+MatestackUiCore.Vue.component('matestack-ui-bootstrap-tooltip', {
+
+  mixins: [MatestackUiCore.componentMixin],
+  data() {
+    return {
+      // tooltipInstance: undefined
+
+    };
+  },
+  methods: {
+
+  },
+  mounted: function() {
+    const self = this;
+    var tooltip = self.$el
+    self.tooltipInstance = new bootstrap.Tooltip(tooltip)
+  }
+  // created: function() {
+  // },
+
+  // beforeDestroy: function() {
+
+  // },
+});

data/app/concepts/matestack/ui/bootstrap/components/tooltip.rb

@@ -0,0 +1,82 @@
+class Matestack::Ui::Bootstrap::Components::Tooltip < Matestack::Ui::VueJsComponent
+  vue_js_component_name "matestack-ui-bootstrap-tooltip"
+
+  DATA_ALIAS_ATTRIBUTES = %i[container delay selector html template fallback_placement]
+
+  DATA_ALIAS_ATTRIBUTES.each do |attribute|
+    optional "#{attribute}": { as: :"bs_#{attribute}"}
+  end
+
+  # TODO:
+  # for security reasons the sanitize, sanitizeFn and whiteList options cannot be supplied using data attributes.
+  # sanitize sanitize_fn white_list
+  # optional :content
+  optional :tag
+  optional class: { as: :bs_class }
+  optional id: { as: :bs_id }
+  DATA_ATTRIBUTES = %i[title text variant animation placement tabindex trigger boundary offset popper_config]
+  optional *DATA_ATTRIBUTES
+
+  def response
+    case tag
+    when :div
+      div tooltip_attributes do
+        element_partial
+      end
+    when :span
+      span tooltip_attributes  do
+        element_partial
+      end
+    when :link
+      link tooltip_attributes
+    else
+      bs_btn tooltip_attributes
+    end
+  end
+
+  protected
+
+  def element_partial
+    if options[:slots] && options[:slots][:element]
+      slot options[:slots][:element]
+    else
+      bs_btn variant: variant, attributes: { 'style': "pointer-events: none;" }, text: text
+    end
+  end
+
+  def tooltip_attributes
+    attributes = {}.tap do |hash|
+      hash[:class] = tooltip_classes
+      hash[:style] = variant if (tag == :button or !tag.present?)
+
+      hash[:attributes] = { role: "button", title: "#{title}", tabindex: "#{tabindex}" } if (tag == :link or tag == :a)
+
+      hash[:text] = text if text.present?
+
+      hash[:data] = {}.tap do |hash|
+        DATA_ALIAS_ATTRIBUTES.each do |attribute|
+          hash["bs-#{attribute}"] = self.send(:"bs_#{attribute}") if self.send(:"bs_#{attribute}")
+        end
+        DATA_ATTRIBUTES.each do |attribute|
+          hash["bs-#{attribute}"] = self.send(:"#{attribute}") if self.send(:"#{attribute}")
+        end
+        hash["bs-toggle"] = "tooltip"
+        hash["bs-type"] = tag
+        # hash[:'original-title'] = content
+      end
+    end
+    html_attributes.merge(
+      attributes
+    )
+  end
+
+  def tooltip_classes
+    [].tap do |classes|
+      classes << "d-inline-block" if (tag == :span or tag == :div)
+      classes << "btn btn-#{variant || 'link'}" if (tag == :link or !tag.present?)
+
+      classes << bs_class
+    end.join(' ').strip
+  end
+
+end

data/app/concepts/matestack/ui/bootstrap/content/collection/collection.rb

@@ -0,0 +1,112 @@
+class Matestack::Ui::Bootstrap::Content::Collection::Collection < Matestack::Ui::Component
+  include Matestack::Ui::Core::Collection::Helper
+  include Matestack::Ui::Bootstrap::Content::Collection::Content
+  include Matestack::Ui::Bootstrap::Content::Collection::Filter
+  include Matestack::Ui::Bootstrap::Content::Collection::Paginate
+
+  # html attributes
+  optional id: { as: :bs_id }
+
+  # table configuration
+  optional :items
+  optional :columns
+  optional :filters
+  optional :footer
+  optional :paginate
+  optional :rerender_on
+  optional :item_actions_proc
+  optional :collection_rendering_proc
+  optional :slots
+
+  # bootstrap settings
+  optional :responsive
+  optional :variant
+  optional :striped
+  optional :hoverable
+  optional :border_variant
+  optional :borderless
+
+  attr_accessor :processed_filters
+
+  def response
+    div class: "smart-collection" do
+      filter_partial
+      content
+    end
+  end
+
+
+  private
+
+  def collection
+    return @collection if @collection
+    settings = {}.tap do |h|
+      h[:id] = bs_id || "smartcollection"
+      h[:data] = filtered_query
+      h[:base_count] = items.count
+      h[:init_limit] = paginate if paginate
+      h[:filtered_count] = filtered_query.count if paginate
+    end
+    @collection = set_collection(settings)
+  end
+
+  def collection_id
+    collection.config[:id]
+  end
+
+  def filtered_query
+    return @filtered_query if @filtered_query
+    @filtered_query = items
+    filters.select { |key, value| '.'.in? key.to_s }.each do |key, value|
+      associated_name = key.to_s.split(".").first
+      @filtered_query = @filtered_query.joins(associated_name.to_sym).all
+      if value.is_a?(Hash)
+        processed_filters[key] = value
+        @filtered_query = add_query_filter(@filtered_query, associated_name, key, value)
+      end
+    end
+    filters.reject { |key, value| '.'.in? key.to_s }.each do |key, value|
+      if value.is_a?(Hash)
+        processed_filters[key] = value
+        @filtered_query = add_query_filter(@filtered_query, nil, key, value)
+      end
+    end
+    @filtered_query
+  end
+
+  def add_query_filter(query, associated_name, key, filter_config)
+    value = get_collection_filter(collection_id)[key.to_sym]
+    if value.present?
+      if associated_name.present?
+        table_name = items.klass.reflections[associated_name].table_name
+        key = key.to_s.gsub(associated_name, table_name)
+      else
+        table_name = items.klass.table_name
+        key = key.to_s
+      end
+      case filter_config[:match]
+      when :equals
+        query = query.where("#{key}": value)
+      when :starts_with
+        query = query.where("lower(#{key}) LIKE ?", "#{value.downcase}%")
+      when :ends_with
+        query = query.where("lower(#{key}) LIKE ?", "%#{value.downcase}")
+      when :like
+        query = query.where("lower(#{key}) LIKE ?", "%#{value.downcase}%")
+      else
+        query = query.where("#{key}": value)
+      end
+    end
+    query
+  end
+
+  def head_columns
+    columns.map { |key, value| value.is_a?(Hash) ? value[:heading] : value }
+  end
+
+  def processed_filters
+    @filters ||= {}
+  end
+
+
+end

data/app/concepts/matestack/ui/bootstrap/content/collection/collection.scss

@@ -0,0 +1,10 @@
+.smart-collection{
+  .pagination{
+    .page-item{
+      cursor: pointer;
+    }
+    .page-item.disabled{
+      cursor: initial;
+    }
+  }
+}

data/app/concepts/matestack/ui/bootstrap/content/collection/content.rb

@@ -0,0 +1,101 @@
+module Matestack::Ui::Bootstrap::Content::Collection::Content
+
+  def content
+    bs_row id: 'content' do
+      bs_col do
+        async id: collection_id, rerender_on: "#{collection_id}-update, #{rerender_on} " do
+          collection_content collection.config do
+            div class: responsive_class do
+              if slots && slots[:collection_rendering]
+                slot slots[:collection_rendering].call(collection.paginated_data)
+              elsif columns
+                div class: "table-responsive" do
+                  table table_attributes do
+                    table_head
+                    table_body
+                    table_footer
+                  end
+                end
+              end
+            end
+            paginate_partial if paginate.present?
+          end
+        end
+      end
+    end
+  end
+
+  def table_head
+    thead do
+      tr do
+        columns&.each do |key, value|
+          th text: value.is_a?(Hash) ? value[:heading] : value, class: cell_class(value), attributes: { scope: :col }
+        end
+        th if slots && slots[:table_item_actions]
+      end
+    end
+  end
+
+  def table_body
+    tbody do
+      collection.paginated_data.each_with_index do |data, index|
+        tr class: 'align-middle' do
+          columns.each do |key, value|
+            cell(data, key, value)
+          end
+          if slots && slots[:table_item_actions]
+            td class: 'text-end' do
+              slot slots[:table_item_actions].call(data)
+            end
+          end
+        end
+      end
+    end
+  end
+
+  def table_footer
+    tfoot do
+      tr do
+        footer&.each do |value|
+          td text: value
+        end
+      end
+    end if footer
+  end
+
+  private
+
+  def cell(data, key, value)
+    td text: cell_text(data, key, value), class: cell_class(value)
+  end
+
+  def cell_class(value)
+    [].tap do |classes|
+      classes << "text-#{value[:text]}" if value[:text]
+      classes << "align-#{value[:align]}" if value[:align]
+    end.join(' ') if value.is_a? Hash
+  end
+
+  def cell_text(data, key, value)
+    text = data.instance_eval(key.to_s)
+    text = value[:format].call(text) if value.is_a?(Hash) && value[:format]
+    text
+  end
+
+  def table_attributes
+    klass = ['table'].tap do |classes|
+      classes << "table-#{variant}" if variant
+      classes << "table-striped" if striped
+      classes << "table-hover" if hoverable
+      classes << "table-bordered border-#{border_variant}" if border_variant
+      classes << "table-borderless" if borderless
+    end.join(' ').strip
+    { id: collection_id, class: klass }
+  end
+
+  def responsive_class
+    return unless responsive
+    responsive === true ? 'table-responsive' : "table-responsive-#{responsive}"
+  end
+
+end

data/app/concepts/matestack/ui/bootstrap/content/collection/filter.rb

@@ -0,0 +1,33 @@
+module Matestack::Ui::Bootstrap::Content::Collection::Filter
+
+  def filter_partial
+    collection_filter collection.config do
+      bs_row class: 'mt-2 mb-4' do
+        div class: 'col-auto' do
+          bs_row do
+            processed_filters.each do |key, config|
+              bs_col do
+                filter_input key, config
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+
+  def filter_input(key, config)
+    attributes = {
+      key: key,
+      type: :text,
+      placeholder: config[:placeholder] || key.to_s,
+    }
+    case config[:type]
+    when :select
+      collection_filter_select attributes.merge(class: 'form-select', options: config[:options])
+    else
+      collection_filter_input attributes.merge(class: 'form-control')
+    end
+  end
+
+end

data/app/concepts/matestack/ui/bootstrap/content/collection/paginate.rb

@@ -0,0 +1,92 @@
+module Matestack::Ui::Bootstrap::Content::Collection::Paginate
+
+  def paginate_partial
+    div class: "current-pagination-state ps-2" do
+      small do
+        plain "showing #{@collection.from}"
+        plain "to #{@collection.to}"
+        plain "of #{@collection.filtered_count}"
+        if (@collection.base_count - @collection.filtered_count) > 0
+          plain "(#{@collection.base_count - @collection.filtered_count} hidden by filter)"
+        end
+      end
+    end
+    pagination_nav_partial
+  end
+
+  def pagination_nav_partial
+    nav class: "table-responsive", attributes: { style: "display: -webkit-box;" } do
+      ul class: ul_classes do
+        li class: "page-item #{ 'disabled' if current_page == 1 }" do
+          collection_content_previous class: 'page-link' do
+            bs_icon name: "chevron-left", size: 10
+          end
+        end
+        if @collection.pages.count >= 9 && current_page > 5
+          li class: "page-item" do
+            collection_content_page_link class: 'page-link', page: 1 do
+              plain 1
+            end
+          end
+          unless current_page == 6
+            li class: "page-item disabled" do
+              link class: 'page-link', path: "#" do
+                plain "..."
+              end
+            end
+          end
+        end
+        @collection.pages.each do |page|
+          if (current_page-page).abs < 5
+            li class: "page-item #{ 'active' if current_page == page }" do
+              collection_content_page_link class: 'page-link', page: page do
+                plain page
+              end
+            end
+          end
+        end
+        if @collection.pages.count >= 9 && last_page-current_page > 4
+          unless current_page == last_page-5
+            li class: "page-item disabled" do
+              link class: 'page-link', path: "#" do
+                plain "..."
+              end
+            end
+          end
+          li class: "page-item" do
+            collection_content_page_link class: 'page-link', page: last_page do
+              plain last_page
+            end
+          end
+        end
+        li class: "page-item #{ 'disabled' if current_page == last_page }" do
+          collection_content_next class: 'page-link' do
+            bs_icon name: "chevron-right", size: 10
+          end
+        end
+      end
+    end
+  end
+
+  def ul_classes
+    [].tap do |classes|
+      classes << "pagination"
+      classes << "justify-content-end"
+      classes << "mt-3"
+    end.join(' ').strip
+  end
+
+  def current_page
+    current_offset = params["#{bs_id}-offset"].try(:to_i)
+    (current_offset/paginate)+1 if current_offset && paginate.present?
+  end
+
+  def last_page
+    if @collection.filtered_count%paginate == 0
+      (@collection.filtered_count/paginate)
+    else
+      (@collection.filtered_count/paginate)+1
+    end
+  end
+
+end