From 5e1e4c1d194f21e3e8043209b80bc862601637fc Mon Sep 17 00:00:00 2001 From: Matt-Yorkley Date: Thu, 9 Mar 2017 20:25:13 +0000 Subject: [PATCH] Product Import UX review updates Minor tweaks Minor fix --- .../stylesheets/admin/product_import.css.scss | 57 ++++++++++++------- app/models/product_importer.rb | 12 +++- .../product_import/_entries_table.html.haml | 5 +- .../product_import/_import_options.html.haml | 28 +++++++++ .../product_import/_import_review.html.haml | 37 ++++++------ 5 files changed, 99 insertions(+), 40 deletions(-) diff --git a/app/assets/stylesheets/admin/product_import.css.scss b/app/assets/stylesheets/admin/product_import.css.scss index b878c63d8c..5d986f51dc 100644 --- a/app/assets/stylesheets/admin/product_import.css.scss +++ b/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 { diff --git a/app/models/product_importer.rb b/app/models/product_importer.rb index c9f56dcf91..ea53891a85 100644 --- a/app/models/product_importer.rb +++ b/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 diff --git a/app/views/admin/product_import/_entries_table.html.haml b/app/views/admin/product_import/_entries_table.html.haml index 5385112398..80f89c2899 100644 --- a/app/views/admin/product_import/_entries_table.html.haml +++ b/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 \ No newline at end of file diff --git a/app/views/admin/product_import/_import_options.html.haml b/app/views/admin/product_import/_import_options.html.haml index a87729a1c5..f5733c4f80 100644 --- a/app/views/admin/product_import/_import_options.html.haml +++ b/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 diff --git a/app/views/admin/product_import/_import_review.html.haml b/app/views/admin/product_import/_import_review.html.haml index 848e996db7..20cb48b769 100644 --- a/app/views/admin/product_import/_import_review.html.haml +++ b/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 \ No newline at end of file