From f28d42d7ce9bd69945daff52ca6557aabf05ccc6 Mon Sep 17 00:00:00 2001
From: Turcy <turcy.kumarapeli@gmail.com>
Date: Mon, 30 Sep 2019 11:30:09 +0530
Subject: [PATCH] Fix device-type features edit issue

---
 .../pages/cdmf.page.devicetype.edit/edit.hbs  | 21 ++++---
 .../public/js/bottomJs.js                     | 62 ++++++++++++-------
 2 files changed, 52 insertions(+), 31 deletions(-)

diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.devicetype.edit/edit.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.devicetype.edit/edit.hbs
index 599ffcec4e1..1203de1aea5 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.devicetype.edit/edit.hbs
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.devicetype.edit/edit.hbs
@@ -98,14 +98,15 @@
                                     <div class="row">
                                         <div class="dontfloat feature-wrapper" name ="deviceFeature">
                                             <div class="col-xs-3">
-                                                <input type="text" class="form-control" id="feature-name" placeholder="name" value="{{this.name}}"/>
+                                                <input type="text" class="form-control feature-name" placeholder="name" value="{{this.name}}"/>
                                             </div>
                                             <div class="col-xs-4">
-                                                <input type="text" class="form-control" id="feature-code" placeholder="code" value="{{this.code}}"/>
+                                                <input type="text" class="form-control feature-code" placeholder="code" value="{{this.code}}"/>
                                             </div>
                                             <div class="col-xs-4">
-                                            <textarea aria-describedby="basic-addon1" type="text" id="feature-description"
-                                                      placeholder="description" data-error-msg="invalid feature description" class="form-control" rows="1" cols="30">{{this.description}}</textarea>
+                                            <textarea aria-describedby="basic-addon1" type="text" 
+                                            		placeholder="description" data-error-msg="invalid feature description" 
+                                            		class="form-control feature-description" rows="1" cols="30">{{this.description}}</textarea>
                                             </div>
                                             <button type="button" class="wr-btn wr-btn-horizontal remove_feature_button"><i class="fa fa-minus"></i></button>
                                         </div>
@@ -115,16 +116,16 @@
                                 <div class="row">
                                     <div class="dontfloat feature-wrapper" name="deviceFeature">
                                         <div class="col-xs-3">
-                                            <input type="text" class="form-control" id="feature-name" placeholder="name"/>
+                                            <input type="text" class="form-control feature-name" placeholder="name"/>
                                         </div>
                                         <div class="col-xs-4">
-                                            <input type="text" class="form-control" id="feature-code" placeholder="code"/>
+                                            <input type="text" class="form-control feature-code"  placeholder="code"/>
                                         </div>
                                         <div class="col-xs-4">
-                                            <textarea aria-describedby="basic-addon1" type="text" id="feature-description"
+                                            <textarea aria-describedby="basic-addon1" type="text"
                                                       placeholder="description"
                                                       data-error-msg="invalid feature description"
-                                                      class="form-control" rows="1" cols="30"></textarea>
+                                                      class="form-control feature-description" rows="1" cols="30"></textarea>
                                         </div>
                                         <button type="button" class="wr-btn wr-btn-horizontal add_feature_button"><i class="fa fa-plus"></i></button>
                                     </div>
@@ -221,7 +222,7 @@
 
                         </div>
                         <br>
-                        <button id="add-devicetype-btn" class="wr-btn">Update</button>
+                        <button id="edit-devicetype-btn" class="wr-btn">Update</button>
                         <div id="devicetype-create-success-msg" class="alert hidden" role="alert">
                             <i class="icon fw fw-success"></i><span></span>
                         </div>
@@ -268,4 +269,4 @@
 
 {{#zone "bottomJs"}}
     {{js "js/bottomJs.js"}}
-{{/zone}}
\ No newline at end of file
+{{/zone}}
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.devicetype.edit/public/js/bottomJs.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.devicetype.edit/public/js/bottomJs.js
index 320d630efe8..d5bd168f87d 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.devicetype.edit/public/js/bottomJs.js
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.devicetype.edit/public/js/bottomJs.js
@@ -123,27 +123,28 @@ $(document).ready(function () {
 	var addFeatureButton = $('.add_feature_button'); //Add button selector
 	var featureWrapper = $('.feature_field_wrapper'); //Input field wrapper
 	$(addFeatureButton).click(function(){ //Once add button is clicked
-		var featureFieldHtml = '<div class="row"><div class="dontfloat feature-wrapper" name ="deviceFeature"> <div class="col-xs-3"> <input type="text"' +
-				' class="form-control" id="feature-name" placeholder="name"/> </div> <div class="col-xs-4"> ' +
-				'<input type="text" class="form-control" id="feature-code" placeholder="code"/> </div> ' +
-				'<div class="col-xs-4"> <textarea aria-describedby="basic-addon1" type="text" ' +
-				'id="feature-description" placeholder="description"data-error-msg="invalid ' +
-				'feature description"class="form-control" rows="1" cols="30"></textarea> </div> ' +
-				'<button type="button" class="wr-btn wr-btn-horizontal wr-btn-secondary remove_feature_button"><i class="fa fa-minus"></i></button> </div></div>'
+		var featureFieldHtml = '<div class="row"><div class="dontfloat feature-wrapper" name ="deviceFeature"> ' +
+			'<div class="col-xs-3"> <input type="text"' +
+            ' class="form-control feature-name" placeholder="name"/> </div> <div class="col-xs-4"> ' +
+            '<input type="text" class="form-control feature-code" placeholder="code"/> </div> ' +
+            '<div class="col-xs-4"> <textarea aria-describedby="basic-addon1" type="text" ' +
+            'class="feature-description" placeholder="description"data-error-msg="invalid ' +
+            'feature description" class="form-control" rows="1" cols="30"></textarea> </div> ' +
+            '<button type="button" class="wr-btn wr-btn-horizontal wr-btn-secondary remove_feature_button">' +
+			'<i class="fa fa-minus"></i></button> </div></div>';
 		$(featureWrapper).append(featureFieldHtml); // Add field html
 
 	});
 	$(featureWrapper).on('click', '.remove_feature_button', function(e){ //Once remove button is clicked
 		e.preventDefault();
 		$(this).parent('div').remove(); //Remove field html
-		op--; //Decrement field counter
 	});
 
     /**
      * Following click function would execute
      * when a user clicks on "Add Device type" button.
      */
-    $("button#add-devicetype-btn").click(function () {
+    $("button#edit-devicetype-btn").click(function () {
 
 		var errorMsgWrapper = "#devicetype-create-error-msg";
 		var errorMsg = "#devicetype-create-error-msg span";
@@ -155,13 +156,19 @@ $(document).ready(function () {
 		if (!deviceTypeName || deviceTypeName.trim() == "" ) {
 			$(errorMsg).text("Device Type Name Cannot be empty.");
 			$(errorMsgWrapper).removeClass("hidden");
+			$([document.documentElement, document.body]).animate({
+				scrollTop: $(".page-sub-title").offset().top
+				}, 500);
 			return;
 		}
 
-		if (!deviceTypeDescription || deviceTypeDescription.trim() == "" ) {
+		if (!deviceTypeDescription || deviceTypeDescription.trim() == "") {
 			$(errorMsg).text("Device Type Description Cannot be empty.");
 			$(errorMsgWrapper).removeClass("hidden");
-			return
+			$([document.documentElement, document.body]).animate({
+				scrollTop: $(".page-sub-title").offset().top
+				}, 500);
+			return;
 		}
 
 		deviceType.name = deviceTypeName.trim();
@@ -197,17 +204,29 @@ $(document).ready(function () {
 		}
 
 		var features = [];
+		var featureCodesValidation = true;
+		var regexp = /^[a-zA-Z0-9-_]+$/;
 		$('div[name^="deviceFeature"]').each(function() {
-			var featureName = $(this).find("#feature-name").val();
-			var featureCode = $(this).find("#feature-code").val();
-			if (featureName && featureName.trim() != "" && featureCode && featureCode.trim() != "") {
-				var feature = {};
-				feature.name = featureName.trim();
-				feature.code = featureCode.trim();
-				feature.description = $("#feature-description").val();
-				features.push(feature);
-			}
+		    var featureName = $(this).find(".feature-name").val();
+		    var featureCode = $(this).find(".feature-code").val();
+		    var featureDescription = $(this).find(".feature-description").val();
+		    if (featureName && featureName.trim() != "" && featureCode && featureCode.trim() != "") {
+		        featureCodesValidation = featureCodesValidation && (featureCode.search(regexp) != -1);
+		        var feature = {};
+		        feature.name = featureName.trim();
+		        feature.code = featureCode.trim();
+		        feature.description = featureDescription;
+		        features.push(feature);
+		    }
 		});
+		if (!featureCodesValidation) {
+		    $(errorMsg).text("Device Type feature code can only contain alphanumeric, underscore and dash characters.");
+		    $(errorMsgWrapper).removeClass("hidden");
+		    $([document.documentElement, document.body]).animate({
+		        scrollTop: $(".page-sub-title").offset().top
+		    }, 500);
+		    return;
+		}
 		deviceType.deviceTypeMetaDefinition.features = features;
 
 		var addRoleAPI = apiBasePath + "/admin/device-types/" + deviceType.name;
@@ -217,6 +236,7 @@ $(document).ready(function () {
 			    deviceType,
 		        function (data, textStatus, jqXHR) {
 		            if (jqXHR.status == 200) {
+		            	$(errorMsgIdentifier).addClass(" hidden");
 						$("#modalDevice").modal('show');
 		            }
 		        },
@@ -234,4 +254,4 @@ $(document).ready(function () {
 		    );
     });
 
-});
\ No newline at end of file
+});