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.
hmis-tools · Aug 5, 2015 · fa44bd5 · fa44bd5
1 parent a7df443
commit fa44bd5
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git 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
@@ -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);
+            }
         });
     }