Merge pull request #1702 from codidact/0valt/1389/threads

Comment thread inputs no longer enable the submit button when the default comment's body is not filled in

Author: ArtOfCode-

app/assets/javascripts/character_count.js

@@ -58,7 +58,8 @@ $(() => {
   $(document).on('keyup change paste', '[data-character-count]', (ev) => {
     const $tgt = $(ev.target);
     const $counter = $($tgt.attr('data-character-count'));
-    const $button = $counter.parents('form').find('input[type="submit"],.js-suggested-edit-approve');
+    const $form = $counter.parents('form');
+    const $button = $form.find('input[type="submit"],.js-suggested-edit-approve');
     const $count = $counter.find('.js-character-count__count');
     const $icon = $counter.find('.js-character-count__icon');
 
@@ -76,19 +77,24 @@ $(() => {
     if (gtnMax || ltnMin) {
       setCounterState($counter, 'error');
       setCounterIcon($icon, 'fa-times');
-      setSubmitButtonDisabledState($button, 'disabled');
       setInputValidationState($tgt, 'invalid');
     } else if (gteThreshold) {
       setCounterState($counter, 'warning');
       setCounterIcon($icon, 'fa-exclamation-circle');
-      setSubmitButtonDisabledState($button, 'enabled');
     } else {
       setCounterState($counter, 'default');
       setCounterIcon($icon, 'fa-check');
-      setSubmitButtonDisabledState($button, 'enabled');
       setInputValidationState($tgt, 'valid');
     }
 
+    const submittable = $form[0]?.checkValidity() ?? false;
+
+    if (!submittable || gtnMax || ltnMin) {
+      setSubmitButtonDisabledState($button, 'disabled');
+    } else {
+      setSubmitButtonDisabledState($button, 'enabled');
+    }
+
     $count.text(text);
   });
 

app/controllers/comments_controller.rb

@@ -32,8 +32,15 @@ def create_thread
     pings = check_for_pings @comment_thread, body
 
     success = ActiveRecord::Base.transaction do
-      @comment_thread.save!
-      @comment.save!
+      thread_success = @comment_thread.save
+      comment_success = @comment.save
+      full_success = thread_success && comment_success
+
+      unless full_success
+        raise ActiveRecord::Rollback
+      end
+
+      full_success
     end
 
     if success

app/views/comments/_new_thread_modal.html.erb

@@ -2,6 +2,12 @@
     Start new comment thread dialog.
 %>
 
+<%
+  # TODO: make configurable
+  min_chars = 15
+  max_chars = 1000
+%>
+
 <div class="modal--container new-thread-modal" id="new-thread-modal-<%= post.id %>">
   <div class="modal--header">
     <b>Start a new comment thread</b>
@@ -18,9 +24,15 @@
 
       <%= label_tag :body, 'Your comment', class: 'form-element' %>
       <div class="form-caption">Start the thread with a comment.</div>
-      <%= text_area_tag :body, '', class: 'form-element js-comment-field', required: true,
-                        data: { post: post.id, thread: '-1', character_count: ".js-character-count-#{post.id}" } %>
-      <%= render 'shared/char_count', type: post.id, min: 15, max: 1000 %>
+      <%= text_area_tag :body, '',
+                        class: 'form-element js-comment-field',
+                        minlength: min_chars,
+                        maxlength: max_chars,
+                        required: true,
+                        data: { post: post.id,
+                                thread: '-1',
+                                character_count: ".js-character-count-#{post.id}" } %>
+      <%= render 'shared/char_count', type: post.id, min: min_chars, max: max_chars %>
 
       <%= label_tag :title, 'Comment thread title (optional)', class: 'form-element' %>
       <span class="form-caption">