feature: Add Avo::Row for more precise layout control

[maxfurman]

Description

I'd like to display more compact resource views in Avo, to help when handling models with many columns. To that end, I've started work on a row component, as per Adrian's advice on Discord. Usage is like so:

panel do
  row do
    field :field_one, as: :text, stacked: true
    field :another_field, as: :text, stacked: true
  end
end

and these fields should all render within one row.

There's still more work to do. Right now it will render all the items in a block but with a large margin against preceding fields, instead of as a row in the fields table with multiple inputs. I don't see a way to inject additional classes into the rendered subfields to set width appropriately. And of course we need tests for this, which I will write when the markup is finalized.

What are your thoughts? Am I on the right track?

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works

[codeclimate]

Code Climate has analyzed commit 1c250ce and detected 0 issues on this pull request.

View more on Code Climate.

[adrianthedev]

@maxfurman please try 2.34.7.pre.1 with the following config.

panel do
  row do
    field ...
    field ...
  end
end

A few things to take into account:

• Those fields will not be present on the Index view, and that's by design. same with tabs and sidebar.
• there's a limitation in having the row, panel, and others inside the "main panel" (where fields generally are displayed, that's why you can use the panel block (or you could use tabs) to display the row

gem 'avo', '2.34.7.pre.1'

[maxfurman]

Looking better now - for this layout in the resource file

  field :id, as: :id
  field :company, as: :belongs_to
  field :group, as: :belongs_to
  panel do
    row do
      field :name_prefix, as: :text
      field :first_name, as: :text
      field :middle_name, as: :text
      field :last_name, as: :text
      field :name_suffix, as: :text
    end
  end
  panel do
    row do
      field :name_prefix, as: :text, html: { class: 'foo'}
      field :first_name, as: :text
      field :middle_name, as: :text
      field :last_name, as: :text
      field :name_suffix, as: :text
    end
  end
  field :email_address, as: :text

I get this layout

Notice how email address is the last field specified, but it gets pulled up into the first panel. I'd like to get all five of the name fields into one row, with appropriate sized inputs for each, and have those rows in the right order in the main panel. How do I get from here to there?

Thanks again for helping me out, I know you're busy with other work.

[adrianthedev]

I forgot to mention something. The rows work best when fields have the stacked: true option.

field :something, as: :something, stacked: true

[adrianthedev]

Yeah, that was the limitation I was telling you about. You can only have fields inside the main panel (for now). We'll take a PR to fix that 😅

Avo picks the fields that can be in the main panel (id, company, group and email) and the rest, it renders after the main panel.

If you want to display the email last you would create the third panel. Or add the field inside the second panel after the row declaration.

Also, you can have two rows inside one panel.