Skip to content

Commit ba4ea54

Browse files
authored
Add docs for sidebar filters (#8)
1 parent 5c73a5c commit ba4ea54

File tree

1 file changed

+51
-1
lines changed

1 file changed

+51
-1
lines changed

README.md

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ module.exports = {
7272
## Usage
7373

7474

75-
##### The MainComponent: Search Bar and sidebar
75+
#### The MainComponent: Search Bar and sidebar
7676

7777
The MainComponent is what is demo'd in the introduction. It consists of the search bar and a sidebar for filters.
7878

@@ -123,6 +123,56 @@ end
123123
<% end %>
124124
```
125125

126+
#### The MainComponent: Adding filters to the sidebar
127+
128+
Adding filters to the sidebar requires changes to two files though we recommend storing the data across three files and will demsontrate as such.
129+
130+
1. Add filters to Model
131+
```ruby
132+
# app/models/model.rb
133+
class Model < ApplicationRecord
134+
# inclusion statement from introduction
135+
136+
FILTER_SCOPE_MAPPINGS = {
137+
# other filter scopes...
138+
"model_type_filter": :filter_by_type
139+
}.freeze
140+
# 'model_type_filter' will be referenced in step 2
141+
142+
ARRAY_FILTER_SCOPES = %i[model_type_filter].freeze
143+
# safelist of all filters we will be rendering in our sidebar
144+
145+
scope :filter_by_type, ->(model_type_input) { where(model_type: model_type_input) }
146+
# where 'model_type' is an attribute defined on Model
147+
end
148+
```
149+
150+
2. Create filter options
151+
```ruby
152+
# app/models/filter.rb
153+
# We store in a filter.rb model, but you can store as desired
154+
class Filter
155+
MODEL_FILTERS = [
156+
{
157+
multi: true,
158+
title: "Type",
159+
filter_name: "model_type_filter",
160+
filters: %w(Special Normal).map { |type| { name: type, value: type } }
161+
# Allows us to filter between 'Special' and 'Normal' model types
162+
# Note we recommend storing the %w(Special Normal) array at a central location for easier validation and manipulation
163+
}
164+
].freeze
165+
end
166+
```
167+
168+
3. Render as part of our MainComponent
169+
```html
170+
<!-- Notice the addition of a non-empty 'filters' argument which references step 2 -->
171+
<%= render SnFilterable::MainComponent.new(frame_id: "some_unique_id", filtered: @search, filters: Filter::MODEL_FILTERS, search_filter_name: "search_name") do %>
172+
<!-- display code.. -->
173+
<% end %>
174+
```
175+
126176
## Testing / Development
127177

128178
This gem using [RSpec](https://rspec.info) for testing. Tests can be running locally by first setting up the dummy database/app as follows:

0 commit comments

Comments
 (0)