Postgres Arrays in Active Admin

active_admin.sass

// app/assets/stylesheets/active_admin.sass

=reset-aa-button
  background: none
  border-radius: 0
  border: 0
  box-shadow: none
  line-height: 1
  padding: 0
  text-shadow: none
  vertical-align: middle
  &:not(.disabled)
    &:hover,
    &:active,
    &:focus
      background: none
      border: 0
      box-shadow: none

.array-action--add,
.array-action--remove
  +reset-aa-button
  font-size: rem(15)

.array-action--add
  color: $alert-success-color

.array-action--remove
  color: $alert-error-color
  &.can-undo
    color: $alert-success-color

array-input.coffee

# app/assets/javascripts/array-input.coffee
$ ->
  removeFromArrayInput = (el) ->
    input = $(el).siblings('input')
    if input.attr('disabled') == 'disabled'
      $(el)
        .html('<i class="fa fa-times-circle"></i>')
        .removeClass('can-undo')
      $(input).removeAttr('disabled')
      $(input).removeClass('text--strike')
    else
      $(el)
        .html('<i class="fa fa-undo"></i>')
        .addClass('can-undo')
      $(input).attr('disabled', 'disabled')
      $(input).addClass('text--strike')

  $('.js-add-to-array-input').click (e) ->
    e.preventDefault

    if $(@).hasClass('array-action--add')
      original = $(@).parent()
      clone    = $(original).clone(true)
      clone_id = "clone_#{Math.floor((Math.random() * 100000) + 1)}"
      input    = $(clone).find('input')

      if $(input).val() != ''
        # Remove error classes from original's input
        $(original)
          .find('input')
          .removeClass('has-error')

        # Reset clone's input
        $(input)
          .removeClass('has-error')
          .attr('id', clone_id)
          .val('')

        # Change action to remove
        $(@)
          .html('<i class="fa fa-times-circle"></i>')
          .attr('class', 'array-action--remove js-remove-from-array-input')

        # Add clone and focus its input
        $(@).parent().parent().append $(clone)
        $("##{clone_id}").focus()

      else
        $(original)
          .find('input')
          .addClass('has-error')
          .focus()

    else
      removeFromArrayInput $(@)

  $('.js-remove-from-array-input').click (e) ->
    e.preventDefault
    removeFromArrayInput $(@)

array_input.rb

# app/admin/inputs/array_input.rb
class ArrayInput

  include Formtastic::Inputs::Base

  def to_html
    input_wrapping do
      inputs = []

      @object[method].each_with_index do |v, x|
        inputs << array_input_html(v)
      end

      label_html <<
      template.content_tag(:div, class: 'input-group--array') do
        inputs.join.html_safe << array_input_html('', false)
      end
    end
  end

  private

    def array_input_html(value, remove=true)
      if remove
        button = template.content_tag(:button, template.fa_icon('minus-circle'), class: 'array-action--remove js-remove-from-array-input', type: 'button')
      else
        button = template.content_tag(:button, template.fa_icon('plus-circle'), class: 'array-action--add js-add-to-array-input', type: 'button')
      end
      template.content_tag(:div, class: 'input-group--array__item') do
        template.text_field_tag("#{object_name}[#{method}][]", value, id: nil) << button
      end
    end

end

client.rb

# app/admin/client.rb
ActiveAdmin.register Client do

  permit_params email_addresses: []

  form do |f|
    f.inputs 'Contact Details' do
      f.input :email_addresses, as: :array
    end
    f.actions
  end

end

Gemfile

ruby '2.2.0'
source 'https://rubygems.org'

...

gem 'font-awesome-rails'

sample_migration.rb

class AddEmailAddressesToClients < ActiveRecord::Migration
  def change
    add_column :clients, :email_addresses, :text, array: true, default: []
    add_index :clients, :email_addresses, using: 'gin'
  end
end

Thanks a lot. It is really helpful.

Hi @franks921! I added this in my active admin and its not working correctly.
It doesn't show the buttons and it's not possible to remove the added inputs:

Would you mind helping me with this?

Had an error with stylesheet validation. Replaced $alert-success-color with #3c763d and $alert-error-color with #a94442