Documented xosForm
diff --git a/views/ngXosLib/gulp/ngXosHelpers.js b/views/ngXosLib/gulp/ngXosHelpers.js
index 5ff7d00..9b3c1b7 100644
--- a/views/ngXosLib/gulp/ngXosHelpers.js
+++ b/views/ngXosLib/gulp/ngXosHelpers.js
@@ -56,13 +56,15 @@
gulp.task('makeDocs', ['cleanDocs'], function(){
var ngOptions = {
scripts: [
- 'http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js',
- 'http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.min.js',
+ 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js',
+ 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.js',
+ 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-cookies.min.js',
+ 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-resource.js',
'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.js',
- `${options.ngXosVendor}ngXosHelpers.js`
+ `./${options.ngXosVendor}ngXosHelpers.js`
],
styles: [
- 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css',
+ 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css',
],
html5Mode: false,
title: 'XOS Helpers documentation',
diff --git a/views/ngXosLib/xosHelpers/src/services/csrfToken.interceptor.js b/views/ngXosLib/xosHelpers/src/services/csrfToken.interceptor.js
index 5f87de5..9fdc17b 100644
--- a/views/ngXosLib/xosHelpers/src/services/csrfToken.interceptor.js
+++ b/views/ngXosLib/xosHelpers/src/services/csrfToken.interceptor.js
@@ -12,6 +12,7 @@
.factory('SetCSRFToken', setCSRFToken);
function setCSRFToken($cookies) {
+ console.log($cookies);
return {
request: function(request){
if(request.method !== 'GET'){
diff --git a/views/ngXosLib/xosHelpers/src/services/label_formatter.service.js b/views/ngXosLib/xosHelpers/src/services/label_formatter.service.js
index 1eb2796..b2c7a94 100644
--- a/views/ngXosLib/xosHelpers/src/services/label_formatter.service.js
+++ b/views/ngXosLib/xosHelpers/src/services/label_formatter.service.js
@@ -8,7 +8,7 @@
**/
angular
- .module('xos.helpers')
+ .module('xos.uiComponents')
.factory('LabelFormatter', labelFormatter);
function labelFormatter() {
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form.component.js
index 35fe286..3a80fc1 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form.component.js
@@ -38,14 +38,21 @@
<example module="sampleForm">
<file name="index.html">
<div ng-controller="SampleCtrl as vm">
- <xos-form ng-model="model" config="config"></xos-form>
+ <xos-form ng-model="vm.model" config="vm.config"></xos-form>
</div>
</file>
<file name="script.js">
angular.module('sampleForm', ['xos.uiComponents'])
+ .factory('_', function($window){
+ return $window._;
+ })
.controller('SampleCtrl', function(){
this.model = {
-
+ first_name: 'Jhon',
+ last_name: 'Doe',
+ email: 'jhon.doe@sample.com',
+ active: true,
+ birthDate: '2015-02-17T22:06:38.059000Z'
}
this.config = {
exclude: ['password', 'last_login'],
@@ -170,6 +177,9 @@
};
this.buildFormStructure = (modelField, customField, model) => {
+
+ customField = customField || {};
+
return _.reduce(Object.keys(modelField), (form, f) => {
form[f] = {
label: (customField[f] && customField[f].label) ? `${customField[f].label}:` : LabelFormatter.format(f),
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js
index 6b80a32..9e95805 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js
@@ -29,7 +29,7 @@
},
template: `
<div>
- <pre>{{vm.errors.email | json}}</pre>
+ <!-- <pre>{{vm.errors.email | json}}</pre> -->
<xos-alert config="vm.config" show="vm.errors.email !== undefined">
This is not a valid email
</xos-alert>
diff --git a/xos/core/xoslib/static/js/vendor/ngXosHelpers.js b/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
index 395ea95..a368519 100644
--- a/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
+++ b/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
@@ -233,6 +233,51 @@
*
* Visit http://guide.xosproject.org/devguide/addview/ for more information
*
+ * Created by teone on 4/15/16.
+ */
+
+(function () {
+ 'use strict';
+
+ angular.module('xos.uiComponents')
+
+ /**
+ * @ngdoc directive
+ * @name xos.uiComponents.directive:xosValidation
+ * @restrict E
+ * @description The xos-validation directive
+ * @param {Object} errors The error object
+ * @element ANY
+ * @scope
+ */
+
+ .directive('xosValidation', function () {
+ return {
+ restrict: 'E',
+ scope: {
+ errors: '='
+ },
+ template: '\n <div>\n <!-- <pre>{{vm.errors.email | json}}</pre> -->\n <xos-alert config="vm.config" show="vm.errors.email !== undefined">\n This is not a valid email\n </xos-alert>\n </div>\n ',
+ transclude: true,
+ bindToController: true,
+ controllerAs: 'vm',
+ controller: function controller() {
+ this.config = {
+ type: 'danger'
+ };
+ }
+ };
+ });
+})();
+//# sourceMappingURL=../../maps/ui_components/dumbComponents/validation.component.js.map
+
+'use strict';
+
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
* Created by teone on 3/24/16.
*/
@@ -586,17 +631,38 @@
* @element ANY
* @scope
* @example
- <example module="sampleAlert1">
+ <example module="sampleForm">
<file name="index.html">
- <div ng-controller="SampleCtrl1 as vm">
-
+ <div ng-controller="SampleCtrl as vm">
+ <xos-form ng-model="vm.model" config="vm.config"></xos-form>
</div>
</file>
<file name="script.js">
- angular.module('sampleAlert1', ['xos.uiComponents'])
- .controller('SampleCtrl1', function(){
- this.config1 = {
- exclude: ['password', 'last_login']
+ angular.module('sampleForm', ['xos.uiComponents'])
+ .factory('_', function($window){
+ return $window._;
+ })
+ .controller('SampleCtrl', function(){
+ this.model = {
+ first_name: 'Jhon',
+ last_name: 'Doe',
+ email: 'jhon.doe@sample.com',
+ active: true,
+ birthDate: '2015-02-17T22:06:38.059000Z'
+ }
+ this.config = {
+ exclude: ['password', 'last_login'],
+ formName: 'sampleForm',
+ actions: [
+ {
+ label: 'Save',
+ icon: 'ok', // refers to bootstraps glyphicon
+ cb: (user) => { // receive the model
+ console.log(user);
+ },
+ class: 'success'
+ }
+ ]
};
});
</file>
@@ -610,10 +676,10 @@
config: '=',
ngModel: '='
},
- template: '\n <ng-form name="vm.config.formName || \'form\'">\n <div class="form-group" ng-repeat="field in vm.formField">\n <label>{{vm.formatLabel(field.label)}}</label>\n <input type="text" name="" class="form-control" ng-model="vm.ngModel[field]"/>\n </div>\n <div class="form-group" ng-if="vm.config.actions">\n <button href=""\n ng-repeat="action in vm.config.actions"\n ng-click="action.cb(vm.ngModel)"\n class="btn btn-{{action.class}}"\n title="{{action.label}}">\n <i class="glyphicon glyphicon-{{action.icon}}"></i>\n {{action.label}}\n </button>\n </div>\n </ng-form>\n ',
+ template: '\n <ng-form name="vm.{{vm.config.formName || \'form\'}}">\n <div class="form-group" ng-repeat="(name, field) in vm.formField">\n <label>{{field.label}}</label>\n <input ng-if="field.type !== \'boolean\'" type="{{field.type}}" name="{{name}}" class="form-control" ng-model="vm.ngModel[name]"/>\n <span class="boolean-field" ng-if="field.type === \'boolean\'">\n <button\n class="btn btn-success"\n ng-show="vm.ngModel[name]"\n ng-click="vm.ngModel[name] = false">\n <i class="glyphicon glyphicon-ok"></i>\n </button>\n <button\n class="btn btn-danger"\n ng-show="!vm.ngModel[name]"\n ng-click="vm.ngModel[name] = true">\n <i class="glyphicon glyphicon-remove"></i>\n </button>\n </span>\n <xos-validation errors="vm[vm.config.formName || \'form\'][name].$error"></xos-validation>\n </div>\n <div class="form-group" ng-if="vm.config.actions">\n <button role="button" href=""\n ng-repeat="action in vm.config.actions"\n ng-click="action.cb(vm.ngModel)"\n class="btn btn-{{action.class}}"\n title="{{action.label}}">\n <i class="glyphicon glyphicon-{{action.icon}}"></i>\n {{action.label}}\n </button>\n </div>\n </ng-form>\n ',
bindToController: true,
controllerAs: 'vm',
- controller: ["$scope", "$log", "_", "LabelFormatter", "XosFormHelpers", function controller($scope, $log, _, LabelFormatter, XosFormHelpers) {
+ controller: ["$scope", "$log", "_", "XosFormHelpers", function controller($scope, $log, _, XosFormHelpers) {
var _this = this;
if (!this.config) {
@@ -624,8 +690,6 @@
throw new Error('[xosForm] Please provide an action list in the configuration');
}
- this.formatLabel = LabelFormatter.format;
-
this.excludedField = ['id', 'validators', 'created', 'updated', 'deleted', 'backend_status'];
if (this.config && this.config.exclude) {
this.excludedField = this.excludedField.concat(this.config.exclude);
@@ -638,17 +702,22 @@
if (!model) {
return;
}
- _this.formField = XosFormHelpers.buildFormStructure(_.difference(Object.keys(model), _this.excludedField));
+ _this.formField = XosFormHelpers.buildFormStructure(XosFormHelpers.parseModelField(_.difference(Object.keys(model), _this.excludedField)), _this.config.fields, model);
});
}]
};
}).service('XosFormHelpers', ["_", "LabelFormatter", function (_, LabelFormatter) {
var _this2 = this;
+ this._isEmail = function (text) {
+ var re = /(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+ return re.test(text);
+ };
+
this._getFieldFormat = function (value) {
// check if is date
- if (_.isDate(value)) {
+ if (_.isDate(value) || !Number.isNaN(Date.parse(value)) && Date.parse(value) > 0) {
return 'date';
}
@@ -663,16 +732,33 @@
return 'number';
}
+ // check if a string is an email
+ if (_this2._isEmail(value)) {
+ return 'email';
+ }
+
return typeof value === 'undefined' ? 'undefined' : _typeof(value);
};
this.buildFormStructure = function (modelField, customField, model) {
+
+ customField = customField || {};
+
return _.reduce(Object.keys(modelField), function (form, f) {
form[f] = {
label: customField[f] && customField[f].label ? customField[f].label + ':' : LabelFormatter.format(f),
type: customField[f] && customField[f].type ? customField[f].type : _this2._getFieldFormat(model[f]),
validators: {}
};
+
+ if (form[f].type === 'date') {
+ model[f] = new Date(model[f]);
+ }
+
+ if (form[f].type === 'number') {
+ model[f] = parseInt(model[f], 10);
+ }
+
return form;
}, {});
};
@@ -904,7 +990,7 @@
* @description This factory define a set of helper function to format label started from an object property
**/
- angular.module('xos.helpers').factory('LabelFormatter', labelFormatter);
+ angular.module('xos.uiComponents').factory('LabelFormatter', labelFormatter);
function labelFormatter() {
@@ -956,6 +1042,7 @@
angular.module('xos.helpers').factory('SetCSRFToken', setCSRFToken);
function setCSRFToken($cookies) {
+ console.log($cookies);
return {
request: function request(_request) {
if (_request.method !== 'GET') {