CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3activeadmin
Sebastien
Sebastien

Reputation: 6660

Make a row in color with activeadmin

I want to display a row in red on the index page if the model has :updated = true. How can i do that using activeadmin?

Thx

Upvotes: 8

Views: 7927

Answers (4)

februaryInk
februaryInk

Reputation: 725

As of Active Admin 1.0.0pre1, it is possible to specify row class based on the properties of the record in that row. To assign a class to rows with updated records, you can write the following, supposing you have some update check function was_updated?:

app/admin/my_model.rb

ActiveAdmin.register MyModel do

    ...

    index(:row_class => -> record { 'my-class' if record.was_updated? }) do

      # whatever columns you want:
      # selectable_column
      # id_column
      # column :attribute
      # actions
    end

    ...

end

This new option is commented on in the source code for indexing as a table.

However, Active Admin's SCSS uses a lot of specificity when it dictates table row (or rather, table data) colors, making them impossible to override with custom colors by just writing .my-class { background-color: red; } in your stylesheet. I found the following to work, though:

app/assets/stylesheets/active_admin.css.scss

...

tr.odd, tr.even {
    &.my-class {
        td.col {
            background-color: red;
        }
    }
}

Upvotes: 18

charliez
charliez

Reputation: 163

If you just want something that is quick, and dispense of the need for monkeypatching Activeadmin, can't you just stick divs inside your table? Like f ex

table_for invoice.ccpayment do
  column 'Payments and payments attempts on this invoice: ' do |p|
    if p.paymentcomplete > 0
      div :class => 'green' do
        'Payment # '+p.id.to_s+' of '+p.currency.iso+' '+p.amount.to_s+' on '+p.created_at.to_s
      end
    else
      div :class => 'red' do
        'FAILED Payment # '+p.id.to_s+' of '+p.currency.iso+' '+p.amount.to_s+' on '+p.created_at.to_s
      end
    end
  end
end

You can easily define those classes in 'activeadmin.css.scss'

Upvotes: 2

Oz Ben-David
Oz Ben-David

Reputation: 1657

I also wanted to do that and the easiest way I found was using JavaScript Of course this is not a good solution because I'm relaying on tags\classes\ids and ActiveAdmin rendering can be completely changed on the next version... But if you will add a couple of test cases it might be good enough

For example, I wanted to color each row by its rating column

So I put this code in file : A.js (under app\assets\javascripts of course)

// A.js

$(document).ready(function() {

    $('td.rating').each(function(i,obj) {
        var rating = parseInt(obj.innerHTML);
        if (!isNaN(rating))
        {
            var rowcolor = ""
            if (rating<5)
            {
                rowcolor = "#FF0000"; //red
            }
            else
            {
                var red = Math.round(255-(rating-5)*51);
                var green = 255; 
                rowcolor = "#"+decimalToHex(red,2)+decimalToHex(green)+"00";
            }
            obj.parentElement.className = "";               
            obj.parentElement.setAttribute('style', '');
            obj.parentElement.style.background = rowcolor;
        }
    });

});

function decimalToHex(d, padding) {
    var hex = Number(d).toString(16);
    padding = typeof (padding) === "undefined" || padding === null ? padding = 2 : padding;

    while (hex.length < padding) {
        hex = "0" + hex;
    }

    return hex;
};

and in my ActiveAdmin model

ActiveAdmin.register Bla do

  index do
    selectable_column
    column :rating
    <my other columns>
    default_actions
    script :src => javascript_path('A.js'), :type => "text/javascript"
  end
end

So, after the index is being rendered , my JS function go over and colors all the rows according to the rating column value (red for 0..4 - yellow..green for 5..10)

Example of coloring ActiveAdmin rows

Hope this could help

Upvotes: 0

sheerun
sheerun

Reputation: 1794

Table rendering for Active Admin is hardcored in ActiveAdmin::Views::TableFor as follows:

  def build_table_body
    @tbody = tbody do
      # Build enough rows for our collection
      @collection.each{|_| tr(:class => cycle('odd', 'even'), :id => dom_id(_)) }
    end
  end

So probably the easiest way is to monkeypatch that method. I don't see if subclassing can help.

Upvotes: 3

Related Questions