From 775baa250b69c3bad22d1a70913e6bd990bce061 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Mon, 30 Sep 2024 16:06:22 -0700
Subject: [PATCH] Add filter form to alt styles page

Oh wow, alt styles are getting some real work! I'll improve both the
user-facing and Support-facing tooling, to better handle the complexity.
---
 app/assets/stylesheets/alt_styles/_index.sass | 18 ------------
 app/assets/stylesheets/alt_styles/index.sass  | 29 +++++++++++++++++++
 app/assets/stylesheets/application.css.sass   |  1 -
 app/controllers/alt_styles_controller.rb      | 25 +++++++++++++---
 app/models/color.rb                           |  1 +
 app/views/alt_styles/index.html.haml          | 13 +++++++++
 6 files changed, 64 insertions(+), 23 deletions(-)
 delete mode 100644 app/assets/stylesheets/alt_styles/_index.sass
 create mode 100644 app/assets/stylesheets/alt_styles/index.sass

diff --git a/app/assets/stylesheets/alt_styles/_index.sass b/app/assets/stylesheets/alt_styles/_index.sass
deleted file mode 100644
index d40d2148..00000000
--- a/app/assets/stylesheets/alt_styles/_index.sass
+++ /dev/null
@@ -1,18 +0,0 @@
-body.alt_styles-index
-	.alt-styles-header
-		margin-top: 1em
-		margin-bottom: .5em
-
-	.alt-styles-list
-		list-style: none
-		display: flex
-		flex-wrap: wrap
-		gap: 1.5em
-
-	.alt-style
-		text-align: center
-		width: 80px
-
-	.alt-style-thumbnail
-		width: 80px
-		height: 80px
diff --git a/app/assets/stylesheets/alt_styles/index.sass b/app/assets/stylesheets/alt_styles/index.sass
new file mode 100644
index 00000000..9334c532
--- /dev/null
+++ b/app/assets/stylesheets/alt_styles/index.sass
@@ -0,0 +1,29 @@
+.filters
+	fieldset
+		display: flex
+		flex-direction: row
+		align-items: center
+		justify-content: center
+		gap: .5em
+
+	legend
+		display: contents
+		font-weight: bold
+
+.alt-styles-header
+	margin-top: 1em
+	margin-bottom: .5em
+
+.alt-styles-list
+	list-style: none
+	display: flex
+	flex-wrap: wrap
+	gap: 1.5em
+
+.alt-style
+	text-align: center
+	width: 80px
+
+.alt-style-thumbnail
+	width: 80px
+	height: 80px
diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
index f54fc72c..174c846b 100644
--- a/app/assets/stylesheets/application.css.sass
+++ b/app/assets/stylesheets/application.css.sass
@@ -8,7 +8,6 @@
 
 @import partials/jquery.jgrowl
 
-@import alt_styles/index
 @import closet_hangers/index
 @import closet_lists/form
 @import neopets_page_import_tasks/new
diff --git a/app/controllers/alt_styles_controller.rb b/app/controllers/alt_styles_controller.rb
index e1e99ff9..0bad88fe 100644
--- a/app/controllers/alt_styles_controller.rb
+++ b/app/controllers/alt_styles_controller.rb
@@ -3,10 +3,11 @@ class AltStylesController < ApplicationController
 		@alt_styles = AltStyle.includes(:species, :color, :swf_assets).
 			order(:species_id, :color_id)
 
-		if params[:species_id]
-			@species = Species.find(params[:species_id])
-			@alt_styles = @alt_styles.merge(@species.alt_styles)
-		end
+		@color = find_color
+		@species = find_species
+
+		@alt_styles.merge!(@color.alt_styles) if @color
+		@alt_styles.merge!(@species.alt_styles) if @species
 
 		# We're going to link to the HTML5 image URL, so make sure we have all the
 		# manifests ready!
@@ -30,4 +31,20 @@ class AltStylesController < ApplicationController
 			}
 		end
 	end
+
+	protected
+
+	def find_color
+		if params[:color]
+			Color.find_by(name: params[:color])
+		end
+	end
+
+	def find_species
+		if params[:species_id]
+			Species.find_by(id: params[:species_id])
+		elsif params[:species]
+			Species.find_by(name: params[:species])
+		end
+	end
 end
diff --git a/app/models/color.rb b/app/models/color.rb
index d7f23119..9211aac9 100644
--- a/app/models/color.rb
+++ b/app/models/color.rb
@@ -1,5 +1,6 @@
 class Color < ApplicationRecord
   has_many :pet_types
+  has_many :alt_styles
   
   scope :alphabetical, -> { order(:name) }
   scope :basic, -> { where(basic: true) }
diff --git a/app/views/alt_styles/index.html.haml b/app/views/alt_styles/index.html.haml
index 694cc4a3..ad1130f1 100644
--- a/app/views/alt_styles/index.html.haml
+++ b/app/views/alt_styles/index.html.haml
@@ -1,4 +1,5 @@
 - title "Styling Studio"
+- use_responsive_design
 
 %p
 	Here's all the new NC Pet Styles we have! They're available in the app too,
@@ -13,6 +14,18 @@
 	wearable items, there's not a great way for us to get style tokens onto
 	tradelists… this may change someday, but probably not soon, sorry!
 
+= form_with url: alt_styles_path, method: :get, class: "filters" do |f|
+	%fieldset
+		%legend Filter by:
+		= f.select :color, Color.order(:name).map(&:human_name),
+		           selected: @color&.human_name, include_blank: "Color…"
+		= f.select :species, Species.order(:name).map(&:human_name),
+		           selected: @species&.human_name, include_blank: "Species…"
+		= f.submit "Go"
+
 - @alt_styles.group_by(&:species).each do |species, species_styles|
 	%h2.alt-styles-header= species.human_name
 	%ul.alt-styles-list= render partial: "alt_style", collection: species_styles
+
+- content_for :stylesheets do
+	= page_stylesheet_link_tag "alt_styles/index"