#333 feature - Added form validation in catalog page

Roberto Sánchez

2013-12-30 86a407cd3fcbefb16b00ea9ef10bd80f2b0e0a0f

#333 feature - Added form validation in catalog page

 securis/src/main/resources/static/admin.html
..
..
@@ -36,8 +36,18 @@
36
36
   opacity: 0;
37
37
 }
38
38
 
39
-input.ng-invalid-maxlength {
39
+input.ng-invalid, textarea.ng-invalid {
40
40
 	border: solid 1px red;
41
+}
42
+
43
+input.ng-dirty.ng-valid, textarea.ng-dirty.ng-valid {
44
+	border: solid 1px green;
45
+}
46
+
47
+.alert.inline-alert {
48
+	padding-top: 5px;
49
+	padding-bottom: 5px;
50
+	margin-bottom: 5px;
41
51
 }
42
52
 
43
53
 </style>
..
..
@@ -111,20 +121,28 @@
111
121
 					</div>
112
122
 				</nav>
113
123
 				<div class="panel panel-default animate-show ng-hide" ng-show="showForm">
114
-					<form role="form" class="form-horizontal " name="licenseForm">
124
+					<form role="form" class="form-horizontal " name="catalogForm" id="catalogForm" ng-submit="saveCatalog()" >
125
+					<pre>Form: {{catalogForm | json}}</pre>
126
+					<pre>formu: {{formu | json}}</pre>
115
127
 						<div class="form-group" ng-repeat="field in catalogMetadata.fields" ng-if="!isNew || !field.readOnly">
116
128
 							<label class="col-md-3 control-label" for="{{field.name}}">{{field.display}}</label>
117
129
 							<div class="col-md-5">
118
-								<input ng-if="!field.readOnly && !field.multiline" type="{{field.type}}" id="{{field.name}}" name="{{field.name}}" placeholder=""
119
-									class="form-control" ng-model="formu[field.name]" ng-required="field.mandatory" ng-maxlength="20" />
120
-								<textarea ng-if="!field.readOnly && field.multiline" type="{{field.type}}" id="{{field.name}}" name="{{field.name}}" placeholder=""
121
-									class="form-control" ng-model="formu[field.name]" rows="{{field.multiline}}" ng-required="field.mandatory" ng-maxlength="field.maxlength" ></textarea>
130
+								<input catalog-field ng-if="!field.readOnly && !field.multiline" type="{{field.type}}" id="{{field.name}}" name="{{field.name}}" placeholder=""
131
+									class="form-control" ng-model="formu[field.name]" ng-required="field.mandatory" ng-maxlength="{{field.maxlength}}" />
132
+								<textarea catalog-field ng-if="!field.readOnly && field.multiline" type="{{field.type}}" id="{{field.name}}" name="{{field.name}}" placeholder=""
133
+									class="form-control" ng-model="formu[field.name]" rows="{{field.multiline}}" ng-required="field.mandatory" ng-maxlength="{{field.maxlength}}"></textarea>
122
134
 								<p ng-if="field.readOnly" class="form-control-static">{{formu[field.name]}}</p>
135
+								
136
+								<div class="alert inline-alert alert-warning" ng-show="catalogForm[field.name].$invalid">
137
+								    <span class="glyphicon glyphicon-warning-sign"></span>
138
+								    <span ng-show="catalogForm[field.name].$error.maxlength">{{field.display}} length is too long (max: {{field.maxlength}}).<br/></span>
139
+								    <span ng-show="catalogForm[field.name].$error.required">{{field.display}} is required.</span>
140
+								</div>
123
141
 							</div>
124
142
 						</div>
125
143
 						<div class="form-group">
126
-							<div class="col-md-offset-3 col-md-10">
127
-								<button type="submit" class="btn btn-primary">
144
+							<div class="col-md-offset-3 col-md-10" id="saveContainer">
145
+								<button id="save" type="submit" class="btn btn-primary" >
128
146
 									<span class="glyphicon glyphicon-floppy-disk"></span> Save
129
147
 								</button>
130
148
 							</div>
 securis/src/main/resources/static/js/admin.js
..
..
@@ -3,6 +3,19 @@
3
3
 
4
4
 	var app = angular.module('app', [ 'ngRoute', 'ngAnimate' ]);
5
5
 
6
+	app.directive('catalogField', function() {
7
+	    return {
8
+	      restrict: 'A', // only activate on element attribute
9
+	      require: '?ngModel', // get a hold of NgModelController
10
+	      link: function(scope, element, attrs, ngModel) {
11
+	        if(!ngModel) return; // do nothing if no ng-model
12
+	        // TODO: Replace the hard-coded form ID by the appropiate dynamic field
13
+	        scope.catalogForm[attrs.name] = scope.catalogForm['{{field.name}}'];
14
+	        scope.catalogForm[attrs.name].$name = attrs.name; 
15
+	      }   
16
+	    };
17
+	  });
18
+	
6
19
 	app.factory('Catalogs', function($http) {
7
20
 		var CatalogsService = {}
8
21
 		CatalogsService.list = function(initFn) {
..
..
@@ -39,25 +52,32 @@
39
52
 			} ]);
40
53
 
41
54
 
42
-	app.controller('CatalogFormCtrl', [ '$scope', '$http',
55
+	app.controller('CatalogFormCtrl', [ '$scope', '$http', 'Catalogs',
43
56
 	                                    
44
-			function($scope, $http, menuController) {
57
+			function($scope, $http, menuController, Catalogs) {
45
58
 				$scope.showForm = false;
59
+				$scope.scope = $scope;
46
60
 				console.log('Form: currentCatalog:'+ $scope.cataLogIndex);
47
61
 				$scope.editNew = function() {
48
62
 					$scope.showForm = true;
49
63
 					$scope.isNew = true;
50
-					$scope.formu = {};
64
+					//$scope.formu = {};
51
65
 				}
52
66
 				$scope.edit = function() {
53
67
 					$scope.showForm = true;
54
68
 					$scope.isNew = false;
55
69
 					// TODO: Load in formu values for Form
56
-					$scope.formu = {};
70
+					//$scope.formu = {};
57
71
 				}
58
72
 				$scope.cancel = function() {
59
73
 					$scope.showForm = false;
60
74
 				}
75
+				
76
+				$scope.saveCatalog = function() {
77
+					if ($scope.catalogForm.$invalid) {
78
+						alert(JSON.stringify($scope.catalogForm))
79
+					}
80
+				}
61
81
 			} ]);
62
82
 
63
83
 	app.controller('CatalogListCtrl', [ '$scope', '$http',
 securis/src/main/resources/static/js/catalogs.json
..
..
@@ -19,7 +19,7 @@
19
19
                 },
20
20
                 {
21
21
                 "name": "description",
22
-                "display": "Description",
22
+                	"display": "Description",
23
23
                     "type": "string",
24
24
                     "maxlength": 500,
25
25
                     "multiline": 2