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

Toggle new view controls on BPE

Browse Source
This commit is contained in:
Rob H
2014-01-10 00:26:54 +08:00
parent c396c2a21f
commit ee2da3e008
4 changed files with 125 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -65,6 +65,7 @@ productsApp.directive "ofnToggleVariants", ->
element.addClass "icon-chevron-down"
productsApp.directive "ofnToggleColumn", ->
link: (scope, element, attrs) ->
element.addClass "unselected" unless scope.column.visible
@@ -148,7 +149,11 @@ productsApp.controller "AdminBulkProductsCtrl", [
{ name: "Contains", predicate: "cont" }
]
$scope.optionTabs =
filters: { title: "Filter Products", visible: false }
column_toggle: { title: "Toggle Columns", visible: false }
$scope.visibleTab = { title: "Lala" }
$scope.perPage = 25
$scope.currentPage = 1
$scope.products = []
@@ -244,6 +249,10 @@ productsApp.controller "AdminBulkProductsCtrl", [
onHand = "error"
onHand
$scope.shiftTab = (tab) ->
$scope.visibleTab.visible = false unless $scope.visibleTab == tab
tab.visible = !tab.visible
$scope.visibleTab = tab
$scope.addFilter = (filter) ->
if $scope.filterableColumns.indexOf(filter.property) >= 0

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

@@ -16,9 +16,7 @@ div.pagination_info {
text-align: right;
}
div.filters {
margin-bottom: 10px;
}
div.applied_filter {
margin-bottom: 5px;
@@ -30,6 +28,33 @@ div.applied_filter {
}
}
div.option_tabs {
div.applied_filters, div.filters, div.column_toggle {
margin-bottom: 10px;
}
}
div.option_tab_titles {
h6 {
border-radius: 3px;
border: 1px solid #cee1f4;
padding: 3px;
text-align: center;
color: darken(#cee1f4, 3);
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
h6.selected {
border: 1px solid #5498da;
color: #5498da;
}
margin-bottom: 10px;
}
tbody.odd {
tr.product { td { background-color: white; } }
tr.variant.odd { td { background-color: lighten(#eff5fc, 3); } }
@@ -55,11 +80,18 @@ li.column-list-item {
border-radius: 3px;
padding: 2px 20px;
margin: 2px 1px;
border: 2px solid darken(#5498da, 3);
border: 2px solid #5498da;
background-color: #5498da;
color: white;
font-size: 100%;
cursor: default;
text-align: center;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
li.column-list-item.unselected {
@@ -70,10 +102,7 @@ li.column-list-item.unselected {
}
ul.column-list {
padding: 5px 8px;
border-radius: 3px;
border: solid 1px darkgray;
list-style:none
list-style: none;
}
table#listing_products.bulk {

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

@@ -16,33 +16,41 @@
%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 => "sixteen columns alpha" }
%h5 Filter Products
%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 => "six columns omega" }
Value:
%br.clear
%input{ :class => "four columns alpha", 'ng-model' => 'filterValue', :name => "filter_value", :type => "text", 'placeholder' => 'Filter Value' }
%div{ :class => "two columns omega" }
 
%input.fullwidth{ :name => "add_filter", :value => "Apply Filter", :type => "button", "ng-click" => "addFilter({property:filterProperty,predicate:filterPredicate,value:filterValue})" }
%div.applied_filter{ :class => "sixteen 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 => "six columns omega" }
{{ filter.value }}
%div{ :class => "two columns omega" }
%a{ 'ng-click' => "removeFilter(filter)" } Remove Filter
%hr
%div.option_tab_titles{ :class => "sixteen columns alpha" }
%h6{ :class => "three columns alpha", 'ng-repeat' => "tab in optionTabs", "ng-click" => "shiftTab(tab)", "ng-class" => "tab.visible && 'selected' || !tab.visible && 'unselected'"}
{{ tab.title }}
%div.option_tabs{ :class => "sixteen columns alpha" }
%div.filters{ :class => "sixteen columns alpha", "ng-show" => 'optionTabs.filters.visible' }
%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 => "six columns omega" }
Value:
%br.clear
%input{ :class => "four columns alpha", 'ng-model' => 'filterValue', :name => "filter_value", :type => "text", 'placeholder' => 'Filter Value' }
%div{ :class => "two columns omega" }
 
%input.fullwidth{ :name => "add_filter", :value => "Apply Filter", :type => "button", "ng-click" => "addFilter({property:filterProperty,predicate:filterPredicate,value:filterValue})" }
%div.applied_filters{ :class => "sixteen columns alpha", "ng-show" => 'optionTabs.filters.visible && currentFilters.length > 0' }
%div.applied_filter{ :class => "sixteen 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 => "six columns omega" }
{{ filter.value }}
%div{ :class => "two columns omega" }
%a{ 'ng-click' => "removeFilter(filter)" } Remove Filter
%div.column_toggle{ :class => "sixteen columns alpha", "ng-show" => 'optionTabs.column_toggle.visible' }
%ul.column-list{ :class => "sixteen columns alpha" }
%li.column-list-item{ :class => "three columns alpha", 'ofn-toggle-column' => 'column', 'ng-repeat' => 'column in columns' }
{{ column.name }}
%hr
%div.loading{ 'ng-show' => 'loading' }
%h4 Loading Products...
%div{ 'ng-show' => '!loading && products.length == 0' }
@@ -50,14 +58,6 @@
%div{ 'ng-show' => 'products.length == 500' }
%h6 Search returned too many products to display (500+), please apply more search filters to reduce the number of matching products
%div{ 'ng-hide' => 'loading || products.length == 500 || products.length == 0' }
%div.column_toggle
%h5 Toggle Columns
%input{ :type => 'button', :value => 'Toggle Columns', 'ofn-toggle-column-list' => true }
%div{ :style => 'display: none;' }
%ul.column-list{ style: 'border: 1px solid darkgray; background-color: white;' }
%li.column-list-item{ 'ofn-toggle-column' => 'column', 'ng-repeat' => 'column in columns' }
{{ column.name }}
%hr
%div.quick_search{ :class => "five columns omega" }
%input.search{ :class => "four columns alpha", 'ng-model' => 'query', :name => "quick_filter", :type => 'text', 'placeholder' => 'Quick Search' }
%div.pagination{ :class => "seven columns omega" }

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

@@ -407,6 +407,8 @@ feature %q{
visit '/admin/products/bulk_edit'
first("div.option_tab_titles h6", :text => "Filter Products").click
select "Name", :from => "filter_property"
select "Contains", :from => "filter_predicate"
fill_in "filter_value", :with => "1"
@@ -537,6 +539,41 @@ feature %q{
end
describe "using the page" do
describe "using tabs to hide and display page controls" do
it "shows a column display toggle button, which shows a list of columns when clicked" do
FactoryGirl.create(:simple_product)
login_to_admin_section
visit '/admin/products/bulk_edit'
page.should have_selector "div.column_toggle", :visible => false
page.should have_selector "div.option_tab_titles h6.unselected", :text => "Toggle Columns"
first("div.option_tab_titles h6", :text => "Toggle Columns").click
page.should have_selector "div.option_tab_titles h6.selected", :text => "Toggle Columns"
page.should have_selector "div.column_toggle", :visible => true
page.should have_selector "li.column-list-item", text: "Available On"
page.should have_selector "div.filters", :visible => false
page.should have_selector "div.option_tab_titles h6.unselected", :text => "Filter Products"
first("div.option_tab_titles h6", :text => "Filter Products").click
page.should have_selector "div.option_tab_titles h6.unselected", :text => "Toggle Columns"
page.should have_selector "div.option_tab_titles h6.selected", :text => "Filter Products"
page.should have_selector "div.filters", :visible => true
page.should have_selector "li.column-list-item", text: "Available On"
first("div.option_tab_titles h6", :text => "Filter Products").click
page.should have_selector "div.option_tab_titles h6.unselected", :text => "Filter Products"
page.should have_selector "div.option_tab_titles h6.unselected", :text => "Toggle Columns"
page.should have_selector "div.filters", :visible => false
page.should have_selector "div.column_toggle", :visible => false
end
end
describe "using column display toggle" do
it "shows a column display toggle button, which shows a list of columns when clicked" do
FactoryGirl.create(:simple_product)
@@ -550,9 +587,9 @@ feature %q{
page.should have_selector "th", :text => "ON HAND"
page.should have_selector "th", :text => "AV. ON"
page.should have_button "Toggle Columns"
page.should have_selector "div.option_tab_titles h6", :text => "Toggle Columns"
click_button "Toggle Columns"
first("div.option_tab_titles h6", :text => "Toggle Columns").click
page.should have_selector "div ul.column-list li.column-list-item", text: "Supplier"
all("div ul.column-list li.column-list-item").select{ |e| e.text == "Supplier" }.first.click
@@ -648,6 +685,9 @@ feature %q{
login_to_admin_section
visit '/admin/products/bulk_edit'
page.should have_selector "div.option_tab_titles h6", :text => "Filter Products"
first("div.option_tab_titles h6", :text => "Filter Products").click
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"
@@ -661,6 +701,8 @@ feature %q{
login_to_admin_section
visit '/admin/products/bulk_edit'
first("div.option_tab_titles h6", :text => "Filter Products").click
select "Name", :from => "filter_property"
select "Equals", :from => "filter_predicate"
fill_in "filter_value", :with => "Product1"