Respect long question setting in frontend

app/javascript/retrospring/controllers/character_count_warning_controller.ts

@@ -0,0 +1,30 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['input', 'warning'];
+
+  declare readonly inputTarget: HTMLInputElement;
+  declare readonly warningTarget: HTMLElement;
+
+  static values = {
+    warn: Number
+  };
+
+  declare readonly warnValue: number;
+
+  connect(): void {
+    this.inputTarget.addEventListener('input', this.update.bind(this));
+  }
+
+  update(): void {
+    if (this.inputTarget.value.length > this.warnValue) {
+      if (this.warningTarget.classList.contains('d-none')) {
+        this.warningTarget.classList.remove('d-none');
+      }
+    } else {
+      if (!this.warningTarget.classList.contains('d-none')) {
+        this.warningTarget.classList.add('d-none');
+      }
+    }
+  }
+}

app/javascript/retrospring/initializers/stimulus.ts

@@ -2,6 +2,7 @@ import { Application } from "@hotwired/stimulus";
 import AnnouncementController from "retrospring/controllers/announcement_controller";
 import AutofocusController from "retrospring/controllers/autofocus_controller";
 import CharacterCountController from "retrospring/controllers/character_count_controller";
+import CharacterCountWarningController from "retrospring/controllers/character_count_warning_controller";
 
 /**
  * This module sets up Stimulus and our controllers
@@ -15,4 +16,5 @@ export default function (): void {
   window['Stimulus'].register('announcement', AnnouncementController);
   window['Stimulus'].register('autofocus', AutofocusController);
   window['Stimulus'].register('character-count', CharacterCountController);
+  window['Stimulus'].register('character-count-warning', CharacterCountWarningController);
 }

app/models/profile.rb

@@ -26,4 +26,6 @@ class Profile < ApplicationRecord
   def safe_name
     display_name.presence || user.screen_name
   end
+
+  def question_length_limit = allow_long_questions ? nil : Question::SHORT_QUESTION_MAX_LENGTH
 end

app/views/application/_questionbox.html.haml

@@ -22,7 +22,7 @@
         %strong= t(".status.require_user_html", sign_in: link_to(t("voc.login"), new_user_session_path), sign_up: link_to(t("voc.register"), new_user_registration_path))
     - else
       - if user_signed_in? || user.privacy_allow_anonymous_questions?
-        #question-box{ data: { controller: "character-count", "character-count-max-value": 512 }}
+        #question-box{ data: user.profile.allow_long_questions ? {} : { controller: "character-count", "character-count-max-value": user.profile.question_length_limit }}
           %textarea.form-control{ name: "qb-question", placeholder: t(".placeholder"), data: { "character-count-target": "input" } }
           .row{ style: "padding-top: 5px;" }
             .col-6
@@ -36,7 +36,7 @@
                   %input{ name: "qb-anonymous", type: :hidden, value: false }/
             .col-6
               %p.pull-right
-                %span.text-muted.me-1{ data: { "character-count-target": "counter" } } 512
+                %span.text-muted.me-1{ class: user.profile.allow_long_questions ? "d-none" : "", data: { "character-count-target": "counter" } }= Question::SHORT_QUESTION_MAX_LENGTH
                 %input{ name: "qb-to", type: "hidden", value: user.id }/
                 %button.btn.btn-primary{ name: "qb-ask",
                   type: :button,

app/views/modal/_ask.html.haml

@@ -1,14 +1,14 @@
 .modal.fade#modal-ask-followers{ aria: { hidden: true, labelledby: "modal-ask-followers-label" }, role: :dialog, tabindex: -1 }
   .modal-dialog
-    .modal-content{ data: { controller: "character-count", "character-count-max-value": 512 }}
+    .modal-content{ data: { controller: "character-count-warning", "character-count-warning-warn-value": Question::SHORT_QUESTION_MAX_LENGTH }}
       .modal-header
         %h5.modal-title#modal-ask-followers-label= t(".title")
         %button.btn-close{ data: { bs_dismiss: :modal }, type: :button }
           %span.visually-hidden= t("voc.close")
       .modal-body
         .form-group.has-feedback
-          %textarea.form-control{ name: "qb-all-question", placeholder: t(".placeholder"), data: { "character-count-target": "input" } }
-          %p.text-end.text-muted.form-control-feedback{ data: { "character-count-target": "counter" } } 512
+          %textarea.form-control{ name: "qb-all-question", placeholder: t(".placeholder"), data: { "character-count-warning-target": "input" } }
+          .alert.alert-warning.mt-3.d-none{ data: { "character-count-warning-target": "warning" } }= t('.long_question_warning')
       .modal-footer
         %button.btn.btn-default{ type: :button, data: { bs_dismiss: :modal } }= t("voc.cancel")
-        %button.btn.btn-primary{ name: "qb-all-ask", type: :button, data: { "character-count-target": "action", loading_text: t(".loading") } }= t(".action")
+        %button.btn.btn-primary{ name: "qb-all-ask", type: :button, data: { loading_text: t(".loading") } }= t(".action")

config/locales/views.en.yml

@@ -254,6 +254,7 @@ en:
       placeholder: "Type your question here…"
       action: "Ask"
       loading: "Asking…"
+      long_question_warning: "This question will only be sent to those who allow long questions."
     comment_smiles:
       title: "People who smiled this comment"
       none: "No one has smiled this comment yet."