WIP: Alerting user to presence of new variant for inventory, new variants can be filtered + limited

2026-03-01 02:03:22 +00:00 · 2016-01-20 18:36:28 +11:00
parent f06d909c23
commit 7008d26f68
10 changed files with 128 additions and 43 deletions
--- a/app/assets/javascripts/admin/utils/directives/alert_row.js.coffee
+++ 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
--- a/app/assets/javascripts/templates/admin/alert_row.html.haml
+++ 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'} }
+    &nbsp;&nbsp;&nbsp;
+    %input{ type: 'button', ng: { value: "buttonText", show: 'buttonText && buttonAction', click: "buttonAction()" } }
+  .one.column.omega.pad.text-center
+    %a.close{ href: "#", ng: { click: "dismiss()" } }
+      &times;
--- a/app/assets/stylesheets/admin/components/alert_row.css.scss
+++ 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;
+  }
+}
--- 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
--- a/app/assets/stylesheets/admin/offets.css.scss
+++ b/app/assets/stylesheets/admin/offets.css.scss
@@ -0,0 +1,7 @@
+.margin-bottom-20 {
+  margin-bottom: 20px;
+}
+
+.margin-bottom-50 {
+  margin-bottom: 50px;
+}
--- a/app/assets/stylesheets/admin/typography.css.scss
+++ 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;
+}
--- 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 }
    } }

--- 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' } }
--- 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' } }
--- 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 &nbsp;
-    = 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 &nbsp;
+      = 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'