surface missing header value (#46)

* handle schema error with field name

* disable type drop down and facet checkbox on field error

#45

* uncheck facet checkbox if when not facet type selected

Author: vabarbosa

public/js/seams.js

@@ -43,20 +43,22 @@ seamsApp.controller('navController', ['$scope', '$route', '$routeParams',
 					var html = $scope.$root.renderSchema($scope.$root.schema);
 					$('#schemacontent').html(html);
 					var checked = 0;
-					$('.facet_checkbox', '#schemacontent').each(function() {
-						$(this).change(function() {
-							if($(this).is(":checked")) {
-								checked++;
-							}
-							else {
-								checked--;
-							}
-							$('#importbutton').attr('disabled',checked == 0);
-							$('#facetstatus').css('visibility', checked == 0 ? 'visible' : 'hidden');
+					if (!$scope.$root.schemaError) {
+						$('.facet_checkbox', '#schemacontent').each(function() {
+							$(this).change(function() {
+								if($(this).is(":checked")) {
+									checked++;
+								}
+								else {
+									checked--;
+								}
+								$('#importbutton').attr('disabled',checked == 0);
+								$('#facetstatus').css('visibility', checked == 0 ? 'visible' : 'hidden');
+							});
 						});
-					});
-					$('#importbutton').attr('disabled',checked == 0);
-					$('#facetstatus').css('visibility', checked == 0 ? 'visible' : 'hidden');
+					}
+					$('#importbutton').attr('disabled', checked == 0 || $scope.$root.schemaError);
+					$('#facetstatus').css('visibility', (checked == 0 || $scope.$root.schemaError) ? 'visible' : 'hidden');
 				}
 				break;
 			case 'search':
@@ -291,15 +293,24 @@ seamsApp.controller('seamsController', ['$scope', '$route', '$routeParams', '$lo
 	    // and whether its faceted or not, together with an example value from the
 		// uploaded file (x.data)
 	    $scope.$root.renderSchema = function(x) {
+		   $scope.$root.schemaError = false;
 		   var html = '<table class="table_basic">\n';
 		   html += '<input type="hidden" name="upload_id" id="upload_id" value="' + x.upload_id + '"/>\n';
 		   html += "<thead>\n";
 		   html += "  <th>name</th><th>type</th><th>facet</th><th>e.g</th>\n";
 		   html += "</thead>\n"
 		   for(var i in x.fields) {
-		     html += "<tr>";
 		     var f = x.fields[i];
-		     html += "<td>" + f.name + "</td>\n";
+		     if (!f.name) {
+					 f.hasError = true;
+					 $scope.$root.schemaError = true;
+					 html += "<tr class='error'>";
+		     }
+		     else {
+					 html += "<tr>";
+		     }
+		     html += '<td class="' + (f.name ? '' : 'error') + '">';
+		     html += (f.name || '&#10007; Missing field name') + '</td>\n';
 		     html += "<td>" + $scope.$root.typeWidget(f) + "</td>\n";
 		     html += "<td>" + $scope.$root.facetWidget(f) + "</td>\n";
 		     for(var j in x.data) {
@@ -330,7 +341,8 @@ seamsApp.controller('seamsController', ['$scope', '$route', '$routeParams', '$lo
 		$scope.$root.typeWidget = function(f) {
 		  var n = f.safename;
 		  var t = f.type;
-		  var html = '<select name="' + n + '" class="input_select" onchange="datatypechange(\'' + n +'\')" data-original-name="' + f.name + '">\n';
+		  var html = '<select name="' + n + '" class="input_select" onchange="datatypechange(\'' + n +'\')" data-original-name="' + f.name;
+		  html += (f.hasError) ? '" disabled="disabled">\n' : '">\n';
 		  var opts = { "string":"String", "number":"Number", "boolean":"Boolean", "arrayofstrings":"Array of Strings" };
 		  for(var i in opts) {
 		    html += '<option value="' + i + '"';
@@ -350,7 +362,7 @@ seamsApp.controller('seamsController', ['$scope', '$route', '$routeParams', '$lo
 		  var t = f.type;
 		  var v = f.facet.toString();
 		  var html = '<input class="input_checkbox facet_checkbox" type="checkbox" value="true" name="' + n + '" id="' + n + '"';
-		  if (t == "number" || t == "boolean") {
+		  if (t == "number" || t == "boolean" || f.hasError) {
 		    html += ' disabled="disabled"';
 		  }
 		  if (v == "true") {
@@ -784,9 +796,13 @@ seamsApp.directive('previewSearchHtml', function(){
 var datatypechange = function(e) {
   var d = $('select[name=' + e + ']');
   var v = d.val();
-  if(v == "string" || v == "arrayofstrings") {
-    $('input#' + e).prop("disabled", false);
+	var i = $('input#' + e);
+  if (v == "string" || v == "arrayofstrings") {
+    i.prop("disabled", false);
   } else {
-    $('input#' + e).prop("disabled", true);
+    if (i.is(':checked')) {
+			i.prop("checked", false).trigger('change');
+		}		
+    i.prop("disabled", true);
   }
 }

public/seams.css

@@ -64,3 +64,23 @@
     right: 100px;
     white-space: nowrap;
 }
+
+td.error {
+    color: #ff0000;
+}
+
+.alert-container.error {
+    background: rgba(0, 0, 0, 0) repeating-linear-gradient(-55deg, #bb4444, #bb4444 1px, #bb1122 1px, #bb1122 3px) repeat scroll 0 0 !important;
+    border-left: 2px solid #ad1625;
+    color: #ffffff;
+}
+
+.type_copy.alert-container {
+    max-width: 100%;
+}
+
+.input_select:disabled,
+.input_select.disabled {
+    background-color: #92a4af;
+    border-color: #000000;
+}

views/templates/import.html

@@ -32,11 +32,17 @@ <h1 class="type_heading"><mark class="type_mark">Create the Search Index</mark><
   </div>
 
   <div ng-show="currentStatus == 'uploaded'">
+      <div  class="type_copy alert-container error"
+        ng-show="schemaError">
+          An error was detected with one or more fields. Verify the file and re-upload
+      </div>
 
       <div id="schemacontent" class="table_container"></div>
 
       <div class="button_group">
-        <div  class="type_copy" id="facetstatus">Select a field to facet before importing</div>
+        <div  class="type_copy" id="facetstatus">
+          {{ schemaError ? 'An error was detected with one or more fields. Verify the file and re-upload' : 'Select a field to facet before importing' }}
+        </div>
         <button id="backbutton" type="button" class="button_secondary" ng-click="goToNextPage('upload')">Back</button>
         <button id="importbutton" type="submit" class="button_primary" ng-click="importClicked()"> Import </button>
         <!-- <span class="glyphicon glyphicon-refresh glyphicon-spinner import-spinner"></span> -->