BOM interface cleanup

This commit is contained in:
Rob H
2014-04-06 19:22:17 +10:00
parent 0a6230088d
commit aad5ad4bc0
3 changed files with 46 additions and 79 deletions

View File

@@ -2,12 +2,12 @@ dropDownModule = angular.module("ofn.dropdown", [])
dropDownModule.directive "ofnDropDown", ($document) ->
link: (scope, element, attrs) ->
outsideClickListener = ->
outsideClickListener = (event) ->
unless $(event.target).is("div.ofn_drop_down##{attrs.id} div.menu") ||
$(event.target).parents("div.ofn_drop_down##{attrs.id} div.menu").length > 0
scope.$emit "offClick"
element.click ->
element.click (event) ->
if !scope.expanded
event.stopPropagation()
scope.deregistrationCallback = scope.$on "offClick", ->
@@ -23,7 +23,7 @@ dropDownModule.directive "ofnDropDown", ($document) ->
dropDownModule.directive "ofnCloseOnClick", ($document) ->
link: (scope, element, attrs) ->
element.click ->
element.click (event) ->
event.stopPropagation()
scope.$emit "offClick"

View File

@@ -6,34 +6,29 @@
%div{ 'ng-app' => 'ofn.bulk_order_management', 'ng-controller' => 'AdminOrderMgmtCtrl', 'ng-init' => "initialise('#{@spree_api_key}');loading=true;" }
%div{ 'ng-show' => '!spree_api_key_ok' }
{{ api_error_msg }}
.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 }}
.filters{ :class => "nine columns alpha", 'ng-show' => 'optionTabs.filters.visible' }
.row{ :class => "six columns alpha" }
.date_filter{ :class => "three columns alpha" }
%label{ :for => 'start_date_filter' }Start Date
%br
%input{ :class => "three columns alpha", :type => "text", :id => 'start_date_filter', 'ng-model' => 'startDate', 'datetimepicker' => "startDate", 'ofn-confirm-change' => "startDate" }
.date_filter{ :class => "three columns alpha" }
%label{ :for => 'end_date_filter' }End Date
%br
%input{ :class => "three columns alpha", :type => "text", :id => 'end_date_filter', 'ng-model' => 'endDate', 'datetimepicker' => "endDate", 'ofn-confirm-change' => "endDate" }
.row{ :class => "nine columns alpha" }
.filter_select{ :class => "three columns alpha" }
%label{ :for => 'supplier_filter' }Producer
%br
%select{ :class => "three columns alpha", :id => 'supplier_filter', 'ofn-select2-min-search' => 5, 'ng-model' => 'supplierFilter', 'ng-options' => 's.name for s in suppliers' }
.filter_select{ :class => "three columns alpha" }
%label{ :for => 'distributor_filter' }Hub
%br
%select{ :class => "three columns alpha", :id => 'distributor_filter', 'ofn-select2-min-search' => 5, 'ng-model' => 'distributorFilter', 'ng-options' => 'd.name for d in distributors'}
.filter_select{ :class => "three columns alpha" }
%label{ :for => 'order_cycle_filter' }Order Cycle
%br
%select{ :class => "three columns alpha", :id => 'order_cycle_filter', 'ofn-select2-min-search' => 5, 'ng-model' => 'orderCycleFilter', 'ng-options' => 'oc.name for oc in orderCycles'}
%div{ :class => "nine columns alpha", 'ng-show' => '!optionTabs.filters.visible && !optionTabs.column_toggle.visible && unitsVariantSelected()' }  .
%div#group_buy_calculation{ :class => "seven columns alpha", 'ng-show' => 'unitsVariantSelected()' }
.filters{ :class => "sixteen columns alpha" }
.date_filter{ :class => "three columns alpha" }
%label{ :for => 'start_date_filter' }Start Date
%br
%input{ :class => "three columns alpha", :type => "text", :id => 'start_date_filter', 'ng-model' => 'startDate', 'datetimepicker' => "startDate", 'ofn-confirm-change' => "startDate" }
.date_filter{ :class => "three columns omega" }
%label{ :for => 'end_date_filter' }End Date
%br
%input{ :class => "three columns alpha", :type => "text", :id => 'end_date_filter', 'ng-model' => 'endDate', 'datetimepicker' => "endDate", 'ofn-confirm-change' => "endDate" }
.one.column.omega  
.filter_select{ :class => "three columns omega" }
%label{ :for => 'supplier_filter' }Producer
%br
%select{ :class => "three columns alpha", :id => 'supplier_filter', 'ofn-select2-min-search' => 5, 'ng-model' => 'supplierFilter', 'ng-options' => 's.name for s in suppliers' }
.filter_select{ :class => "three columns omega" }
%label{ :for => 'distributor_filter' }Hub
%br
%select{ :class => "three columns alpha", :id => 'distributor_filter', 'ofn-select2-min-search' => 5, 'ng-model' => 'distributorFilter', 'ng-options' => 'd.name for d in distributors'}
.filter_select{ :class => "three columns omega" }
%label{ :for => 'order_cycle_filter' }Order Cycle
%br
%select{ :class => "three columns alpha", :id => 'order_cycle_filter', 'ofn-select2-min-search' => 5, 'ng-model' => 'orderCycleFilter', 'ng-options' => 'oc.name for oc in orderCycles'}
%div#group_buy_calculation{ :class => "sixteen columns alpha", 'ng-show' => 'unitsVariantSelected()' }
%div{ :class => "seven columns alpha" }
%h6{ :class => "five columns alpha", 'ng-show' => 'sharedResource' } {{ selectedUnitsProduct.name + ": ALL" }}
%h6{ :class => "five columns alpha", 'ng-hide' => 'sharedResource' } {{ selectedUnitsVariant.unit_text }}
@@ -64,26 +59,29 @@
%hr{ :class => "sixteen columns alpha", :style => "margin-bottom: 15px" }
%div.loading{ :class => "sixteen columns alpha", 'ng-show' => 'loading' }
%h4 Loading Line Items...
%div{ :class => "sixteen columns alpha", 'ng-show' => '!loading && lineItems.length == 0'}
%div{ :class => "sixteen columns alpha", 'ng-show' => '!loading && filteredLineItems.length == 0'}
%h4{ :style => 'color:red;' } No matching line items found.
%div{ 'ng-hide' => 'loading || lineItems.length == 0' }
.controls{ :class => "sixteen columns alpha", :style => "margin-bottom: 15px;" }
%input{ :class => "two columns alpha", :type => "text", :id => 'quick_search', 'ng-model' => 'quickSearch', :placeholder => 'Quick Search' }
%div.ofn_drop_down{ 'ng-controller' => "DropDownCtrl", :class => "two columns omega", :id => "bulk_actions_dropdown", 'ofn-drop-down' => true }
%span Actions
%span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
%div.menu{ 'ng-show' => "expanded" }
%div.menu_item{ :class => "three columns alpha", 'ng-repeat' => "action in bulkActions", 'ng-click' => "selectedBulkAction.callback(filteredLineItems)", 'ofn-close-on-click' => true }
%span{ :class => 'three columns omega' } {{action.name }}
%div{ :class => "ten columns omega" }  
%div.ofn_drop_down{ 'ng-controller' => "DropDownCtrl", :class => "two columns omega", :id => "columns_dropdown", 'ofn-drop-down' => true }
%span Columns
%span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
%div.menu{ 'ng-show' => "expanded" }
%div.menu_item{ :class => "three columns alpha", 'ng-repeat' => "column in columns", 'ofn-toggle-column' => true }
%span{ :class => 'one column alpha', :style => 'text-align: center'} {{ column.visible && "✓" || !column.visible && " " }}
%span{ :class => 'two columns omega' } {{column.name }}
%table.index#listing_orders.bulk
%div{ :class => "three columns alpha" }
%input{ :class => "fullwidth", :type => "text", :id => 'quick_search', 'ng-model' => 'quickSearch', :placeholder => 'Quick Search' }
%div{ :class => "three columns omega" }
%div.ofn_drop_down{ 'ng-controller' => "DropDownCtrl", :id => "bulk_actions_dropdown", 'ofn-drop-down' => true }
%span{ :class => 'icon-check' }   Actions
%span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
%div.menu{ 'ng-show' => "expanded" }
%div.menu_item{ :class => "three columns alpha", 'ng-repeat' => "action in bulkActions", 'ng-click' => "selectedBulkAction.callback(filteredLineItems)", 'ofn-close-on-click' => true }
%span{ :class => 'three columns omega' } {{action.name }}
%div{ :class => "seven columns omega" }  
%div{ :class => "three columns omega" }
%div.ofn_drop_down{ 'ng-controller' => "DropDownCtrl", :id => "columns_dropdown", 'ofn-drop-down' => true }
%span{ :class => 'icon-reorder' }   Columns
%span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
%div.menu{ 'ng-show' => "expanded" }
%div.menu_item{ :class => "three columns alpha", 'ng-repeat' => "column in columns", 'ofn-toggle-column' => true }
%span{ :class => 'one column alpha', :style => 'text-align: center'} {{ column.visible && "✓" || !column.visible && " " }}
%span{ :class => 'two columns omega' } {{column.name }}
%table.index#listing_orders.bulk{ :class => "sixteen columns alpha" }
%thead
%tr
%th.bulk

View File

@@ -161,35 +161,6 @@ feature %q{
let!(:o1) { FactoryGirl.create(:order, state: 'complete', completed_at: Time.now ) }
let!(:li1) { FactoryGirl.create(:line_item, order: o1, :quantity => 5 ) }
context "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
visit '/admin/orders/bulk_management'
page.should_not have_selector "div#columns_dropdown.expanded"
page.should have_selector "div#columns_dropdown div.menu", :visible => false
page.should have_selector "div#columns_dropdown", :text => "COLUMNS"
first("div#columns_dropdown", :text => "COLUMNS").click
page.should have_selector "div#columns_dropdown.expanded"
page.should have_selector "div#columns_dropdown div.menu", :visible => true
page.should have_selector "div#columns_dropdown div.menu div.menu_item", text: "Producer"
page.should have_selector "div.filters", :visible => false
page.should have_selector "div.option_tab_titles h6.unselected", :text => "Filter Line Items"
first("div.option_tab_titles h6", :text => "Filter Line Items").click
page.should have_selector "div.option_tab_titles h6.selected", :text => "Filter Line Items"
page.should have_selector "div.filters", :visible => true
first("div.option_tab_titles h6", :text => "Filter Line Items").click
page.should have_selector "div.option_tab_titles h6.unselected", :text => "Filter Line Items"
page.should have_selector "div.filters", :visible => false
end
end
context "using column display toggle" do
it "shows a column display toggle button, which shows a list of columns when clicked" do
visit '/admin/orders/bulk_management'
@@ -229,7 +200,6 @@ feature %q{
before :each do
visit '/admin/orders/bulk_management'
first("div.option_tab_titles h6", :text => "Filter Line Items").click
end
it "displays a select box for producers, which filters line items by the selected supplier" do
@@ -353,7 +323,6 @@ feature %q{
before :each do
visit '/admin/orders/bulk_management'
first("div.option_tab_titles h6", :text => "Filter Line Items").click
end
it "displays date fields for filtering orders, with default values set" do