scarfacedeb / rails_admin_globalize_field

Tabbed interface and custom field type for globalize translations for Rails_admin
MIT License
50 stars 60 forks source link

tabbing not working properly having nested objects #40

Open alecslupu opened 4 years ago

alecslupu commented 4 years ago

When rails_admin_globalize_field widget is used within a nested object, it does not work properly, as the tabs are not properly switched. In this particular case, there will be more DOM elements with the same id. I have tried to inject an unique string within https://github.com/scarfacedeb/rails_admin_globalize_field/blob/master/lib/rails_admin_globalize_field/globalize_tabs.rb#L31 , however, the approach dis not worked as expected. I think a different tab binding should be used.

Using:

===

Having the models set up like:

class Poll < ApplicationRecord
  has_many :poll_options, dependent: :destroy
  accepts_nested_attributes_for :translations, allow_destroy: true
end
class PollOption < ApplicationRecord
  translates :description, touch: true, versioning: :paper_trail
  accepts_nested_attributes_for :translations, allow_destroy: true
end

And the following Rails admin setup

  config.model "Poll" do
    parent "Post"
    edit do
     fields :poll_options
    end 
  end 

  config.model "PollOption" do
    configure :translations, :globalize_tabs
    nested do
      exclude_fields :translations
    end
  end

  config.model 'PollOption::Translation' do
    include_fields :locale, :description
  end

I get some some strange behavior regarding the tabbing when trying to add multiple Poll Option entries. The tabbing is activated on model level (meaning i can browse through the Poll Option forms), however, the translations (which are also tabbed are not working). when clicking on on the language, the selected tab becomes active, but the tab-pane is not being changed.

I get the same behavior when trying to edit a poll that has 2 options. The tab-panes in the second object is not correctly activated.

sasselin commented 3 years ago

Overwrite views/rails_admin/main/_form_globalize_tabs.html.haml with this:

- uuid = SecureRandom.uuid
.controls
  %ul.nav.nav-tabs{ :style => 'margin-top:5px' }
    - field.tabs.each do |tab|
      %li{ class: ('active' if tab.active?) }
        = link_to tab.label, "#", data: { toggle: "tab",  target: "##{tab.id}-#{uuid}" }, class: ('text-danger' unless tab.valid?)

.tab-content
  - field.tabs.each do |tab|
    = form.fields_for field.name, tab.translation, wrapper: false do |f|
      .fields.tab-pane{ id: "#{tab.id}-#{uuid}", class: ('active' if tab.active?) }
        = f.generate(action: :nested, model_config: field.associated_model_config, nested_in: field)
Tronerta commented 3 years ago

@sasselin It works, thank you!