raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-27 01:43:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

BPUR: toggle visbility of columns

Browse Source
This commit is contained in:
Rob H
2013-06-21 15:36:25 +05:30
committed by Rohan Mitchell
parent f750251cb8
commit 23a56ff4f1
4 changed files with 123 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
app/assets/javascripts/admin/bulk_product_update.js
View File

@@ -88,12 +88,51 @@ productsApp.directive('ngToggleVariants',function(){
};
});
productsApp.directive('ngToggleColumn',function(){
return {
link: function(scope,element,attrs){
if (!scope.column.visible) { element.addClass("unselected"); }
element.click('click', function(){
scope.$apply(function(){
if (scope.column.visible) { scope.column.visible = false; element.addClass("unselected"); }
else { scope.column.visible = true; element.removeClass("unselected"); }
});
});
}
};
});
productsApp.directive('ngToggleColumnList', function($compile){
return {
link: function(scope,element,attrs){
var dialogDiv = element.next();
element.on('click',function(){
var pos = element.position();
var height = element.outerHeight();
dialogDiv.css({
position: "absolute",
top: (pos.top + height) + "px",
left: pos.left + "px",
}).toggle();
});
}
}
});
productsApp.controller('AdminBulkProductsCtrl', function($scope, $timeout, $http, dataFetcher) {
$scope.updateStatusMessage = {
text: "",
style: {}
}
$scope.columns = {
name: { name: 'Name', visible: true },
supplier: { name: 'Supplier', visible: true },
price: { name: 'Price', visible: true },
on_hand: { name: 'On Hand', visible: true },
available_on: { name: 'Available On', visible: true }
}
$scope.refreshSuppliers = function(){
dataFetcher('/enterprises/suppliers.json').then(function(data){
$scope.suppliers = data;

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

@@ -2,10 +2,6 @@
display: block;
}
th.firstcol, td.firstcol {
border-left: 1px solid #cee1f4;
}
tbody.odd {
tr.product { td { background-color: white; } }
tr.variant.odd { td { background-color: lighten(#eff5fc, 3); } }
@@ -20,3 +16,34 @@ tbody.even {
tbody tr.product td.actions { background-color: transparent; }
tbody tr.variant td.actions { background-color: transparent; }
tbody tr.variant td { padding: 5px 10px; }
th.left-actions, td.left-actions {
background-color: transparent !important;
border: none !important;
border-right: 1px solid #cee1f4 !important;
}
li.column-list-item {
border-radius: 3px;
padding: 2px 20px;
margin: 2px 1px;
border: 2px solid darken(#5498da, 3);
background-color: #5498da;
color: white;
font-size: 100%;
cursor: default;
}
li.column-list-item.unselected {
background-color: white;
border: 2px solid lightgray;
color: darkgray;
font-size: 100%;
}
ul.column-list{
padding: 5px 8px;
border-radius: 3px;
border: solid 1px darkgray;
list-style:none
}

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

@@ -15,51 +15,56 @@
%div.options
Filter Results:
%input.search{ 'ng-model' => 'query', :type => 'text', 'placeholder' => 'Search Value' }
%input{ :type => 'button', :value => 'Toggle Columns', 'ng-toggle-column-list' => true }
%div{ :style => 'display: none;' }
%ul.column-list{ style: 'border: 1px solid darkgray; background-color: white;' }
%li.column-list-item{ 'ng-toggle-column' => 'column', 'ng-repeat' => 'column in columns' }
{{ column.name }}
%br.clear
%br.clear
%table.index#listing_products
%thead
%tr
%th.actions
%th.firstcol Name
%th Supplier
%th Price
%th On Hand
%th Av. On
%th.left-actions
%th{ 'ng-show' => 'columns.name.visible' } Name
%th{ 'ng-show' => 'columns.supplier.visible' } Supplier
%th{ 'ng-show' => 'columns.price.visible' } Price
%th{ 'ng-show' => 'columns.on_hand.visible' } On Hand
%th{ 'ng-show' => 'columns.available_on.visible' } Av. On
%th.actions
%tbody{ 'ng-repeat' => 'product in products | filter:query', 'ng-class-even' => "'even'", 'ng-class-odd' => "'odd'" }
%tr.product
%td.actions
%td.left-actions
%a{ 'ng-toggle-variants' => 'true', :class => "view-variants icon-chevron-right", 'ng-show' => 'hasVariants(product)' }
%td.firstcol
%td{ 'ng-show' => 'columns.name.visible' }
%input{ 'ng-model' => "product.name", :name => 'product_name', 'ng-track-product' => 'name', :type => 'text' }
%td
%td{ 'ng-show' => 'columns.supplier.visible' }
%select.select2{ 'ng-model' => 'product.supplier', :name => 'supplier', 'ng-track-product' => 'supplier', 'ng-options' => 's.name for s in suppliers' }
%td
%td{ 'ng-show' => 'columns.price.visible' }
%input{ 'ng-model' => 'product.price', 'ng-decimal' => :true, :name => 'price', 'ng-track-product' => 'price', :type => 'text' }
%td
%td{ 'ng-show' => 'columns.on_hand.visible' }
%span{ 'ng-bind' => 'product.on_hand', :name => 'on_hand', 'ng-show' => 'hasVariants(product)' }
%input.field{ 'ng-model' => 'product.on_hand', :name => 'on_hand', 'ng-track-product' => 'on_hand', 'ng-show' => '!hasVariants(product)', :type => 'number' }
%td
%td{ 'ng-show' => 'columns.available_on.visible' }
%input{ 'ng-model' => 'product.available_on', :name => 'available_on', 'ng-track-product' => 'available_on', :type => 'text' }
%td.actions
%a{ 'ng-click' => 'editWarn(product)', :class => "edit-product icon-edit no-text" }
%a{ 'ng-click' => 'cloneProduct(product)', :class => "clone-product icon-copy no-text" }
%a{ 'ng-click' => 'deleteProduct(product)', :class => "delete-product icon-trash no-text" }
%tr.variant{ 'ng-repeat' => 'variant in product.variants', 'ng-show' => 'displayProperties[product.id].showVariants', 'ng-class-even' => "'even'", 'ng-class-odd' => "'odd'" }
%td.actions
%td.left-actions
%a{ :class => "variant-item icon-caret-right" }
%td.firstcol
%td{ 'ng-show' => 'columns.name.visible' }
{{ variant.options_text }}
%td
%td
%td{ 'ng-show' => 'columns.supplier.visible' }
%td{ 'ng-show' => 'columns.price.visible' }
%input{ 'ng-model' => 'variant.price', 'ng-decimal' => :true, :name => 'variant_price', 'ng-track-variant' => 'price', :type => 'text' }
%td
%td{ 'ng-show' => 'columns.on_hand.visible' }
%input.field{ 'ng-model' => 'variant.on_hand', 'ng-change' => 'updateOnHand(product)', :name => 'variant_on_hand', 'ng-track-variant' => 'on_hand', :type => 'number' }
%td
%td{ 'ng-show' => 'columns.available_on.visible' }
%td.actions
%a{ 'ng-click' => 'editWarn(product,variant)', :class => "edit-variant icon-edit no-text" }
%a{ 'ng-click' => 'deleteVariant(product,variant)', :class => "delete-variant icon-trash no-text" }
%input{:type => 'button', :value => 'Update', 'ng-click' => 'prepareProductsForSubmit()'}
%input{ :type => 'button', :value => 'Update', 'ng-click' => 'prepareProductsForSubmit()'}
%span{ id: "update-status-message", 'ng-style' => 'updateStatusMessage.style' }
{{ updateStatusMessage.text }}

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

@@ -393,4 +393,33 @@ feature %q{
end
end
end
describe "using the page" do
describe "using column display toggle" do
it "shows a column display toggle button, which shows a list of columns when clicked" do
login_to_admin_section
visit '/admin/products/bulk_edit'
page.should have_selector "th", :text => "NAME"
page.should have_selector "th", :text => "SUPPLIER"
page.should have_selector "th", :text => "PRICE"
page.should have_selector "th", :text => "ON HAND"
page.should have_selector "th", :text => "AV. ON"
page.should have_button "Toggle Columns"
click_button "Toggle Columns"
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
page.should_not have_selector "th", :text => "SUPPLIER"
page.should have_selector "th", :text => "NAME"
page.should have_selector "th", :text => "PRICE"
page.should have_selector "th", :text => "ON HAND"
page.should have_selector "th", :text => "AV. ON"
end
end
end
end