From 7209d21924116bedc8ed0ac6957cef24ecf80065 Mon Sep 17 00:00:00 2001 From: Michael Padon Date: Thu, 18 Aug 2016 12:54:20 -0500 Subject: [PATCH 1/7] feat(changeAction update): changeAction now fires when any field changes --- addon/components/dynamic-form.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/addon/components/dynamic-form.js b/addon/components/dynamic-form.js index 25a5aed..23830e3 100644 --- a/addon/components/dynamic-form.js +++ b/addon/components/dynamic-form.js @@ -59,6 +59,9 @@ const DynamicForm = Ember.Component.extend({ 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); }); From 99e88c50999178f3c1fcdbe62f0fe9a63507e4ed Mon Sep 17 00:00:00 2001 From: Todd Jordan Date: Thu, 18 Aug 2016 00:57:15 -0400 Subject: [PATCH 2/7] refactoring component refactor this.get into get(this) Fix up pipeline restore getOwner polyfill for 1.13 compat --- addon/components/dynamic-form.js | 90 +++++++++++++++++--------------- 1 file changed, 48 insertions(+), 42 deletions(-) diff --git a/addon/components/dynamic-form.js b/addon/components/dynamic-form.js index 23830e3..7a405de 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,21 +16,22 @@ const TYPE_MAP = { const DynamicForm = Ember.Component.extend({ renderSchema: Ember.K, - _renderer: null, + formRenderer: null, - _render() { - var renderer = this.get('_renderer'); - if (!renderer) { - let container = getOwner(this); - let config = container.resolveRegistration('config:environment'); - if (config.dynamicForms && config.dynamicForms.renderer) { - renderer = container.lookup(`${config.dynamicForms.renderer}:renderers`); - } else { - renderer = container.lookup('alpaca:renderers'); - } - this.set('_renderer', renderer); + init() { + this._super(...arguments); + let container = getOwner(this); + let config = container.resolveRegistration('config:environment'); + if (config.dynamicForms && config.dynamicForms.renderer) { + set(this, 'formRenderer', container.lookup(`${config.dynamicForms.renderer}:renderers`)); + } else { + set(this, 'formRenderer', container.lookup('alpaca:renderers')); } - renderer.render(this.get('renderSchema'), this.$()); + }, + + _render() { + let renderer = get(this, 'formRenderer'); + renderer.render(get(this, 'renderSchema'), this.$()); }, didInsertElement() { @@ -39,13 +41,15 @@ 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); + let buildSchema = _.flow([ + _.bind(this._initSchema, this), + _.bind(this._processData, this), + _.bind(this._buildPostRender, this), + _.bind(this._addActions, this), + _.bind(this._processFilters, this), + _.bind(this._replaceKeywordsWithFunctions, this) + ]); + set(this, 'renderSchema', buildSchema(get(this, 'schema'))); }, didUpdateAttrs() { @@ -53,10 +57,11 @@ const DynamicForm = Ember.Component.extend({ }, _buildPostRender(schemaObj) { + Ember.Logger.debug('_buildPostRender', schemaObj); let postRenderFns = []; - if (this.get('changeAction')) { + if (get(this, 'changeAction')) { let fields = Object.keys(schemaObj.schema.properties); - const changeAction = this.get('changeAction'); + let changeAction = get(this, 'changeAction'); let changeFn = function (control) { fields.forEach((field) => { control.childrenByPropertyId[field].on('change', function (e) { @@ -72,8 +77,8 @@ const DynamicForm = Ember.Component.extend({ }; postRenderFns.push(changeFn); } - if (this.get('postRender')) { - postRenderFns.push(this.get('postRender')); + if (get(this, 'postRender')) { + postRenderFns.push(get(this, 'postRender')); } if (postRenderFns.length > 0) { @@ -81,7 +86,7 @@ const DynamicForm = Ember.Component.extend({ postRenderFns.push(schemaObj.postRender); } schemaObj.postRender = function () { - const args = arguments; + let args = arguments; postRenderFns.forEach((fn) => fn(args[0])); }; } @@ -89,7 +94,8 @@ const DynamicForm = Ember.Component.extend({ }, _addActions(schemaObj) { - return _.reduce(this.get('formActions'), (result, value, key) => { + Ember.Logger.debug('_addActions', schemaObj); + return _.reduce(get(this, 'formActions'), (result, value, key) => { if ((((((result || {}).options || {}).form || {}).buttons || {})[key])) { result.options.form.buttons[key].click = value; } @@ -98,14 +104,15 @@ const DynamicForm = Ember.Component.extend({ }, _processFilters(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 = getOwner(this).lookup(`${element}:dynamic-forms.filter-rules`); filterRule.filter(key, result); }); } @@ -115,12 +122,13 @@ const DynamicForm = Ember.Component.extend({ }, _processData(schemaObj) { - if (this.get('data') && Ember.typeOf(this.get('data')) === 'object') { + Ember.Logger.debug('_processData', schemaObj); + if (get(this, 'data') && Ember.typeOf(get(this, 'data')) === 'object') { schemaObj.data = this.get('data'); - } else if (this.get('data') && Ember.typeOf(this.get('data')) === 'instance') { + } else if (get(this, 'data') && Ember.typeOf(get(this, 'data')) === 'instance') { let keys = Object.keys(schemaObj.schema.properties); let dataObj = _.reduce(keys, (data, key) => { - data[key] = this.get('data').get(key); + data[key] = get(this, 'data').get(key); return data; }, {}); schemaObj.data = dataObj; @@ -129,22 +137,20 @@ const DynamicForm = Ember.Component.extend({ }, _initSchema(schema) { - let schemaObj; + Ember.Logger.debug('_initSchema', schema); if (typeof schema === 'string') { - schemaObj = JSON.parse(schema); - } else { - schemaObj = _.clone(schema, true); + return JSON.parse(schema); } - - return schemaObj; + return _.clone(schema, true); }, _replaceKeywordsWithFunctions(schemaObj) { - const container = getOwner(this); - const replaceWithFunction = function (object, value, key) { + Ember.Logger.debug('_replaceKeywordsWithFunctions', schemaObj); + let container = getOwner(this); + 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 = container.lookup(`${value}:${type.namespace}`); if (typeObj) { object[key] = typeObj[type.functionName]; } // else fail with a message that the given type couldn't be found From 47cf4b42f650d643b193e25afd6b2ba5e9e92845 Mon Sep 17 00:00:00 2001 From: Todd Jordan Date: Fri, 19 Aug 2016 01:47:04 -0400 Subject: [PATCH 3/7] re-render in willUpdate --- addon/components/dynamic-form.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/addon/components/dynamic-form.js b/addon/components/dynamic-form.js index 7a405de..b225181 100644 --- a/addon/components/dynamic-form.js +++ b/addon/components/dynamic-form.js @@ -30,6 +30,7 @@ const DynamicForm = Ember.Component.extend({ }, _render() { + Ember.Logger.debug('_render'); let renderer = get(this, 'formRenderer'); renderer.render(get(this, 'renderSchema'), this.$()); }, @@ -41,6 +42,7 @@ const DynamicForm = Ember.Component.extend({ didReceiveAttrs() { this._super(...arguments); + Ember.Logger.debug('didReceiveAttrs'); let buildSchema = _.flow([ _.bind(this._initSchema, this), _.bind(this._processData, this), @@ -52,7 +54,9 @@ const DynamicForm = Ember.Component.extend({ set(this, 'renderSchema', buildSchema(get(this, 'schema'))); }, - didUpdateAttrs() { + willUpdate() { + this._super(...arguments); + Ember.Logger.debug('willUpdate'); this._render(); }, From 4a8a57838cb29e3390c302e6cbd0a30d9c3b3688 Mon Sep 17 00:00:00 2001 From: Todd Jordan Date: Fri, 19 Aug 2016 01:52:11 -0400 Subject: [PATCH 4/7] 0.1.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 32bf898..1f8eb97 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", From febc4145669fe0d093417a2bbc2233c38e05c15f Mon Sep 17 00:00:00 2001 From: Todd Jordan Date: Fri, 19 Aug 2016 02:19:56 -0400 Subject: [PATCH 5/7] upgrade ember-cli-gh-pages --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1f8eb97..d75266b 100644 --- a/package.json +++ b/package.json @@ -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", From 7bf03013522287eddf5f1bccd5fa45f0cd4b2311 Mon Sep 17 00:00:00 2001 From: Todd Jordan Date: Fri, 19 Aug 2016 02:34:55 -0400 Subject: [PATCH 6/7] ran ember-cli-github-pages default blueprint --- tests/dummy/config/environment.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/dummy/config/environment.js b/tests/dummy/config/environment.js index c59bcd5..86aadda 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/'; } From 8443833bc6a921b35922968c990d52b35f758b97 Mon Sep 17 00:00:00 2001 From: Todd Jordan Date: Fri, 19 Aug 2016 19:11:19 -0400 Subject: [PATCH 7/7] add curry to reduce side effects, organize functions --- addon/components/dynamic-form.js | 80 ++++++++++++++++---------------- 1 file changed, 39 insertions(+), 41 deletions(-) diff --git a/addon/components/dynamic-form.js b/addon/components/dynamic-form.js index b225181..8b16a04 100644 --- a/addon/components/dynamic-form.js +++ b/addon/components/dynamic-form.js @@ -44,12 +44,12 @@ const DynamicForm = Ember.Component.extend({ this._super(...arguments); Ember.Logger.debug('didReceiveAttrs'); let buildSchema = _.flow([ - _.bind(this._initSchema, this), - _.bind(this._processData, this), - _.bind(this._buildPostRender, this), - _.bind(this._addActions, this), - _.bind(this._processFilters, this), - _.bind(this._replaceKeywordsWithFunctions, this) + 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'))); }, @@ -60,12 +60,34 @@ const DynamicForm = Ember.Component.extend({ 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 (get(this, 'changeAction')) { + if (changeAction) { let fields = Object.keys(schemaObj.schema.properties); - let changeAction = get(this, 'changeAction'); let changeFn = function (control) { fields.forEach((field) => { control.childrenByPropertyId[field].on('change', function (e) { @@ -81,8 +103,8 @@ const DynamicForm = Ember.Component.extend({ }; postRenderFns.push(changeFn); } - if (get(this, 'postRender')) { - postRenderFns.push(get(this, 'postRender')); + if (postRender) { + postRenderFns.push(postRender); } if (postRenderFns.length > 0) { @@ -97,9 +119,9 @@ const DynamicForm = Ember.Component.extend({ return schemaObj; }, - _addActions(schemaObj) { + _addActions(formActions, schemaObj) { Ember.Logger.debug('_addActions', schemaObj); - return _.reduce(get(this, 'formActions'), (result, value, key) => { + return _.reduce(formActions, (result, value, key) => { if ((((((result || {}).options || {}).form || {}).buttons || {})[key])) { result.options.form.buttons[key].click = value; } @@ -107,7 +129,7 @@ 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; @@ -116,7 +138,7 @@ const DynamicForm = Ember.Component.extend({ let newSchema = _.reduce(optionFields, (result, val, key) => { if(val['filter-rules']) { val['filter-rules'].forEach((element) => { - let filterRule = getOwner(this).lookup(`${element}:dynamic-forms.filter-rules`); + let filterRule = owner.lookup(`${element}:dynamic-forms.filter-rules`); filterRule.filter(key, result); }); } @@ -125,36 +147,12 @@ const DynamicForm = Ember.Component.extend({ return newSchema; }, - _processData(schemaObj) { - Ember.Logger.debug('_processData', schemaObj); - if (get(this, 'data') && Ember.typeOf(get(this, 'data')) === 'object') { - schemaObj.data = this.get('data'); - } else if (get(this, 'data') && Ember.typeOf(get(this, 'data')) === 'instance') { - let keys = Object.keys(schemaObj.schema.properties); - let dataObj = _.reduce(keys, (data, key) => { - data[key] = get(this, 'data').get(key); - return data; - }, {}); - schemaObj.data = dataObj; - } - return schemaObj; - }, - - _initSchema(schema) { - Ember.Logger.debug('_initSchema', schema); - if (typeof schema === 'string') { - return JSON.parse(schema); - } - return _.clone(schema, true); - }, - - _replaceKeywordsWithFunctions(schemaObj) { + _replaceKeywordsWithFunctions(owner, schemaObj) { Ember.Logger.debug('_replaceKeywordsWithFunctions', schemaObj); - let container = getOwner(this); let replaceWithFunction = function (object, value, key) { if (TYPE_MAP.hasOwnProperty(key) && typeof value === 'string') { let type = TYPE_MAP[key]; - let typeObj = container.lookup(`${value}:${type.namespace}`); + 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