Add tag filter to song page

app/controllers/concerns/ambiguity/song_title.rb

@@ -16,13 +16,16 @@ def hydrate_song_page
     @next_song = next_song
     @view = 'songs/show'
     @ambiguity_controller = 'songs'
-    @tracks = song.tracks
-                  .includes(:songs, show: :venue, track_tags: :tag)
-                  .order(@order_by)
-                  .paginate(page: params[:page], per_page: params[:per_page].presence || 20)
+    @tracks = fetch_song_tracks
     @tracks_likes = user_likes_for_tracks(@tracks)
   end
 
+  def fetch_song_tracks
+    tracks = song.tracks.includes(:songs, show: :venue, track_tags: :tag).order(@order_by)
+    tracks = tracks.tagged_with(params[:tag_slug]) if params[:tag_slug].present?
+    tracks.paginate(page: params[:page], per_page: params[:per_page].presence || 20)
+  end
+
   def previous_song
     Song.where('title < ?', @song.title)
         .order(title: :desc)

app/helpers/sort_helper.rb → app/helpers/filter_helper.rb

@@ -1,4 +1,24 @@
-module SortHelper
+module FilterHelper
+  def filter_title(param_name, items, default: nil)
+    item = items.find { |_k, v| params[param_name] == v }&.first&.html_safe
+    return item if item.present?
+    return default if default.present?
+    items.first.first.html_safe
+  end
+
+  def filter(param_name, items) # rubocop:disable Metrics/AbcSize
+    skippables = %w[controller action name t slug] + [param_name.to_s]
+    items.map do |k, v|
+      link = params[param_name] == v ? "<strong>#{k}</strong>" : k
+      param_str = "?#{param_name}=#{CGI.escape(v)}"
+      params.each do |key, val|
+        next if key.in?(skippables)
+        param_str += "&#{key}=#{val}" if val.present?
+      end
+      tag.li(link_to(link.html_safe, param_str))
+    end.join.html_safe
+  end
+
   def sort_songs_and_venues_links(item_hash)
     item_hash.map do |k, v|
       link = params[:sort] == v ? "<strong>#{k}</strong>" : k
@@ -24,25 +44,6 @@ def sort_tags_links(item_hash)
     str.html_safe
   end
 
-  def sort_filter_link_title(items)
-    items.each do |k, v|
-      return k.html_safe if params[:sort] == v || params[:sort].blank?
-    end
-    items.first.first.html_safe
-  end
-
-  def sort_filter(items)
-    items.map do |k, v|
-      link = params[:sort] == v ? "<strong>#{k}</strong>" : k
-      param_str = "?sort=#{CGI.escape(v)}"
-      params.each do |key, val|
-        next if key.in?(%w[controller action name t sort])
-        param_str += "&#{key}=#{val}" if val.present?
-      end
-      tag.li(link_to(link.html_safe, param_str))
-    end.join.html_safe
-  end
-
   def sort_songs_title(items)
     items.each_with_index do |(key, val), i|
       return key.html_safe if (i.zero? && params[:sort].empty?) ||
@@ -100,4 +101,13 @@ def stored_playlist_sort_items
       '<i class="glyphicon glyphicon-forward"></i> Duration' => 'duration'
     }
   end
+
+  def song_track_tag_items(song)
+    tag_data = song.tracks.joins(:tags).distinct.order('tags.name').pluck('tags.name', 'tags.slug')
+    tag_data.map do |name, slug|
+      {
+        "<i class='glyphicon glyphicon-tag'></i> #{name}" => slug
+      }
+    end.reduce({}, :merge)
+  end
 end

app/javascript/packs/application.css.scss

@@ -302,6 +302,7 @@ html {
       .current {
         color: $nav_highlight !important;
         font-weight: bold !important;
+        margin-right: 3px;
       }
       a:hover, a:focus {
         text-decoration: underline !important;
@@ -1086,7 +1087,6 @@ html {
     width: 100%;
     border-bottom: 1px solid $hr_gray;
     margin-top: 10px;
-    margin-bottom: 5px;
   }
   .next_item_link {
     float: right;
@@ -1145,6 +1145,9 @@ html {
         font-size: 18px;
       }
     }
+    .hr {
+      margin-bottom: 15px;
+    }
     .app_callout {
       * {
         float: left;

app/views/shared/_song_track_tag_filter.html.slim

@@ -0,0 +1,5 @@
+.btn-group
+  button.btn.btn-default.dropdown-toggle type='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'
+    => filter_title(:tag_slug, item_hash, default: '<i class="glyphicon glyphicon-tags"></i> &nbsp;All Tags'.html_safe)
+    span.caret
+  ul.dropdown-menu = filter(:tag_slug, item_hash)

app/views/shared/_sort_filter.html.slim

@@ -1,7 +1,5 @@
-h3
-  |> Sort by
-  .btn-group
-    button.btn.btn-default.dropdown-toggle type='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'
-      => sort_filter_link_title(item_hash)
-      span.caret
-    ul.dropdown-menu = sort_filter(item_hash)
+.btn-group
+  button.btn.btn-default.dropdown-toggle type='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'
+    => filter_title(:sort, item_hash)
+    span.caret
+  ul.dropdown-menu = filter(:sort, item_hash)

app/views/songs/show.html.slim

@@ -18,7 +18,12 @@
     h3 Total tracks: #{@song.tracks.size}
 
     .hr
+
+    = render partial: 'shared/sort_filter', locals: { item_hash: track_sort_items }
     br
+    = render partial: 'shared/song_track_tag_filter', locals: { item_hash: song_track_tag_items(@song) }
+
+    .hr
 
     - if @song.lyrics.present?
       = link_to "#{tag.i(class: 'glyphicon glyphicon-book')}  Lyrics".html_safe, '#', class: 'song_lyrics btn btn-default', data: { title: @song.title, lyrics: lyrics_for(@song) }
@@ -35,10 +40,6 @@
 
     .hr
 
-    = render partial: 'shared/sort_filter', locals: { item_hash: track_sort_items }
-
-    .hr
-
     = link_to('<< Previous Song'.html_safe, "/#{@previous_song.slug}")
     = clear_both
     = link_to('Next Song >>'.html_safe, "/#{@next_song.slug}", class: 'next_item_link')