FEATURE: Show a textarea in advanced mode (#12806)

When switching to advanced mode, show a textarea instead of individual
inputs. Every line of the textarea is equivalent with an input.

plugins/poll/assets/javascripts/controllers/poll-ui-builder.js.es6

@@ -24,6 +24,7 @@ export default Controller.extend(ModalFunctionality, {
   pollType: REGULAR_POLL_TYPE,
   pollTitle: "",
   pollOptions: null,
+  pollOptionsText: null,
   pollMin: 1,
   pollMax: 2,
   pollStep: 1,
@@ -39,6 +40,7 @@ export default Controller.extend(ModalFunctionality, {
       pollType: REGULAR_POLL_TYPE,
       pollTitle: null,
       pollOptions: [EmberObject.create({ value: "" })],
+      pollOptionsText: "",
       pollMin: 1,
       pollMax: 2,
       pollStep: 1,
@@ -337,6 +339,17 @@ export default Controller.extend(ModalFunctionality, {
     }));
   },
 
+  @action
+  onOptionsTextChange(e) {
+    let idx = 0;
+    this.set(
+      "pollOptions",
+      e.target.value
+        .split("\n")
+        .map((value) => EmberObject.create({ idx: idx++, value }))
+    );
+  },
+
   @action
   insertPoll() {
     this.toolbarEvent.addText(this.pollOutput);
@@ -346,6 +359,12 @@ export default Controller.extend(ModalFunctionality, {
   @action
   toggleAdvanced() {
     this.toggleProperty("showAdvanced");
+    if (this.showAdvanced) {
+      this.set(
+        "pollOptionsText",
+        this.pollOptions.map((x) => x.value).join("\n")
+      );
+    }
   },
 
   @action

plugins/poll/assets/javascripts/discourse/templates/modal/poll-ui-builder.hbs

@@ -26,23 +26,30 @@
     <div class="poll-options">
       {{#if showAdvanced}}
         <label class="input-group-label">{{i18n "poll.ui_builder.poll_options.label"}}</label>
-      {{/if}}
+        {{textarea value=pollOptionsText input=(action "onOptionsTextChange")}}
 
-      {{#each pollOptions as |option|}}
-        <div class="input-group poll-option-value">
-          {{input value=option.value enter=(action "addOption" option)}}
-          {{#if canRemoveOption}}
-            {{d-button icon="trash-alt" action=(action "removeOption" option)}}
+        {{#if showMinNumOfOptionsValidation}}
+          {{#unless minNumOfOptionsValidation.ok}}
+            {{input-tip validation=minNumOfOptionsValidation}}
+          {{/unless}}
+        {{/if}}
+      {{else}}
+        {{#each pollOptions as |option|}}
+          <div class="input-group poll-option-value">
+            {{input value=option.value enter=(action "addOption" option)}}
+            {{#if canRemoveOption}}
+              {{d-button icon="trash-alt" action=(action "removeOption" option)}}
+            {{/if}}
+          </div>
+        {{/each}}
+
+        <div class="poll-option-controls">
+          {{d-button icon="plus" label="poll.ui_builder.poll_options.add" action=(action "addOption" pollOptions.lastObject)}}
+          {{#if (and showMinNumOfOptionsValidation (not minNumOfOptionsValidation.ok))}}
+            {{input-tip validation=minNumOfOptionsValidation}}
           {{/if}}
         </div>
-      {{/each}}
-
-      <div class="poll-option-controls">
-        {{d-button icon="plus" label="poll.ui_builder.poll_options.add" action=(action "addOption" pollOptions.lastObject)}}
-        {{#if showMinNumOfOptionsValidation}}
-          {{input-tip validation=minNumOfOptionsValidation}}
-        {{/if}}
-      </div>
+      {{/if}}
     </div>
   {{/unless}}
 

plugins/poll/config/locales/client.en.yml

@@ -118,7 +118,7 @@ en:
         poll_title:
           label: Title (optional)
         poll_options:
-          label: Options
+          label: Options (one per line)
           add: Add option
         automatic_close:
           label: Automatically close poll