Search code examples
ruby-on-railsrubyactiveadminarbre

Rails 6 Active Admin render Arbre partial within Arbre form partial

  • Ruby 2.7.4
  • Rails 6.1.3.2
  • Active Admin 2.9.0
  • Arbre 1.4.0

I am having trouble rendering a small partial _person_fields.html.arb inside the main form partial _form.html.arb.

I am using the Arbre components columns and column in the partial. But it does not render the expected div elements that make the columns. If I don't use the partial, and place the code directly in _form.html.arb, it works as expected.

If I place a breakpoint inside the partial and run on the console:

columns do
  column do
    "Here"
  end
end

It outputs the expected html with the div column.

The form itself works either way.

My admin resource at app/admin/archives/archives.rb
ActiveAdmin.register Archive do
  config.create_another = true

  [...]

  form partial: "form"
end
My form partial at app/views/admin/archives/_form.html.arb
url = archive.new_record? ? admin_archives_path : admin_archive_path(archive)
active_admin_form_for resource, url: url  do |f|
  [...]
  render "admin/shared/person_fields", f: f
  [...]
  f.actions
end
My partial at app/views/admin/shared/_person_fields.html.arb
f.inputs "Pessoas citadas" do
  columns do
    column do
      f.inputs "Testemunhos citados" do
        f.input :people, collection: Survivor.all, label: false, input_html: { class: "select2-init", style: "width: 100%;", id: "archive_survivor_ids" }
      end
    end
    column do
      f.inputs "Personalidades citados" do
        f.input :people, collection: Personality.all, label: false, input_html: { class: "select2-init", style: "width: 100%;", id: "archive_personality_ids" }
      end
    end
    column do
      f.inputs "Outros citados" do
        f.input :people, collection: Commoner.all, label: false, input_html: { class: "select2-init", style: "width: 100%;", id: "archive_commoner_ids" }
      end
    end
  end
end
Output without the partial
<fieldset class="inputs">
  <legend><span>Pessoas citadas</span></legend>
  <ol>
    <div class="columns">
      <div class="column" style="width: 32%; margin-right: 2%">
        <fieldset class="inputs">[...]</fieldset>
      </div>
      <div class="column" style="width: 32%; margin-right: 2%">
        <fieldset class="inputs">[...]</fieldset>
      </div>
      <div class="column" style="width: 32%">
        <fieldset class="inputs">[...]</fieldset>
      </div>
      <div style="clear: both"></div>
    </div>
  </ol>
</fieldset>

Without the partial

Output with the partial
<fieldset class="inputs">
  <legend><span>Pessoas citadas</span></legend>
  <ol>
    <fieldset class="inputs">[...]</fieldset>
    <fieldset class="inputs">[...]</fieldset>
    <fieldset class="inputs">[...]</fieldset>
  </ol>
</fieldset>

With the partial

Solution

  • From this old github issue, I slightly updated it (using arb and newer syntax):

    # app/admin/dashbords.rb:

    section "My Section" do 
      render partial: "stuff", locals: { context: self }
    end

# app/views/dashboard/_stuff.html.arb:

    context.instance_eval do  

      panel "hello" do
         h2 "world"
      end
    end

    It works inside the form too, as long as you pass f in locals.