Create dynamic attributes and CSS classes in Rails

Question

I got a DRY question over styeling in Ruby on Rails(5.2).

1. What I want to achieve

So I'm creating a ameneties form section for a House selling, and I got the following:

But I'm looking on my code and honestly is horrible!

          <%= form.fields_for :rules do |rules_form| %>
                    <div class="col l4 m2 s4">
                        <label>
                            <div class="input-field">
                                <i class="material-icons-two-tone">pets</i>
                                <%= rules_form.check_box(:pets_allowed, {}) %>
                                <span for="pets_allowed">Pets Allowed</span>
                            </div>
                        </label>
                    </div>

                    <div class="col l4 m2 s4">
                        <label>
                            <div class="input-field">
                                <i class="material-icons-two-tone">smoking_rooms</i>
                                <%= rules_form.check_box(:permitted_smoking, {}) %>
                                <span for="permitted_smoking">Smoking Allowed</span>
                            </div>
                        </label>
                    </div>

                    <div class="col l4 m2 s4">
                        <label>
                            <div class="input-field">
                                <i class="material-icons-two-tone">people</i>
                                <%= rules_form.check_box(:allowed_visitors, {}) %>
                                <span for="allowed_visitors">Vists Allowed</span>
                            </div>
                        </label>
                    </div>

                    and so on.....

2. What I've done thinking to do:

So yes as you can see this is NOT a DRY thing. And what I've thought of doing is something like this:

   <%= form.fields_for :rules do |rules_form| %>
            <div class="col l4 m2 s4">
                <label>
                    <div class="input-field">
                        <i class="material-icons-two-tone">[dynamic icon]</i>
                        <%= rules_form.check_box([dynamic db column name], {}) %>
                        <span for="pets_allowed">[dynamic text to display]</span>
                    </div>
                </label>
            </div>
   <% end %>

Probably this is not the syntax but, you get the point.

3. What I've done so far:

Ok so this is what I've been thinking to do, 1. is on my helper file create a method some sort of like this:

def servicesArray
        serv = ['wifi', 'gas', 'water', 'electricity', 'include_furniture', 'air_conditioning', 'business_center', 'laundry', 'television', 'guard']
        serv.each do |obj|
            puts obj
        end
    end

Then to verify this I call it on my form and I see this:

Ok this is good but not what expected, and so my question is:

How can I achieve such thing? What is the best approach to deal with dyanamic CSS clases and/or attributes to avoid lots of code blocks? What do you recommend me to do in some future?

I will appreciate a lot your help on this! Thanks

max pleaner · Accepted Answer · 2020-12-06 03:20:26Z

There are multiple ways to do this, but to start with what's probably the easiest:

Make a helper that returns all the dynamic data required for your form. Looking at your code, it seems there are 3 things required for each checkbox - a title, a parameter name, and a full name. So, you could write a helper method like so:

def services_array
  [
    { title: "pets", param_name: :pets_allowed, full_name: "Pets Allowed" },
    { title: "people", param_name: :allow_visitors, full_name: "Visits Allowed" },
    { title: "smoking_rooms", param_name: :permitted_smoking, full_name: "Smoking Allowed" }
  ]
end

In your view, loop over this:

   <%= form.fields_for :rules do |rules_form| %>
     <% services_array.each do |service| %>
       <div class="col l4 m2 s4">
         <label>
           <div class="input-field">
             <i class="material-icons-two-tone"><%= service[:title] %></i>
             <%= rules_form.check_box(service[:param_name], {}) %>
             <span for="<%= service[:param_name] %>"><%= service[:full_name] %></span>
           </div>
         </label>
       </div>
     <% end %>
   <% end %>

Collectives™ on Stack Overflow

Create dynamic attributes and CSS classes in Rails

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related