포트폴리오에 정렬 기능을 구현했을 때의 메모.

완성 이미지

구현 및 설명

이번 구현한 것은 투고된 이벤트를 신착순, 낡은 순서, 이벤트의 참가자수순으로 재정렬하는 기능입니다.

① 라우팅 정의

example.com/?sort_new → 새로운 순서로 정렬 처럼,
매개변수 변경으로 정렬할 수 있도록 라우팅을 변경합니다.

congig/routes.rb

get 'events/search/sort_new', to: 'events#search', as: 'sort_new'
get 'events/search/sort_old', to: 'events#search', as: 'sort_old'
get 'events/search/sort_join', to: 'events#search', as: 'sort_join'

② scope 정의

정렬할 scope를 각각 정의합니다.

app/models/event.rb

scope :latest, -> {order(updated_at: :desc)}
scope :old, -> {order(updated_at: :asc)}
scope :join_count, -> { includes(:joins).sort {|a,b| b.joins.size <=> a.joins.size}}

해설

scope :join_count, -> { includes(:joins).sort {|a,b| b.joins.size <=> a.joins.size}}

b.joins.size 및 a.joins.size는 각각 참여 수를 나타냅니다.sort 메서드를 사용하여 오름차순으로 정렬합니다.

sort 메소드 정보

② Controller로 분기

scope 를 Controller 로 정의해, 파라미터로 분기해 사용 가능하게 합니다.
페이지 네이션에는 kaminari를 사용하고 있습니다.

app/controllers/events_controller.rb

if params[:new]
  @events = Event.latest.page(params[:page]).per(PER_PAGE)
elsif params[:old]
  @events = Event.old.page(params[:page]).per(PER_PAGE)
elsif params[:join]
  events = Event.join_count
  @events =  Kaminari.paginate_array(events).page(params[:page]).per(PER_PAGE)
end

③ 정렬 링크를 View에 추가하여 반영

마지막으로 View에서 매개변수 변경을 위한 링크를 추가합니다.

app/

.sort-container
%ul.sort
  %li 並び順
    %li
      = link_to '新着', events_search_path(new: 'true'), {class: 'sort-link' "#{'active' if current_page?('/events/search?new=true')}"}
    %li
      = link_to '古い', events_search_path(old: 'true'), {class: 'sort-link' "#{'active' if current_page?('/events/search?old=true')}"}
    %li
      = link_to '参加者数', events_search_path(join: 'true'), {class: 'sort-link' "#{'active' if current_page?('/events/search?join=true')}"}

해설

"#{'active' if current_page?('/events/search?new=true')}"

link_to에 붙인 위의 부분은 /events/search?new=true 의 페이지 즉, 신착순으로 재 배열되고 있는 페이지에 있어서 active 라고 하는 클래스를 붙인다고 하는 방법입니다.
이렇게 하면 완성된 이미지처럼 HTML을 동적으로 변경할 수 있습니다.

그리고는 기호로 스타일을 맞으면 완성입니다!