fields_for and nested resources

[okliv]

maybe it is a lack of docs, but are there any plans (or manuals) to add nested resources inside a form view in a way similar to that provides this gem https://github.com/nathanvda/cocoon ?

[spohlenz]

I don't think I'd seen Cocoon before, but it looks like it takes a very similar approach to what I would want in this feature. I'll definitely look into this further.

By the way, fields_for for a has_one/belongs_to association should just work (as long as you have declared accepts_nested_attributes_for).

form do |product|
  fields_for :category do
    # Form helper methods now dispatch to the product.category form scope
    text_field :name
  end
end

[dendomenko]

What about has_many and has_many: through association?

[okliv]

this is exactly what i asked about too but in less clear way =) because cocoon gem provides ability to add has_many resources to forms. in general, i think something similar to this should work here (until @spohlenz and/or community will propose something more sexy)

[dendomenko]

Have an issue ActiveRecord::AssociationTypeMismatch in RequestsAdmin::AdminController#update When try to set a blogger checkbox to true

 form do |request|
    col(xs: 4) {text_field :request, disabled: true}
    col(xs: 4) {check_box :read}
    fields_for :user do
      col(xs: 4) {check_box :blogger}
    end
  end

[spohlenz]

Hi @dendomenko. Sorry to miss this one.

Make sure that you have added accepts_nested_attributes_for :user to the parent model class.

[spohlenz]

I wanted to post a quick progress screenshot of this feature. There's a few changes still required to get this properly working but progress is definitely coming along.

This is accomplished with a DSL that will look something like:

has_many :tasks do
  row do
    col(xs: 8, sm: 10) { text_field :description, label: false, placeholder: "Description" }
    col(xs: 4, sm: 2) { check_box :done }
  end
end

Eventually I'd also like to support the other association types (has_many :through and lookup/create belongs_to), as well as reordering, but the simple has_many will be the first supported option, and probably the most common.

[risen]

Is there a branch somewhere for this has_many code?

[spohlenz]

@risen Not presently as it it's still mostly just a mockup/prototype implementation.

[beneti]

@okliv any luck with coccon? I need to implement a has_many and I'm missing something. @spohlenz sorry about coccon question but I think it's a simple way until you do not release the new DSL. is it ok?

a random example (team model already with accepts_nested_attributes_for):

#in app/admin/teams_admin.rb
....
form do |team|
...
    fields_for :players do |player|
      render 'players', f: player
    end
    link_to_add_association 'add player', FORM_BUILDER, :players

I don't know what I need to set as second param for link_to_add_association (FORM_BUILDER), I mean, how to access a form_builder inside form do |team|.

[okliv]

i had no luck. got too many errors to continue try it

[spohlenz]

@beneti Here's the basic code I used in my example posted above (view code is in Haml):

app/admin/projects_admin.rb:

Trestle.resource(:projects) do
  form do |project|
    text_field :name
    text_area :description

    render "tasks"
  end
end

app/views/admin/projects/_tasks.html.haml:

.nested-fields-container
  = form.label :tasks

  = form.fields_for :tasks do |task|
    = render 'task_fields', f: task

  .nested-field-links
    = link_to_add_association 'Add Task', form, :tasks, class: "btn btn-success"

app/views/admin/projects/_task_fields.html.haml:

.nested-fields.panel.panel-default
  .panel-body
    = link_to_remove_association icon("fa fa-close"), f, class: "btn btn-default btn-sm"

    .row
      .col-xs-8.col-sm-10= f.text_field :description, label: false, placeholder: "Description"
      .col-xs-4.col-sm-2= f.check_box :done

app/assets/javascripts/trestle/custom.js:

//= require cocoon

$(document).on('cocoon:after-insert', function(e, fields) {
  $(Trestle).trigger('init', fields);
});

app/assets/stylesheets/trestle/_custom.scss:

.nested-fields {
  border-left: 10px solid #dbdbdb;
  margin-bottom: 10px;
  padding-right: 35px;

  position: relative;

  &:first-child {
    margin-top: 0;
  }
}

.remove_fields {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0;
}

[westonganger]

You should turn this code into a wiki which can later be improved upon.

[thomashs-zz]

Is there any news on a native feature for has_many associations and multiple items in a form?

[Tao-Galasse]

@spohlenz Hi! Sorry to wake up this old thread, but I recently upgraded my app to Rails 6 and since then, the css snippet you gave seems to be incomplete. Panels don't have outline anymore and the form isn't as clean as before.

Here's an example:

It worked perfectly on Rails 5.2, I don't really know what changes could have caused this. I don't know if it would happen on a fresh rails 6 app, I'll try this soon if it can help you.

[spohlenz]

@Tao-Galasse In the current version of Trestle (which uses Bootstrap 4.x), replace all instances panel in class names with card, so panel becomes card, panel-body becomes card-body and panel-default becomes card-default. I believe that should be all that is required there.

[Tao-Galasse]

That's perfect, thank you very much @spohlenz ! 👍 🚀 This ticket can be closed again :)

By any chance, would you have any idea about this other issue I got during the upgrade to rails 6 ? https://github.com/TrestleAdmin/trestle-tinymce/issues/7

[samnymr]

Hiya Everyone!

sorry to be so much of a pain here, Thought it best to keep it in one thread

Rails 7 with Cocoon and Trestle don't seem to be working using the above method?

Got this in my custom.js

//= require 'cocoon'

$(document).on('cocoon:after-insert', function(e, fields) {
    $(Trestle).trigger('init', fields);
});

Both Gem Cocoon and Yarn Add Cocoon is installed, But forwhatever reason i click add task and nothing happens?

[spohlenz]

@samnymr I would try updating the trigger line to:

  Trestle.triggerInit(fields)

although I'm not certain that will be the issue.

Do any JavaScript errors show up in your browser's debug console?

[samnymr]

Hiya

I had no JS errors, I normally do get stuck on cocoon and it is normally me doing something stupid,

i ended up cloning the trestle admin and including my js file with cocoon and that seemed to have worked? a weird work around....

On Wed, Nov 16, 2022 at 3:59 AM Sam Pohlenz @.***> wrote:

@samnymr https://github.com/samnymr I would try updating the trigger line to:

Trestle.triggerInit(fields)

although I'm not certain that will be the issue.

Do any JavaScript errors show up in your browser's debug console?

— Reply to this email directly, view it on GitHub https://github.com/TrestleAdmin/trestle/issues/19#issuecomment-1316293850, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE3E3XWLF6HCVLUDTZV65TLWIRL3VANCNFSM4DXJAJDQ . You are receiving this because you were mentioned.Message ID: @.***>