wip

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

@@ -46,6 +46,7 @@ export default Ember.Component.extend({
     return options;
   },
   
+  prefillEnabled: or('isCategory', 'isTag', 'isGroup'),
   contentEnabled: or('isCategory', 'isTag', 'isGroup'),
   
   @computed('field.type')

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

@@ -53,7 +53,6 @@ export default Ember.Component.extend({
     if (!options) return false;
     
     const option = options[type];
-    
     if (option === true) return true;
     if (typeof option !== 'string') return false;
     

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

@@ -75,6 +75,10 @@ function defaultInputType(options = {}) {
 }
 
 function defaultSelectionType(inputType, options = {}) {
+  if (options[`${inputType}DefaultType`]) {
+    return options[`${inputType}DefaultType`];
+  }
+  
   const textDisabled = options.textDisabled;
   let type = 'text';
   
@@ -99,7 +103,17 @@ function defaultSelectionType(inputType, options = {}) {
 function newInput(options = {}) {
   let params = {
     type: defaultInputType(options),
-    pairs: Ember.A([newPair({ index: 0, pairCount: 1 })])
+    pairs: Ember.A(
+      [
+        newPair(
+          Object.assign(
+            {},
+            options,
+            { index: 0, pairCount: 1 }
+          )
+        )
+      ]
+    )
   }
   
   if (options.hasOutput) {
@@ -114,9 +128,9 @@ function newPair(options = {}) {
     index: options.index,
     pairCount: options.pairCount,
     key: '',
-    key_type: defaultSelectionType('text', options),
+    key_type: defaultSelectionType('key', options),
     value: '',
-    value_type: defaultSelectionType('text', options),
+    value_type: defaultSelectionType('value', options),
     connector: 'eq'
   }
   

assets/javascripts/discourse/templates/admin-wizard.hbs

@@ -1,14 +1,14 @@
 <div class="admin-wizard settings">
   
-  {{#if hasName}}
+  <div class="wizard-header large">
-    <div class="wizard-header">
+    <span>{{model.name}}</span>
-      <span>{{model.name}}</span>
+    
-      
+    {{#if model.name}}
       <div class="wizard-url">
         <a href="{{wizardUrl}}" target="_blank">{{wizardUrl}}</a>
       </div>
-    </div>
+    {{/if}}
-  {{/if}}
+  </div>
   
   <div class="wizard-basic-details">
     <div class="setting">
@@ -34,6 +34,22 @@
           placeholderKey="admin.wizard.background_placeholder"}}
       </div>
     </div>
+    
+    <div class="setting">
+      <div class="setting-label">
+        <label>{{i18n 'admin.wizard.theme_id'}}</label>
+      </div>
+      <div class="setting-value">
+        {{combo-box
+          content=model.themes
+          valueProperty='id'
+          value=model.theme_id
+          onChange=(action (mut model.theme_id))
+          options=(hash
+            none='admin.wizard.no_theme'
+          )}}
+      </div>
+    </div>
   </div>
   
   <div class="wizard-header medium">
@@ -80,19 +96,14 @@
         <span>{{i18n 'admin.wizard.after_signup_label'}}</span>
       </div>
     </div>
-
+    
     <div class="setting">
       <div class="setting-label">
-        <label>{{i18n 'admin.wizard.after_time'}}</label>
+        <label>{{i18n 'admin.wizard.restart_on_revisit'}}</label>
       </div>
       <div class="setting-value">
-        {{input type='checkbox' checked=model.after_time}}
+        {{input type='checkbox' checked=model.restart_on_revisit}}
-        <span>{{i18n 'admin.wizard.after_time_label'}}</span>
+        <span>{{i18n 'admin.wizard.restart_on_revisit_label'}}</span>
-        {{d-button
-          action='setNextSessionScheduled'
-          translatedLabel=nextSessionScheduledLabel
-          class="btn-after-time"
-          icon='far-calendar'}}
       </div>
     </div>
 
@@ -105,30 +116,19 @@
         <span>{{i18n 'admin.wizard.prompt_completion_label'}}</span>
       </div>
     </div>
-
+    
-    <div class="setting">
+    <div class="setting full-inline">
       <div class="setting-label">
-        <label>{{i18n 'admin.wizard.theme_id'}}</label>
+        <label>{{i18n 'admin.wizard.after_time'}}</label>
       </div>
       <div class="setting-value">
-        {{combo-box
+        {{input type='checkbox' checked=model.after_time}}
-          content=model.themes
+        <span>{{i18n 'admin.wizard.after_time_label'}}</span>
-          valueProperty='id'
+        {{d-button
-          value=model.theme_id
+          action='setNextSessionScheduled'
-          onChange=(action (mut model.theme_id))
+          translatedLabel=nextSessionScheduledLabel
-          options=(hash
+          class="btn-after-time"
-            none='admin.wizard.no_theme'
+          icon='far-calendar'}}
-          )}}
-      </div>
-    </div>
-
-    <div class="setting">
-      <div class="setting-label">
-        <label>{{i18n 'admin.wizard.restart_on_revisit'}}</label>
-      </div>
-      <div class="setting-value">
-        {{input type='checkbox' checked=model.restart_on_revisit}}
-        <span>{{i18n 'admin.wizard.restart_on_revisit_label'}}</span>
       </div>
     </div>
     

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

@@ -127,15 +127,17 @@
 {{#if basicTopicFields}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
-      <label>{{i18n 'admin.wizard.action.add_fields.label'}}</label>
+      <label>{{i18n 'admin.wizard.action.custom_fields.label'}}</label>
     </div>
     
     {{wizard-field-mapper
-      inputs=action.add_fields
+      inputs=action.custom_fields
       wizardFields=wizardFields
-      connectorKey='admin.wizard.action.add_fields.connector'
+      connectorKey='admin.wizard.action.custom_fields.connector'
+      keyPlaceholder='admin.wizard.action.custom_fields.key'
       options=(hash
-        wizardFieldSelection=true
+        wizardFieldSelection='value'
+        userFieldSelection='value'
       )}}
   </div>
 {{/if}}
@@ -151,6 +153,7 @@
         inputs=action.required
         wizardFields=wizardFields
         options=(hash
+          textDisabled='key'
           enableConnectors=true
           wizardFieldSelection=true
           userFieldSelection=true
@@ -169,6 +172,7 @@
         inputs=action.recipient
         wizardFields=wizardFields
         options=(hash
+          textDisabled='key'
           hasOutput=true
           wizardFieldSelection=true
           userFieldSelection=true
@@ -181,16 +185,18 @@
 {{#if updateProfile}}
   <div class="setting full field-mapper-setting">
     <div class="setting-label">
-      <label>{{i18n 'admin.wizard.action.add_fields.label'}}</label>
+      <label>{{i18n 'admin.wizard.action.update_profile.label'}}</label>
     </div>
     
     {{wizard-field-mapper 
       inputs=action.profile_updates
       wizardFields=wizardFields
-      connectorKey='admin.wizard.action.add_fields.connector'
+      connectorKey='admin.wizard.action.update_profile.connector'
+      keyPlaceholder='admin.wizard.action.update_profile.key'
       options=(hash
-        wizardFieldSelection=true
+        keyDefaultType='user'
-        userFieldSelection=true
+        userFieldSelection='key'
+        wizardFieldSelection='value'
       )}}
   </div>
 {{/if}}
@@ -254,12 +260,13 @@
     
     <div class="setting-value">
       {{wizard-field-mapper
-        inputs=action.inputs
+        inputs=action.group
         wizardFields=wizardFields
         outputConnectorKey='admin.wizard.action.add_to_group.output_connector'
         options=(hash
           hasOutput=true
           enableConnectors=true
+          textDisabled='key'
           wizardFieldSelection='key,value,assignment'
           userFieldSelection='key,value,assignment'
           groupSelection='value,output'

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

@@ -157,18 +157,20 @@
   </div>
 {{/if}}
 
-<div class="setting full field-mapper-setting">
+{{#if prefillEnabled}}
-  <div class="setting-label">
+  <div class="setting full field-mapper-setting">
-    <label>{{i18n 'admin.wizard.field.prefill'}}</label>
+    <div class="setting-label">
+      <label>{{i18n 'admin.wizard.field.prefill'}}</label>
+    </div>
+    
+    <div class="setting-value">
+      {{wizard-field-mapper
+        inputs=field.prefill
+        wizardFields=wizardFields
+        options=prefillOptions}}
+    </div>
   </div>
-  
+{{/if}}
-  <div class="setting-value">
-    {{wizard-field-mapper
-      inputs=field.prefill
-      wizardFields=wizardFields
-      options=prefillOptions}}
-  </div>
-</div>
 
 {{#if contentEnabled}}
   <div class="setting full field-mapper-setting">

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

@@ -11,7 +11,7 @@
 {{/each}}
 
 {{#if canAdd}}
-  <div class="add-custom-input">
+  <span class="add-custom-input">
     {{d-button action='add' label='admin.wizard.add' icon='plus'}}
-  </div>
+  </span>
 {{/if}}

assets/stylesheets/wizard_custom_admin.scss

@@ -7,7 +7,7 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
 }
 
 .wizard-settings-parent {
-  margin-bottom: 20px;
+  margin-bottom: 30px;
   padding: 30px;
   background-color: $setting-background;
 }
@@ -32,13 +32,22 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
   @extend .wizard-settings-group;
 }
 
+.wizard-basic-details {
+  margin-bottom: 30px;
+}
+
 .new-wizard {
   margin-top: 15px;
 }
 
 .wizard-header {
-  font-size: 1.5em;
   margin-bottom: 20px;
+  
+  &.large {
+    font-size: 1.5em;
+    min-height: 31px;
+    margin-bottom: 30px;
+  }
 
   &.medium {
     font-size: 1.3em;
@@ -69,14 +78,24 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
   margin-top: 10px;
   margin-left: 30px;
 
-  .setting {
+  [class~='setting'] {
     display: inline-flex;
-    vertical-align: top;
+    align-items: flex-start;
     width: 48%;
-    padding-bottom: 30px;
+    margin-bottom: 30px;
+    padding-bottom: 0;
+    
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+    
+    &.field-mapper-setting {
+      margin-top: 5px;
+    }
 
     .setting-label {
       width: 80px;
+      min-width: 80px;
     }
 
     .setting-value {
@@ -139,7 +158,7 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
       }
     }
 
-    &.full {
+    &.full, &.full-inline {
       width: 100%;
 
       .setting-value {
@@ -147,7 +166,6 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
         float: none;
         
         &.editor {
-          
           .d-editor {
             margin-bottom: 5px;
           }
@@ -159,11 +177,19 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
       }
     }
     
-    &.field-mapper-setting {
+    &.full-inline {
-      padding-bottom: 20px;
+      .setting-value {
-      
+        display: flex;
-      .setting-label {
+        align-items: center;
-        margin-top: 18px;
+        
+        input[type='checkbox'],
+        span {
+          margin: 0 10px 0 0;
+        }
+        
+        button {
+          margin: 0 0 0 20px;
+        }
       }
     }
 
@@ -200,16 +226,6 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
 
 .field-mapper {
   width: 100%;
-  display: inline-block;
-  
-  > .custom-input, > .add-custom-input {
-    float: left;
-    clear: left;
-  }
-  
-  .add-custom-input:first-child {
-    margin-top: 15px;
-  }
   
   .multi-select {
     .multi-select-header, input {
@@ -285,7 +301,7 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
 }
 
 .wizard-links {
-  margin: 20px 0;
+  margin-bottom: 20px;
   display: inline-block;
   width: 100%;
 
@@ -328,11 +344,25 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
   }
 }
 
-.custom-input {
+[class~='custom-input'] {
   display: inline-flex;
   align-items: flex-start;
-  margin-bottom: 10px;
   position: relative;
+  padding-bottom: 30px;    
+    
+  &:last-of-type {
+    padding-bottom: 10px;
+  }
+  
+  .input-selector {
+    width: 100%;
+  }
+  
+  .type-selector {
+    position: absolute;
+    top: -22px;
+    width: 100%;
+  }
   
   .type-selector a {
     color: $primary;
@@ -407,12 +437,11 @@ $setting-background: dark-light-diff($primary, $secondary, 96%, -65%);
   a.remove-input {
     position: absolute;
     right: -25px;
-    top: 25px;
+    top: 5px;
   }
 
   .connector {
     margin: 0 10px;
-    margin-top: 21px;
     
     &.prefix {
       margin-left: 0;

config/locales/client.en.yml

@@ -18,11 +18,11 @@ en:
         save_submissions: "Save"
         save_submissions_label: "Save wizard submissions."
         multiple_submissions: "Multiple"
-        multiple_submissions_label: "Allow multiple submissions by the same user."
+        multiple_submissions_label: "Users can submit multiple times."
         after_signup: "Signup"
-        after_signup_label: "Users are directed to wizard after creating an account."
+        after_signup_label: "Users directed to wizard after signup."
         after_time: "Time"
-        after_time_label: "Users are directed to wizard after the start time."
+        after_time_label: "Users directed to wizard after start time."
         after_time_time_label: "Start Time"
         after_time_modal:
           title: "Wizard Start Time"
@@ -35,7 +35,7 @@ en:
         prompt_completion: "Prompt"
         prompt_completion_label: "Prompt user to complete wizard."
         restart_on_revisit: "Restart"
-        restart_on_revisit_label: "Restart the the wizard whenever the user revisits, regardless of prior progress."
+        restart_on_revisit_label: "Clear submissions on each visit."
         theme_id: "Theme"
         no_theme: "Select a Theme (optional)"
         save: "Save Changes"
@@ -134,8 +134,9 @@ en:
           topic_attr: "Topic Attribute"
           interpolate_fields: "Insert wizard fields using the field_id in w{}. Insert user fields using field key in u{}."
           
-          add_fields:
+          custom_fields:
-            label: "Fields"
+            label: "Custom Fields"
+            key: "field"
             connector: "set"
           skip_redirect:
             label: "Redirect"
@@ -149,6 +150,8 @@ en:
             tags: "Tags"
           update_profile:
             label: "Update Profile"
+            key: "field"
+            connector: "set"
           post_builder:
             checkbox: "Post Builder"
             label: "Builder"