Rails - ActiveAdmin - Custom Form display has_many relation as Table

Question

I need your help with a custom form for a new object within activeadmin - rails. My current solution looks like this.

The nested attribute "Belegung" is a has_many association: This is how my form looks

form do |f|
f.inputs "Hardware Details" do
  f.input :serial_nr, :label => "Seriennummer:"
  f.input :name, :label => "Name:"
  f.input :hardware_type, :label => "Typ:"
  f.input :location_id, :label => "Standort", as: :select, collection: Location.where(client_id: current_user.client_id)
  f.input :hardware_spec_id, :label => "Hardware-Spezifikation", as: :select, collection: HardwareSpec.all.map{ |h| [h.hardware_type, h.id] }
end
f.inputs "Belegung:" do # Makes a panel that holds inputs for a location id
  f.has_many :assignments, :heading => false do |cf|
    cf.input :row, :label => "Reihe:"
    cf.input :column, :label => "Spalte:"
    cf.input :product_id, :label => "Produkt", as: :select, collection: Product.where(client_id: current_user.client_id)
  end
end
f.actions

end

I would like to create a table with a fixed number of rows and columns. Inside of each cell I would like to have something like:

for 1.. 10 do
    tr
      for 1..3
         cf.input :row = "current_row"
         cf.input :column = "current_column"
         cf.input :product_id .....

I hope you can help. Thx.

EDIT:

Ok, I`ve played around with some jquery/haml code and now, my current result looks like this.

My custom view "html.haml" file looks like this

= semantic_form_for [:admin, @hardware], :builder => ActiveAdmin::FormBuilder do |f|


- f.inputs "Hardware" do
    - f.input :name
    - f.input :serial_nr
    - f.input :hardware_type, :label => "Typ:"
    - f.input :location_id, :label => "Standort", as: :select, collection: Location.where(client_id: current_user.client_id)
    - f.input :hardware_spec_id, :label => "Hardware-Spezifikation", as: :select, collection: HardwareSpec.all.map{ |h| [h.hardware_type, h.id] }
  - f.inputs "Belegung" do
    #assignments
  = f.actions

:javascript



    $('#hardware_hardware_spec_id').change(function(){
          //clear conent
          $('#assignments').empty();
          var id = $('#hardware_hardware_spec_id').val();
          if(id != ""

){
        var root = window.location.protocol + '//' + window.location.host;

    var spec_url = root+"/admin/hardware_specs/"+id;
    $.ajax({
      dataType: "json",
      type: "get",
      url: spec_url,
      timeout: 5000
    }).done(function(response){
        var rows = response.hardware_spec.rows;
        var columns = response.hardware_spec.columns;

        var table = $('<table></table>').addClass('foo');
        //Überschriften
        var title = $('<tr></tr>')
        var title2 = $('<th></th>');
        title.append(title2);
        for (i = 0; i < columns; i++) {
            var title1 = $('<th></th>').text('Spalte ' + i);
            table.append(title);
            title.append(title1);
        }
        for (j = 0; j < rows; j++) {
                var row_header = $('<th></th>').text('Reihe ' + j);
                row = $('<tr></tr>');
                row.append(row_header);
                for (i = 0; i < columns; i++) {
                    var input = $('<select></select>');
                    if(input.prop) {
                      var options = input.prop('options');
                    }
                    else {
                      var options = input.attr('options');
                    }

                    var products = #{Product.where(client_id: current_user.client_id).to_json.html_safe};
                    $.each(products, function(id, product){
                       options[options.length] = new Option(product.description, id);
                    });
                    var row1 = $('<td></td>');
                    row1.append(input)
                    row.append(row1);
                    table.append(row);

                }
         }

        if ($('table').length) {
             $("#assignments tr:first").after(row);
        }
        else {
            $('#assignments').append(table);
        }
    });
  }

});

The last thing i need to do is create the Model("hardware") with the nested attributes("serial_nr, "name", assignments => [row, column, product_id]") like in the form above. Thx

Answer 1

Ok Now i fixed my problem by doing the following steps:

1. render partial

   ActiveAdmin.register Model do

   form :partial => 'customform'

2. In "/app/views/admin/model/" create the the file "_customform.html.haml"

3. In your Haml-File you can combine html-tags with haml-code. So, if you have problems by using has_many relation in the formtastic-formbuilder, you can create HTML-input Tags with the following "id" and "name" type.

For example:

= semantic_form_for [:admin, @parent], :builder => ActiveAdmin::FormBuilder do |f|


- f.inputs "Parent" do
    - f.input :name, :required => true
    - f.input :serial_nr, :required => true
    - f.input :location_id, :required => true, :label => "Standort", as: :select, collection: Location.where(client_id: current_user.client_id)
    - (0..5).each do |row|
      %input{:id=>"parent_childrens_attributes_#{row}_attribute", :name=>"parent[childrens_attributes][#{row}][attribute]"}

The trick is in the "id" and the name "definition" in the input-tag. Now can you easily create custom views and combine formtastic and html/haml code.

Or you can pass other model objects. You only have to overwrite the "new" oder "edit" functions in the admin-controller.

def new
  @example = Example.where(..)
  new!
end

in your form:

 @example.each do |row|
  %input{:id=>"parent_childrens_attributes_#{row}_attribute", :name=>"parent[childrens_attributes][#{row}][attribute]"}

Hope this can help others to create different custom forms in activeadmin.