Иконка Rails & Ransack, показывающая, что поле можно сортировать

У Ransack есть параметры конфигурации для custom_arrows. Вы можете использовать его в инициализаторе поиска, чтобы переопределить стрелки по умолчанию. Например:

Ransack.configure do |config|
    config.custom_arrows = {
      up_arrow: '<i class="fa fa-long-arrow-up"></i>',
      down_arrow: 'U+02193'
    }
  end

Как упоминал @Slava.K, вы можете настроить конфигурацию Ransack в инициализаторе или переопределить Ransack FormHelper.

Но если вы хотите сделать это вручную в своем представлении, вы можете это сделать! Используйте помощник sort_url для создания ссылки, затем проверьте массив sorts Ransack, чтобы определить, какая сортировка используется и в каком направлении (по возрастанию/убыванию), а затем отобразите соответствующий значок.

В этом примере будет отображаться один из трех значков (вверх/вниз/нейтральный) в зависимости от того, было ли поле отсортировано или нет, и в каком направлении оно было отсортировано. Мы будем использовать гем fontawesome-sass для рендеринга значка, но вы можете заменить icon() helper с любым методом/разметкой значка, который вы хотите использовать.

  # some_view.html.slim

  = link_to sort_url(@q, :name)

    # Display label
    span Name

    # Sort icon

    # Check if ransack applied a sort to this field
    - sort = @q.sorts.find {|s| s.name == 'name'}

    # Render appropriate icon (up/down/neutral)
    
    # If this column is sorted by 'asc' display 'sort-up' icon
    = icon(:fas, 'sort-up') if sort.present? and sort.dir == 'asc'

    # If this column is sorted by 'desc' display 'sort-down' icon
    = icon(:fas, 'sort-down') if sort.present? and sort.dir == 'desc'

    # If no sort is applied display a neutral icon
    = icon(:fas, 'sort') unless sort.present?

Мы можем упростить приведенный выше код, используя тернарный оператор, например так...

  # some_view.html.slim

  = link_to sort_url(@q, :name)
    span Name
    - sort = @q.sorts.find {|s| s.name == 'name'}
    = icon :fas, sort.present? ? (sort.dir == 'asc' ? 'sort-up' : 'sort-down') : 'sort'

Если вы хотите получить действительно фантазию и сохранить СУХОЕ представление, вы можете создать вспомогательный метод, похожий на Ransacks sort_url или sort_link, и поместить в него эту разметку. Это может выглядеть примерно так...

  # some_helper.rb

  def custom_sort_link(search_object, attribute, *args)
    link_to sort_url(search_object, attribute, *args) do
      sort = search_object.sorts.find {|s| s.name == attribute.to_s}
      content_tag(:span, attribute.to_s.capitalize) + icon(:fas, sort.present? ? (sort.dir == 'asc' ? 'sort-up' : 'sort-down') : 'sort')
    end
  end

А затем, по-вашему, вызовите custom_sort_link вот так...

  # some_view.html.slim

  = custom_sort_link(@q, :name)

В качестве примечания: если у вас есть FontAwesome Pro, двухцветные значки выглядят намного лучше. Просто замените :fas на :fad.

Значок сортировки по умолчанию может быть реализован следующим образом:

if defined?(Ransack)
  Ransack.configure do |config|
    config.custom_arrows = { default_arrow: '<i class="fa fa-sort"></i>' }
  end
end