wip

assets/javascripts/discourse/components/input-type-toggle.js.es6

@@ -12,9 +12,12 @@ export default Ember.Component.extend({
   @discourseComputed('type')
   label(type) {
     let map = {
+      text: I18n.t('admin.wizard.text'),
       wizard: I18n.t('admin.wizard.label'),
       user: I18n.t('users_lowercase.one'),
-      text: I18n.t('admin.wizard.text')
+      category: I18n.t('categories.category'),
+      tag: I18n.t('tagging.tags'),
+      group: I18n.t('groups.title.one')
     };
     return map[type].toLowerCase();
   },

assets/javascripts/discourse/components/wizard-custom-field.js.es6

@@ -1,15 +1,18 @@
 import { default as computed, observes, on } from 'discourse-common/utils/decorators';
+import { equal, not } from "@ember/object/computed";
 import { generateSelectKitContent } from '../lib/custom-wizard';
 
 export default Ember.Component.extend({
   classNames: 'wizard-custom-field',
-  isDropdown: Ember.computed.equal('field.type', 'dropdown'),
-  isUpload: Ember.computed.equal('field.type', 'upload'),
-  isCategory: Ember.computed.equal('field.type', 'category'),
-  disableId: Ember.computed.not('field.isNew'),
+  isDropdown: equal('field.type', 'dropdown'),
+  isUpload: equal('field.type', 'upload'),
+  isCategory: equal('field.type', 'category'),
+  isGroup: equal('field.type', 'group'),
+  isTag: equal('field.type', 'tag'),
+  disableId: not('field.isNew'),
   choicesTypes: generateSelectKitContent(['translation', 'custom']),
-  choicesTranslation: Ember.computed.equal('field.choices_type', 'translation'),
-  choicesCustom: Ember.computed.equal('field.choices_type', 'custom'),
+  choicesTranslation: equal('field.choices_type', 'translation'),
+  choicesCustom: equal('field.choices_type', 'custom'),
   categoryPropertyTypes: generateSelectKitContent(['id', 'slug']),
 
   @computed('field.type')
@@ -24,5 +27,32 @@ export default Ember.Component.extend({
     if (this.get('isUpload') && !this.get('field.file_types')) {
       this.set('field.file_types', '.jpg,.png');
     }
+  },
+  
+  @computed('isCategory', 'isGroup', 'isTag')
+  prefillOptions(isCategory, isGroup, isTag) {
+    let options = {
+      hasOutput: true,
+      enableConnectors: true,
+      allowWizard: true,
+      allowUser: true
+    }
+    
+    if (isCategory) {
+      options.allowUser = 'key,value';
+      options.allowCategory = 'output';
+    }
+    
+    if (isGroup) {
+      options.allowUser = 'key,value';
+      options.allowGroup = 'output';
+    }
+    
+    if (isTag) {
+      options.allowUser = 'key,value';
+      options.allowTag = 'output';
+    }
+    
+    return options;
   }
 });

assets/javascripts/discourse/components/wizard-custom-input-chooser.js.es6

@@ -16,28 +16,34 @@ export default Ember.Component.extend({
     return customPlaceholder || 'admin.wizard.text';
   },
   
-  @discourseComputed('activeType', 'userEnabled')
-  showUser(activeType, userEnabled) {
-    return activeType === 'user' && userEnabled;
-  },
-  
-  @discourseComputed('activeType', 'wizardEnabled')
-  showWizard(activeType, wizardEnabled) {
-    return activeType === 'wizard' && wizardEnabled;
-  },
-  
   showText: equal('activeType', 'text'),
   
-  @discourseComputed('options.allowWizardField', 'inputType')
-  wizardEnabled(allowWizardField, inputType) {
-    return allowWizardField === true || allowWizardField === inputType;
+  showInput(type) {
+    return this.activeType === type && this[`${type}Enabled`];
   },
   
-  @discourseComputed('options.allowUserField', 'inputType')
-  userEnabled(allowUserField, inputType) {
-    return allowUserField === true || allowUserField === inputType;
+  showWizard: computed('activeType', function() { return this.showInput('wizard') }),
+  showUser: computed('activeType', function() { return this.showInput('user') }),
+  showCategory: computed('activeType', function() { return this.showInput('category') }),
+  showTag: computed('activeType', function() { return this.showInput('tag') }),
+  showGroup: computed('activeType', function() { return this.showInput('group') }),
+  
+  optionEnabled(type) {
+    const options = this.options;
+    if (!options) return false;
+    
+    const option = options[type];
+    if (option === true) return true;
+    if (typeof option !== 'string') return false;
+    return option.split(',').indexOf(this.inputType) > -1;
   },
   
+  wizardEnabled: computed('options.allowWizard', function() { return this.optionEnabled('allowWizard') }),
+  userEnabled: computed('options.allowUser', function() { return this.optionEnabled('allowUser') }),
+  categoryEnabled: computed('options.allowCategory', function() { return this.optionEnabled('allowCategory') }),
+  tagEnabled: computed('options.allowTag', function() { return this.optionEnabled('allowTag') }),
+  groupEnabled: computed('options.allowGroup', function() { return this.optionEnabled('allowGroup') }),
+  
   actions: {
     toggleType(type) {
       this.set('activeType', type);

assets/javascripts/discourse/components/wizard-custom-input-pair.js.es6

@@ -1,9 +1,14 @@
 import { connectors } from '../lib/custom-wizard';
-import { gt } from "@ember/object/computed";
+import { gt, or, alias } from "@ember/object/computed";
+import { computed, observes} from "@ember/object"; 
 
 export default Ember.Component.extend({
   classNames: 'pair',
-  connectorNone: 'admin.wizard.connector.none',
   connectors: connectors,
-  showRemove: gt('pair.index', 0)
+  hasConnector: or('options.enableConnectors', 'connectorKey'),
+  firstPair: gt('pair.index', 0),
+  showRemove: alias('firstPair'),
+  showJoin: computed('pair.pairCount', function() {
+    return this.pair.index < (this.pair.pairCount - 1);
+  })
 })

assets/javascripts/discourse/components/wizard-custom-input.js.es6

@@ -1,19 +1,36 @@
 import { newPair } from '../lib/custom-wizard';
+import { computed } from "@ember/object";
 
 export default Ember.Component.extend({
   classNames: 'custom-input',
-  outputConnectorKey: 'admin.wizard.connector.prefill',
-  outputPrefixKey: 'admin.wizard.if',
+  outputConnector: computed(function() {
+    return I18n.t(this.outputConnectorKey || 'admin.wizard.output.connector').toLowerCase();
+  }),
   
   actions: {
     addPair() {
-      this.get('input.pairs').pushObject(
-        newPair(this.options, this.input.pairs.length)
+      const pairs = this.get('input.pairs');
+      
+      const pairCount = pairs.length + 1;
+      pairs.forEach(p => (p.set('pairCount', pairCount)));
+      
+      pairs.pushObject(
+        newPair(Object.assign(
+          {},
+          this.options,
+          { 
+            index: pairs.length,
+            pairCount,
+          }
+        ))
       );
     },
     
     removePair(pair) {
-      this.get('input.pairs').removeObject(pair);
+      const pairs = this.get('input.pairs');
+      const pairCount = pairs.length - 1;
+      pairs.forEach(p => (p.set('pairCount', pairCount)));
+      pairs.removeObject(pair);
     }
   }
 });

assets/javascripts/discourse/lib/custom-wizard.js.es6

@@ -55,7 +55,7 @@ const actionTypes = [
 
 function newInput(options = {}) {
   let params = { 
-    pairs: Ember.A([newPair(options, 0)])
+    pairs: Ember.A([newPair({ index: 0, pairCount: 1 })])
   }
   
   if (options.hasOutput) {
@@ -66,9 +66,11 @@ function newInput(options = {}) {
   return Ember.Object.create(params);
 }
 
-function newPair(options = {}, index) {
+function newPair(options = {}) {
+  console.log('newPair: ', options)
   let params = {
-    index,
+    index: options.index,
+    pairCount: options.pairCount,
     key: '',
     key_type: 'text',
     value: '',

assets/javascripts/discourse/templates/components/wizard-custom-action.hbs

@@ -175,7 +175,7 @@
       userFields=userFields
       wizardFields=wizardFields
       options=(hash
-        allowWizardField=true
+        allowWizard=true
       )}}
   </div>
 {{/if}}
@@ -227,8 +227,8 @@
       userFields=userFields
       wizardFields=wizardFields
       options=(hash
-        allowWizardField=true
-        allowUserField=true
+        allowWizard=true
+        allowUser=true
       )}}
   </div>
 {{/if}}
@@ -281,39 +281,20 @@
 {{#if addToGroup}}
   <div class="setting">
     <div class="setting-label">
-      <h3>{{i18n "admin.wizard.action.add_to_group.group_selection"}}</h3>
+      <h3>{{i18n "admin.wizard.action.add_to_group.group"}}</h3>
     </div>
     <div class="setting-value">
-      {{combo-box
-        value=action.value
-        content=wizardFields
-        isDisabled=action.custom
-        nameProperty="label"
+      {{wizard-custom-inputs
+        inputs=action.selection
+        userFields=userFields
+        wizardFields=wizardFields
+        outputConnectorKey='admin.wizard.action.add_to_group.output_connector'
         options=(hash
-          none='admin.wizard.select_field'
-        )}}
-      
-      <div class="setting-gutter">
-        {{input type='checkbox' checked=action.custom_group_enabled}}
-        <span>{{i18n 'admin.wizard.action.add_to_group.custom_group'}}</span>
-        
-        {{#if action.custom_group_enabled}}
-          {{input value=action.custom}}
-        {{/if}}
-      </div>
-    </div>
-  </div>
-  
-  <div class="setting">
-    <div class="setting-label">
-      <h3>{{i18n "admin.wizard.action.add_to_group.property"}}</h3>
-    </div>
-    <div class="setting-value">
-      {{combo-box
-        value=action.property
-        content=groupPropertyTypes
-        options=(hash
-          none='admin.wizard.select_property'
+          hasOutput=true
+          enableConnectors=true
+          allowWizard='key,value'
+          allowUser='key,value'
+          allowGroup='value,output'
         )}}
     </div>
   </div>

assets/javascripts/discourse/templates/components/wizard-custom-field.hbs

@@ -162,11 +162,7 @@
       inputs=field.prefill
       userFields=userFields
       wizardFields=wizardFields
-      options=(hash
-        hasOutput=true
-        enableConnectors=true
-        allowWizardField=true
-        allowUserField=true
-      )}}
+      outputConnectorKey='admin.wizard.field.prefill'
+      options=prefillOptions}}
   </div>
 </div>

assets/javascripts/discourse/templates/components/wizard-custom-input-chooser.hbs

@@ -17,6 +17,27 @@
       type='user'
       toggle=(action 'toggleType')}}
   {{/if}}
+  
+  {{#if categoryEnabled}}
+    {{input-type-toggle
+      activeType=activeType
+      type='category'
+      toggle=(action 'toggleType')}}
+  {{/if}}
+  
+  {{#if tagEnabled}}
+    {{input-type-toggle
+      activeType=activeType
+      type='tag'
+      toggle=(action 'toggleType')}}
+  {{/if}}
+  
+  {{#if groupEnabled}}
+    {{input-type-toggle
+      activeType=activeType
+      type='group'
+      toggle=(action 'toggleType')}}
+  {{/if}}
 </div>
 
 <div class="input">
@@ -31,6 +52,7 @@
     {{combo-box
       value=value
       content=wizardFields
+      onChange=(action (mut value))
       options=(hash
         none='admin.wizard.wizard_field'
       )}}
@@ -40,8 +62,30 @@
     {{combo-box
       value=value
       content=userFields
+      onChange=(action (mut value))
       options=(hash
         none='admin.wizard.user_field'
       )}}
   {{/if}}
+  
+  {{#if showCategory}}
+    {{category-chooser value=value}}
+  {{/if}}
+  
+  {{#if showTag}}
+    {{tag-chooser
+      tags=value
+      filterable=true
+      allowCreate=true}}
+  {{/if}}
+  
+  {{#if showGroup}}
+    {{combo-box
+      content=site.groups
+      value=value
+      onChange=(action (mut value))
+      options=(hash
+        none='admin.wizard.select_group'
+      )}}
+  {{/if}}
 </div>

assets/javascripts/discourse/templates/components/wizard-custom-input-pair.hbs

@@ -9,22 +9,21 @@
     options=options}}
 </div>
 
-<div class="connector">
-  {{#if options.enableConnectors}}
-    {{combo-box
-      value=pair.connector
-      content=connectors
-      options=(hash
-        none=connectorNone
-      )}}
-  {{/if}}
-  
-  {{#if connectorKey}}
-    <span class="key-connector">
-      {{i18n connectorKey}}
-    </span>
-  {{/if}}
-</div>
+{{#if hasConnector}}
+  <div class="connector">
+    {{#if options.enableConnectors}}
+      {{combo-box
+        value=pair.connector
+        content=connectors}}
+    {{/if}}
+    
+    {{#if connectorKey}}
+      <span class="key-connector">
+        {{i18n connectorKey}}
+      </span>
+    {{/if}}
+  </div>
+{{/if}}
 
 <div class="value input-block">
   {{wizard-custom-input-chooser
@@ -37,6 +36,10 @@
     options=options}}
 </div>
 
+{{#if showJoin}}
+  <div class="join-pair">&</div>
+{{/if}}
+
 {{#if showRemove}}
   <a {{action removePair pair}} class="remove-pair">{{d-icon 'minus'}}</a>
 {{/if}}

assets/javascripts/discourse/templates/components/wizard-custom-input.hbs

@@ -1,34 +1,36 @@
 {{#if options.hasOutput}}  
-  {{#if outputPrefixKey}}
-    <div class="prefix">
-      <span>{{i18n outputPrefixKey}}</span>
-    </div>
-  {{/if}}
+  <div class="prefix">
+    {{combo-box
+      value=input.type
+      contents=inputTypes
+      onChange=(mut (input.prefix))}}
+  </div>
 {{/if}}
 
-<div class="pairs">
-  {{#each input.pairs as |pair|}}
-    {{wizard-custom-input-pair
-      pair=pair
-      keyPlaceholder=keyPlaceholder
-      valuePlaceholder=valuePlaceholder
-      userFields=userFields
-      wizardFields=wizardFields
-      options=options
-      removePair=(action 'removePair')}}
-  {{/each}}
-  {{#if options.hasOutput}}
-    <a {{action 'addPair'}} class="add-pair">{{d-icon 'plus'}}</a>
-  {{/if}}
-</div>
+{{#if hasPairs}}
+  <div class="pairs">
+    {{#each input.pairs as |pair|}}
+      {{wizard-custom-input-pair
+        pair=pair
+        last=pair.last
+        keyPlaceholder=keyPlaceholder
+        valuePlaceholder=valuePlaceholder
+        userFields=userFields
+        wizardFields=wizardFields
+        options=options
+        removePair=(action 'removePair')}}
+    {{/each}}
+    {{#if options.hasOutput}}
+      <a {{action 'addPair'}} class="add-pair">{{d-icon 'plus'}}</a>
+    {{/if}}
+  </div>
+{{/if }}
 
 {{#if options.hasOutput}}
   <div class="connector">
-    {{#if outputConnectorKey}}
-      <span class="output-connector">
-        {{i18n outputConnectorKey}}
-      </span>
-    {{/if}}
+    <span class="output-connector">
+      {{outputConnector}}
+    </span>
   </div>
 
   <div class="output input-block">

assets/javascripts/discourse/templates/components/wizard-custom-inputs.hbs

@@ -5,8 +5,8 @@
     wizardFields=wizardFields
     keyPlaceholder=keyPlaceholder
     valuePlaceholder=valuePlaceholder
-    connectorContent=connectorContent
     connectorKey=connectorKey
+    outputConnectorKey=outputConnectorKey
     options=options
     remove=(action 'remove')}}
 {{/each}}

assets/javascripts/discourse/templates/components/wizard-custom-step.hbs

@@ -57,8 +57,8 @@
       keyPlaceholder="admin.wizard.submission_key"
       options=(hash
         enableConnectors=true
-        allowWizardField='value'
-        allowUserField='value'
+        allowWizard='value'
+        allowUser='value'
       )}}
     {{#if step.required_data}}
       <div class="required-data-message">

assets/stylesheets/wizard_custom_admin.scss

@@ -194,12 +194,16 @@
   
   .type-selector a {
     color: $primary;
-    margin-right: 10px;
+    margin-right: 4px;
     
     &.active {
       color: $tertiary;
       text-decoration: underline;
     }
+    
+    &:last-of-type {
+      margin-right: 0;
+    }
   }
   
   .pairs {
@@ -217,13 +221,20 @@
       top: 25px;
       right: -30px;
     }
+    
+    .join-pair {
+      position: absolute;
+      bottom: -25px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
   }
   
   .pair {
     display: flex;
     align-items: flex-end;
     position: relative;
-    margin-bottom: 5px;
+    margin-bottom: 10px;
   }
 
   .d-icon {
@@ -240,8 +251,8 @@
   }
   
   .input-block, .select-kit, input {
-    width: 150px;
-    min-width: 150px;
+    width: 160px;
+    min-width: 160px;
   }
 
   button.remove-input {
@@ -263,6 +274,7 @@
     .output-connector {
       margin-top: 25px;
       display: inline-block;
+      white-space: nowrap;
     }
   }
   

config/locales/client.en.yml

@@ -46,10 +46,7 @@ en:
         add: "Add"
         url: "Url"
         key: "Key"
-        or: "Or"
-        if: "if"
         value: "Value"
-        output: "Output"
         property: "Property"
         text: "text"
         profile: "profile"
@@ -63,13 +60,16 @@ en:
         wizard_field: "Wizard Field"
         select_field: "Select Field"
         select_property: "Select Property"
+        select_group: "Select Group"
         profile_field: "Profile Field"
         submission_key: 'submission key'
         param_key: 'param'
-        connector:
-          none: "op"
-          prefill: "prefill"
         
+        output:
+          label: "Output"
+          prefix: 'if'
+          connector: 'then'
+  
         error:
           name_required: "Wizards must have a name."
           steps_required: "Wizards must have at least one step."
@@ -153,9 +153,7 @@ en:
           add_to_group:
             label: "Add to Group"
             group: "Group"
-            group_selection: "Field"
-            custom_group: "Custom"
-            property: "Property"
+            output_connector: "add to"
           route_to:
             label: "Route To"
             url: "Url"