Merge pull request #446 from matestack/add_collection_select_filter

added simple select dropdown filter to collection

Author: jonasjabari

app/concepts/matestack/ui/core/collection/filter/select/select.haml

@@ -0,0 +1,10 @@
+- if options[:type] == :dropdown
+
+  %select{@tag_attributes}
+    %option{disabled: true}= options[:placeholder]
+    - if @options[:options].is_a?(Hash)
+      - @options[:options].each do |key, value|
+        %option{value: key}=value
+    - if @options[:options].is_a?(Array)
+      - @options[:options].each do |option|
+        %option{value: option}=option

app/concepts/matestack/ui/core/collection/filter/select/select.rb

@@ -0,0 +1,29 @@
+module Matestack::Ui::Core::Collection::Filter::Select
+  class Select < Matestack::Ui::Core::Component::Static
+
+    def setup
+      if options[:type].nil?
+        options[:type] = :dropdown #nothing else supported at the moment
+      end
+      @tag_attributes.merge!({
+        "v-model#{'.number' if options[:type] == :number}": input_key,
+        type: options[:type],
+        class: options[:class],
+        id: component_id,
+        "@keyup.enter": "submitFilter()",
+        "@change": "$forceUpdate()",
+        ref: "filter.#{attr_key}",
+        placeholder: options[:placeholder]
+      })
+    end
+
+    def input_key
+      'filter["' + options[:key].to_s + '"]'
+    end
+
+    def attr_key
+      return options[:key].to_s
+    end
+
+  end
+end

lib/matestack/ui/core/components.rb

@@ -52,6 +52,7 @@ def self.require_core_component(name)
   require_core_component "collection/filter"
   require_core_component "collection/filter/input"
   require_core_component "collection/filter/reset"
+  require_core_component "collection/filter/select"
   require_core_component "collection/filter/submit"
   require_core_component "collection/order"
   require_core_component "collection/order/toggle"
@@ -168,6 +169,7 @@ def self.require_core_component(name)
   collection_filter: Matestack::Ui::Core::Collection::Filter::Filter,
   collection_filter_input: Matestack::Ui::Core::Collection::Filter::Input::Input,
   collection_filter_reset: Matestack::Ui::Core::Collection::Filter::Reset::Reset,
+  collection_filter_select: Matestack::Ui::Core::Collection::Filter::Select::Select,
   collection_filter_submit: Matestack::Ui::Core::Collection::Filter::Submit::Submit,
   collection_order: Matestack::Ui::Core::Collection::Order::Order,
   collection_order_toggle: Matestack::Ui::Core::Collection::Order::Toggle::Toggle,

spec/0.8/components/dynamic/collection/filter_spec.rb

@@ -31,6 +31,7 @@ def prepare
           current_filter = get_collection_filter(my_collection_id)
           my_base_query = TestModel.all
           my_filtered_query = my_base_query.where("title LIKE ?", "%#{current_filter[:title]}%")
+          my_filtered_query = my_base_query.where("title LIKE ?", "%#{current_filter[:ends_with]}") unless current_filter[:ends_with].nil?
           my_filtered_query = my_filtered_query.where(description: current_filter[:description]) unless current_filter[:description].nil?
           @my_collection = set_collection({
             id: my_collection_id,
@@ -46,6 +47,7 @@ def response
 
         def filter
           collection_filter @my_collection.config do
+            collection_filter_select id: "my-title-filter-select-ends-with", key: :ends_with, type: :dropdown, options: (1..10).to_a, placeholder: "Ends with"
             collection_filter_input id: "my-title-filter-input", key: :title, type: :text, placeholder: "Filter by title"
             collection_filter_input id: "my-description-filter-input", key: :description, type: :text, placeholder: "Filter by description"
             collection_filter_submit do
@@ -58,7 +60,7 @@ def filter
         end
 
         def content
-          async rerender_on: "my-first-collection-update" do
+          async rerender_on: "my-first-collection-update", id: "some-unique-id" do
             collection_content @my_collection.config do
               ul do
                 @my_collection.data.each do |dummy|
@@ -75,6 +77,7 @@ def content
       end
 
       visit "/example"
+      
       # display whole range
       expect(page).to have_content("some-title-1")
       expect(page).to have_content("some-title-11")
@@ -110,6 +113,23 @@ def content
       expect(page).not_to have_content("some-title-1")
       expect(page).not_to have_content("some-title-2")
 
+      click_button "reset"
+      # display whole range again
+      expect(page).to have_content("some-title-1")
+      expect(page).to have_content("some-title-11")
+
+      select "2", from: "my-title-filter-select-ends-with"
+      click_button "filter"
+      # display only matching result
+      expect(page).not_to have_content("some-title-1")
+      expect(page).to have_content("some-title-2")
+
+      select "1", from: "my-title-filter-select-ends-with"
+      click_button "filter"
+      expect(page).to have_content("some-title-1")
+      expect(page).not_to have_content("some-title-2")
+
+      click_button "reset"
       # test persistent state
       fill_in "my-title-filter-input", with: "some-title-2"
       fill_in "my-description-filter-input", with: "some-description-2"
@@ -126,4 +146,4 @@ def content
 
   end
 
-end
+end

spec/dummy/app/matestack/demo/pages/collection.rb

@@ -9,8 +9,11 @@ def prepare
     my_base_query = DummyModel.all
 
     my_filtered_query = my_base_query
-      .where("title LIKE ?", "%#{current_filter[:title]}%")
-      .order(current_order)
+
+    my_filtered_query = my_filtered_query.where("title LIKE ?", "%#{current_filter[:title]}%") if current_filter[:title].present?
+    my_filtered_query = my_filtered_query.where("title LIKE ?", "#{current_filter[:starts_with]}%") if current_filter[:starts_with].present?
+
+    my_filtered_query = my_filtered_query.order(current_order)
 
     @my_collection = set_collection({
       id: "my-first-collection",
@@ -23,92 +26,81 @@ def prepare
   end
 
   def response
-    components {
-      heading size: 2, text: "Collection"
-
-      partial :filter
-      partial :ordering
-      
-      async rerender_on: "my-first-collection-update" do
-        partial :content
-      end
-    }
+    heading size: 2, text: "Collection"
+
+    partial :filter
+    partial :ordering
+
+    async rerender_on: "my-first-collection-update", id: "my-collection" do
+      partial :content
+    end
   end
 
   def filter
-    partial {
-      collection_filter @my_collection.config do
-
-        collection_filter_input key: :title, type: :text, placeholder: "Filter by Title"
-        collection_filter_input id: "my-description-filter-input", key: :description, type: :text, placeholder: "Filter by description"
-        collection_filter_submit do
-          button text: "filter"
-        end
-        collection_filter_reset do
-          button text: "reset"
-        end
+    collection_filter @my_collection.config do
 
+      collection_filter_select key: :starts_with, options: ("A".."Z").to_a, placeholder: "Starts with"
+      collection_filter_input key: :title, type: :text, placeholder: "Filter by Title"
+      collection_filter_input id: "my-description-filter-input", key: :description, type: :text, placeholder: "Filter by description"
+      collection_filter_submit do
+        button text: "filter"
       end
-    }
+      collection_filter_reset do
+        button text: "reset"
+      end
+
+    end
   end
 
   def ordering
-    partial {
-      collection_order @my_collection.config do
-        plain "sort by: "
-        collection_order_toggle key: :title do
-          button do
-            collection_order_toggle_indicator key: :title, asc: '↑', desc: '↓'
-            plain "title"
-          end
+    collection_order @my_collection.config do
+      plain "sort by: "
+      collection_order_toggle key: :title do
+        button do
+          collection_order_toggle_indicator key: :title, asc: '↑', desc: '↓'
+          plain "title"
         end
       end
-    }
+    end
   end
 
   def content
-    partial {
-      collection_content @my_collection.config do
-        partial :list
-        partial :paginator
-      end
-    }
+    collection_content @my_collection.config do
+      partial :list
+      partial :paginator
+    end
   end
 
   def list
-    partial {
-      ul do
-        @my_collection.paginated_data.each do |dummy|
-          li do
-            plain dummy.title
-            action my_action_config(dummy.id) do
-              button text: "delete"
-            end
+    ul do
+      @my_collection.paginated_data.each do |dummy|
+        li do
+          plain dummy.title
+          action my_action_config(dummy.id) do
+            button text: "delete"
           end
         end
       end
-    }
+    end
   end
 
   def paginator
-    partial {
-      plain "showing #{@my_collection.from} to #{@my_collection.to} of \
-       #{@my_collection.filtered_count} from total #{@my_collection.base_count}"
+    plain "showing #{@my_collection.from} to #{@my_collection.to} of \
+     #{@my_collection.filtered_count} from total #{@my_collection.base_count}"
 
-      collection_content_previous do
-        button text: "previous"
-      end
+    collection_content_previous do
+      button text: "previous"
+    end
 
-      @my_collection.pages.each do |page|
-        collection_content_page_link page: page do
-          button text: page
-        end
+    @my_collection.pages.each do |page|
+      collection_content_page_link page: page do
+        button text: page
       end
+    end
 
-      collection_content_next do
-        button text: "next"
-      end
-    }
+    collection_content_next do
+      button text: "next"
+    end
   end
 
   def my_action_config id