From 7b35bd753e9fa48e88d9399f2cae6fd9ab1cc778 Mon Sep 17 00:00:00 2001
From: "michele.artini" <michele.artini@isti.cnr.it>
Date: Mon, 16 Jan 2023 11:42:45 +0100
Subject: [PATCH] forms

---
 .../resources/static/html/dsm_add_api.html    | 36 ++++-------
 .../static/html/parts/form_textfield.html     | 10 +++
 .../html/parts/form_textfield_static.html     |  8 +++
 .../parts/form_textfield_with_prefix.html     | 14 +++++
 .../src/main/resources/static/js/is_main.js   | 61 +++++++++++++++++++
 5 files changed, 105 insertions(+), 24 deletions(-)
 create mode 100644 apps/dnet-is-application/src/main/resources/static/html/parts/form_textfield.html
 create mode 100644 apps/dnet-is-application/src/main/resources/static/html/parts/form_textfield_static.html
 create mode 100644 apps/dnet-is-application/src/main/resources/static/html/parts/form_textfield_with_prefix.html

diff --git a/apps/dnet-is-application/src/main/resources/static/html/dsm_add_api.html b/apps/dnet-is-application/src/main/resources/static/html/dsm_add_api.html
index e4530b3f..a06058a7 100644
--- a/apps/dnet-is-application/src/main/resources/static/html/dsm_add_api.html
+++ b/apps/dnet-is-application/src/main/resources/static/html/dsm_add_api.html
@@ -5,23 +5,11 @@
 		<div class="col">
 			
 			<form>
-				<div class="form-group row">
-					<label class="col-sm-2 col-form-label col-form-label-sm">Datasource</label>
-					<div class="col-sm-10">
-						<input type="text" readonly class="form-control-plaintext form-control-sm" ng-model="dsName"/>
-					</div>
-				</div>
-				<div class="form-group row">
-					<label class="col-sm-2 col-form-label col-form-label-sm">API Id</label>
-					<div class="col-sm-10">
-						<div class="input-group input-group-sm">
-							<div class="input-group-prepend">
-								<span class="input-group-text">{{prefix}}</span>
-							</div>
-							<input type="text" class="form-control" ng-model="api.id" />
-						</div>	
-					</div>
-				</div>
+				
+				<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>
+				
 				<div class="form-group row">
 					<label class="col-sm-2 col-form-label col-form-label-sm">Compatibility level</label>
 					<div class="col-sm-10">
@@ -46,12 +34,10 @@
 						</select>
 					</div>
 				</div>
-				<div class="form-group row">
-					<label class="col-sm-2 col-form-label col-form-label-sm">BaseURL</label>
-					<div class="col-sm-10">
-						<input type="text" class="form-control form-control-sm" ng-model="api.baseUrl"/>
-					</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">
@@ -61,11 +47,13 @@
 						</div>
 					</div>
 				</div>
+
+				{{api}}<br />
 				
+				<button type="submit" class="btn btn-sm btn-primary">Add API</button>
 
 			</form>
 
-			{{api}}
 
 		</div>
 	</div>
diff --git a/apps/dnet-is-application/src/main/resources/static/html/parts/form_textfield.html b/apps/dnet-is-application/src/main/resources/static/html/parts/form_textfield.html
new file mode 100644
index 00000000..5a1d64b4
--- /dev/null
+++ b/apps/dnet-is-application/src/main/resources/static/html/parts/form_textfield.html
@@ -0,0 +1,10 @@
+<div class="form-group row">
+	<label class="col-sm-2 col-form-label col-form-label-sm">{{label}}</label>
+	<div class="col-sm-10">
+		<input type="text" class="form-control form-control-sm is-valid" 
+			ng-pattern="mypattern" 
+			ng-required="required" 
+			ng-class="{'is-invalid': !value || value.trim() == ''}"
+			ng-model="value" />
+	</div>
+</div>
diff --git a/apps/dnet-is-application/src/main/resources/static/html/parts/form_textfield_static.html b/apps/dnet-is-application/src/main/resources/static/html/parts/form_textfield_static.html
new file mode 100644
index 00000000..f35e93d0
--- /dev/null
+++ b/apps/dnet-is-application/src/main/resources/static/html/parts/form_textfield_static.html
@@ -0,0 +1,8 @@
+<div class="form-group row">
+	<label class="col-sm-2 col-form-label col-form-label-sm">{{label}}</label>
+	<div class="col-sm-10">
+		<input type="text" readonly="readonly" 
+			class="form-control-plaintext form-control-sm" 
+			ng-model="value"/>
+	</div>
+</div>
diff --git a/apps/dnet-is-application/src/main/resources/static/html/parts/form_textfield_with_prefix.html b/apps/dnet-is-application/src/main/resources/static/html/parts/form_textfield_with_prefix.html
new file mode 100644
index 00000000..8ba86a04
--- /dev/null
+++ b/apps/dnet-is-application/src/main/resources/static/html/parts/form_textfield_with_prefix.html
@@ -0,0 +1,14 @@
+<div class="form-group row">
+	<label class="col-sm-2 col-form-label col-form-label-sm">{{label}}</label>
+	<div class="col-sm-10">
+		<div class="input-group input-group-sm">
+			<div class="input-group-prepend">
+				<span class="input-group-text">{{prefix}}</span>
+			</div>
+			<input type="text" class="form-control form-control-sm is-valid" 
+				ng-required="required" 
+				ng-class="{'is-invalid': !suffix || suffix.trim() == ''}"
+				ng-model="suffix" />
+		</div>
+	</div>
+</div>
diff --git a/apps/dnet-is-application/src/main/resources/static/js/is_main.js b/apps/dnet-is-application/src/main/resources/static/js/is_main.js
index 5cee5777..e1d3b0d7 100644
--- a/apps/dnet-is-application/src/main/resources/static/js/is_main.js
+++ b/apps/dnet-is-application/src/main/resources/static/js/is_main.js
@@ -19,3 +19,64 @@ app.config(['$routeProvider', function($routeProvider) {
 	}
 ]);
 	
+app.directive('formTextfield', function() {
+	return {
+		restrict: 'E',
+		scope: {
+            'label'    : '@',
+            'regex'    : '@',
+            'optional' : '@',
+            'type'     : '@',
+            'value'    : '=',
+		},
+		templateUrl: './html/parts/form_textfield.html',
+		link: function(scope, element, attrs) {
+			scope.required = (scope.optional != 'true');
+			if      (scope.regex)             { scope.mypattern = new RegExp(scope.regex); }
+			else if (scope.type == 'NUMBER')  { scope.mypattern = new RegExp("^[-+]?[0-9]+(\.[0-9]+)?$"); }
+			else if (scope.type == 'BOOLEAN') { scope.mypattern = new RegExp("^(true|false)$"); }
+			else                              { scope.mypattern = new RegExp(".+"); }
+		}
+	};
+});
+
+app.directive('formTextfieldStatic', function() {
+	return {
+		restrict: 'E',
+		scope: {
+            'label'    : '@',
+            'value'    : '=',
+		},
+		templateUrl: './html/parts/form_textfield_static.html',
+		link: function(scope, element, attrs) {}
+	};
+});
+
+app.directive('formTextfieldWithPrefix', function() {
+	return {
+		restrict: 'E',
+		scope: {
+			'label'    : '@',
+			'prefix'   : '@',
+			'optional' : '@',
+			'value'    : '='
+		},
+		templateUrl: './html/parts/form_textfield_with_prefix.html',
+		link: function(scope, element, attrs) {
+			scope.suffix = '';
+			scope.required = (scope.optional != 'true');
+			
+			scope.$watch('suffix', function() {
+				var tmpId = scope.prefix + scope.suffix;
+				
+				if (scope.suffix && scope.suffix.trim() != '') {
+					scope.value = tmpId;
+				} else {
+					scope.value = null;
+				}
+			});
+		}
+	}
+});
+
+