Product Import UX review updates

Minor tweaks

Minor fix

app/assets/stylesheets/admin/product_import.css.scss

@@ -1,5 +1,18 @@
 div.panel-section {
 
+  .neutral {
+    color: #bfbfbf;
+  }
+  .warning {
+    color: #da5354;
+  }
+  .success {
+    color: #86d83a;
+  }
+  .info {
+    color: #68b7c0;
+  }
+
   div.panel-header {
     width: 100%;
     //font-size: 1.5em;
@@ -30,19 +43,6 @@ div.panel-section {
       }
     }
 
-    .neutral {
-      color: #BFBFBF;
-    }
-    .warning {
-      color: #ee4728;
-    }
-    .success {
-      color: #86d83a;
-    }
-    .info {
-      color: #68b7c0;
-    }
-
     div.header-count {
       min-width: 2em;
       text-align: right;
@@ -86,6 +86,18 @@ div.panel-section {
       td, th {
         white-space: nowrap;
       }
+      tr.error {
+        //background-color: #ffe6e4;
+        color: #ee4728;
+      }
+      tr.error:hover td {
+        //background-color: #fecac6;
+      }
+      tr i {
+        display: block;
+        margin-bottom: -0.2em;
+        font-size: 1.4em !important;
+      }
     }
 
     div.import-errors {
@@ -156,15 +168,22 @@ table.import-settings {
   .header-description {
     padding-left: 1em;
   }
+
+  span.header-error {
+    font-size: 0.85em;
+    color: #da5354;
+  }
+
+  .select2-search {
+    display: none;
+  }
+
+  .select2-results {
+    margin: 0;
+  }
 }
 
-.select2-search {
-  display: none;
-}
 
-.select2-results {
-  margin: 0;
-}
 
 .post-save-results {
   p {

app/models/product_importer.rb

@@ -78,7 +78,12 @@ class ProductImporter
   end
 
   def suppliers_index
-    @suppliers_index || get_suppliers_index
+    index = @suppliers_index || get_suppliers_index
+    index.sort_by{ |k,v| v.to_i }.reverse.to_h
+  end
+
+  def all_entries
+    invalid_entries.merge(products_to_create).merge(products_to_update).sort.to_h
   end
 
   def invalid_entries
@@ -213,16 +218,19 @@ class ProductImporter
 
     if supplier_name.blank?
       mark_as_invalid(line_number, entry, "Supplier name field is empty")
+      entry['supplier_id'] = Enterprise.first.id # Removes a duplicate validation message TODO: proper solution
       return
     end
 
     unless supplier_exists?(supplier_name)
       mark_as_invalid(line_number, entry, "Supplier \"#{supplier_name}\" not found in database")
+      entry['supplier_id'] = Enterprise.first.id # Removes a duplicate validation message TODO: proper solution
       return
     end
 
     unless permission_by_name?(supplier_name)
       mark_as_invalid(line_number, entry, "You do not have permission to manage products for \"#{supplier_name}\"")
+      entry['supplier_id'] = Enterprise.first.id # Removes a duplicate validation message TODO: proper solution
       return
     end
 
@@ -239,7 +247,7 @@ class ProductImporter
 
     if category_name.blank?
       mark_as_invalid(line_number, entry, "Category field is empty")
-      entry['primary_taxon_id'] = Spree::Taxon.first.id # Removes a duplicate validation message
+      entry['primary_taxon_id'] = Spree::Taxon.first.id # Removes a duplicate validation message TODO: proper solution
       return
     end
 

app/views/admin/product_import/_entries_table.html.haml

@@ -2,11 +2,14 @@
   %div.table-wrap
     %table
       %thead
+        %th
         %th Line
         - entries.values.first[:entry].each do |key, value|
           %th= key
       - entries.each do |line, item|
-        %tr
+        %tr{class: ('error' if item[:errors])}
+          %td
+            %i{class: (item[:errors] ? 'fa fa-warning warning' : 'fa fa-check-circle success')}
           %td= line
           - item[:entry].each do |key, value|
             %td= value

app/views/admin/product_import/_import_options.html.haml

@@ -15,6 +15,34 @@
           = name
       %div.panel-content{ng: {hide: '!active'}}
         = render 'options_form', supplier_id: supplier_id, name: name
+  - elsif name and supplier_id
+    %div.panel-section.import-settings{ng: {controller: 'DropdownPanelsCtrl'}}
+      %div.panel-header
+        %div.header-caret
+          -#%i{ng: {class: "{'icon-chevron-down': active, 'icon-chevron-right': !active}"}}
+        %div.header-icon.error
+          %i.fa.fa-warning
+          -#%div.header-count
+          -#  %strong.invalid-count= @importer.invalid_count
+        %div.header-description
+          = name
+          %span.header-error= " - you do not have permission to manage this enterprise"
+      -#%div.panel-content{ng: {hide: '!active'}}
+      -#  = render 'options_form', supplier_id: supplier_id, name: name
+  - elsif name
+    %div.panel-section.import-settings{ng: {controller: 'DropdownPanelsCtrl'}}
+      %div.panel-header
+        %div.header-caret
+          -#%i{ng: {class: "{'icon-chevron-down': active, 'icon-chevron-right': !active}"}}
+        %div.header-icon.error
+          %i.fa.fa-warning
+          -#%div.header-count
+          -#  %strong.invalid-count= @importer.invalid_count
+        %div.header-description
+          = name
+          %span.header-error= " - enterprise could not be found in database"
+      -#%div.panel-content{ng: {hide: '!active'}}
+      -#  = render 'options_form', supplier_id: supplier_id, name: name
 
 
 %br.panels.clearfix

app/views/admin/product_import/_import_review.html.haml

@@ -13,30 +13,18 @@
 -#  -#%div.panel-content{ng: {hide: '!active'}}
 -#  -#  Content goes here
 
-%div.panel-section{ng: {controller: 'ImportOptionsFormCtrl', hide: 'resetTotal == 0'}}
-  %div.panel-header
-    %div.header-caret
-    %div.header-icon.info
-      %i.fa.fa-info-circle
-    %div.header-count
-      %strong.reset-count
-        {{resetTotal}}
-    %div.header-description
-      Existing products will have their stock reset to zero
-  -#%div.panel-content{ng: {hide: '!active'}}
-  -#  Content goes here
-
-%div.panel-section
-  %div.panel-header
+%div.panel-section{ng: {controller: 'DropdownPanelsCtrl', init: "count = #{@importer.item_count}"}}
+  %div.panel-header{ng: {click: 'togglePanel()', class: '{active: active && count}'}}
     %div.header-caret
+      %i{ng: {class: "{'icon-chevron-down': active, 'icon-chevron-right': !active}", hide: 'count == 0'}}
     %div.header-icon.success
-      %i.fa.fa-check-circle
+      %i.fa.fa-info-circle.info
     %div.header-count
       %strong.item-count= @importer.item_count
     %div.header-description
       Entries found in imported file
-  -#%div.panel-content{ng: {hide: '!active'}}
-  -#  Content goes here
+  %div.panel-content{ng: {hide: '!active || count == 0'}}
+    = render 'entries_table', entries: @importer.all_entries
 
 %div.panel-section{ng: {controller: 'DropdownPanelsCtrl', init: "count = #{@importer.invalid_count}"}}
   %div.panel-header{ng: {click: 'togglePanel()', class: '{active: active && count}'}}
@@ -79,4 +67,17 @@
   %div.panel-content{ng: {hide: '!active || count == 0'}}
     = render 'entries_table', entries: @importer.products_to_update
 
+%div.panel-section{ng: {controller: 'ImportOptionsFormCtrl', hide: 'resetTotal == 0'}}
+  %div.panel-header
+    %div.header-caret
+    %div.header-icon.info
+      %i.fa.fa-info-circle
+    %div.header-count
+      %strong.reset-count
+        {{resetTotal}}
+    %div.header-description
+      Existing products will have their stock reset to zero
+  -#%div.panel-content{ng: {hide: '!active'}}
+  -#  Content goes here
+
 %br.panels.clearfix