device extensions opc, http validation

ui/src/app/extension/extension-dialog.controller.js

@@ -40,8 +40,6 @@ export default function ExtensionDialogController($scope, $mdDialog, $translate,
 
 
     vm.extensionTypeChange = function () {
-        // $scope.theForm.$setPristine();
-        // $scope.theForm.$setUntouched();
 
         if (vm.extension.type === "HTTP") {
             vm.extension.configuration = {
@@ -68,6 +66,25 @@ export default function ExtensionDialogController($scope, $mdDialog, $translate,
     vm.save = save;
     function save() {
         saveTransformers();
+
+        let $errorElement = angular.element('[name=theForm]').find('.ng-invalid');
+
+        if ($errorElement.length) {
+
+            let $mdDialogScroll = angular.element('md-dialog-content').scrollTop();
+            let $mdDialogTop = angular.element('md-dialog-content').offset().top;
+            let $errorElementTop = angular.element('[name=theForm]').find('.ng-invalid').eq(0).offset().top;
+
+
+            if ($errorElementTop !== $mdDialogTop) {
+                angular.element('md-dialog-content').animate({
+                    scrollTop: $mdDialogScroll + ($errorElementTop - $mdDialogTop) - 20
+                }, 500);
+                $errorElement.eq(0).focus();
+            }
+
+        } else {
+
             if(vm.isAdd) {
                 vm.allExtensions.push(vm.extension);
             } else {
@@ -90,6 +107,8 @@ export default function ExtensionDialogController($scope, $mdDialog, $translate,
                     $scope.theForm.$setPristine();
                     $mdDialog.hide();
                 });
+
+        }
     }
     
     vm.validateId = function() {

ui/src/app/extension/extension-dialog.tpl.html

@@ -16,7 +16,7 @@
 
 -->
 <md-dialog class="extensionDialog" aria-label="{{ (vm.isAdd ? 'extension.add' : 'extension.edit' ) | translate }}">
-    <form name="theForm" ng-submit="vm.save()">
+    <form name="theForm" ng-submit="vm.save()" novalidate>
         <md-toolbar>
             <div class="md-toolbar-tools">
                 <h2 translate>{{ vm.isAdd ? 'extension.add' : 'extension.edit'}}</h2>
@@ -70,10 +70,9 @@
         </md-dialog-content>
 
         <md-dialog-actions layout="row">
-            <span flex></span>
             <md-button type="submit"
-                       ng-disabled="loading || theForm.$invalid || !theForm.$dirty"
+                       class="md-raised md-primary"
-                       class="md-raised md-primary">
+            >
                 {{ (vm.isAdd  ? 'action.add' : 'action.save') | translate }}
             </md-button>
 

ui/src/app/extension/extensions-forms/extension-form-http.directive.js

@@ -53,15 +53,69 @@ export default function ExtensionFormHttpDirective($compile, $templateCache, $tr
             }
         };
 
+
+        scope.addConverterConfig = function() {
+            var newConverterConfig = {converterId:"", converters:[]};
+            scope.converterConfigs.push(newConverterConfig);
+
+            scope.converterConfigs[scope.converterConfigs.length - 1].converters = [];
+            scope.addConverter(scope.converterConfigs[scope.converterConfigs.length - 1].converters);
+        };
+
+        scope.removeConverterConfig = function(config) {
+            var index = scope.converterConfigs.indexOf(config);
+            if (index > -1) {
+                scope.converterConfigs.splice(index, 1);
+            }
+            scope.theForm.$setDirty();
+        };
+
+        scope.addConverter = function(converters) {
+            var newConverter = {
+                deviceNameJsonExpression:"",
+                deviceTypeJsonExpression:"",
+                attributes:[],
+                timeseries:[]
+            };
+            converters.push(newConverter);
+        };
+
+        scope.removeConverter = function(converter, converters) {
+            var index = converters.indexOf(converter);
+            if (index > -1) {
+                converters.splice(index, 1);
+            }
+            scope.theForm.$setDirty();
+        };
+
+        scope.addAttribute = function(attributes) {
+            var newAttribute = {type:"", key:"", value:""};
+            attributes.push(newAttribute);
+        };
+
+        scope.removeAttribute = function(attribute, attributes) {
+            var index = attributes.indexOf(attribute);
+            if (index > -1) {
+                attributes.splice(index, 1);
+            }
+            scope.theForm.$setDirty();
+        };
+
+
+
+
+
         if(scope.isAdd) {
-            scope.converterConfigs = [];
+            scope.converterConfigs = scope.config.converterConfigurations;
-            scope.config.converterConfigurations = scope.converterConfigs;
+            scope.addConverterConfig();
         } else {
             scope.converterConfigs = scope.config.converterConfigurations;
         }
 
+
+
         scope.updateValidity = function() {
-            var valid = scope.converterConfigs && scope.converterConfigs.length > 0;
+            let valid = scope.converterConfigs && scope.converterConfigs.length > 0;
             scope.theForm.$setValidity('converterConfigs', valid);
             if(scope.converterConfigs.length) {
                 for(let i=0; i<scope.converterConfigs.length; i++) {
@@ -79,48 +133,10 @@ export default function ExtensionFormHttpDirective($compile, $templateCache, $tr
             scope.updateValidity();
         }, true);
 
-        scope.addConverterConfig = function() {
-            var newConverterConfig = {converterId:"", converters:[]};
-            scope.converterConfigs.push(newConverterConfig);
-        }
-
-        scope.removeConverterConfig = function(config) {
-            var index = scope.converterConfigs.indexOf(config);
-            if (index > -1) {
-                scope.converterConfigs.splice(index, 1);
-            }
-            scope.theForm.$setDirty();
-        }
-
-        scope.addConverter = function(converters) {
-            var newConverter = {deviceNameJsonExpression:"", deviceTypeJsonExpression:"", attributes:[], timeseries:[]};
-            converters.push(newConverter);
-        }
-
-        scope.removeConverter = function(converter, converters) {
-            var index = converters.indexOf(converter);
-            if (index > -1) {
-                converters.splice(index, 1);
-            }
-            scope.theForm.$setDirty();
-        }
-
-        scope.addAttribute = function(attributes) {
-            var newAttribute = {type:"", key:"", value:""};
-            attributes.push(newAttribute);
-        }
-
-        scope.removeAttribute = function(attribute, attributes) {
-            var index = attributes.indexOf(attribute);
-            if (index > -1) {
-                attributes.splice(index, 1);
-            }
-            scope.theForm.$setDirty();
-        }
 
         scope.transformerTypeChange = function(attribute) {
             attribute.transformer = "";
-        }
+        };
 
         scope.validateTransformer = function (model, editorName) {
             if(model && model.length) {
@@ -131,10 +147,10 @@ export default function ExtensionFormHttpDirective($compile, $templateCache, $tr
                     scope.theForm[editorName].$setValidity('transformerJSON', false);
                 }
             }
-        }
+        };
         
         $compile(element.contents())(scope);
-    }
+    };
 
     return {
         restrict: "A",

ui/src/app/extension/extensions-forms/extension-form-http.tpl.html

@@ -34,7 +34,11 @@
                     <div ng-if="converterConfigs.length > 0">
                         <ol class="list-group">
                             <li class="list-group-item" ng-repeat="(configIndex, config) in converterConfigs">
-                                <md-button aria-label="{{ 'action.remove' | translate }}" class="md-icon-button" ng-click="removeConverterConfig(config)">
+                                <md-button aria-label="{{ 'action.remove' | translate }}"
+                                           class="md-icon-button"
+                                           ng-click="removeConverterConfig(config)"
+                                           ng-hide="converterConfigs.length < 2"
+                                >
                                     <ng-md-icon icon="close" aria-label="{{ 'action.remove' | translate }}"></ng-md-icon>
                                     <md-tooltip md-direction="top">
                                         {{ 'action.remove' | translate }}
@@ -65,8 +69,14 @@
                                                     </div>
                                                     <div ng-if="config.converters.length > 0">
                                                         <ol class="list-group">
-                                                            <li class="list-group-item" ng-repeat="(converterIndex,converter) in config.converters">
+                                                            <li class="list-group-item"
-                                                                <md-button aria-label="{{ 'action.remove' | translate }}" class="md-icon-button" ng-click="removeConverter(converter, config.converters)">
+                                                                ng-repeat="(converterIndex,converter) in config.converters"
+                                                            >
+                                                                <md-button aria-label="{{ 'action.remove' | translate }}"
+                                                                           class="md-icon-button"
+                                                                           ng-click="removeConverter(converter, config.converters)"
+                                                                           ng-hide="config.converters.length < 2"
+                                                                >
                                                                     <ng-md-icon icon="close" aria-label="{{ 'action.remove' | translate }}"></ng-md-icon>
                                                                     <md-tooltip md-direction="top">
                                                                         {{ 'action.remove' | translate }}

ui/src/app/extension/extensions-forms/extension-form-opc.tpl.html

@@ -216,7 +216,7 @@
                                                         </div>
                                                     </md-input-container>
 
-                                                    <div class="tb-container">
+                                                    <div class="tb-container" ng-class="{'ng-invalid':!server.keystore.file}">
                                                         <span ng-init='fieldsToFill = {"fileName":"fileName", "file":"file"}'></span>
                                                         <label class="tb-label" translate>extension.opc-keystore-location</label>
                                                         <div flow-init="{singleFile:true}" flow-file-added='fileAdded($file, server.keystore, fieldsToFill)' class="tb-file-select-container">