raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP: Adding basic UI for applying hard filtering to BPE

Browse Source
This commit is contained in:
Rob H
2014-01-04 19:21:10 +08:00
parent 7ef358a476
commit a6d7044dfd
5 changed files with 91 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/javascripts/admin/bulk_product_update.js.coffee
View File

@@ -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

14
app/assets/stylesheets/admin/products.css.scss
View File

@@ -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); } }

29
app/views/spree/admin/products/bulk_edit.html.haml
View File

@@ -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:

28
spec/features/admin/bulk_product_update_spec.rb
View File

@@ -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

20
spec/javascripts/unit/bulk_product_update_spec.js.coffee
View File

@@ -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)