From a6d7044dfd7eca59504086fc2331c2ed0c30201d Mon Sep 17 00:00:00 2001 From: Rob H Date: Sat, 4 Jan 2014 19:21:10 +0800 Subject: [PATCH] WIP: Adding basic UI for applying hard filtering to BPE --- .../admin/bulk_product_update.js.coffee | 15 +++++++--- .../stylesheets/admin/products.css.scss | 14 +++++++++ .../spree/admin/products/bulk_edit.html.haml | 29 ++++++++++++++++++- .../admin/bulk_product_update_spec.rb | 28 ++++++++++++++++++ .../unit/bulk_product_update_spec.js.coffee | 20 ++++++------- 5 files changed, 91 insertions(+), 15 deletions(-) diff --git a/app/assets/javascripts/admin/bulk_product_update.js.coffee b/app/assets/javascripts/admin/bulk_product_update.js.coffee index 5f0f0c6e71..809e1a0628 100644 --- a/app/assets/javascripts/admin/bulk_product_update.js.coffee +++ b/app/assets/javascripts/admin/bulk_product_update.js.coffee @@ -138,10 +138,17 @@ productsApp.controller "AdminBulkProductsCtrl", [ ["Items", "items"] ] - $scope.filterTypes = [ - { name: "Equals", ransack_predicate: "eq" } + $scope.filterableColumns = [ + { name: "Supplier", db_column: "supplier" }, + { name: "Name", db_column: "name" } ] + $scope.filterTypes = [ + { name: "Equals", predicate: "eq" }, + { name: "Contains", predicate: "eq" } + ] + + $scope.perPage = 25 $scope.currentPage = 1 $scope.products = [] @@ -231,8 +238,8 @@ productsApp.controller "AdminBulkProductsCtrl", [ $scope.addFilter = (filter) -> - if Object.keys($scope.columns).indexOf(filter.property) >= 0 - if $scope.filterTypes.map( (filter_type) -> filter_type.ransack_predicate ).indexOf(filter.ransack_predicate) >= 0 + if $scope.filterableColumns.indexOf(filter.property) >= 0 + if $scope.filterTypes.indexOf(filter.predicate) >= 0 $scope.currentFilters.push filter diff --git a/app/assets/stylesheets/admin/products.css.scss b/app/assets/stylesheets/admin/products.css.scss index 59eed87aea..fdc7517387 100644 --- a/app/assets/stylesheets/admin/products.css.scss +++ b/app/assets/stylesheets/admin/products.css.scss @@ -12,6 +12,20 @@ div.pagination { } } +div.filters { + margin-bottom: 10px; +} + +div.applied_filter { + margin-bottom: 5px; + border: solid 2px grey; + padding: 5px 0px; + border-radius: 5px; + div.four.columns { + padding-left: 10px; + } +} + tbody.odd { tr.product { td { background-color: white; } } tr.variant.odd { td { background-color: lighten(#eff5fc, 3); } } diff --git a/app/views/spree/admin/products/bulk_edit.html.haml b/app/views/spree/admin/products/bulk_edit.html.haml index 26f3162c5e..49e5ee31c6 100644 --- a/app/views/spree/admin/products/bulk_edit.html.haml +++ b/app/views/spree/admin/products/bulk_edit.html.haml @@ -16,8 +16,35 @@ %div{ 'ng-app' => 'bulk_product_update', 'ng-controller' => 'AdminBulkProductsCtrl', 'ng-init' => "initialise('#{@spree_api_key}');loading=true;" } %div{ 'ng-show' => '!spree_api_key_ok' } {{ api_error_msg }} + %div.filters{ :class => "fourteen columns alpha" } + %h3 Filter Products + %br.clear + %div{ :class => "four columns alpha" } + Column: + %br.clear + %select.select2.fullwidth{ 'ng-model' => 'filterProperty', :name => "filter_property", 'ng-options' => 'fc.name for fc in filterableColumns' } + %div{ :class => "four columns omega" } + Filter Type: + %br.clear + %select.select2.fullwidth{ 'ng-model' => 'filterPredicate', :name => "filter_predicate", 'ng-options' => 'ft.name for ft in filterTypes' } + %div{ :class => "four columns omega" } + Value: + %br.clear + %input.fullwidth{ 'ng-model' => 'filterValue', :name => "filter_value", :type => "text", 'placeholder' => 'Filter Value' } + %div{ :class => "two columns omega" } +   + %input{ :name => "add_filter", :value => "Apply Filter", :type => "button", "ng-click" => "addFilter({property:filterProperty,predicate:filterPredicate,value:filterValue})" } + %div.applied_filter{ :class => "fourteen columns alpha", 'ng-repeat' => 'filter in currentFilters' } + %div{ :class => "four columns alpha" } + {{ filter.property.name }} + %div{ :class => "four columns omega" } + {{ filter.predicate.name }} + %div{ :class => "four columns omega" } + {{ filter.value }} + %br.clear + %hr %div.loading{ 'ng-show' => 'loading' } - %h2 Loading Products... + %h4 Loading Products... %div{ 'ng-hide' => 'loading' } %div.options Filter Results: diff --git a/spec/features/admin/bulk_product_update_spec.rb b/spec/features/admin/bulk_product_update_spec.rb index 890de37968..8c56588a9a 100644 --- a/spec/features/admin/bulk_product_update_spec.rb +++ b/spec/features/admin/bulk_product_update_spec.rb @@ -608,6 +608,34 @@ feature %q{ page.should have_text "1" end end + + describe "using filtering controls" do + it "displays basic filtering controls" do + FactoryGirl.create(:simple_product) + + login_to_admin_section + visit '/admin/products/bulk_edit' + + page.should have_select "filter_property", :with_options => ["Supplier", "Name"] + page.should have_select "filter_predicate", :with_options => ["Equals", "Contains"] + page.should have_field "filter_value" + end + + it "adds a new filter when the 'Apply Filter' button is clicked" do + FactoryGirl.create(:simple_product, :name => "Product1") + FactoryGirl.create(:simple_product, :name => "Product2") + + login_to_admin_section + visit '/admin/products/bulk_edit' + + select "Name", :from => "filter_property" + select "Equals", :from => "filter_predicate" + fill_in "filter_value", :with => "Product1" + click_button "Apply Filter" + + page.should have_text "Name Equals Product1" + end + end end context "as an enterprise manager" do diff --git a/spec/javascripts/unit/bulk_product_update_spec.js.coffee b/spec/javascripts/unit/bulk_product_update_spec.js.coffee index bbf6d4993c..7857fbb375 100644 --- a/spec/javascripts/unit/bulk_product_update_spec.js.coffee +++ b/spec/javascripts/unit/bulk_product_update_spec.js.coffee @@ -902,25 +902,25 @@ describe "AdminBulkProductsCtrl", -> describe "filtering products", -> describe "adding a filter to the filter list", -> it "adds objects sent to addFilter() to $scope.currentFilters", -> - filterObject1 = {property: "name", ransack_predicate: "eq", value: "Product1"} - filterObject2 = {property: "name", ransack_predicate: "eq", value: "Product2"} + filterObject1 = {property: scope.filterableColumns[0], predicate: scope.filterTypes[0], value: "Product1"} + filterObject2 = {property: scope.filterableColumns[0], predicate: scope.filterTypes[0], value: "Product2"} scope.addFilter(filterObject1) scope.addFilter(filterObject2) expect(scope.currentFilters).toEqual [filterObject1, filterObject2] - it "ignores objects sent to addFilter() which do not contain a 'property' with a corresponding key in $scope.columns", -> - filterObject1 = {property: Object.keys(scope.columns)[0], ransack_predicate: "eq", value: "value1"} - filterObject2 = {property: Object.keys(scope.columns)[2], ransack_predicate: "eq", value: "value2"} - filterObject3 = {property: "some_random_property", ransack_predicate: "eq", value: "value3"} + it "ignores objects sent to addFilter() which do not contain a 'property' with a corresponding key in filterableColumns", -> + filterObject1 = {property: scope.filterableColumns[0], predicate: scope.filterTypes[0], value: "value1"} + filterObject2 = {property: scope.filterableColumns[1], predicate: scope.filterTypes[0], value: "value2"} + filterObject3 = {property: "some_random_property", predicate: scope.filterTypes[0], value: "value3"} scope.addFilter(filterObject1) scope.addFilter(filterObject2) scope.addFilter(filterObject3) expect(scope.currentFilters).toEqual [filterObject1, filterObject2] - it "ignores objects sent to addFilter() which do not contain a query with a corresponding key in ", -> - filterObject1 = {property: Object.keys(scope.columns)[0], ransack_predicate: "eq", value: "value1"} - filterObject2 = {property: Object.keys(scope.columns)[2], ransack_predicate: "eq", value: "value2"} - filterObject3 = {property: Object.keys(scope.columns)[4], ransack_predicate: "something", value: "value3"} + it "ignores objects sent to addFilter() which do not contain a query with a corresponding key in filterTypes", -> + filterObject1 = {property: scope.filterableColumns[0], predicate: scope.filterTypes[0], value: "value1"} + filterObject2 = {property: scope.filterableColumns[0], predicate: scope.filterTypes[1], value: "value2"} + filterObject3 = {property: scope.filterableColumns[0], predicate: "something", value: "value3"} scope.addFilter(filterObject1) scope.addFilter(filterObject2) scope.addFilter(filterObject3)