From b5a6d15c9d01f6033df56fa921ff8c497f8d337b Mon Sep 17 00:00:00 2001
From: Angus McLeod <angus@mcleod.org.au>
Date: Tue, 19 Jan 2021 18:50:37 +1100
Subject: [PATCH] Add wizard field tabindex relative to field order

---
 .../components/wizard-date-input.js.es6       |  3 ++
 .../components/wizard-date-time-input.js.es6  | 14 ++++++++
 .../components/wizard-time-input.js.es6       |  3 ++
 .../initializers/custom-wizard-step.js.es6    | 11 ++++++
 .../javascripts/wizard/models/custom.js.es6   | 17 ++++++++++
 .../components/wizard-composer-editor.hbs     |  2 +-
 .../components/wizard-date-input.hbs          | 10 ++++++
 .../components/wizard-date-time-input.hbs     | 34 +++++++++++++++++++
 .../components/wizard-field-category.hbs      |  3 +-
 .../components/wizard-field-checkbox.hbs      |  2 +-
 .../components/wizard-field-date-time.hbs     |  3 +-
 .../components/wizard-field-date.hbs          |  3 +-
 .../components/wizard-field-dropdown.hbs      |  1 +
 .../components/wizard-field-group.hbs         |  1 +
 .../components/wizard-field-number.hbs        |  2 +-
 .../templates/components/wizard-field-tag.hbs |  2 +-
 .../components/wizard-field-text.hbs          |  1 +
 .../components/wizard-field-textarea.hbs      |  1 +
 .../components/wizard-field-time.hbs          |  3 +-
 .../components/wizard-field-upload.hbs        |  2 +-
 .../templates/components/wizard-field-url.hbs |  2 +-
 .../components/wizard-field-user-selector.hbs |  3 +-
 .../templates/components/wizard-step.hbs      | 10 +++---
 .../components/wizard-time-input.hbs          | 13 +++++++
 extensions/wizard_field.rb                    |  4 ++-
 lib/custom_wizard/builder.rb                  |  9 ++---
 .../custom_wizard/wizard_field_serializer.rb  |  9 +++--
 .../wizard_field_serializer_spec.rb           |  1 +
 28 files changed, 146 insertions(+), 23 deletions(-)
 create mode 100644 assets/javascripts/wizard/components/wizard-date-input.js.es6
 create mode 100644 assets/javascripts/wizard/components/wizard-date-time-input.js.es6
 create mode 100644 assets/javascripts/wizard/components/wizard-time-input.js.es6
 create mode 100644 assets/javascripts/wizard/templates/components/wizard-date-input.hbs
 create mode 100644 assets/javascripts/wizard/templates/components/wizard-date-time-input.hbs
 create mode 100644 assets/javascripts/wizard/templates/components/wizard-field-text.hbs
 create mode 100644 assets/javascripts/wizard/templates/components/wizard-field-textarea.hbs
 create mode 100644 assets/javascripts/wizard/templates/components/wizard-time-input.hbs

diff --git a/assets/javascripts/wizard/components/wizard-date-input.js.es6 b/assets/javascripts/wizard/components/wizard-date-input.js.es6
new file mode 100644
index 00000000..e5d9325f
--- /dev/null
+++ b/assets/javascripts/wizard/components/wizard-date-input.js.es6
@@ -0,0 +1,3 @@
+import DateInput from "discourse/components/date-input";
+
+export default DateInput.extend();
\ No newline at end of file
diff --git a/assets/javascripts/wizard/components/wizard-date-time-input.js.es6 b/assets/javascripts/wizard/components/wizard-date-time-input.js.es6
new file mode 100644
index 00000000..40794cf6
--- /dev/null
+++ b/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;
+  }
+});
\ No newline at end of file
diff --git a/assets/javascripts/wizard/components/wizard-time-input.js.es6 b/assets/javascripts/wizard/components/wizard-time-input.js.es6
new file mode 100644
index 00000000..f8fdc7d3
--- /dev/null
+++ b/assets/javascripts/wizard/components/wizard-time-input.js.es6
@@ -0,0 +1,3 @@
+import TimeInput from "discourse/components/time-input";
+
+export default TimeInput.extend();
\ No newline at end of file
diff --git a/assets/javascripts/wizard/initializers/custom-wizard-step.js.es6 b/assets/javascripts/wizard/initializers/custom-wizard-step.js.es6
index e95798ef..854c4623 100644
--- a/assets/javascripts/wizard/initializers/custom-wizard-step.js.es6
+++ b/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({
@@ -112,6 +113,16 @@ export default {
         if (!src) return;
         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");
diff --git a/assets/javascripts/wizard/models/custom.js.es6 b/assets/javascripts/wizard/models/custom.js.es6
index 1a78b4c4..37bdda33 100644
--- a/assets/javascripts/wizard/models/custom.js.es6
+++ b/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;
       });
     }
diff --git a/assets/javascripts/wizard/templates/components/wizard-composer-editor.hbs b/assets/javascripts/wizard/templates/components/wizard-composer-editor.hbs
index 28c697ce..03d56f85 100644
--- a/assets/javascripts/wizard/templates/components/wizard-composer-editor.hbs
+++ b/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")
diff --git a/assets/javascripts/wizard/templates/components/wizard-date-input.hbs b/assets/javascripts/wizard/templates/components/wizard-date-input.hbs
new file mode 100644
index 00000000..54eeb127
--- /dev/null
+++ b/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>
diff --git a/assets/javascripts/wizard/templates/components/wizard-date-time-input.hbs b/assets/javascripts/wizard/templates/components/wizard-date-time-input.hbs
new file mode 100644
index 00000000..0981f739
--- /dev/null
+++ b/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}}
diff --git a/assets/javascripts/wizard/templates/components/wizard-field-category.hbs b/assets/javascripts/wizard/templates/components/wizard-field-category.hbs
index 1843a277..62d4383c 100644
--- a/assets/javascripts/wizard/templates/components/wizard-field-category.hbs
+++ b/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}}
 
diff --git a/assets/javascripts/wizard/templates/components/wizard-field-checkbox.hbs b/assets/javascripts/wizard/templates/components/wizard-field-checkbox.hbs
index c3bc9b51..d9ec7c91 100644
--- a/assets/javascripts/wizard/templates/components/wizard-field-checkbox.hbs
+++ b/assets/javascripts/wizard/templates/components/wizard-field-checkbox.hbs
@@ -1 +1 @@
-{{input type='checkbox' id=field.id checked=field.value}}
\ No newline at end of file
+{{input type='checkbox' id=field.id checked=field.value tabindex=field.tabindex}}
\ No newline at end of file
diff --git a/assets/javascripts/wizard/templates/components/wizard-field-date-time.hbs b/assets/javascripts/wizard/templates/components/wizard-field-date-time.hbs
index b0381c8e..0b4f7916 100644
--- a/assets/javascripts/wizard/templates/components/wizard-field-date-time.hbs
+++ b/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
 }}
\ No newline at end of file
diff --git a/assets/javascripts/wizard/templates/components/wizard-field-date.hbs b/assets/javascripts/wizard/templates/components/wizard-field-date.hbs
index 3f5c2e01..7b914807 100644
--- a/assets/javascripts/wizard/templates/components/wizard-field-date.hbs
+++ b/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
 }}
\ No newline at end of file
diff --git a/assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs b/assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs
index cde88a50..de4a4d83 100644
--- a/assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs
+++ b/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"
   )}}
\ No newline at end of file
diff --git a/assets/javascripts/wizard/templates/components/wizard-field-group.hbs b/assets/javascripts/wizard/templates/components/wizard-field-group.hbs
index f10aae2e..c208d45f 100644
--- a/assets/javascripts/wizard/templates/components/wizard-field-group.hbs
+++ b/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'
diff --git a/assets/javascripts/wizard/templates/components/wizard-field-number.hbs b/assets/javascripts/wizard/templates/components/wizard-field-number.hbs
index 33fae047..c90cca9d 100644
--- a/assets/javascripts/wizard/templates/components/wizard-field-number.hbs
+++ b/assets/javascripts/wizard/templates/components/wizard-field-number.hbs
@@ -1 +1 @@
-{{input type='number' step='0.01' id=field.id value=field.value}}
\ No newline at end of file
+{{input type='number' step='0.01' id=field.id value=field.value tabindex=field.tabindex}}
\ No newline at end of file
diff --git a/assets/javascripts/wizard/templates/components/wizard-field-tag.hbs b/assets/javascripts/wizard/templates/components/wizard-field-tag.hbs
index 4c163364..5dd81c99 100644
--- a/assets/javascripts/wizard/templates/components/wizard-field-tag.hbs
+++ b/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}}
diff --git a/assets/javascripts/wizard/templates/components/wizard-field-text.hbs b/assets/javascripts/wizard/templates/components/wizard-field-text.hbs
new file mode 100644
index 00000000..73db639c
--- /dev/null
+++ b/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}}
diff --git a/assets/javascripts/wizard/templates/components/wizard-field-textarea.hbs b/assets/javascripts/wizard/templates/components/wizard-field-textarea.hbs
new file mode 100644
index 00000000..6efb7560
--- /dev/null
+++ b/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}}
diff --git a/assets/javascripts/wizard/templates/components/wizard-field-time.hbs b/assets/javascripts/wizard/templates/components/wizard-field-time.hbs
index c657000b..dafa9e59 100644
--- a/assets/javascripts/wizard/templates/components/wizard-field-time.hbs
+++ b/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
 }}
\ No newline at end of file
diff --git a/assets/javascripts/wizard/templates/components/wizard-field-upload.hbs b/assets/javascripts/wizard/templates/components/wizard-field-upload.hbs
index 20349e41..af5aeb79 100644
--- a/assets/javascripts/wizard/templates/components/wizard-field-upload.hbs
+++ b/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}}
diff --git a/assets/javascripts/wizard/templates/components/wizard-field-url.hbs b/assets/javascripts/wizard/templates/components/wizard-field-url.hbs
index 2c3844af..f52b87c3 100644
--- a/assets/javascripts/wizard/templates/components/wizard-field-url.hbs
+++ b/assets/javascripts/wizard/templates/components/wizard-field-url.hbs
@@ -1 +1 @@
-{{input type='text' id=field.id value=field.value}}
\ No newline at end of file
+{{input type='text' id=field.id value=field.value tabindex=field.tabindex}}
\ No newline at end of file
diff --git a/assets/javascripts/wizard/templates/components/wizard-field-user-selector.hbs b/assets/javascripts/wizard/templates/components/wizard-field-user-selector.hbs
index e5a5f785..5f8c1443 100644
--- a/assets/javascripts/wizard/templates/components/wizard-field-user-selector.hbs
+++ b/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}}
diff --git a/assets/javascripts/wizard/templates/components/wizard-step.hbs b/assets/javascripts/wizard/templates/components/wizard-step.hbs
index c8d3fee8..96115745 100644
--- a/assets/javascripts/wizard/templates/components/wizard-step.hbs
+++ b/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}}
diff --git a/assets/javascripts/wizard/templates/components/wizard-time-input.hbs b/assets/javascripts/wizard/templates/components/wizard-time-input.hbs
new file mode 100644
index 00000000..6207851b
--- /dev/null
+++ b/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="--:--"
+  )
+}}
\ No newline at end of file
diff --git a/extensions/wizard_field.rb b/extensions/wizard_field.rb
index 9fd8d6d1..5b532071 100644
--- a/extensions/wizard_field.rb
+++ b/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
diff --git a/lib/custom_wizard/builder.rb b/lib/custom_wizard/builder.rb
index d7d5a517..1259be58 100644
--- a/lib/custom_wizard/builder.rb
+++ b/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']
diff --git a/serializers/custom_wizard/wizard_field_serializer.rb b/serializers/custom_wizard/wizard_field_serializer.rb
index c331dda2..82034bd8 100644
--- a/serializers/custom_wizard/wizard_field_serializer.rb
+++ b/serializers/custom_wizard/wizard_field_serializer.rb
@@ -7,8 +7,9 @@ class CustomWizard::FieldSerializer < ::WizardFieldSerializer
              :format,
              :limit,
              :property,
-             :content
-               
+             :content,
+             :number
+
   def label
     return object.label if object.label.present?
     I18n.t("#{object.key || i18n_key}.label", default: '')
@@ -54,4 +55,8 @@ class CustomWizard::FieldSerializer < ::WizardFieldSerializer
   def include_choices?
     object.choices.present?
   end
+  
+  def number
+    object.number
+  end
 end
\ No newline at end of file
diff --git a/spec/serializers/custom_wizard/wizard_field_serializer_spec.rb b/spec/serializers/custom_wizard/wizard_field_serializer_spec.rb
index 1481a19d..3398a9dc 100644
--- a/spec/serializers/custom_wizard/wizard_field_serializer_spec.rb
+++ b/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
\ No newline at end of file