From 23a56ff4f13330805beebb8e6251c809cba15f4a Mon Sep 17 00:00:00 2001 From: Rob H Date: Fri, 21 Jun 2013 15:36:25 +0530 Subject: [PATCH] BPUR: toggle visbility of columns --- .../javascripts/admin/bulk_product_update.js | 39 +++++++++++++++++ .../stylesheets/admin/products.css.scss | 35 +++++++++++++-- .../spree/admin/products/bulk_edit.html.haml | 43 +++++++++++-------- .../admin/bulk_product_update_spec.rb | 29 +++++++++++++ 4 files changed, 123 insertions(+), 23 deletions(-) diff --git a/app/assets/javascripts/admin/bulk_product_update.js b/app/assets/javascripts/admin/bulk_product_update.js index 7b8543193f..712fce1bad 100644 --- a/app/assets/javascripts/admin/bulk_product_update.js +++ b/app/assets/javascripts/admin/bulk_product_update.js @@ -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; diff --git a/app/assets/stylesheets/admin/products.css.scss b/app/assets/stylesheets/admin/products.css.scss index 7c739159c8..966b983b67 100644 --- a/app/assets/stylesheets/admin/products.css.scss +++ b/app/assets/stylesheets/admin/products.css.scss @@ -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 +} \ No newline at end of file diff --git a/app/views/spree/admin/products/bulk_edit.html.haml b/app/views/spree/admin/products/bulk_edit.html.haml index fce6d9aecd..75efe38463 100644 --- a/app/views/spree/admin/products/bulk_edit.html.haml +++ b/app/views/spree/admin/products/bulk_edit.html.haml @@ -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 }} \ No newline at end of file diff --git a/spec/features/admin/bulk_product_update_spec.rb b/spec/features/admin/bulk_product_update_spec.rb index 936e0fb993..c2bd923a1d 100644 --- a/spec/features/admin/bulk_product_update_spec.rb +++ b/spec/features/admin/bulk_product_update_spec.rb @@ -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 \ No newline at end of file