From 86a407cd3fcbefb16b00ea9ef10bd80f2b0e0a0f Mon Sep 17 00:00:00 2001
From: Roberto Sánchez <roberto.sanchez@curisit.net>
Date: Mon, 30 Dec 2013 17:03:43 +0000
Subject: [PATCH] #333 feature - Added form validation in catalog page
---
securis/src/main/resources/static/admin.html | 34 +++++++++++++----
securis/src/main/resources/static/js/catalogs.json | 2
securis/src/main/resources/static/js/admin.js | 28 ++++++++++++--
3 files changed, 51 insertions(+), 13 deletions(-)
diff --git a/securis/src/main/resources/static/admin.html b/securis/src/main/resources/static/admin.html
index fa8b84c..ada0461 100644
--- a/securis/src/main/resources/static/admin.html
+++ b/securis/src/main/resources/static/admin.html
@@ -36,8 +36,18 @@
opacity: 0;
}
-input.ng-invalid-maxlength {
+input.ng-invalid, textarea.ng-invalid {
border: solid 1px red;
+}
+
+input.ng-dirty.ng-valid, textarea.ng-dirty.ng-valid {
+ border: solid 1px green;
+}
+
+.alert.inline-alert {
+ padding-top: 5px;
+ padding-bottom: 5px;
+ margin-bottom: 5px;
}
</style>
@@ -111,20 +121,28 @@
</div>
</nav>
<div class="panel panel-default animate-show ng-hide" ng-show="showForm">
- <form role="form" class="form-horizontal " name="licenseForm">
+ <form role="form" class="form-horizontal " name="catalogForm" id="catalogForm" ng-submit="saveCatalog()" >
+ <pre>Form: {{catalogForm | json}}</pre>
+ <pre>formu: {{formu | json}}</pre>
<div class="form-group" ng-repeat="field in catalogMetadata.fields" ng-if="!isNew || !field.readOnly">
<label class="col-md-3 control-label" for="{{field.name}}">{{field.display}}</label>
<div class="col-md-5">
- <input ng-if="!field.readOnly && !field.multiline" type="{{field.type}}" id="{{field.name}}" name="{{field.name}}" placeholder=""
- class="form-control" ng-model="formu[field.name]" ng-required="field.mandatory" ng-maxlength="20" />
- <textarea ng-if="!field.readOnly && field.multiline" type="{{field.type}}" id="{{field.name}}" name="{{field.name}}" placeholder=""
- class="form-control" ng-model="formu[field.name]" rows="{{field.multiline}}" ng-required="field.mandatory" ng-maxlength="field.maxlength" ></textarea>
+ <input catalog-field ng-if="!field.readOnly && !field.multiline" type="{{field.type}}" id="{{field.name}}" name="{{field.name}}" placeholder=""
+ class="form-control" ng-model="formu[field.name]" ng-required="field.mandatory" ng-maxlength="{{field.maxlength}}" />
+ <textarea catalog-field ng-if="!field.readOnly && field.multiline" type="{{field.type}}" id="{{field.name}}" name="{{field.name}}" placeholder=""
+ class="form-control" ng-model="formu[field.name]" rows="{{field.multiline}}" ng-required="field.mandatory" ng-maxlength="{{field.maxlength}}"></textarea>
<p ng-if="field.readOnly" class="form-control-static">{{formu[field.name]}}</p>
+
+ <div class="alert inline-alert alert-warning" ng-show="catalogForm[field.name].$invalid">
+ <span class="glyphicon glyphicon-warning-sign"></span>
+ <span ng-show="catalogForm[field.name].$error.maxlength">{{field.display}} length is too long (max: {{field.maxlength}}).<br/></span>
+ <span ng-show="catalogForm[field.name].$error.required">{{field.display}} is required.</span>
+ </div>
</div>
</div>
<div class="form-group">
- <div class="col-md-offset-3 col-md-10">
- <button type="submit" class="btn btn-primary">
+ <div class="col-md-offset-3 col-md-10" id="saveContainer">
+ <button id="save" type="submit" class="btn btn-primary" >
<span class="glyphicon glyphicon-floppy-disk"></span> Save
</button>
</div>
diff --git a/securis/src/main/resources/static/js/admin.js b/securis/src/main/resources/static/js/admin.js
index 45f2b1b..0000694 100644
--- a/securis/src/main/resources/static/js/admin.js
+++ b/securis/src/main/resources/static/js/admin.js
@@ -3,6 +3,19 @@
var app = angular.module('app', [ 'ngRoute', 'ngAnimate' ]);
+ app.directive('catalogField', function() {
+ return {
+ restrict: 'A', // only activate on element attribute
+ require: '?ngModel', // get a hold of NgModelController
+ link: function(scope, element, attrs, ngModel) {
+ if(!ngModel) return; // do nothing if no ng-model
+ // TODO: Replace the hard-coded form ID by the appropiate dynamic field
+ scope.catalogForm[attrs.name] = scope.catalogForm['{{field.name}}'];
+ scope.catalogForm[attrs.name].$name = attrs.name;
+ }
+ };
+ });
+
app.factory('Catalogs', function($http) {
var CatalogsService = {}
CatalogsService.list = function(initFn) {
@@ -39,25 +52,32 @@
} ]);
- app.controller('CatalogFormCtrl', [ '$scope', '$http',
+ app.controller('CatalogFormCtrl', [ '$scope', '$http', 'Catalogs',
- function($scope, $http, menuController) {
+ function($scope, $http, menuController, Catalogs) {
$scope.showForm = false;
+ $scope.scope = $scope;
console.log('Form: currentCatalog:'+ $scope.cataLogIndex);
$scope.editNew = function() {
$scope.showForm = true;
$scope.isNew = true;
- $scope.formu = {};
+ //$scope.formu = {};
}
$scope.edit = function() {
$scope.showForm = true;
$scope.isNew = false;
// TODO: Load in formu values for Form
- $scope.formu = {};
+ //$scope.formu = {};
}
$scope.cancel = function() {
$scope.showForm = false;
}
+
+ $scope.saveCatalog = function() {
+ if ($scope.catalogForm.$invalid) {
+ alert(JSON.stringify($scope.catalogForm))
+ }
+ }
} ]);
app.controller('CatalogListCtrl', [ '$scope', '$http',
diff --git a/securis/src/main/resources/static/js/catalogs.json b/securis/src/main/resources/static/js/catalogs.json
index ddc9a0a..aef9b10 100644
--- a/securis/src/main/resources/static/js/catalogs.json
+++ b/securis/src/main/resources/static/js/catalogs.json
@@ -19,7 +19,7 @@
},
{
"name": "description",
- "display": "Description",
+ "display": "Description",
"type": "string",
"maxlength": 500,
"multiline": 2
--
Gitblit v1.3.2