f_components 0.2.1

data/app/components/f_components/resource_table/component.rb

@@ -0,0 +1,139 @@
+# frozen_string_literal: true
+
+module FComponents
+  module ResourceTable
+    class Component < Base
+      attributes :attributes, :resources, resource_class: nil, resource_path: nil,
+                                          class: nil, selectable: {}, actions: true
+
+      private
+
+      def table_header
+        tag.thead do
+          tag.tr class: 'text-left border-b-2 border-gray-lt' do
+            row = table_headers
+            row.prepend(tag.th(class: 'py-3 px-7 w-2') { nil }) if selectable.present?
+            row.append(tag.th(class: 'py-4 px-7')) if actions
+
+            safe_join(row)
+          end
+        end
+      end
+
+      def table_headers
+        attributes.map do |attribute|
+          tag.th(class: 'py-4 px-7') { attribute_name(attribute) }
+        end
+      end
+
+      def table_row(resource, class:)
+        tag.tr class: binding.local_variable_get(:class) do
+          row = []
+          row.prepend(tag.td(class: 'py-3 px-7') { form_check_box(resource) }) if selectable.present?
+          row.append(table_rows(resource))
+          row.append(link_to_resource(resource)) if actions
+
+          safe_join(row)
+        end
+      end
+
+      def table_rows(resource)
+        attributes.map { |attribute| tag.td(class: 'py-3 px-7') { row_value(resource, attribute) } }
+      end
+
+      def mobile_header(resource, class:, &block)
+        collapsible_title = row_value(resource, attributes.first, class: 'font-bold text-sm')
+
+        if selectable.present?
+          check_box = form_check_box(resource)
+          collapsible_title = tag.div(class: 'w-full flex space-x-4 items-center') { check_box + collapsible_title }
+        end
+
+        fcomponent(:collapsible, summary: collapsible_title, class: binding.local_variable_get(:class), &block)
+      end
+
+      def mobile_rows(resource, class:)
+        tag.div class: binding.local_variable_get(:class) do
+          safe_join(other_attributes.map { |attribute| row(resource, attribute) })
+        end
+      end
+
+      def link_to_resource(resource, display_as: :link)
+        path = resource_path.present? ? resource_path.(resource) : resource
+        return tag.td(class: 'py-3 px-7') { link_to('Detalhes', path) } if display_as == :link
+
+        fcomponent :button, 'Detalhes', path, type: :secondary, mods: [:sm], class: 'mt-7 mx-auto'
+      end
+
+      def other_attributes
+        Array(attributes[1..])
+      end
+
+      def row(resource, attribute)
+        tag.div(class: 'flex items-center text-sm') do
+          row_label(attribute) + row_value(resource, attribute)
+        end
+      end
+
+      def row_label(attribute)
+        tag.strong(class: 'w-20 min-w-20 mr-8') { attribute_name(attribute) }
+      end
+
+      def row_value(resource, attribute, class: nil)
+        if (attr_value = attribute_value(resource, attribute))
+          tag.p(class: "max-w-5/6 #{binding.local_variable_get(:class)}") do
+            format_attribute_value(attribute, attr_value)
+          end
+        else
+          attribute_fallback
+        end
+      end
+
+      def format_attribute_value(attribute, value)
+        return value.to_s unless resource_class.defined_enums.has_key?(attribute.to_s)
+
+        resource_class.human_enum_name(attribute.to_s, value)
+      end
+
+      def attribute_name(attribute)
+        resource_class.human_attribute_name(attribute)
+      end
+
+      def attribute_value(resource, attribute)
+        resource.public_send(attribute)
+      end
+
+      def attribute_fallback
+        @attribute_fallback ||= tag.p(class: 'text-red') { 'Dados insuficientes' }
+      end
+
+      def resource_class
+        @resource_class ||=
+          case resources.class.to_s
+          when 'ActiveRecord::Relation'
+            resources.model
+          when 'Draper::CollectionDecorator'
+            resources.object.model
+          else
+            resources.first.class
+          end
+      end
+
+      def table_layout
+        selectable.present? ? 'md:table md:table-fixed' : 'md:table'
+      end
+
+      def resources_class_name
+        resource_class.to_s.parameterize(separator: '_')
+      end
+
+      def form
+        selectable[:form]
+      end
+
+      def form_check_box(resource)
+        form.check_box(resources_class_name, { multiple: true }, resource.id, nil)
+      end
+    end
+  end
+end

data/app/components/f_components/table/component.html.erb

@@ -0,0 +1,23 @@
+<div data-controller="f-table-component">
+  <%=
+    desktop_table(
+      columns: columns,
+      rows: rows,
+      actions: @actions,
+      check_boxes: @check_boxes,
+      **@options
+    )
+  %>
+
+  <%=
+    mobile_table(
+      columns: columns,
+      rows: rows,
+      main_column: @main_column,
+      actions: @actions,
+      check_boxes: @check_boxes,
+      resources: @resources,
+      **@options
+    )
+  %>
+</div>

data/app/components/f_components/table/component.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module FComponents
+  module Table
+    class Component < Base
+      renders_one :desktop_table, Table::Desktop::Component
+      renders_one :mobile_table, Table::Mobile::Component
+
+      def initialize(options)
+        @options = options
+        @values = {}
+        @actions = []
+        @check_boxes = []
+        @main_column = nil
+        @current_resource = nil
+        @current_resource_index = 0
+      end
+
+      def self.for(resources, **options, &block)
+        table = new(options)
+        table.build(resources, &block)
+
+        table
+      end
+
+      def column(name, id: nil, main: false)
+        if main
+          @main_column = main.is_a?(Proc) ? main : name
+        end
+
+        @values[name] ||= []
+
+        return if @current_resource.blank?
+
+        @values[name] << { id: id, column_index: @current_resource_index, cell_content: yield(@current_resource).to_s }
+      end
+
+      def check_box(name:, value:, checked: false, **options)
+        value = value.(@current_resource) if value.respond_to? :call
+        checked = checked.(@current_resource) if checked.respond_to? :call
+
+        parsed_options = options
+
+        options.each do |k, v|
+          parsed_options[k] = v.(@current_resource) if v.respond_to? :call
+        end
+
+        parsed_options[:id] ||= "#{sanitize_to_id(name)}#{value}"
+
+        @check_boxes << check_box_tag(name, value, checked, **parsed_options)
+      end
+
+      def action
+        action = yield(@current_resource)
+
+        @actions[@current_resource_index] ||= []
+        @actions[@current_resource_index] << action
+      end
+
+      def build(resources)
+        @resources = resources.presence || [nil]
+        @resources.each_with_index do |resource, i|
+          @current_resource = resource
+          @current_resource_index = i
+
+          yield(self, @current_resource)
+        end
+      end
+
+      private
+
+      def columns
+        @values.keys
+      end
+
+      def rows
+        @values.values.transpose
+      end
+
+      # This was copied from Rails, since it's not a public API
+      # Source:
+      # https://github.com/rails/rails/blob/d305be07428a8e86e2736b57f839680c9e970293/actionview/lib/action_view/helpers/form_tag_helper.rb#L931
+      def sanitize_to_id(name)
+        name.to_s.delete(']').tr('^-a-zA-Z0-9:.', '_')
+      end
+    end
+  end
+end

data/app/components/f_components/table/component_controller.js

@@ -0,0 +1,84 @@
+import { Controller as BaseController } from '@hotwired/stimulus';
+import { findAll } from '@fretadao/f-js-dom';
+
+export default class extends BaseController {
+  static targets = ['desktopTable', 'mobileTable'];
+
+  connect() {
+    this.toggleDuplicatesHandler = this.toggleDuplicates.bind(this);
+
+    this.checkboxes().forEach(checkbox => {
+      checkbox.addEventListener('change', this.toggleDuplicatesHandler);
+    });
+
+
+    this.syncInputHandler = this.syncInput.bind(this)
+
+    this.inputs().forEach(input => {
+      input.addEventListener('input', this.syncInputHandler);
+    })
+
+    document.dispatchEvent(this.#loadedEvent());
+  }
+
+  disconnect() {
+    this.checkboxes().forEach(checkbox => {
+      checkbox.removeEventListener('change', this.toggleDuplicatesHandler);
+    });
+
+    this.inputs().forEach(input => {
+      input.removeEventListener('change', this.syncInputHandler);
+    })
+  }
+
+  toggleDuplicates(event) {
+    const checkbox = event.currentTarget;
+
+    this.checkboxes({ id: checkbox.id, value: checkbox.value }).forEach(dup => {
+      dup.checked = checkbox.checked;
+    });
+
+    this.element.dispatchEvent(new CustomEvent('checkboxesChanged', { bubbles: true }));
+  }
+
+  syncInput(event) {
+    const input = event.currentTarget;
+
+    this.inputs(input.id).forEach(dup => {
+      dup.value = input.value;
+    });
+
+    this.element.dispatchEvent(new CustomEvent('inputsChanged', { bubbles: true }));
+  }
+
+  checkboxes({ id, value } = {}) {
+    let query = 'input[type=checkbox]';
+
+    if(!!id) {
+      query = `#${id}`;
+    } else if (!!value) {
+      query += `[value="${value}"]`;
+    }
+
+    return findAll(query, this.element);
+  }
+
+  inputs(id = null) {
+    let query = 'input:not([type=checkbox])';
+
+    if(!!id) {
+      query = `#${id}`;
+    }
+
+    return findAll(query, this.element);
+  }
+
+  #loadedEvent() {
+    return new CustomEvent(
+      'f-components-table:loaded',
+      {
+        detail: { desktopTable: this.desktopTableTarget, mobileTable: this.mobileTableTarget }
+      }
+    );
+  }
+}

data/app/components/f_components/table/desktop/component.html.erb

@@ -0,0 +1,25 @@
+<%= tag.table(id: @id, class: "hidden md:w-full md:table md:text-sm #{@class}", **@options) do %>
+  <thead>
+    <tr class="text-left border-b-2 border-gray-lt">
+      <% @columns.each do |header| %>
+        <th class='px-4 py-3'><%= header %></th>
+      <% end %>
+    </tr>
+  </thead>
+
+  <tbody>
+    <% @rows.each_with_index do |row, i| %>
+      <tr class='even:bg-gray-ltr'>
+        <%= check_box_for(resource_index: i) %>
+
+        <% row.each do |cell| %>
+          <td class="px-4 py-3">
+            <%= format_cell(cell) %>
+          </td>
+        <% end %>
+
+        <%= actions(resource_index: i) %>
+      </tr>
+    <% end %>
+  </tbody>
+<% end %>

data/app/components/f_components/table/desktop/component.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module FComponents
+  module Table
+    module Desktop
+      class Component < Base
+        def initialize(**options)
+          @rows = options.delete(:rows)
+          @actions = options.delete(:actions)
+          @check_boxes = options.delete(:check_boxes)
+          @columns = options.delete(:columns)
+          @columns.prepend('') if @check_boxes.present?
+          @columns.push('') if @actions.present?
+          @id = ['desktop-table', options.delete(:id_suffix)].filter_map(&:presence).join('-')
+          @class = options.delete(:class)
+          add_target(options)
+          @options = options
+        end
+
+        def check_box_for(resource_index:)
+          return if @check_boxes.empty?
+
+          tag.td(class: 'py-3 text-center') { @check_boxes[resource_index] }
+        end
+
+        def actions(resource_index:)
+          return if @actions.blank?
+
+          resource_actions = @actions[resource_index]
+
+          tag.td(class: 'py-3 px-4') do
+            actions_for_resource(resource_actions)
+          end
+        end
+
+        def actions_for_resource(resource_actions)
+          fcomponent :dropdown, label: 'Opções', padding: false, icon: 'plus', class: 'w-fit mx-auto' do
+            safe_join(
+              resource_actions.map do |action|
+                tag.div(class: 'text-sm py-3 px-5 even:bg-gray-lt') do
+                  action
+                end
+              end
+            )
+          end
+        end
+
+        def format_cell(value)
+          cell_content = value.is_a?(Hash) ? value[:cell_content] : value
+          return cell_content if cell_content.present? && html?(cell_content)
+
+          cell_id = value[:id].present? ? "#{value[:id]}-desktop-#{value[:column_index]}" : nil
+
+          tag.p(id: cell_id, class: 'max-w-5/6') { cell_content }
+        end
+
+        def html?(test_target)
+          Nokogiri::XML.parse(test_target.to_s).errors.empty?
+        end
+
+        def add_target(options)
+          options ||= {}
+          options[:data] ||= {}
+          options[:data][:f_table_component_target] = 'desktopTable'
+
+          nil
+        end
+      end
+    end
+  end
+end

data/app/components/f_components/table/mobile/component.html.erb

@@ -0,0 +1,8 @@
+<%= tag.div(id: @id, class: "md:hidden #{@class}", **@options) do %>
+  <% rows.each_with_index do |row, i| %>
+    <%= table_head(resource_index: i) do %>
+      <%= table_body(row) %>
+      <%= actions(resource_index: i) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/f_components/table/mobile/component.rb

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+module FComponents
+  module Table
+    module Mobile
+      class Component < Base
+        def initialize(**options)
+          @rows = options.delete(:rows)
+          @actions = options.delete(:actions)
+          @main_column = options.delete(:main_column)
+          @check_boxes = options.delete(:check_boxes)
+          @columns = options.delete(:columns)
+          @id = ['mobile-table', options.delete(:id_suffix)].filter_map(&:presence).join('-')
+          @class = options.delete(:class)
+          @resources = options.delete(:resources)
+          add_target(options)
+          @options = options
+        end
+
+        def table_head(resource_index:, &block)
+          current_resource = @resources[resource_index]
+
+          if @main_column.is_a?(Proc) && current_resource.present?
+            main_header = @main_column.call(current_resource)
+          else
+            main_header_index = @columns.index(@main_column) or invalid_column_error!
+            main_header = tag.strong(class: 'text-sm') do
+              value = @rows[resource_index][main_header_index]
+
+              value.is_a?(Hash) ? value[:cell_content] : value
+            end
+          end
+
+          title = if @check_boxes.present?
+                    @check_boxes[resource_index] + main_header
+                  else
+                    main_header
+                  end
+
+          fcomponent(:collapsible, summary: title, class: 'bg-white border-b border-gray-lt', &block)
+        end
+
+        def rows
+          @rows.map do |row|
+            row.map { |cell| format_cell(cell) }
+          end
+        end
+
+        def table_body(row)
+          tag.div class: 'flex flex-col space-y-5 mt-5' do
+            safe_join(
+              row.each_with_index.map do |value, position|
+                tag.div(class: 'flex items-center text-sm', data: { mobile_col: true }) do
+                  tag.strong(class: 'w-20 min-w-20 mr-8') { @columns[position] } + format_cell(value)
+                end
+              end
+            )
+          end
+        end
+
+        def actions(resource_index:)
+          return if @actions.blank?
+
+          fcomponent :dropdown, label: 'Opções', padding: false, icon: 'plus', class: 'mt-5' do
+            safe_join(
+              @actions[resource_index].map do |action|
+                tag.div(class: 'text-sm py-3 px-5 even:bg-gray-lt') do
+                  action
+                end
+              end
+            )
+          end
+        end
+
+        def format_cell(value)
+          cell_content = value.is_a?(Hash) ? value[:cell_content] : value
+          return cell_content if cell_content.present? && html?(cell_content)
+
+          cell_id = value[:id].present? ? "#{value[:id]}-mobile-#{value[:column_index]}" : nil
+
+          tag.p(id: cell_id, class: 'max-w-5/6') { cell_content }
+        end
+
+        def html?(test_target)
+          Nokogiri::XML.parse(test_target.to_s).errors.empty?
+        end
+
+        def invalid_column_error!
+          raise "Main column '#{@main_column}' not found in #{@columns}. Maybe you forgot to specify a main column?"
+        end
+
+        def add_target(options)
+          options ||= {}
+          options[:data] ||= {}
+          options[:data][:f_table_component_target] = 'mobileTable'
+
+          nil
+        end
+      end
+    end
+  end
+end