From 7008d26f6877c3e8ffbd9669a1fa49eb6a73859e Mon Sep 17 00:00:00 2001 From: Rob Harrington Date: Wed, 20 Jan 2016 18:36:28 +1100 Subject: [PATCH] WIP: Alerting user to presence of new variant for inventory, new variants can be filtered + limited --- .../utils/directives/alert_row.js.coffee | 15 ++++ .../templates/admin/alert_row.html.haml | 8 ++ .../admin/components/alert_row.css.scss | 20 +++++ .../admin/components/save_bar.sass | 4 - app/assets/stylesheets/admin/offets.css.scss | 7 ++ .../stylesheets/admin/typography.css.scss | 9 +++ .../admin/inventory_items_controller.rb | 4 +- .../variant_overrides/_new_variants.html.haml | 79 +++++++++++++------ .../variant_overrides/_products.html.haml | 6 +- .../admin/variant_overrides/index.html.haml | 19 ++--- 10 files changed, 128 insertions(+), 43 deletions(-) create mode 100644 app/assets/javascripts/admin/utils/directives/alert_row.js.coffee create mode 100644 app/assets/javascripts/templates/admin/alert_row.html.haml create mode 100644 app/assets/stylesheets/admin/components/alert_row.css.scss create mode 100644 app/assets/stylesheets/admin/offets.css.scss create mode 100644 app/assets/stylesheets/admin/typography.css.scss diff --git a/app/assets/javascripts/admin/utils/directives/alert_row.js.coffee b/app/assets/javascripts/admin/utils/directives/alert_row.js.coffee new file mode 100644 index 0000000000..1c9afdb5b6 --- /dev/null +++ b/app/assets/javascripts/admin/utils/directives/alert_row.js.coffee @@ -0,0 +1,15 @@ +angular.module("admin.utils").directive "alertRow", -> + restrict: "E" + replace: true + scope: + message: '@' + buttonText: '@?' + buttonAction: '&?' + close: "&?" + transclude: true + templateUrl: "admin/alert_row.html" + link: (scope, element, attrs) -> + scope.dismiss = -> + scope.close() if scope.close? + element.hide() + return false diff --git a/app/assets/javascripts/templates/admin/alert_row.html.haml b/app/assets/javascripts/templates/admin/alert_row.html.haml new file mode 100644 index 0000000000..ed1ce00849 --- /dev/null +++ b/app/assets/javascripts/templates/admin/alert_row.html.haml @@ -0,0 +1,8 @@ +.sixteen.columns.alpha.omega.alert-row + .fifteen.columns.pad.alpha + %span.text-big{ ng: { bind: 'message'} } +     + %input{ type: 'button', ng: { value: "buttonText", show: 'buttonText && buttonAction', click: "buttonAction()" } } + .one.column.omega.pad.text-center + %a.close{ href: "#", ng: { click: "dismiss()" } } + × diff --git a/app/assets/stylesheets/admin/components/alert_row.css.scss b/app/assets/stylesheets/admin/components/alert_row.css.scss new file mode 100644 index 0000000000..6ddf9e731b --- /dev/null +++ b/app/assets/stylesheets/admin/components/alert_row.css.scss @@ -0,0 +1,20 @@ +.alert-row{ + font-weight: bold; + background-color: #eff5fc; + + .column, .columns { + padding-top: 8px; + padding-bottom: 8px; + &.alpha { padding-left: 10px; } + &.omega { padding-right: 10px; } + } + + span { + line-height: 3rem; + } + + a.close { + line-height: 3rem; + font-size: 2.0rem; + } +} diff --git a/app/assets/stylesheets/admin/components/save_bar.sass b/app/assets/stylesheets/admin/components/save_bar.sass index 3fdeb47339..c6b1236490 100644 --- a/app/assets/stylesheets/admin/components/save_bar.sass +++ b/app/assets/stylesheets/admin/components/save_bar.sass @@ -7,7 +7,3 @@ color: #5498da h5 color: #5498da - -// Making space for save-bar -.margin-bottom-50 - margin-bottom: 50px diff --git a/app/assets/stylesheets/admin/offets.css.scss b/app/assets/stylesheets/admin/offets.css.scss new file mode 100644 index 0000000000..762b7469f6 --- /dev/null +++ b/app/assets/stylesheets/admin/offets.css.scss @@ -0,0 +1,7 @@ +.margin-bottom-20 { + margin-bottom: 20px; +} + +.margin-bottom-50 { + margin-bottom: 50px; +} diff --git a/app/assets/stylesheets/admin/typography.css.scss b/app/assets/stylesheets/admin/typography.css.scss new file mode 100644 index 0000000000..20148df3f1 --- /dev/null +++ b/app/assets/stylesheets/admin/typography.css.scss @@ -0,0 +1,9 @@ +.text-normal { + font-size: 1.0rem; + font-weight: 300; +} + +.text-big { + font-size: 1.2rem; + font-weight: 300; +} diff --git a/app/controllers/admin/inventory_items_controller.rb b/app/controllers/admin/inventory_items_controller.rb index cb649fe6f2..432b955134 100644 --- a/app/controllers/admin/inventory_items_controller.rb +++ b/app/controllers/admin/inventory_items_controller.rb @@ -4,12 +4,12 @@ module Admin respond_to :json respond_override update: { json: { - success: lambda { sleep 3; render_as_json @inventory_item }, + success: lambda { render_as_json @inventory_item }, failure: lambda { render json: { errors: @inventory_item.errors.full_messages }, status: :unprocessable_entity } } } respond_override create: { json: { - success: lambda { sleep 3; render_as_json @inventory_item }, + success: lambda { render_as_json @inventory_item }, failure: lambda { render json: { errors: @inventory_item.errors.full_messages }, status: :unprocessable_entity } } } diff --git a/app/views/admin/variant_overrides/_new_variants.html.haml b/app/views/admin/variant_overrides/_new_variants.html.haml index ed87bc3e86..7ec3e76d0c 100644 --- a/app/views/admin/variant_overrides/_new_variants.html.haml +++ b/app/views/admin/variant_overrides/_new_variants.html.haml @@ -1,25 +1,54 @@ -%hr.divider.sixteen.columns.alpha.omega{ ng: { show: 'newProducts.length > 0' } } -%table#new-variants{ ng: { show: 'newProducts.length > 0' } } - %col.producer{ width: "20%" } - %col.product{ width: "20%" } - %col.variant{ width: "40%" } - %col.add{ width: "10%" } - %col.ignore{ width: "10%" } - %thead - %tr - %th.producer Producer - %th.product Product - %th.variant Variant - %th.add Add - %th.ignore Ignore - %tbody{ bindonce: true, ng: { repeat: 'product in newProducts = (products | hubPermissions:hubPermissions:hub.id | newInventoryProducts:hub.id)' } } - %tr{ id: "nv_{{variant.id}}", ng: { repeat: 'variant in product.variants | newInventoryVariants:hub.id'} } - %td.producer{ bo: { bind: 'producersByID[product.producer_id].name'} } - %td.product{ bo: { bind: 'product.name'} } - %td.variant - %span{ bo: { bind: 'variant.display_name || ""'} } - .variant-override-unit{ bo: { bind: 'variant.unit_to_display'} } - %td.add - %input.fullwidth{ :type => 'button', value: "Add", ng: { click: "setVisibility(hub.id,variant.id,true)" } } - %td.ignore - %input.fullwidth{ :type => 'button', value: "Ignore", ng: { click: "setVisibility(hub.id,variant.id,false)" } } +%hr.divider.sixteen.columns.alpha.omega{ ng: { show: 'newProducts.length > 0 && addingNewVariants != false' } } + +%alert-row{ message: "There are {{ newProducts.length }} new products available to add to your inventory.", + button: { text: 'Review Now', action: "addingNewVariants = true" }, + close: "addingNewVariants = false", + ng: { show: 'newProducts.length > 0 && addingNewVariants == undefined' } } + +%div{ ng: { show: 'newProducts.length > 0 && addingNewVariants' } } + .sixteen.columns.alpha.omega.text-center.margin-bottom-20 + .one-third.column.alpha + %button.text-normal.fullwidth{ type: 'button', ng: { click: 'addingNewVariants = false' } } + %i.icon-chevron-left + Back to my inventory + -# .one-third.column + -# %button.text-big.fullwidth{ type: 'button', ng: { click: 'setVisibility(hub.id,variantIDs(filteredNewProducts),true)' } } + -# %i.icon-plus + -# Add All ({{filteredNewProducts.length}}) + -# .one-third.column.omega + -# %button.text-big.fullwidth{ type: 'button', ng: { click: 'setVisibility(hub.id,variantIDs(filteredNewProducts),false)' } } + -# %i.icon-remove + -# Ignore All ({{filteredNewProducts.length}}) + + %h2#no_results{ ng: { show: 'filteredNewProducts.length == 0' } } + No new products match the filters provided. + + %table#new-variants{ ng: { show: 'filteredNewProducts.length > 0' } } + %col.producer{ width: "20%" } + %col.product{ width: "20%" } + %col.variant{ width: "40%" } + %col.add{ width: "10%" } + %col.ignore{ width: "10%" } + %thead + %tr + %th.producer Producer + %th.product Product + %th.variant Variant + %th.add Add + %th.ignore Ignore + %tbody{ bindonce: true, ng: { repeat: 'product in filteredNewProducts = (newProducts = (products | hubPermissions:hubPermissions:hub.id | newInventoryProducts:hub.id) | attrFilter:{producer_id:producerFilter} | filter:query) | limitTo:productLimit' } } + %tr{ id: "nv_{{variant.id}}", ng: { repeat: 'variant in product.variants | newInventoryVariants:hub.id'} } + %td.producer{ bo: { bind: 'producersByID[product.producer_id].name'} } + %td.product{ bo: { bind: 'product.name'} } + %td.variant + %span{ bo: { bind: 'variant.display_name || ""'} } + .variant-override-unit{ bo: { bind: 'variant.unit_to_display'} } + %td.add + %input.fullwidth{ :type => 'button', value: "Add", ng: { click: "setVisibility(hub.id,variant.id,true)" } } + %td.ignore + %input.fullwidth{ :type => 'button', value: "Ignore", ng: { click: "setVisibility(hub.id,variant.id,false)" } } + + .sixteen.columns.alpha.omega.text-center{ ng: {show: 'productLimit < filteredNewProducts.length'}} + %input{ type: 'button', value: 'Show More', ng: { click: 'productLimit = productLimit + 10' } } + or + %input{ type: 'button', value: "Show All ({{ filteredNewProducts.length - productLimit }} More)", ng: { click: 'productLimit = filteredNewProducts.length' } } diff --git a/app/views/admin/variant_overrides/_products.html.haml b/app/views/admin/variant_overrides/_products.html.haml index e34f6eccaa..81fde749b3 100644 --- a/app/views/admin/variant_overrides/_products.html.haml +++ b/app/views/admin/variant_overrides/_products.html.haml @@ -1,4 +1,4 @@ -%table.index.bulk#variant-overrides{ ng: {show: 'hub'}} +%table.index.bulk#variant-overrides %col.producer{ width: "20%", ng: { show: 'columns.producer.visible' } } %col.product{ width: "20%", ng: { show: 'columns.product.visible' } } %col.sku{ width: "20%", ng: { show: 'columns.sku.visible' } } @@ -24,7 +24,7 @@ = render 'admin/variant_overrides/products_product' = render 'admin/variant_overrides/products_variants' -.sixteen.columns.alpha.omega.text-center{ ng: {show: 'hub && productLimit < filteredProducts.length'}} +.sixteen.columns.alpha.omega.text-center{ ng: {show: 'productLimit < filteredProducts.length'}} %input{ type: 'button', value: 'Show More', ng: { click: 'productLimit = productLimit + 10' } } or - %input{ type: 'button', value: "Show All ({{ filteredProducts.length - productLimit }})", ng: { click: 'productLimit = filteredProducts.length' } } + %input{ type: 'button', value: "Show All ({{ filteredProducts.length - productLimit }} More)", ng: { click: 'productLimit = filteredProducts.length' } } diff --git a/app/views/admin/variant_overrides/index.html.haml b/app/views/admin/variant_overrides/index.html.haml index ba5ce24479..4fa04bfec9 100644 --- a/app/views/admin/variant_overrides/index.html.haml +++ b/app/views/admin/variant_overrides/index.html.haml @@ -4,13 +4,14 @@ .margin-bottom-50{ ng: { app: 'admin.variantOverrides', controller: 'AdminVariantOverridesCtrl', init: 'initialise()' } } = render 'admin/variant_overrides/filters' = render 'admin/variant_overrides/new_variants' - %hr.divider.sixteen.columns.alpha.omega{ ng: { show: 'hub' } } - .controls.sixteen.columns.alpha.omega{ ng: { show: 'hub' } } - %input.four.columns.alpha{ type: 'button', value: 'Reset Stock to Defaults', 'ng-click' => 'resetStock()' } - %input.four.columns{ type: 'button', ng: { value: "showHidden ? 'Hide Hidden' : 'Show Hidden'", click: 'showHidden = !showHidden' } } - %div.five.columns   - = render 'admin/shared/columns_dropdown' + %div{ ng: { show: 'hub', hide: 'addingNewVariants' } } + %hr.divider.sixteen.columns.alpha.omega + .controls.sixteen.columns.alpha.omega + %input.four.columns.alpha{ type: 'button', value: 'Reset Stock to Defaults', 'ng-click' => 'resetStock()' } + %input.four.columns{ type: 'button', ng: { value: "showHidden ? 'Hide Hidden' : 'Show Hidden'", click: 'showHidden = !showHidden' } } + %div.five.columns   + = render 'admin/shared/columns_dropdown' - %form{ name: 'variant_overrides_form' } - %save-bar{ save: "update()", form: "variant_overrides_form" } - = render 'admin/variant_overrides/products' + %form{ name: 'variant_overrides_form' } + %save-bar{ save: "update()", form: "variant_overrides_form" } + = render 'admin/variant_overrides/products'