raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-03-13 04:00:21 +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: