From 2844a75f303e9537be31ee4de35c0a3dee38fc61 Mon Sep 17 00:00:00 2001 From: Angus McLeod Date: Wed, 29 Apr 2020 11:42:39 +1000 Subject: [PATCH] Handle changes via callbacks instead of observers --- .../components/wizard-mapper-connector.js.es6 | 8 +++-- .../components/wizard-mapper-input.js.es6 | 12 ++++--- .../components/wizard-mapper-selector.js.es6 | 35 ++++++++++++------- .../discourse/components/wizard-mapper.js.es6 | 4 +-- .../components/wizard-value-list.js.es6 | 12 +++++++ .../discourse/mixins/undo-changes.js.es6 | 5 +-- .../components/wizard-mapper-connector.hbs | 2 +- .../components/wizard-mapper-selector.hbs | 16 +++++---- 8 files changed, 63 insertions(+), 31 deletions(-) create mode 100644 assets/javascripts/discourse/components/wizard-value-list.js.es6 diff --git a/assets/javascripts/discourse/components/wizard-mapper-connector.js.es6 b/assets/javascripts/discourse/components/wizard-mapper-connector.js.es6 index 91f80164..d2903005 100644 --- a/assets/javascripts/discourse/components/wizard-mapper-connector.js.es6 +++ b/assets/javascripts/discourse/components/wizard-mapper-connector.js.es6 @@ -25,8 +25,10 @@ export default Component.extend({ } }, - @observes('connector') - updated() { - this.onUpdate('connector'); + actions: { + changeConnector(value) { + this.set('connector', value); + this.onUpdate('connector', this.connectorType); + } } }); \ No newline at end of file diff --git a/assets/javascripts/discourse/components/wizard-mapper-input.js.es6 b/assets/javascripts/discourse/components/wizard-mapper-input.js.es6 index f97bf44c..2c81bb89 100644 --- a/assets/javascripts/discourse/components/wizard-mapper-input.js.es6 +++ b/assets/javascripts/discourse/components/wizard-mapper-input.js.es6 @@ -24,10 +24,14 @@ export default Component.extend({ this.send('addPair'); } - if (this.hasOutput && !this.input.outputConnector) { - const options = this.options; - this.set('input.output_type', defaultSelectionType('output', options)); - this.set('input.output_connector', defaultConnector('output', this.inputType, options)); + if (this.hasOutput) { + this.set('input.output', null); + + if (!this.input.outputConnector) { + const options = this.options; + this.set('input.output_type', defaultSelectionType('output', options)); + this.set('input.output_connector', defaultConnector('output', this.inputType, options)); + } } }, diff --git a/assets/javascripts/discourse/components/wizard-mapper-selector.js.es6 b/assets/javascripts/discourse/components/wizard-mapper-selector.js.es6 index 8def3e6e..e2899c2f 100644 --- a/assets/javascripts/discourse/components/wizard-mapper-selector.js.es6 +++ b/assets/javascripts/discourse/components/wizard-mapper-selector.js.es6 @@ -72,16 +72,6 @@ export default Component.extend({ return type ? I18n.t(`admin.wizard.selector.label.${snakeCase(type)}`) : null; }, - @observes('inputType') - resetActiveType() { - this.set('activeType', defaultSelectionType(this.selectorType, this.options)); - }, - - @observes('activeType') - clearValue() { - this.set('value', null); - }, - @discourseComputed('activeType') comboBoxContent(activeType) { const controller = getOwner(this).lookup('controller:admin-wizards-wizard-show'); @@ -167,19 +157,38 @@ export default Component.extend({ return this.activeType === type && this[`${type}Enabled`]; }, - @observes('activeType', 'value') - updated() { - this.onUpdate('selector'); + changeValue(value) { + this.set('value', value); + this.onUpdate('selector', this.activeType); + }, + + @observes('inputType') + resetActiveType() { + this.set('activeType', defaultSelectionType(this.selectorType, this.options)); }, actions: { toggleType(type) { this.set('activeType', type); this.set('showTypes', false); + this.set('value', null); + this.onUpdate('selector'); }, toggleTypes() { this.toggleProperty('showTypes'); + }, + + changeValue(value) { + this.changeValue(value); + }, + + changeInputValue(event) { + this.changeValue(event.target.value); + }, + + changeUserValue(previousValue, value) { + this.changeValue(value); } } }) \ No newline at end of file diff --git a/assets/javascripts/discourse/components/wizard-mapper.js.es6 b/assets/javascripts/discourse/components/wizard-mapper.js.es6 index a545c3df..34c4000a 100644 --- a/assets/javascripts/discourse/components/wizard-mapper.js.es6 +++ b/assets/javascripts/discourse/components/wizard-mapper.js.es6 @@ -77,8 +77,8 @@ export default Component.extend({ this.onUpdate(this.property, 'input'); }, - inputUpdated(type) { - this.onUpdate(this.property, type); + inputUpdated(component, type) { + this.onUpdate(this.property, component, type); } } }); diff --git a/assets/javascripts/discourse/components/wizard-value-list.js.es6 b/assets/javascripts/discourse/components/wizard-value-list.js.es6 new file mode 100644 index 00000000..acd54685 --- /dev/null +++ b/assets/javascripts/discourse/components/wizard-value-list.js.es6 @@ -0,0 +1,12 @@ +import ValueList from 'admin/components/value-list'; + +export default ValueList.extend({ + _saveValues() { + if (this.inputType === "array") { + this.onChange(this.collection); + return; + } + + this.onChange(this.collection.join(this.inputDelimiter || "\n")); + } +}) \ No newline at end of file diff --git a/assets/javascripts/discourse/mixins/undo-changes.js.es6 b/assets/javascripts/discourse/mixins/undo-changes.js.es6 index b273de3b..43df47f4 100644 --- a/assets/javascripts/discourse/mixins/undo-changes.js.es6 +++ b/assets/javascripts/discourse/mixins/undo-changes.js.es6 @@ -117,8 +117,9 @@ export default Mixin.create({ this.setupObservers(type); }, - mappedFieldUpdated(property, type) { - this.get(this.componentType).notifyPropertyChange(property); + mappedFieldUpdated(property, mappedComponent, type) { + const obj = this.get(this.componentType); + obj.notifyPropertyChange(property); } } }) \ No newline at end of file diff --git a/assets/javascripts/discourse/templates/components/wizard-mapper-connector.hbs b/assets/javascripts/discourse/templates/components/wizard-mapper-connector.hbs index 2e30fbfb..f0689f9e 100644 --- a/assets/javascripts/discourse/templates/components/wizard-mapper-connector.hbs +++ b/assets/javascripts/discourse/templates/components/wizard-mapper-connector.hbs @@ -2,7 +2,7 @@ {{combo-box value=connector content=connectors - onChange=(action (mut connector))}} + onChange=(action "changeConnector")}} {{else}} {{#if connector}} diff --git a/assets/javascripts/discourse/templates/components/wizard-mapper-selector.hbs b/assets/javascripts/discourse/templates/components/wizard-mapper-selector.hbs index 7b71756b..8f442dfc 100644 --- a/assets/javascripts/discourse/templates/components/wizard-mapper-selector.hbs +++ b/assets/javascripts/discourse/templates/components/wizard-mapper-selector.hbs @@ -24,14 +24,15 @@ {{input type="text" value=value - placeholder=(i18n placeholderKey)}} + placeholder=(i18n placeholderKey) + change=(action "changeInputValue")}} {{/if}} {{#if showComboBox}} {{combo-box value=value content=comboBoxContent - onChange=(action (mut value)) + onChange=(action "changeValue") options=(hash none=placeholderKey )}} @@ -41,19 +42,21 @@ {{multi-select content=multiSelectContent value=value - onChange=(action (mut value)) + onChange=(action "changeValue") options=multiSelectOptions}} {{/if}} {{#if showList}} - {{value-list + {{wizard-value-list values=value - addKey=placeholderKey}} + addKey=placeholderKey + onChange=(action "changeValue")}} {{/if}} {{#if showTag}} {{tag-chooser tags=value + onChange=(action "changeValue") options=(hash none=placeholderKey filterable=true @@ -65,6 +68,7 @@ includeMessageableGroups='true' placeholderKey=placeholderKey usernames=value - autocomplete="discourse"}} + autocomplete="discourse" + onChangeCallback=(action "changeUserValue")}} {{/if}} \ No newline at end of file