decidim-comments 0.29.1 → 0.30.0.rc1

data/app/cells/decidim/comments/two_columns_comments_cell.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Comments
+    # A cell to render comments in two columns layout.
+    class TwoColumnsCommentsCell < Decidim::Comments::CommentsCell
+      def call
+        initialize_comments
+        @interleaved_comments = interleave_comments(@sorted_comments_in_favor, @sorted_comments_against)
+        render :show
+      end
+
+      def render_column(top_comment, comments, icon_name, title)
+        set_column_variables(top_comment, comments, icon_name, title)
+        render :column
+      end
+
+      private
+
+      def initialize_comments
+        if model.closed?
+          load_closed_comments
+        else
+          @sorted_comments_in_favor = comments_in_favor
+          @sorted_comments_against = comments_against
+        end
+      end
+
+      def load_closed_comments
+        @top_comment_in_favor, @sorted_comments_in_favor = sorted_comments(comments_in_favor)
+        @top_comment_against, @sorted_comments_against = sorted_comments(comments_against)
+      end
+
+      def sorted_comments(comments)
+        top_comment = find_top_comment(comments)
+        sorted_comments = comments.where.not(id: top_comment&.id).order(created_at: :asc)
+        [top_comment, sorted_comments]
+      end
+
+      def find_top_comment(comments)
+        comments
+          .select("*, (up_votes_count - down_votes_count) AS vote_balance, up_votes_count AS upvotes, down_votes_count AS downvotes")
+          .where("up_votes_count > 0")
+          .reorder("vote_balance DESC, upvotes DESC, downvotes ASC, created_at ASC")
+          .first
+      end
+
+      def interleave_comments(comments_in_favor, comments_against)
+        interleave_top_comments + interleave_remaining_comments(comments_in_favor, comments_against)
+      end
+
+      def interleave_top_comments
+        return [] unless model.closed?
+
+        Array(@top_comment_in_favor) + Array(@top_comment_against)
+      end
+
+      def interleave_remaining_comments(comments_in_favor, comments_against)
+        interleaved = []
+        max_length = [comments_in_favor.size, comments_against.size].max
+
+        max_length.times do |i|
+          interleaved << comments_in_favor[i] if comments_in_favor[i]
+          interleaved << comments_against[i] if comments_against[i]
+        end
+
+        interleaved
+      end
+
+      def comments_in_favor
+        @comments_in_favor ||= model.comments.positive.order(:created_at)
+      end
+
+      def comments_against
+        @comments_against ||= model.comments.negative.order(:created_at)
+      end
+
+      def set_column_variables(top_comment, comments, icon_name, title)
+        @top_comment = top_comment
+        @comments = comments
+        @icon_name = icon_name
+        @title = title
+      end
+    end
+  end
+end

data/app/forms/decidim/comments/comment_form.rb

@@ -5,6 +5,8 @@ module Decidim
     # A form object used to create comments from the graphql api.
     #
     class CommentForm < Form
+      include Decidim::UserRoleChecker
+
       attribute :body, Decidim::Attributes::CleanString
       attribute :alignment, Integer
       attribute :user_group_id, Integer
@@ -17,6 +19,7 @@ module Decidim
       validates :alignment, inclusion: { in: [0, 1, -1] }, if: ->(form) { form.alignment.present? }
 
       validate :max_depth
+      validate :commentable_can_have_comments
 
       def max_length
         if current_component.try(:settings).respond_to?(:comments_max_length)
@@ -33,6 +36,17 @@ module Decidim
 
         errors.add(:base, :invalid) if commentable.depth >= Comment::MAX_DEPTH
       end
+
+      private
+
+      # Private: Check if commentable can have comments and if not adds
+      # a validation error to the model
+      def commentable_can_have_comments
+        return unless current_component && current_component.participatory_space
+        return if user_has_any_role?(current_user, current_component.participatory_space)
+
+        errors.add(:commentable, :cannot_have_comments) unless commentable.accepts_new_comments?
+      end
     end
   end
 end

data/app/models/decidim/comments/comment.rb

@@ -17,6 +17,7 @@ module Decidim
       include Decidim::TranslatableResource
       include Decidim::TranslatableAttributes
       include Decidim::ActsAsTree
+      include ActionView::Helpers::TextHelper
 
       # Limit the max depth of a comment tree. If C is a comment and R is a reply:
       # C          (depth 0)
@@ -55,7 +56,6 @@ module Decidim
       validates :depth, numericality: { only_integer: true, greater_than_or_equal_to: 0, less_than_or_equal_to: MAX_DEPTH }
       validates :alignment, inclusion: { in: [0, 1, -1] }
       validate :body_length
-      validate :commentable_can_have_comments
 
       scope :not_deleted, -> { where(deleted_at: nil) }
 
@@ -80,6 +80,10 @@ module Decidim
         where(alignment: -1)
       end
 
+      def reported_title
+        truncate(translated_attribute(body))
+      end
+
       def organization
         commentable&.organization || participatory_space&.organization
       end
@@ -207,6 +211,10 @@ module Decidim
         Decidim::ActionLog.where(resource: self).exists?(["extra @> ?", Arel.sql("{\"edit\":true}")])
       end
 
+      def extra_actions_for(current_user)
+        root_commentable.try(:actions_for_comment, self, current_user)
+      end
+
       private
 
       def body_length
@@ -228,12 +236,6 @@ module Decidim
         component.settings.comments_max_length.positive?
       end
 
-      # Private: Check if commentable can have comments and if not adds
-      # a validation error to the model
-      def commentable_can_have_comments
-        errors.add(:commentable, :cannot_have_comments) unless root_commentable.accepts_new_comments?
-      end
-
       # Private: Compute comment depth inside the current comment tree
       def compute_depth
         self.depth = commentable.depth + 1 if commentable.respond_to?(:depth)

data/app/packs/entrypoints/decidim_comments.js

@@ -3,3 +3,4 @@ import "stylesheets/comments.scss"
 
 // JavaScript
 import "src/decidim/comments/comments"
+import "src/decidim/comments/comments_mobile_modal"

data/app/packs/src/decidim/comments/comments.component.js

@@ -1,5 +1,6 @@
 /* eslint id-length: ["error", { "exceptions": ["$"] }] */
 /* eslint max-lines: ["error", {"max": 350, "skipBlankLines": true}] */
+/* eslint-disable max-lines */
 
 /**
  * A plain JavaScript component that handles the comments.
@@ -11,7 +12,8 @@
 // This is necessary for testing purposes
 const $ = window.$;
 
-import changeReportFormBehavior from "src/decidim/change_report_form_behavior"
+import changeReportFormBehavior from "src/decidim/change_report_form_behavior";
+import { initializeCommentsDropdown } from "../../decidim/comments/comments_dropdown";
 
 export default class CommentsComponent {
   constructor($element, config) {
@@ -26,6 +28,9 @@ export default class CommentsComponent {
     this.toggleTranslations = config.toggleTranslations;
     this.id = this.$element.attr("id") || this._getUID();
     this.mounted = false;
+
+    this._onTextInput = this._onTextInput.bind(this);
+    this._onToggleOpinion = this._onToggleOpinion.bind(this);
   }
 
   /**
@@ -43,6 +48,7 @@ export default class CommentsComponent {
           $(".add-comment textarea", this.$element).prop("disabled", false);
         });
       }
+      this._initializeSortDropdown();
     }
   }
 
@@ -65,17 +71,45 @@ export default class CommentsComponent {
 
   /**
    * Adds a new thread to the comments section.
+   * If the layout is a two-column layout, the comment is added to either
+   * the "in favor" or "against" column based on the alignment provided.
+   * If the layout is a single column or on a mobile screen,
+   * the comment is added to the general comment thread with interleaved ordering.
+   *
    * @public
-   * @param {String} threadHtml - The HTML content for the thread.
+   * @param {String} threadHtml - The HTML content for the thread to be added.
+   * @param {Number|null} alignment - Specifies the alignment of the comment.
+   *   If -1, the comment is added to the "against" column.
+   *   If 1, the comment is added to the "in favor" column.
+   *   If null or if on a mobile screen, the comment is added to the general thread.
    * @param {Boolean} fromCurrentUser - A boolean indicating whether the user
-   *   herself was the author of the new thread. Defaults to false.
-   * @returns {Void} - Returns nothing
+   *   is the author of the new thread. Defaults to false.
+   * @returns {Void} - Does not return a value.
    */
-  addThread(threadHtml, fromCurrentUser = false) {
-    const $parent = $(".comments:first", this.$element);
+  addThread(threadHtml, alignment = null, fromCurrentUser = false) {
     const $comment = $(threadHtml);
-    const $threads = $(".comment-threads", this.$element);
-    this._addComment($threads, $comment);
+    let $parent = null;
+
+    const $commentsContainer = $(".comments-two-columns", this.$element);
+    const isTwoColumnsLayout = $commentsContainer.length > 0;
+    const isMobileScreen = window.innerWidth < 768;
+
+    if (isTwoColumnsLayout && !isMobileScreen) {
+      const $inFavorColumn = $(".comments-section__in-favor", this.$element);
+      const $againstColumn = $(".comments-section__against", this.$element);
+
+      if (alignment === 1 && $inFavorColumn.length > 0) {
+        $parent = $inFavorColumn;
+      } else if (alignment === -1 && $againstColumn.length > 0) {
+        $parent = $againstColumn;
+      } else {
+        $parent = $(".comment-threads", this.$element);
+      }
+    } else {
+      $parent = $(".comment-threads", this.$element);
+    }
+
+    this._addComment($parent, $comment);
     this._finalizeCommentCreation($parent, fromCurrentUser);
   }
 
@@ -132,6 +166,13 @@ export default class CommentsComponent {
         this._stopPolling();
       });
 
+      document.querySelectorAll(".new_report").forEach((container) => changeReportFormBehavior(container));
+
+      const $dropdown = $add.find("[data-comments-dropdown]");
+      if ($dropdown.length > 0) {
+        initializeCommentsDropdown($dropdown[0]);
+      }
+
       document.querySelectorAll(".new_report").forEach((container) => changeReportFormBehavior(container))
 
       if ($text.length && $text.get(0) !== null) {
@@ -160,32 +201,35 @@ export default class CommentsComponent {
     $target.append($container);
 
     this._initializeComments($container);
-    document.dispatchEvent(new CustomEvent("comments:loaded", { detail: {commentsIds: [this.lastCommentId] }}));
+    document.dispatchEvent(new CustomEvent("comments:loaded", { detail: { commentsIds: [this.lastCommentId] } }));
   }
 
   /**
    * Finalizes the new comment creation after the comment adding finishes
    * successfully.
    * @private
-   * @param {jQuery} $parent - The parent comment element to finalize.
+   * @param {jQuery} $parent - The parent element representing where the comment
+   *  was added.
    * @param {Boolean} fromCurrentUser - A boolean indicating whether the user
    *   herself was the author of the new comment.
    * @returns {Void} - Returns nothing
    */
   _finalizeCommentCreation($parent, fromCurrentUser) {
     if (fromCurrentUser) {
-      const $add = $(".add-comment", $parent);
-      $("textarea", $add).each((_i, text) => {
-        const $text = $(text);
-        // Reset textarea content
-        $text.val("")
-        // Update characterCounter component
-        const characterCounter = $text.data("remaining-characters-counter");
+      const $addCommentForms = $(".add-comment", this.$element);
+
+      $addCommentForms.each((_i, form) => {
+        const $form = $(form);
+        const $textarea = $form.find("textarea");
+
+        $textarea.val("");
+
+        const characterCounter = $textarea.data("remaining-characters-counter");
         if (characterCounter) {
           characterCounter.handleInput();
           characterCounter.updateStatus();
         }
-      })
+      });
     }
 
     // Restart the polling
@@ -205,6 +249,11 @@ export default class CommentsComponent {
     }, this.pollingInterval);
   }
 
+  reloadAllComments() {
+    this._setLoading();
+    this._fetchComments();
+  }
+
   /**
    * Sends an ajax request based on current
    * params to get comments for the component
@@ -266,6 +315,47 @@ export default class CommentsComponent {
     this._setLoading();
   }
 
+  /**
+   * Updates the state of the submit button based on input text and opinion selection.
+   *
+   * @param {Object} params - The parameters for updating the submit button state.
+   * @param {jQuery} params.$form - The form element.
+   * @param {boolean} params.isTextNotEmpty - Whether the text input is not empty.
+   * @param {boolean} params.isTwoColumnsLayout - Whether the layout is two-column.
+   * @param {boolean} params.isOpinionSelected - Whether an opinion (for/against) has been selected.
+   * @returns {void} - Does not return a value.
+   * @private
+   */
+  _updateSubmitButtonState({ $form, isTextNotEmpty, isTwoColumnsLayout, isOpinionSelected }) {
+    const $submit = $("button[type='submit']", $form);
+    if (isTextNotEmpty && (!isTwoColumnsLayout || isOpinionSelected)) {
+      $submit.removeAttr("disabled");
+    } else {
+      $submit.attr("disabled", "disabled");
+    }
+  }
+
+  /**
+   * Prepares parameters for updating the submit button state.
+   *
+   * @param {jQuery} $form - The form element.
+   * @returns {Object} - Returns an object with necessary parameters.
+   * @private
+   */
+  _prepareSubmitButtonStateParams($form) {
+    const $opinionButtons = $("[data-opinion-toggle] button", $form.closest(".add-comment"));
+    const isTwoColumnsLayout = $(".comments-two-columns", this.$element).length > 0;
+    const isOpinionSelected = $opinionButtons.filter("[aria-pressed='true']").length > 0;
+    const isTextNotEmpty = $("textarea", $form).val().length > 0;
+
+    return {
+      $form,
+      isTextNotEmpty,
+      isTwoColumnsLayout,
+      isOpinionSelected
+    };
+  }
+
   /**
    * Event listener for the opinion toggle buttons.
    * @private
@@ -297,24 +387,61 @@ export default class CommentsComponent {
 
     // Announce the selected state for the screen reader
     $selectedState.text($btn.data("selected-label"));
+
+    this._updateSubmitButtonState(this._prepareSubmitButtonStateParams($form));
   }
 
   /**
    * Event listener for the comment field text input.
    * @private
-   * @param {Event} ev - The event object.
+   * @param {{target: (*|jQuery|HTMLElement)}} ev - The event object.
    * @returns {Void} - Returns nothing
    */
   _onTextInput(ev) {
     const $text = $(ev.target);
     const $add = $text.closest(".add-comment");
     const $form = $("form", $add);
-    const $submit = $("button[type='submit']", $form);
 
-    if ($text.val().length > 0) {
-      $submit.removeAttr("disabled");
-    } else {
-      $submit.attr("disabled", "disabled");
+    this._updateSubmitButtonState(this._prepareSubmitButtonStateParams($form));
+  }
+
+  /**
+  * Adds the behaviour for the drop down order section within comments.
+  * @private
+  * @returns {Void} - Returns nothing
+  */
+  _initializeSortDropdown() {
+    const desktopOrderSelect = document.querySelector("[data-desktop-order-comment-select]");
+    const mobileOrderSelect = document.querySelector("[data-mobile-order-comment-select]");
+
+    if (!desktopOrderSelect && !mobileOrderSelect) {
+      return;
     }
+
+    desktopOrderSelect.style.borderColor = "black";
+    mobileOrderSelect.style.borderColor = "black";
+
+    desktopOrderSelect.addEventListener("change", function(event) {
+      const selectedOption = desktopOrderSelect.querySelector(`[value=${event.target.value}]`);
+      const orderUrl = selectedOption.dataset.orderCommentUrl;
+
+      Rails.ajax({
+        url: orderUrl,
+        type: "GET",
+        error: (data) => (console.error(data))
+      });
+    });
+
+    mobileOrderSelect.addEventListener("change", function(event) {
+      const selectedOption = mobileOrderSelect.querySelector(`[value=${event.target.value}]`);
+      const orderUrl = selectedOption.dataset.orderCommentUrl;
+
+      Rails.ajax({
+        url: orderUrl,
+        type: "GET",
+        error: (data) => (console.error(data))
+      });
+    });
   }
 }
+/* eslint-enable max-lines */

data/app/packs/src/decidim/comments/comments.component.test.js

@@ -616,7 +616,8 @@ describe("CommentsComponent", () => {
           textArea.val("I am writing a new comment...");
 
           const newThread = generateCommentThread(999, "This is a dynamically added comment");
-          subject.addThread(newThread, true);
+          const alignment = null;
+          subject.addThread(newThread, alignment, true);
 
           expect(textArea.val()).toEqual("");
         });

data/app/packs/src/decidim/comments/comments.js

@@ -1,20 +1,103 @@
-import CommentsComponent from "src/decidim/comments/comments.component"
+import CommentsComponent from "src/decidim/comments/comments.component";
+import { screens } from "tailwindcss/defaultTheme";
 
 window.Decidim.CommentsComponent = CommentsComponent;
 
+/**
+ * Debounce function to limit the rate at which a function is called.
+ * It ensures that the function is not called more than once within the specified delay.
+ *
+ * @param {Function} func - The function to debounce.
+ * @param {number} delay - The delay (in milliseconds) to wait before calling the function.
+ * @returns {Function} - A debounced version of the original function.
+ */
+const debounce = (func, delay) => {
+  let timeout = null;
+  return (...args) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), delay);
+  };
+};
+
+/**
+ * Initializes the CommentsComponent for a specific element.
+ * If the component is not yet created for the given element, it creates and mounts it.
+ *
+ * @param {jQuery} $el - The jQuery-wrapped element to initialize the CommentsComponent for.
+ * @returns {CommentsComponent} - The initialized CommentsComponent instance.
+ */
+const initializeCommentsComponent = ($el) => {
+  const commentsData = $el.data("decidim-comments");
+  let comments = $el.data("comments");
+
+  if (!comments) {
+    comments = new CommentsComponent($el, commentsData);
+    comments.mountComponent();
+    $el.data("comments", comments);
+  }
+
+  return comments;
+};
+
+/**
+ * Updates the CommentsComponent for a specific element.
+ * It unmounts any existing component and then re-initializes it.
+ *
+ * @param {jQuery} $el - The jQuery-wrapped element to update the CommentsComponent for.
+ * @returns {void}
+ */
+const updateCommentsComponent = ($el) => {
+  const existingComments = $el.data("comments");
+
+  if (existingComments && typeof existingComments.unmountComponent === "function") {
+    existingComments.unmountComponent();
+  }
+
+  const newComments = new CommentsComponent($el, $el.data("decidim-comments"));
+  newComments.mountComponent();
+  $el.data("comments", newComments);
+};
+
+/**
+ * Main initializer for all comment elements on the page.
+ * It sets up all CommentsComponent instances and listens for screen resizes to update components if necessary.
+ *
+ * @returns {void}
+ */
 const commentsInitializer = () => {
-  // Mount comments component
-  $("[data-decidim-comments]").each((_i, el) => {
+  const smBreakpoint = parseInt(screens.md.replace("px", ""), 10);
+  const isMobileScreen = () => window.matchMedia(`(max-width: ${smBreakpoint}px)`).matches;
+  let wasMobileScreen = isMobileScreen();
+  const commentElements = $("[data-decidim-comments]");
+  const commentsMap = new Map();
+
+  // Initialize a CommentsComponent for each comment element
+  commentElements.each((_i, el) => {
     const $el = $(el);
-    let comments = $(el).data("comments");
-    if (!comments) {
-      comments = new CommentsComponent($el, $el.data("decidim-comments"));
-    }
-    comments.mountComponent();
-    $(el).data("comments", comments);
+    const comments = initializeCommentsComponent($el);
+    commentsMap.set($el, comments);
   });
-}
 
-// If no jQuery is used the Tribute feature used in comments to autocomplete
-// mentions stops working
+  /**
+   * Handles the window resize event.
+   * It re-initializes the CommentsComponent for each comment element if the screen size has changed from mobile to desktop or vice versa.
+   *
+   * @returns {void}
+   */
+  const handleResize = debounce(() => {
+    const isNowMobileScreen = isMobileScreen();
+    if (wasMobileScreen !== isNowMobileScreen) {
+      commentElements.each((_i, el) => {
+        const $el = $(el);
+        updateCommentsComponent($el);
+      });
+      wasMobileScreen = isNowMobileScreen;
+    }
+  }, 200);
+
+  // Listen for window resize events and trigger the handler
+  window.addEventListener("resize", handleResize);
+};
+
+// If no jQuery is used the Tribute feature used in comments to autocomplete mentions stops working
 $(() => commentsInitializer());

data/app/packs/src/decidim/comments/comments_dropdown.js

@@ -0,0 +1,57 @@
+// Dropdown menu for user_group
+export const initializeCommentsDropdown = function (elements) {
+  let dropdownButtons = document;
+
+  if (elements === document) {
+    dropdownButtons = document.querySelectorAll("[data-comments-dropdown]");
+  } else if (elements instanceof NodeList || Array.isArray(elements)) {
+    dropdownButtons = elements;
+  } else {
+    dropdownButtons = [elements];
+  }
+
+  dropdownButtons.forEach((button) => {
+    const dropdownId = button.getAttribute("data-target");
+    const dropdownMenu = document.getElementById(dropdownId);
+
+    if (dropdownMenu) {
+      const firstLi = dropdownMenu.querySelector("li");
+      const firstAuthorInfo = firstLi?.querySelector(
+        ".comment__as-author-info"
+      );
+
+      if (firstAuthorInfo) {
+        button.querySelector("span").innerHTML = firstAuthorInfo.innerHTML;
+        firstLi.style.display = "none";
+      }
+
+      dropdownMenu.querySelectorAll("li").forEach((li) => {
+        li.addEventListener("click", () => {
+          const input = li.querySelector("input[type='radio']");
+
+          if (input) {
+            input.checked = true;
+            input.dispatchEvent(new Event("click"));
+
+            const authorInfo = li.querySelector(".comment__as-author-info");
+
+            if (authorInfo) {
+              const authorContent = authorInfo.innerHTML;
+
+              setTimeout(() => {
+                button.querySelector("span").innerHTML = authorContent;
+
+                li.style.display = "none";
+                dropdownMenu.querySelectorAll("li").forEach((otherLi) => {
+                  if (otherLi !== li) {
+                    otherLi.style.display = "";
+                  }
+                });
+              }, 500);
+            }
+          }
+        });
+      });
+    }
+  });
+};

data/app/packs/src/decidim/comments/comments_mobile_modal.js

@@ -0,0 +1,46 @@
+// The code: 1. Manages a responsive "Add Comment" modal: Opens fullscreen on mobile (<= sm) and closes it via a "close" button.
+// 2. Handles dropdown menus: Dynamically updates button content based on user selection, hides selected items, and manages dropdown visibility.
+// This creates a responsive, interactive comment interface with mobile-friendly design and dynamic user group selection.
+
+import { screens } from "tailwindcss/defaultTheme"
+import { initializeCommentsDropdown } from "../../decidim/comments/comments_dropdown";
+
+// Add comment card for mobile
+const addCommentMobile = function (addCommentCard) {
+  const smBreakpoint = parseInt(screens.sm.replace("px", ""), 10);
+  if (window.matchMedia(`(max-width: ${smBreakpoint}px)`).matches) {
+    addCommentCard.classList.remove("hidden");
+    addCommentCard.classList.add("fullscreen");
+  }
+};
+
+const closeAddComment = function (addCommentCard) {
+  addCommentCard.classList.add("hidden");
+  addCommentCard.classList.remove("fullscreen");
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  // Add comment card for mobile
+  const addCommentCard = document.getElementById("add-comment-anchor");
+  if (addCommentCard) {
+    document.querySelectorAll(".add-comment-mobile").forEach((addButtonMobile) => {
+      addButtonMobile.addEventListener("click", () => {
+        addCommentMobile(addCommentCard);
+      });
+    });
+  }
+
+  // Close comment modal
+  const closeButton = document.querySelector(
+    "#add-comment-anchor .close-add-comment-fullscreen"
+  );
+  if (closeButton) {
+    closeButton.addEventListener("click", () =>
+      closeAddComment(addCommentCard)
+    );
+  }
+
+
+  // Initialize dropdown menu
+  initializeCommentsDropdown(document);
+});