Bug 1693111 - When changing products keep component and sub-component if they are valid on the new product

Fix some javascript errors in the field mapping routines.
Remember sub_component when product changes.
Added style to highlight fields that have invalid values after changes.

Change-Id: I7fc074b335eee26cf43e0d7a5194b973a692239c

2 files changed, 35 insertions, 8 deletions

diff --git a/extensions/SelectizeJS/web/css/SelectizeJS.css b/extensions/SelectizeJS/web/css/SelectizeJS.css
index 8f3ff578b..06cd16dd3 100644
--- a/extensions/SelectizeJS/web/css/SelectizeJS.css
+++ b/extensions/SelectizeJS/web/css/SelectizeJS.css
@@ -263,4 +263,9 @@ table#flags tr td {
 
 .bz_extra_private_groups .selectize-input>input[placeholder] {
     line-height: 1.7em !important;
+}
+
+.invalid {
+    color: red;
+    font-weight: bold;
 }
\ No newline at end of file
diff --git a/extensions/SelectizeJS/web/js/SelectizeJS.js b/extensions/SelectizeJS/web/js/SelectizeJS.js
index d73fade58..a4babf96a 100644
--- a/extensions/SelectizeJS/web/js/SelectizeJS.js
+++ b/extensions/SelectizeJS/web/js/SelectizeJS.js
@@ -188,6 +188,8 @@ var RELATED_FIELDS = {
 };
 */
 
+var last_sub_component;
+
 Selectize.define('related_fields', function () {
 	var self = this;
 
@@ -204,12 +206,20 @@ Selectize.define('related_fields', function () {
 			if (typeof BB_FIELDS[my_id] !== 'undefined' &&
 				BB_FIELDS[my_id].internal_name !== my_id
 			) {
-				console.log("changing " + my_id + " to " + BB_FIELDS[my_id].internal_name);
+				//console.log("changing " + my_id + " to " + BB_FIELDS[my_id].internal_name);
 				my_id = BB_FIELDS[my_id].internal_name;
 			}
 
 			if (typeof RELATED_FIELDS[my_id] === 'undefined') return;
 
+			if(my_id === 'product' && $('#' + my_id).val().length){
+				if($('#rh_sub_component').length){
+					last_sub_component = $('#rh_sub_component').get_selected_item_text();
+					$('#component').clearComponentSearch();
+					update_selects();
+				}
+			}
+
 			if (typeof RELATED_FIELDS[my_id]['fields'] !== 'undefined') {
 				$.each(RELATED_FIELDS[my_id]['fields'], function (field, val) {
 					/* If none of selected_values are in the this.values */
@@ -314,10 +324,10 @@ jQuery.fn.extend({
 
 		var $sel = $(this).selectize()[0].selectize;
 		$.each($sel.options, function (i, value) {
-			if (show_values.indexOf(value.text) !== -1) {
-				$sel.options[value.text].disabled = false;
+			if (show_values.indexOf(value.value) !== -1) {
+				$sel.options[value.value].disabled = false;
 			} else {
-				$sel.options[value.text].disabled = true;
+				$sel.options[value.value].disabled = true;
 			}
 			if (typeof ($sel.renderCache['option']) !== 'undefined') {
 				delete $sel.renderCache['option'][value.text];
@@ -710,6 +720,8 @@ jQuery.fn.extend({
 				var data = [];
 				var field = fields[0];
 				$me.clear_unselected();
+				var selected = $me.get_selected_item_text();
+				var match = false;
 				var count = 0;
 				if (res[id + "s"] === undefined) return;
 				for (i = 0, n = res[id + "s"].length; i < n; i++) {
@@ -725,6 +737,7 @@ jQuery.fn.extend({
 							id: "v" + inner.id + "_" + id
 						};
 						count = count + 1;
+						if(selected == inner.name) match = true;
 					}
 				}
 
@@ -733,11 +746,16 @@ jQuery.fn.extend({
 				if (count > 1) {
 					$sel.enable();
 				} else {
-					$sel.setValue(data[0].value);
+					if(data.length) $sel.setValue(data[0].value);
 					$sel.disable();
 				}
 				$sel.settings.placeholder = ' ';
 				$sel.updatePlaceholder();
+				if(match) {
+					$sel.$control.find("[data-value='" + selected + "']").removeClass('invalid');
+				} else {
+					$sel.$control.find("[data-value='" + selected + "']").addClass('invalid');
+				}
 			});
 	},
 	reset_select: function (id, rpc_comp, rpc_func) {
@@ -970,7 +988,7 @@ function init_products(args) {
 			data['term'] = query;
 			data['descrs'] = args.descrs;
 			data['disabled'] = args.disabled;
-			if (args.classification) {
+			if (args.classification && $(args.classification_id).length) {
 				data['classification'] = $(args.classification_id).selectize()[0].selectize.getValue();
 			}
 			$("#" + args.id)._onAjaxSend();
@@ -1002,7 +1020,7 @@ function init_products(args) {
 		$("#" + args.id).fetch_all(true);
 	}
 	$("#" + args.id).selectize()[0].selectize.close();
-	if (args.classification) {
+	if (args.classification && $(args.classification_id).length) {
 		$(args.classification_id).on('change', function () {
 			var select_items = get_selected_items_text($(args.classification_id).selectize()[0].selectize);
 			$("#" + args.id).fetch_all(true, true, select_items);
@@ -1109,8 +1127,12 @@ function show_sub_components(myid) {
 	var product = $("input[name=product]").val() || $("#product").get_sel_ids();
 	var component = $("#component").selectize()[0].selectize.getValue();
 	var select_items = get_selected_items_text($sub_comp_sel);
+	if(typeof last_sub_component !== 'undefined'){
+		select_items = [last_sub_component];
+	}
 	hide_and_clear_sub_components(myid);
 	if (component === "") return;
+	//last_sub_component = undefined;
 	$("#" + myid).fetch_all(1, true, select_items);
 
 }
@@ -1118,7 +1140,7 @@ function show_sub_components(myid) {
 function get_selected_items_text($sel) {
 	var texts = [];
 	$.each($sel.items, function (idx, value) {
-		//		texts.push($sel.getItem(value).text().trim());
+		//texts.push($sel.getItem(value).text().trim());
 		texts.push(value.trim());
 	});
 	return texts;