diff --git a/addon/components/dynamic-form.js b/addon/components/dynamic-form.js index 52fde18..889bb76 100644 --- a/addon/components/dynamic-form.js +++ b/addon/components/dynamic-form.js @@ -1,5 +1,6 @@ import Ember from 'ember'; import getOwner from 'ember-getowner-polyfill'; +const { set, get } = Ember; const TYPE_MAP = { validator: { @@ -15,22 +16,25 @@ const TYPE_MAP = { const DynamicForm = Ember.Component.extend({ renderSchema: Ember.K, - _renderer: null, + formRenderer: null, - _render() { + init() { let renderer = this.get('_renderer'); if (!renderer) { let container = getOwner(this); let config = container.resolveRegistration('config:environment'); if (config.dynamicForms && config.dynamicForms.renderer) { - Ember.Logger.debug('found renderer', config.dynamicForms.renderer); renderer = container.lookup(`${config.dynamicForms.renderer}:dynamic-forms.renderers`); } else { renderer = container.lookup('alpaca:dynamic-forms.renderers'); } - this.set('_renderer', renderer); - } - renderer.render(this.get('renderSchema'), this); + + }, + + _render() { + Ember.Logger.debug('_render'); + let renderer = get(this, 'formRenderer'); + renderer.render(get(this, 'renderSchema'), this.$()); }, didInsertElement() { @@ -40,26 +44,57 @@ const DynamicForm = Ember.Component.extend({ didReceiveAttrs() { this._super(...arguments); - let schemaObj = this._initSchema(this.get('schema')); - let schemaWithData = this._processData(schemaObj); - let schemaWithPostRender = this._buildPostRender(schemaWithData); - let schemaWithActions = this._addActions(schemaWithPostRender); - let filteredSchema = this._processFilters(schemaWithActions); - let mappedSchema = this._replaceKeywordsWithFunctions(filteredSchema); - this.set('renderSchema', mappedSchema); + Ember.Logger.debug('didReceiveAttrs'); + let buildSchema = _.flow([ + this._initSchema, + _.curry(this._processData)(get(this, 'data')), + _.curry(this._buildPostRender)(get(this, 'changeAction'), get(this, 'postRender')), + _.curry(this._addActions)(get(this, 'formActions')), + _.curry(this._processFilters)(getOwner(this)), + _.curry(this._replaceKeywordsWithFunctions)(getOwner(this)) + ]); + set(this, 'renderSchema', buildSchema(get(this, 'schema'))); }, - didUpdateAttrs() { + willUpdate() { + this._super(...arguments); + Ember.Logger.debug('willUpdate'); this._render(); }, - _buildPostRender(schemaObj) { + _initSchema(schema) { + Ember.Logger.debug('_initSchema', schema); + if (typeof schema === 'string') { + return JSON.parse(schema); + } + return _.clone(schema, true); + }, + + _processData(formData, schemaObj) { + Ember.Logger.debug('_processData', schemaObj, formData); + if (formData && Ember.typeOf(formData) === 'object') { + schemaObj.data = formData; + } else if (formData && Ember.typeOf(formData) === 'instance') { + let keys = Object.keys(schemaObj.schema.properties); + let dataObj = _.reduce(keys, (data, key) => { + data[key] = get(formData, key); + return data; + }, {}); + schemaObj.data = dataObj; + } + return schemaObj; + }, + + _buildPostRender(changeAction, postRender, schemaObj) { + Ember.Logger.debug('_buildPostRender', schemaObj); let postRenderFns = []; - if (this.get('changeAction')) { + if (changeAction) { let fields = Object.keys(schemaObj.schema.properties); - const changeAction = this.get('changeAction'); let changeFn = function (control) { fields.forEach((field) => { + control.childrenByPropertyId[field].on('change', function (e) { + changeAction(e, field); + }); control.childrenByPropertyId[field].on('keyup', function (e) { changeAction(e, field); }); @@ -70,8 +105,8 @@ const DynamicForm = Ember.Component.extend({ }; postRenderFns.push(changeFn); } - if (this.get('postRender')) { - postRenderFns.push(this.get('postRender')); + if (postRender) { + postRenderFns.push(postRender); } if (postRenderFns.length > 0) { @@ -79,15 +114,16 @@ const DynamicForm = Ember.Component.extend({ postRenderFns.push(schemaObj.postRender); } schemaObj.postRender = function () { - const args = arguments; + let args = arguments; postRenderFns.forEach((fn) => fn(args[0])); }; } return schemaObj; }, - _addActions(schemaObj) { - return _.reduce(this.get('formActions'), (result, value, key) => { + _addActions(formActions, schemaObj) { + Ember.Logger.debug('_addActions', schemaObj); + return _.reduce(formActions, (result, value, key) => { if ((((((result || {}).options || {}).form || {}).buttons || {})[key])) { result.options.form.buttons[key].click = value; } @@ -95,15 +131,16 @@ const DynamicForm = Ember.Component.extend({ }, schemaObj); }, - _processFilters(schemaObj) { + _processFilters(owner, schemaObj) { + Ember.Logger.debug('_processData', schemaObj); if (!(schemaObj && schemaObj.options && schemaObj.options.fields)) { return schemaObj; } - const optionFields = schemaObj.options.fields; - const newSchema = _.reduce(optionFields, (result, val, key) => { + let optionFields = schemaObj.options.fields; + let newSchema = _.reduce(optionFields, (result, val, key) => { if(val['filter-rules']) { val['filter-rules'].forEach((element) => { - const filterRule = getOwner(this).lookup(`${element}:dynamic-forms.filter-rules`); + let filterRule = owner.lookup(`${element}:dynamic-forms.filter-rules`); filterRule.filter(key, result); }); } @@ -112,37 +149,12 @@ const DynamicForm = Ember.Component.extend({ return newSchema; }, - _processData(schemaObj) { - if (this.get('data') && Ember.typeOf(this.get('data')) === 'object') { - schemaObj.data = this.get('data'); - } else if (this.get('data') && Ember.typeOf(this.get('data')) === 'instance') { - let keys = Object.keys(schemaObj.schema.properties); - let dataObj = _.reduce(keys, (data, key) => { - data[key] = this.get('data').get(key); - return data; - }, {}); - schemaObj.data = dataObj; - } - return schemaObj; - }, - - _initSchema(schema) { - let schemaObj; - if (typeof schema === 'string') { - schemaObj = JSON.parse(schema); - } else { - schemaObj = _.clone(schema, true); - } - - return schemaObj; - }, - - _replaceKeywordsWithFunctions(schemaObj) { - const container = getOwner(this); - const replaceWithFunction = function (object, value, key) { + _replaceKeywordsWithFunctions(owner, schemaObj) { + Ember.Logger.debug('_replaceKeywordsWithFunctions', schemaObj); + let replaceWithFunction = function (object, value, key) { if (TYPE_MAP.hasOwnProperty(key) && typeof value === 'string') { - const type = TYPE_MAP[key]; - const typeObj = container.lookup(`${value}:${type.namespace}`); + let type = TYPE_MAP[key]; + let typeObj = owner.lookup(`${value}:${type.namespace}`); if (typeObj) { object[key] = typeObj[type.functionName]; } // else fail with a message that the given type couldn't be found diff --git a/package.json b/package.json index 32bf898..d75266b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ember-cli-dynamic-forms", - "version": "0.1.2", + "version": "0.1.3", "description": "An Ember addon for creating dynamic forms", "directories": { "doc": "doc", @@ -30,7 +30,7 @@ "ember-cli": "^2.4.2", "ember-cli-app-version": "^1.0.0", "ember-cli-dependency-checker": "^1.2.0", - "ember-cli-github-pages": "0.0.8", + "ember-cli-github-pages": "0.1.2", "ember-cli-htmlbars": "^1.0.1", "ember-cli-htmlbars-inline-precompile": "^0.3.1", "ember-cli-inject-live-reload": "^1.3.1", diff --git a/tests/dummy/config/environment.js b/tests/dummy/config/environment.js index 5d7dde6..ff06f9f 100644 --- a/tests/dummy/config/environment.js +++ b/tests/dummy/config/environment.js @@ -40,6 +40,8 @@ module.exports = function(environment) { } if (environment === 'production') { + ENV.locationType = 'hash'; + ENV.baseUrl = '/ember-cli-dynamic-forms/'; }