Finished subscriber view
diff --git a/views/ngXosLib/xosHelpers/spec/services/helpers/form.helpers.test.js b/views/ngXosLib/xosHelpers/spec/services/helpers/form.helpers.test.js
index 4c90cd6..404f63a 100644
--- a/views/ngXosLib/xosHelpers/spec/services/helpers/form.helpers.test.js
+++ b/views/ngXosLib/xosHelpers/spec/services/helpers/form.helpers.test.js
@@ -133,8 +133,14 @@
});
});
- it('should convert the fields array in an empty form object', () => {
- expect(service.parseModelField(fields)).toEqual(modelField);
+ describe('the parseModelField mehtod', () => {
+ it('should convert the fields array in an empty form object', () => {
+ expect(service.parseModelField(fields)).toEqual(modelField);
+ });
+
+ xit('should handle nested config', () => {
+
+ });
});
describe('when modelField are provided', () => {
diff --git a/views/ngXosLib/xosHelpers/spec/ui/field.test.js b/views/ngXosLib/xosHelpers/spec/ui/field.test.js
index c308417..f933a01 100644
--- a/views/ngXosLib/xosHelpers/spec/ui/field.test.js
+++ b/views/ngXosLib/xosHelpers/spec/ui/field.test.js
@@ -8,13 +8,15 @@
'use strict';
let element, scope, isolatedScope, rootScope, compile;
- const compileElement = () => {
+ const compileElement = (el) => {
+ element = el;
if(!scope){
scope = rootScope.$new();
}
-
- element = angular.element('<xos-field name="name" field="field" ng-model="ngModel"></xos-field>');
+ if(!angular.isDefined(element)){
+ element = angular.element('<xos-field name="name" field="field" ng-model="ngModel"></xos-field>');
+ }
compile(element)(scope);
scope.$digest();
isolatedScope = element.isolateScope().vm;
@@ -67,7 +69,7 @@
type: 'number',
validators: {}
};
- compileElement();
+ compileElement(angular.element('<xos-field name="name" field="field"></xos-field>'));
}
expect(errorFunctionWrapper).toThrow(new Error('[xosField] Please provide an ng-model'));
}));
@@ -173,6 +175,10 @@
expect($(element).find('.boolean-field > button').length).toEqual(2);
});
+ it('should format labels', () => {
+ expect($(element).find('input[name="foo"]').parent().find('label').text()).toBe('Foo:');
+ });
+
describe('and the model is empty', () => {
beforeEach(() => {
scope.ngModel = {
@@ -181,7 +187,7 @@
});
it('should not print the panel', () => {
- console.log($(element).find('.panel.object-field'));
+ // console.log($(element).find('.panel.object-field'));
expect($(element).find('.panel.object-field')).not.toExist()
});
});
diff --git a/views/ngXosLib/xosHelpers/spec/ui/form.test.js b/views/ngXosLib/xosHelpers/spec/ui/form.test.js
index 5f73f30..cb9f9e8 100644
--- a/views/ngXosLib/xosHelpers/spec/ui/form.test.js
+++ b/views/ngXosLib/xosHelpers/spec/ui/form.test.js
@@ -7,28 +7,44 @@
(function () {
'use strict';
+ let element, scope, isolatedScope, rootScope, compile;
+
+ const compileElement = () => {
+
+ if(!scope){
+ scope = rootScope.$new();
+ }
+
+ element = angular.element(`<xos-form config="config" ng-model="model"></xos-form>`);
+ compile(element)(scope);
+ scope.$digest();
+ isolatedScope = element.isolateScope().vm;
+ }
+
describe('The xos.helper module', function(){
describe('The xos-form component', () => {
- let element, scope, isolatedScope;
beforeEach(module('xos.helpers'));
+ beforeEach(inject(($compile, $rootScope) => {
+ rootScope = $rootScope;
+ compile = $compile;
+ }));
+
it('should throw an error if no config is specified', inject(($compile, $rootScope) => {
function errorFunctionWrapper(){
- $compile(angular.element('<xos-form></xos-form>'))($rootScope);
- $rootScope.$digest();
+ compileElement();
}
expect(errorFunctionWrapper).toThrow(new Error('[xosForm] Please provide a configuration via the "config" attribute'));
}));
it('should throw an error if no actions is specified', inject(($compile, $rootScope) => {
function errorFunctionWrapper(){
- let scope = $rootScope.$new();
+ scope = $rootScope.$new();
scope.config = 'green';
- $compile(angular.element('<xos-form config="config"></xos-form>'))(scope);
- $rootScope.$digest();
+ compileElement();
}
expect(errorFunctionWrapper).toThrow(new Error('[xosForm] Please provide an action list in the configuration'));
}));
@@ -37,8 +53,7 @@
let cb = jasmine.createSpy('callback');
- beforeEach(inject(($compile, $rootScope) => {
-
+ beforeEach(inject(($rootScope) => {
scope = $rootScope.$new();
@@ -78,10 +93,7 @@
}
};
- element = angular.element(`<xos-form config="config" ng-model="model"></xos-form>`);
- $compile(element)(scope);
- scope.$digest();
- isolatedScope = element.isolateScope().vm;
+ compileElement();
}));
it('should add excluded properties to the list', () => {
@@ -194,6 +206,53 @@
expect(isolatedScope.testForm.age.$error.min).toBeTruthy();
});
});
+
+ describe('when a deep model is passed', () => {
+
+ beforeEach(inject(($rootScope) => {
+
+ scope = $rootScope.$new();
+
+ scope.config = {
+ exclude: ['excludedField'],
+ formName: 'testForm',
+ actions: [
+ {
+ label: 'Save',
+ icon: 'ok', // refers to bootstraps glyphicon
+ cb: cb,
+ class: 'success'
+ }
+ ],
+ fields: {
+ object_field: {
+ field_one: {
+ label: 'Custom Label'
+ }
+ }
+ }
+ };
+
+ scope.model = {
+ object_field: {
+ field_one: 'bar',
+ number: 1,
+ email: 'teo@onlab.us'
+ }
+ };
+
+ compileElement();
+ }));
+
+ it('should print nested field', () => {
+ expect($(element).find('input').length).toBe(3);
+ });
+
+ xit('should configure nested fields', () => {
+ let custom_label = $(element).find('input[name=field_one]').parent().find('label');
+ expect(custom_label.text()).toBe('Custom Label');
+ });
+ });
});
});
});
diff --git a/views/ngXosLib/xosHelpers/src/styles/main.scss b/views/ngXosLib/xosHelpers/src/styles/main.scss
index 43c54f6..cc02e6f 100644
--- a/views/ngXosLib/xosHelpers/src/styles/main.scss
+++ b/views/ngXosLib/xosHelpers/src/styles/main.scss
@@ -4,6 +4,7 @@
@import '../ui_components/dumbComponents/table/table.scss';
@import '../ui_components/dumbComponents/alert/alert.scss';
@import '../ui_components/dumbComponents/validation/validation.scss';
+@import '../ui_components/dumbComponents/field/field.scss';
@import '../ui_components/smartComponents/smartTable/smartTable.scss';
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/field/field.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/field/field.component.js
index c2aa62d..20b7707 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/field/field.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/field/field.component.js
@@ -26,6 +26,99 @@
* }
* ```
* @param {mixed} ngModel The field value
+ *
+ * @example
+
+ # Basic Example
+
+ <example module="sampleField1">
+ <file name="script.js">
+ angular.module('sampleField1', ['xos.uiComponents'])
+ .factory('_', function($window){
+ return $window._;
+ })
+ .controller('SampleCtrl', function(){
+ this.name = 'input-name';
+ this.field = {label: 'My String Value:', type: 'string'};
+ this.model = 'my string';
+ });
+ </file>
+ <file name="index.html">
+ <div ng-controller="SampleCtrl as vm">
+ <xos-field ng-model="vm.model" name="vm.name" field="vm.field"></xos-field>
+ </div>
+ </file>
+ </example>
+
+ # Possible Values
+
+ <example module="sampleField2">
+ <file name="script.js">
+ angular.module('sampleField2', ['xos.uiComponents'])
+ .factory('_', function($window){
+ return $window._;
+ })
+ .controller('SampleCtrl', function(){
+ this.field1 = {
+ name: 'number-field',
+ field: {label: 'My Number Value:', type: 'number'},
+ model: 2
+ };
+
+ this.field2 = {
+ name: 'date-field',
+ field: {label: 'My Date Value:', type: 'date'},
+ model: new Date()
+ };
+
+ this.field3 = {
+ name: 'boolean-field',
+ field: {label: 'My Boolean Value:', type: 'boolean'},
+ model: true
+ };
+
+ this.field4 = {
+ name: 'email-field',
+ field: {label: 'My Email Value:', type: 'email'},
+ model: 'sample@domain.us'
+ };
+ });
+ </file>
+ <file name="index.html">
+ <div ng-controller="SampleCtrl as vm">
+ <xos-field ng-model="vm.field1.model" name="vm.field1.name" field="vm.field1.field"></xos-field>
+ <xos-field ng-model="vm.field2.model" name="vm.field2.name" field="vm.field2.field"></xos-field>
+ <xos-field ng-model="vm.field3.model" name="vm.field3.name" field="vm.field3.field"></xos-field>
+ <xos-field ng-model="vm.field4.model" name="vm.field4.name" field="vm.field4.field"></xos-field>
+ </div>
+ </file>
+ </example>
+
+ # This element is recursive
+
+ <example module="sampleField3">
+ <file name="script.js">
+ angular.module('sampleField3', ['xos.uiComponents'])
+ .factory('_', function($window){
+ return $window._;
+ })
+ .controller('SampleCtrl', function(){
+ this.name = 'input-name';
+ this.field = {label: 'My Object Value:', type: 'object'};
+ this.model = {
+ name: 'Jhon',
+ age: '25',
+ email: 'jhon@thewall.ru',
+ active: true
+ };
+ });
+ </file>
+ <file name="index.html">
+ <div ng-controller="SampleCtrl as vm">
+ <xos-field ng-model="vm.model" name="vm.name" field="vm.field"></xos-field>
+ </div>
+ </file>
+ </example>
*/
.directive('xosField', function(RecursionHelper){
return {
@@ -69,7 +162,7 @@
<div ng-repeat="(k, v) in vm.ngModel">
<xos-field
name="k"
- field="{label: k, type: vm.getType(v)}"
+ field="{label: vm.formatLabel(k), type: vm.getType(v)}"
ng-model="v">
</xos-field>
</div>
@@ -82,7 +175,7 @@
compile: function (element) {
return RecursionHelper.compile(element);
},
- controller: function(XosFormHelpers){
+ controller: function($attrs, XosFormHelpers, LabelFormatter){
// console.log('Field: ', this.name, this.field, this.ngModel);
if(!this.name){
throw new Error('[xosField] Please provide a field name');
@@ -90,11 +183,12 @@
if(!this.field){
throw new Error('[xosField] Please provide a field definition');
}
- if(!angular.isDefined(this.ngModel)){
+ if(!$attrs.ngModel){
throw new Error('[xosField] Please provide an ng-model');
}
this.getType = XosFormHelpers._getFieldFormat;
+ this.formatLabel = LabelFormatter.format;
this.isEmptyObject = o => Object.keys(o).length === 0;
}
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/field/field.scss b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/field/field.scss
new file mode 100644
index 0000000..8dd7ca4
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/field/field.scss
@@ -0,0 +1,3 @@
+xos-field {
+ display: block;
+}
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js b/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
index ad3dc49..d94e59d 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
@@ -24,6 +24,7 @@
**/
angular.module('xos.uiComponents', [
- 'chart.js'
+ 'chart.js',
+ 'RecursionHelper'
])
})();
diff --git a/views/ngXosLib/xosHelpers/src/xosHelpers.module.js b/views/ngXosLib/xosHelpers/src/xosHelpers.module.js
index 4ffc99d..fe246a6 100644
--- a/views/ngXosLib/xosHelpers/src/xosHelpers.module.js
+++ b/views/ngXosLib/xosHelpers/src/xosHelpers.module.js
@@ -24,8 +24,7 @@
'ngResource',
'ngAnimate',
'bugSnag',
- 'xos.uiComponents',
- 'RecursionHelper'
+ 'xos.uiComponents'
])
.config(config)