Templating: added validation to template editor for variable names, Fixes #1133

src/app/controllers/templateEditorCtrl.js

@@ -33,8 +33,25 @@ function (angular, _) {
     };
     };
 
 
     $scope.add = function() {
     $scope.add = function() {
+      if ($scope.isValid()) {
         $scope.variables.push($scope.current);
         $scope.variables.push($scope.current);
         $scope.update();
         $scope.update();
+      }
+    };
+
+    $scope.isValid = function() {
+      if (!$scope.current.name) {
+        $scope.appEvent('alert-warning', ['Validation', 'Template variable requires a name']);
+        return false;
+      }
+
+      var sameName = _.findWhere($scope.variables, { name: $scope.current.name });
+      if (sameName && sameName !== $scope.current) {
+        $scope.appEvent('alert-warning', ['Validation', 'Variable with the same name already exists']);
+        return false;
+      }
+
+      return true;
     };
     };
 
 
     $scope.runQuery = function() {
     $scope.runQuery = function() {
@@ -57,10 +74,12 @@ function (angular, _) {
     };
     };
 
 
     $scope.update = function() {
     $scope.update = function() {
+      if ($scope.isValid()) {
         $scope.runQuery().then(function() {
         $scope.runQuery().then(function() {
           $scope.reset();
           $scope.reset();
           $scope.editor.index = 0;
           $scope.editor.index = 0;
         });
         });
+      }
     };
     };
 
 
     $scope.reset = function() {
     $scope.reset = function() {

src/app/partials/templating_editor.html

@@ -47,7 +47,6 @@
 					</table>
 					</table>
 				</div>
 				</div>
 			</div>
 			</div>
-
 		</div>
 		</div>
 
 
 		<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
 		<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
@@ -56,7 +55,7 @@
 					<div class="editor-row">
 					<div class="editor-row">
 						<div class="editor-option">
 						<div class="editor-option">
 							<label class="small">Variable name</label>
 							<label class="small">Variable name</label>
-							<input type="text" class="input-medium" ng-model='current.name' placeholder="name"></input>
+							<input type="text" class="input-medium" ng-model='current.name' placeholder="name" required></input>
 						</div>
 						</div>
 						<div class="editor-option">
 						<div class="editor-option">
 							<label class="small">Type</label>
 							<label class="small">Type</label>