rx/presenters

View on GitHub
app/demo/components/tables.pom

Summary

Maintainability
Test Coverage
require_relative '../helpers/indented_grid'

Voom::Presenters.define(:tables) do
  helpers Demo::Helpers::IndentedGrid
  attach :top_nav
  attach :component_drawer
  page_title 'Tables'

  helpers do
    def items
      [
          OpenStruct.new(id: 1, material: 'Acrylic (Transparent)', quantity: 50, price: '$2.90'),
          OpenStruct.new(id: 2, material: 'Plywood (Birch)', quantity: 10, price: '$1.25'),
          OpenStruct.new(id: 3, material: 'Laminate (Gold on Blue)', quantity: 50, price: '$2.35')
      ]
    end

    def drivers
      [
          OpenStruct.new(name: 'Kimi Räikkönen', team: 'Scuderia Ferrari', country: 'Finland'),
          OpenStruct.new(name: 'Daniel Ricciardo', team: 'Red Bull', country: 'Australia'),
          OpenStruct.new(name: 'Lewis Hamilton', team: 'Mercedes', country: 'Great Britain'),
          OpenStruct.new(name: 'Fernando Alonso', team: 'Mclaren', country: 'Spain'),
          OpenStruct.new(name: 'Charles LeClerc', team: 'Sauber', country: 'Monaco')
      ]
    end
  end

  indented_grid do
    content padding: :bottom3 do
      title 'Non-Selectable'
      table do
        header do
          column 'Name'
          column 'Team'
          column 'Country'
        end
        drivers.each do |driver|
          row do
            column driver.name
            column driver.team
            column driver.country
          end
        end
        pagination page_size: 5,
                   total: drivers.count,
                   current_page: context.fetch(:page) { 1 },
                   replace_id: 'drivers',
                   replace_presenter: 'drivers_presenter'
      end
    end

    content padding: [:top3, :bottom3] do
      title 'Headerless Table'
      table do
        drivers.each do |driver|
          row do
            column driver.name
            column driver.team
            column driver.country
          end
        end
      end
    end

    grid padding: :top3 do
      column 6 do
        form do
          title 'Selectable (with form)'
          content padding: :bottom2 do
            table selectable: true do
              header do
                column 'Material'
                column 'Quantity'
                column 'Unit price'
              end
              items.each do |item|
                row name: :id, value: item.id do
                  column item.material
                  column item.quantity
                  column item.price
                end
              end
            end
          end
          button 'SUBMIT', type: :raised do
            event :click do
              replaces :context_list, :context_list
            end
          end
        end
      end
      column 6 do
        attach :context_list
      end
    end

    grid wide: true do
      column 12 do
        title 'Wide (scrollable)', id: :scrollable
        table do
          header do
            (1..18).each do |idx|
              column "Column #{idx}"
            end
          end
          items.each do |item|
            row do
              (1..6).each do
                column item.material
                column item.quantity
                column item.price
              end
            end
          end
        end
      end
    end
    attach :code, file: __FILE__
  end
end