Add wizard field tabindex relative to field order

assets/javascripts/wizard/components/wizard-date-input.js.es6

@@ -0,0 +1,3 @@
+import DateInput from "discourse/components/date-input";
+
+export default DateInput.extend();

assets/javascripts/wizard/components/wizard-date-time-input.js.es6

@@ -0,0 +1,14 @@
+import DateTimeInput from "discourse/components/date-time-input";
+import discourseComputed from 'discourse-common/utils/decorators';
+
+export default DateTimeInput.extend({
+  @discourseComputed('timeFirst', 'tabindex')
+  timeTabindex(timeFirst, tabindex) {
+    return timeFirst ? tabindex : tabindex + 1;
+  },
+  
+  @discourseComputed('timeFirst', 'tabindex')
+  dateTabindex(timeFirst, tabindex) {
+    return timeFirst ? tabindex + 1 : tabindex;
+  }
+});

assets/javascripts/wizard/components/wizard-time-input.js.es6

@@ -0,0 +1,3 @@
+import TimeInput from "discourse/components/time-input";
+
+export default TimeInput.extend();

assets/javascripts/wizard/initializers/custom-wizard-step.js.es6

@@ -8,6 +8,7 @@ export default {
     const StepComponent = requirejs("wizard/components/wizard-step").default;
     const ajax = requirejs("wizard/lib/ajax").ajax;
     const getUrl = requirejs("discourse-common/lib/get-url").default;
+    const discourseComputed = requirejs("discourse-common/utils/decorators").default;
     const cook = requirejs("discourse/plugins/discourse-custom-wizard/wizard/lib/text-lite").cook;
     
     StepModel.reopen({
@@ -113,6 +114,16 @@ export default {
         return getUrl(src);
       }.property("step.banner"),
       
+      @discourseComputed('step.fields.[]')
+      primaryButtonIndex(fields) {
+        return fields.length + 1;
+      },
+      
+      @discourseComputed('step.fields.[]')
+      secondaryButtonIndex(fields) {
+        return fields.length + 2;
+      },
+
       handleMessage: function () {
         const message = this.get("step.message");
         this.sendAction("showMessage", message);

assets/javascripts/wizard/models/custom.js.es6

@@ -56,7 +56,24 @@ export function findCustomWizard(wizardId, params = {}) {
     if (!wizard.completed) {
       wizard.steps = wizard.steps.map(step => {
         const stepObj = Step.create(step);
+        
+        stepObj.fields.sort((a, b) => {
+          return parseFloat(a.number) - parseFloat(b.number);
+        });
+        
+        let tabindex = 1;
+        stepObj.fields.forEach((f, i) => {
+          f.tabindex = tabindex;
+          
+          if (['date_time'].includes(f.type)) {
+            tabindex = tabindex + 2;
+          } else {
+            tabindex++;
+          }
+        });
+        
         stepObj.fields = stepObj.fields.map(f => WizardField.create(f));
+        
         return stepObj;
       });
     }

assets/javascripts/wizard/templates/components/wizard-composer-editor.hbs

@@ -1,5 +1,5 @@
 {{d-editor
-  tabindex="4"
+  tabindex=field.tabindex
   value=composer.reply
   placeholder=replyPlaceholder
   previewUpdated=(action "previewUpdated")

assets/javascripts/wizard/templates/components/wizard-date-input.hbs

@@ -0,0 +1,10 @@
+{{input
+  type=inputType
+  class="date-picker"
+  placeholder=placeholder
+  value=(readonly value)
+  input=(action "onChangeDate")
+  tabindex=tabindex
+}}
+
+<div class="picker-container"></div>

assets/javascripts/wizard/templates/components/wizard-date-time-input.hbs

@@ -0,0 +1,34 @@
+{{#unless timeFirst}}
+  {{wizard-date-input
+    date=date
+    relativeDate=relativeDate
+    onChange=(action "onChangeDate")
+    tabindex=dateTabindex
+  }}
+{{/unless}}
+
+{{#if showTime}}
+  {{wizard-time-input
+    date=date
+    relativeDate=relativeDate
+    onChange=(action "onChangeTime")
+    tabindex=timeTabindex
+  }}
+{{/if}}
+
+{{#if timeFirst}}
+  {{wizard-date-input
+    date=date
+    relativeDate=relativeDate
+    onChange=(action "onChangeDate")
+    tabindex=dateTabindex
+  }}
+{{/if}}
+
+{{#if clearable}}
+  {{d-button
+    class="clear-date-time"
+    icon="times"
+    action=(action "onClear")
+  }}
+{{/if}}

assets/javascripts/wizard/templates/components/wizard-field-category.hbs

@@ -2,5 +2,6 @@
   categories=categories
   whitelist=field.content
   maximum=field.limit
-  onChange=(action (mut categories))}}
+  onChange=(action (mut categories))
+  tabindex=field.tabindex}}
 

assets/javascripts/wizard/templates/components/wizard-field-checkbox.hbs

@@ -1 +1 @@
-{{input type='checkbox' id=field.id checked=field.value}}
+{{input type='checkbox' id=field.id checked=field.value tabindex=field.tabindex}}

assets/javascripts/wizard/templates/components/wizard-field-date-time.hbs

@@ -1,4 +1,5 @@
-{{date-time-input
+{{wizard-date-time-input
   date=dateTime
   onChange=(action "onChange")
+  tabindex=field.tabindex
 }}

assets/javascripts/wizard/templates/components/wizard-field-date.hbs

@@ -1,4 +1,5 @@
-{{date-input
+{{wizard-date-input
   date=date
   onChange=(action "onChange")
+  tabindex=field.tabindex
 }}

assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs

@@ -2,6 +2,7 @@
   class=fieldClass
   value=field.value
   content=field.content
+  tabindex=field.tabindex
   options=(hash
     none="select_kit.default_header_text"
   )}}

assets/javascripts/wizard/templates/components/wizard-field-group.hbs

@@ -3,6 +3,7 @@
   field=field
   whitelist=field.content
   value=field.value
+  tabindex=field.tabindex
   onChange=(action (mut field.value))
   options=(hash
     none='group.select'

assets/javascripts/wizard/templates/components/wizard-field-number.hbs

@@ -1 +1 @@
-{{input type='number' step='0.01' id=field.id value=field.value}}
+{{input type='number' step='0.01' id=field.id value=field.value tabindex=field.tabindex}}

assets/javascripts/wizard/templates/components/wizard-field-tag.hbs

@@ -1 +1 @@
-{{tag-chooser tags=field.value maximum=field.limit}}
+{{tag-chooser tags=field.value maximum=field.limit tabindex=field.tabindex}}

assets/javascripts/wizard/templates/components/wizard-field-text.hbs

@@ -0,0 +1 @@
+{{input id=field.id value=field.value class=fieldClass placeholder=field.placeholder tabindex=field.tabindex}}

assets/javascripts/wizard/templates/components/wizard-field-textarea.hbs

@@ -0,0 +1 @@
+{{textarea id=field.id value=field.value class=fieldClass placeholder=field.placeholder tabindex=field.tabindex}}

assets/javascripts/wizard/templates/components/wizard-field-time.hbs

@@ -1,4 +1,5 @@
-{{time-input
+{{wizard-time-input
   date=time
   onChange=(action "onChange")
+  tabindex=field.tabindex
 }}

assets/javascripts/wizard/templates/components/wizard-field-upload.hbs

@@ -1,4 +1,4 @@
-<label class="wizard-btn wizard-btn-upload-file {{if uploading 'disabled'}}">
+<label class="wizard-btn wizard-btn-upload-file {{if uploading 'disabled'}}" tabindex="{{field.tabindex}}">
   {{#if uploading}}
     {{wizard-i18n "wizard.uploading"}}
   {{else}}

assets/javascripts/wizard/templates/components/wizard-field-url.hbs

@@ -1 +1 @@
-{{input type='text' id=field.id value=field.value}}
+{{input type='text' id=field.id value=field.value tabindex=field.tabindex}}

assets/javascripts/wizard/templates/components/wizard-field-user-selector.hbs

@@ -1,3 +1,4 @@
 {{custom-user-selector
   usernames=field.value
-  placeholderKey=field.placeholder}}
+  placeholderKey=field.placeholder
+  tabindex=field.tabindex}}

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

@@ -14,7 +14,7 @@
   {{/if}}
 
   {{#wizard-step-form step=step}}
-    {{#each step.fields as |field|}}
+    {{#each step.fields as |field index|}}
       {{wizard-field field=field step=step wizard=wizard}}
     {{/each}}
   {{/wizard-step-form}}
@@ -34,22 +34,22 @@
       {{loading-spinner size='small'}}
     {{else}}
       {{#if showQuitButton}}
-        <a href {{action "quit"}} class='action-link quit' tabindex="11">{{wizard-i18n "wizard.quit"}}</a>
+        <a href {{action "quit"}} class='action-link quit' tabindex="{{secondaryButtonIndex}}">{{wizard-i18n "wizard.quit"}}</a>
       {{/if}}
       {{#if showBackButton}}
-        <a href {{action "backStep"}} class='action-link back' tabindex="11">{{wizard-i18n "wizard.back"}}</a>
+        <a href {{action "backStep"}} class='action-link back' tabindex="{{secondaryButtonIndex}}">{{wizard-i18n "wizard.back"}}</a>
       {{/if}}
     {{/if}}
 
     {{#if showNextButton}}
-      <button class='wizard-btn next primary' {{action "nextStep"}} disabled={{saving}} tabindex="10">
+      <button class='wizard-btn next primary' {{action "nextStep"}} disabled={{saving}} tabindex="{{primaryButtonIndex}}">
         {{wizard-i18n "wizard.next"}}
         {{d-icon "chevron-right"}}
       </button>
     {{/if}}
 
     {{#if showDoneButton}}
-      <button class='wizard-btn done' {{action "done"}} disabled={{saving}} tabindex="10">
+      <button class='wizard-btn done' {{action "done"}} disabled={{saving}} tabindex="{{primaryButtonIndex}}">
         {{wizard-i18n "wizard.done"}}
       </button>
     {{/if}}

assets/javascripts/wizard/templates/components/wizard-time-input.hbs

@@ -0,0 +1,13 @@
+{{combo-box
+  value=time
+  content=timeOptions
+  tabindex=tabindex
+  onChange=(action "onChangeTime")
+  options=(hash
+    translatedNone="--:--"
+    allowAny=true
+    filterable=false
+    autoInsertNoneItem=false
+    translatedFilterPlaceholder="--:--"
+  )
+}}

extensions/wizard_field.rb

@@ -10,7 +10,8 @@ module CustomWizardFieldExtension
               :format,
               :limit,
               :property,
-              :content
+              :content,
+              :number
               
   def initialize(attrs)
     super
@@ -25,6 +26,7 @@ module CustomWizardFieldExtension
     @limit = attrs[:limit]
     @property = attrs[:property]
     @content = attrs[:content]
+    @number = attrs[:number]
   end
 
   def label

lib/custom_wizard/builder.rb

@@ -69,8 +69,8 @@ class CustomWizard::Builder
         end
 
         if step_template['fields'] && step_template['fields'].length
-          step_template['fields'].each do |field_template|
-            append_field(step, step_template, field_template, build_opts)
+          step_template['fields'].each_with_index do |field_template, index|
+            append_field(step, step_template, field_template, build_opts, index)
           end
         end
 
@@ -146,11 +146,12 @@ class CustomWizard::Builder
     @wizard
   end
 
-  def append_field(step, step_template, field_template, build_opts)
+  def append_field(step, step_template, field_template, build_opts, index)
     params = {
       id: field_template['id'],
       type: field_template['type'],
-      required: field_template['required']
+      required: field_template['required'],
+      number: index + 1
     }
     
     params[:label] = field_template['label'] if field_template['label']

serializers/custom_wizard/wizard_field_serializer.rb

@@ -7,7 +7,8 @@ class CustomWizard::FieldSerializer < ::WizardFieldSerializer
              :format,
              :limit,
              :property,
-             :content
+             :content,
+             :number
 
   def label
     return object.label if object.label.present?
@@ -54,4 +55,8 @@ class CustomWizard::FieldSerializer < ::WizardFieldSerializer
   def include_choices?
     object.choices.present?
   end
+  
+  def number
+    object.number
+  end
 end

spec/serializers/custom_wizard/wizard_field_serializer_spec.rb

@@ -33,5 +33,6 @@ describe CustomWizard::FieldSerializer do
     ).as_json
     expect(json_array[0][:format]).to eq("YYYY-MM-DD")
     expect(json_array[5][:file_types]).to eq(".jpg,.png")
+    expect(json_array[4][:number]).to eq("5")
   end
 end