forms

apps/dnet-is-application/src/main/java/eu/dnetlib/dsm/DsmAjaxController.java

@@ -47,8 +47,8 @@ public class DsmAjaxController extends AbstractDnetController {
 	}
 
 	@GetMapping("/conf")
-	public Map<String, Iterable<?>> configuration() {
+	public Map<String, Object> configuration() {
-		final Map<String, Iterable<?>> map = new LinkedHashMap<>();
+		final Map<String, Object> map = new LinkedHashMap<>();
 		map.put("protocols", protocolService.listProtocols());
 		map.put("compatibilityLevels", vocabularyTermRepository.findTermsByVocabulary("dnet:compatibilityLevel"));
 		map.put("contentDescTypes", vocabularyTermRepository.findTermsByVocabulary("dnet:content_description_typologies"));

apps/dnet-is-application/src/main/resources/static/html/dsm_add_api.html

@@ -7,38 +7,12 @@
 			<form>
 				
 				<form-textfield-static label="Datasource" value="dsName"></form-textfield-static>
-				
 				<form-textfield-with-prefix label="API Id" prefix="{{prefix}}" value="api.id"></form-textfield-with-prefix>
-				
+				<form-select label="Compatibility level" terms="compatibilityLevels" value="api.compliance"></form-select>				
-				<div class="form-group row">
+				<form-select label="Content description" terms="contentDescTypes" value="api.contentdescription"></form-select>				
-					<label class="col-sm-2 col-form-label col-form-label-sm">Compatibility level</label>
+				<form-select label="Protocol" terms="protocols" value="api.protocol"></form-select>				
-					<div class="col-sm-10">
-						<select class="custom-select custom-select-sm" ng-model="api.compliance">
-							<option ng-repeat="v in compatibilityLevels">{{v}}</option>
-						</select>
-					</div>
-				</div>
-				<div class="form-group row">
-					<label class="col-sm-2 col-form-label col-form-label-sm">Content description</label>
-					<div class="col-sm-10">
-						<select class="custom-select custom-select-sm" ng-model="api.contentdescription">
-							<option ng-repeat="v in contentDescTypes">{{v}}</option>
-						</select>
-					</div>
-				</div>
-				<div class="form-group row">
-					<label class="col-sm-2 col-form-label col-form-label-sm">Protocol</label>
-					<div class="col-sm-10">
-						<select class="custom-select custom-select-sm" ng-model="api.protocol" ng-change="updateSelProtParams()">
-							<option ng-repeat="prot in protocols">{{prot.id}}</option>
-						</select>
-					</div>
-				</div>
-				
-				
 				<form-textfield label="BaseURL" value="api.baseUrl" regex="^(http|https|ftp|file|sftp|jar|mongodb):\/\/"></form-textfield>
 				
-				
 				<div ng-show="api.protocol" ng-repeat="p in selProtParams">
 					<div class="form-group row">
 						<label class="col-sm-2 col-form-label col-form-label-sm">Parameter: {{p.label}}</label>

apps/dnet-is-application/src/main/resources/static/html/parts/form_select.html

@@ -0,0 +1,11 @@
+<div class="form-group row">
+	<label class="col-sm-2 col-form-label col-form-label-sm">{{label}}</label>
+	<div class="col-sm-10">
+		<select class="custom-select custom-select-sm is-valid" 
+			ng-model="value" 
+			ng-required="required"
+			ng-class="{'is-invalid': !value || value.trim() == ''}">
+			<option ng-repeat="t in terms">{{t}}</option>
+		</select>
+	</div>
+</div>

apps/dnet-is-application/src/main/resources/static/js/dsm_ctrls.js

@@ -85,30 +85,31 @@ app.controller('dsmAddApiController', function($scope, $http, $routeParams) {
 	$scope.api = {}
 
 	$scope.protocols = [];
+	$scope.protocolsMap = {};
 	$scope.compatibilityLevels = [];
 	$scope.contentDescTypes = [];
 	
 	$scope.selProtParams = [];
 	
+	$scope.$watch('api.protocol', function() {
+		if ($scope.api.protocol) {
+			$scope.selProtParams = $scope.protocolsMap[$scope.api.protocol];
+ 		}
+ 	});
+	
+	
 	call_http_get($http, './ajax/dsm/conf' , function(res) {
-		$scope.protocols = res.data.protocols;
+		$scope.protocols = [];
+		$scope.protocolsMap = {};
+		angular.forEach(res.data.protocols, function(prot) {
+			$scope.protocols.push(prot.id);
+			$scope.protocolsMap[prot.id] = prot.params;
+		});
+		
 		$scope.compatibilityLevels = res.data.compatibilityLevels;
 		$scope.contentDescTypes = res.data.contentDescTypes;
 	});
 		
-	$scope.updateSelProtParams = function() {
-		$scope.api.apiParams = {};
-	
-		if ($scope.api.protocol) {
-			for (var i=0; i < $scope.protocols.length; ++i) {
-				if ($scope.protocols[i].id == $scope.api.protocol) {
-					$scope.selProtParams = $scope.protocols[i].params;
-					return;
-				}
-			}
- 		}
-	}
-	
 	$scope.save = function() {
 		var record = angular.copy($scope.api);
 		record.id = $scope.prefix + record.id;

apps/dnet-is-application/src/main/resources/static/js/is_main.js

@@ -79,4 +79,25 @@ app.directive('formTextfieldWithPrefix', function() {
 	}
 });
 
+app.directive('formSelect', function() {
+	return {
+		restrict: 'E',
+		scope: {
+            'label'    : '@',
+            'optional' : '@',
+			'terms'    : '=',
+            'value'    : '=',
+            
+		},
+		templateUrl: './html/parts/form_select.html',
+		link: function(scope, element, attrs) {
+			scope.required = (scope.optional != 'true');
+		}
+	};
+});
+
+
+
+
+