From fa44bd5af1350f0495473727ed0f874a7eec1362 Mon Sep 17 00:00:00 2001
From: cecilia-donnelly <donnelly.cecilia1@gmail.com>
Date: Wed, 5 Aug 2015 15:28:57 -0500
Subject: [PATCH] Prettify duplicate warning: #25

Move the import button to the bottom of the page, with the other
buttons. Set "import" button to click the file input (the former
"Browse") and then submit the form.  Manage duplicate warning by placing
it in the "results" div for now.  @nttaylor points out that we could
show them a "Possible duplicates detected" link and then, if they
clicked that, give them a popup with more information.
---
 app/views/index.jade |  7 +++----
 public/js/index.js   | 17 +++++++++++++----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/app/views/index.jade b/app/views/index.jade
index 3831edc..022b7fa 100644
--- a/app/views/index.jade
+++ b/app/views/index.jade
@@ -27,10 +27,6 @@ html(lang="en")
         img(src='img/OpenHMIS-logo.jpg')
       div#search
         h1 Client Search
-        form(action="/upload", method="post", enctype="multipart/form-data" id="importForm")
-          input#import_file(type='file' name="import.csv")
-          button#importAll(type='button')
-          div#duplicate_notification
         form#searchForm
           div.form-group
             input#searchField.form-control(name='searchField', type='text', placeholder='search by first or last name')
@@ -40,6 +36,9 @@ html(lang="en")
           div.buttonBox
             button#addNewClient(type='button')
             button#exportAll(type='button')
+            form(action="/upload", method="post", enctype="multipart/form-data" id="importForm")
+              input#import_file(type='file' name="import.csv" style="opacity:0; height: 5px;")
+              button#importAll(type='button')
       div#intake
         h1 Client Intake
         form#intakeForm
diff --git a/public/js/index.js b/public/js/index.js
index fa6efa2..aabfdba 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -24,6 +24,7 @@ $(function() {
             }).done(function(data) {
                 $("#index").data("full-data", data);
                 $("#searchForm #searchField").keyup(function() {
+                    $("#duplicate_box").remove();
                     var userString = $("#searchForm #searchField").val();
                     if (userString.length >= minSearchLength) {
                         var dataLength = data.length;
@@ -60,7 +61,10 @@ $(function() {
                     exportAll();
                 });
                 $("#importAll").click(function() {
-                    importAll();
+                    $("#import_file").trigger('click');
+                    $('#import_file').change(function(click) {
+                        importAll();
+                    });
                 });
 
                 $("#intakeForm input").keyup(function(e) {
@@ -1004,14 +1008,16 @@ $(function() {
             }
             // loop through array
             var line_counter = 0;
-            var duplicate_lines = "";
+            var duplicate_lines = "<div id='duplicate_box'><b>Warning: possible duplicates detected</b><br>";
+            var duplicate_flag = false;
             for (var line in data_array){
                 //skip header row
                 if (line_counter != 0 && data_array.hasOwnProperty(line)) {
                     // for each line, check whether ssn exists via API
                     // if it does, put that record in a list of possible duplicates
                     if (ssn_array.indexOf(data_array[line][ssn_index]) > 0) {
-                        duplicate_lines += "Line " + line_counter + " has a duplicate SSN<br>";
+                        duplicate_flag = true;
+                        duplicate_lines += "Line " + line_counter + " (" + data_array[line][2] + " " + data_array[line][4] + ") may be a duplicate. <br>";
                     }
                     // if it doesn't, POST that record to the API
                     else {
@@ -1051,7 +1057,10 @@ $(function() {
                 line_counter++;
             }
             // display the list of possible duplicates to the user
-            $("#duplicate_notification").text(duplicate_lines);
+            duplicate_lines += "</div>";
+            if (duplicate_flag){
+                $("#results").html(duplicate_lines);
+            }
         });
     }