decidim-comments 0.24.3 → 0.25.0.rc4

data/app/controllers/decidim/comments/comments_controller.rb

@@ -8,8 +8,8 @@ module Decidim
       include Decidim::ResourceHelper
 
       before_action :authenticate_user!, only: [:create]
-      before_action :set_commentable
-      before_action :ensure_commentable!
+      before_action :set_commentable, except: [:destroy, :update]
+      before_action :ensure_commentable!, except: [:destroy, :update]
 
       helper_method :root_depth, :commentable, :order, :reply?, :reload?
 
@@ -21,7 +21,7 @@ module Decidim
           order_by: order,
           after: params.fetch(:after, 0).to_i
         )
-        @comments_count = commentable.comments.count
+        @comments_count = commentable.comments_count
 
         respond_to do |format|
           format.js do
@@ -37,6 +37,31 @@ module Decidim
         end
       end
 
+      def update
+        set_comment
+        enforce_permission_to :update, :comment, comment: comment
+
+        form = Decidim::Comments::CommentForm.from_params(
+          params.merge(commentable: comment.commentable)
+        ).with_context(
+          current_organization: current_organization
+        )
+
+        Decidim::Comments::UpdateComment.call(comment, current_user, form) do
+          on(:ok) do
+            respond_to do |format|
+              format.js { render :update }
+            end
+          end
+
+          on(:invalid) do
+            respond_to do |format|
+              format.js { render :update_error }
+            end
+          end
+        end
+      end
+
       def create
         enforce_permission_to :create, :comment, commentable: commentable
 
@@ -44,7 +69,7 @@ module Decidim
           params.merge(commentable: commentable)
         ).with_context(
           current_organization: current_organization,
-          current_component: commentable.try(:component) || commentable.participatory_space
+          current_component: current_component
         )
         Decidim::Comments::CreateComment.call(form, current_user) do
           on(:ok) do |comment|
@@ -63,6 +88,34 @@ module Decidim
         end
       end
 
+      def current_component
+        return commentable.component if commentable.respond_to?(:component)
+        return commentable.participatory_space if commentable.respond_to?(:participatory_space)
+        return commentable if Decidim.participatory_space_manifests.find { |manifest| manifest.model_class_name == commentable.class.name }
+      end
+
+      def destroy
+        set_comment
+        @commentable = @comment.commentable
+
+        enforce_permission_to :destroy, :comment, comment: comment
+
+        Decidim::Comments::DeleteComment.call(comment, current_user) do
+          on(:ok) do
+            @comments_count = @comment.root_commentable.comments_count
+            respond_to do |format|
+              format.js { render :delete }
+            end
+          end
+
+          on(:invalid) do
+            respond_to do |format|
+              format.js { render :deletion_error }
+            end
+          end
+        end
+      end
+
       private
 
       attr_reader :commentable, :comment
@@ -71,6 +124,10 @@ module Decidim
         @commentable = GlobalID::Locator.locate_signed(commentable_gid)
       end
 
+      def set_comment
+        @comment = Decidim::Comments::Comment.find_by(id: params[:id])
+      end
+
       def ensure_commentable!
         raise ActionController::RoutingError, "Not Found" unless commentable
       end
@@ -80,9 +137,9 @@ module Decidim
         @comments_count = begin
           case commentable
           when Decidim::Comments::Comment
-            commentable.root_commentable.comments.count
+            commentable.root_commentable.comments_count
           else
-            commentable.comments.count
+            commentable.comments_count
           end
         end
       end

data/app/events/decidim/comments/comment_voted_event.rb

@@ -8,6 +8,11 @@ module Decidim
       i18n_attributes :upvotes
       i18n_attributes :downvotes
 
+      def initialize(resource:, event_name:, user:, user_role: nil, extra: nil)
+        resource = target_resource(resource)
+        super
+      end
+
       def upvotes
         extra[:upvotes]
       end
@@ -21,6 +26,10 @@ module Decidim
       def resource_url_params
         { anchor: "comment_#{comment.id}" }
       end
+
+      def target_resource(t_resource)
+        t_resource.is_a?(Decidim::Comments::Comment) ? t_resource.root_commentable : t_resource
+      end
     end
   end
 end

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

@@ -29,6 +29,7 @@ module Decidim
 
       belongs_to :commentable, foreign_key: "decidim_commentable_id", foreign_type: "decidim_commentable_type", polymorphic: true
       belongs_to :root_commentable, foreign_key: "decidim_root_commentable_id", foreign_type: "decidim_root_commentable_type", polymorphic: true, touch: true
+      belongs_to :participatory_space, foreign_key: "decidim_participatory_space_id", foreign_type: "decidim_participatory_space_type", polymorphic: true, optional: true
       has_many :up_votes, -> { where(weight: 1) }, foreign_key: "decidim_comment_id", class_name: "CommentVote", dependent: :destroy
       has_many :down_votes, -> { where(weight: -1) }, foreign_key: "decidim_comment_id", class_name: "CommentVote", dependent: :destroy
 
@@ -54,6 +55,8 @@ module Decidim
 
       delegate :organization, to: :commentable
 
+      scope :not_deleted, -> { where(deleted_at: nil) }
+
       translatable_fields :body
       searchable_fields({
                           participatory_space: :itself,
@@ -79,7 +82,9 @@ module Decidim
         participatory_space.try(:visible?) && component.try(:published?)
       end
 
+      alias original_participatory_space participatory_space
       def participatory_space
+        return original_participatory_space if original_participatory_space.present?
         return root_commentable if root_commentable.is_a?(Decidim::Participable)
 
         root_commentable.participatory_space
@@ -91,6 +96,8 @@ module Decidim
 
       # Public: Override Commentable concern method `accepts_new_comments?`
       def accepts_new_comments?
+        return if deleted?
+
         root_commentable.accepts_new_comments? && depth < MAX_DEPTH
       end
 
@@ -156,7 +163,7 @@ module Decidim
       def self.user_commentators_ids_in(resources)
         if resources.first&.kind_of?(Decidim::Comments::Commentable)
           commentable_type = resources.first.class.name
-          Decidim::Comments::Comment.select("DISTINCT decidim_author_id").not_hidden
+          Decidim::Comments::Comment.select("DISTINCT decidim_author_id").not_hidden.not_deleted
                                     .where(decidim_commentable_id: resources.pluck(:id))
                                     .where(decidim_commentable_type: commentable_type)
                                     .where("decidim_author_type" => "Decidim::UserBaseEntity").pluck(:decidim_author_id)
@@ -179,6 +186,22 @@ module Decidim
         @translated_body ||= translated_attribute(body, organization)
       end
 
+      def delete!
+        return if deleted?
+
+        update(deleted_at: Time.current)
+
+        update_counter
+      end
+
+      def deleted?
+        deleted_at.present?
+      end
+
+      def edited?
+        Decidim::ActionLog.where(resource: self).exists?(["extra @> ?", Arel.sql("{\"edit\":true}")])
+      end
+
       private
 
       def body_length

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

@@ -0,0 +1,300 @@
+/* eslint id-length: ["error", { "exceptions": ["$"] }] */
+
+/**
+ * A plain Javascript component that handles the comments.
+ *
+ * @class
+ * @augments Component
+ */
+
+// This is necessary for testing purposes
+const $ = window.$;
+
+import { createCharacterCounter } from "src/decidim/input_character_counter"
+import ExternalLink from "src/decidim/external_link"
+import updateExternalDomainLinks from "src/decidim/external_domain_warning"
+
+export default class CommentsComponent {
+  constructor($element, config) {
+    this.$element = $element;
+    this.commentableGid = config.commentableGid;
+    this.commentsUrl = config.commentsUrl;
+    this.rootDepth = config.rootDepth;
+    this.order = config.order;
+    this.lastCommentId = config.lastCommentId;
+    this.pollingInterval = config.pollingInterval || 15000;
+    this.id = this.$element.attr("id") || this._getUID();
+    this.mounted = false;
+  }
+
+  /**
+   * Handles the logic for mounting the component
+   * @public
+   * @returns {Void} - Returns nothing
+   */
+  mountComponent() {
+    if (this.$element.length > 0 && !this.mounted) {
+      this.mounted = true;
+      this._initializeComments(this.$element);
+
+      $(".order-by__dropdown .is-submenu-item a", this.$element).on("click.decidim-comments", () => this._onInitOrder());
+    }
+  }
+
+  /**
+   * Handles the logic for unmounting the component
+   * @public
+   * @returns {Void} - Returns nothing
+   */
+  unmountComponent() {
+    if (this.mounted) {
+      this.mounted = false;
+      this._stopPolling();
+
+      $(".add-comment .opinion-toggle .button", this.$element).off("click.decidim-comments");
+      $(".add-comment textarea", this.$element).off("input.decidim-comments");
+      $(".order-by__dropdown .is-submenu-item a", this.$element).off("click.decidim-comments");
+      $(".add-comment form", this.$element).off("submit.decidim-comments");
+      $(".add-comment textarea", this.$element).each((_i, el) => el.removeEventListener("emoji.added", this._onTextInput));
+    }
+  }
+
+  /**
+   * Adds a new thread to the comments section.
+   * @public
+   * @param {String} threadHtml - The HTML content for the 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
+   */
+  addThread(threadHtml, fromCurrentUser = false) {
+    const $parent = $(".comments:first", this.$element);
+    const $comment = $(threadHtml);
+    const $threads = $(".comment-threads", this.$element);
+    this._addComment($threads, $comment);
+    this._finalizeCommentCreation($parent, fromCurrentUser);
+  }
+
+  /**
+   * Adds a new reply to an existing comment.
+   * @public
+   * @param {Number} commentId - The ID of the comment for which to add the
+   *   reply to.
+   * @param {String} replyHtml - The HTML content for the reply.
+   * @param {Boolean} fromCurrentUser - A boolean indicating whether the user
+   *   herself was the author of the new reply. Defaults to false.
+   * @returns {Void} - Returns nothing
+   */
+  addReply(commentId, replyHtml, fromCurrentUser = false) {
+    const $parent = $(`#comment_${commentId}`);
+    const $comment = $(replyHtml);
+    const $replies = $(`#comment-${commentId}-replies`);
+    this._addComment($replies, $comment);
+    $replies.siblings(".comment__additionalreply").removeClass("hide");
+    this._finalizeCommentCreation($parent, fromCurrentUser);
+  }
+
+  /**
+   * Generates a unique identifier for the form.
+   * @private
+   * @returns {String} - Returns a unique identifier
+   */
+  _getUID() {
+    return `comments-${new Date().setUTCMilliseconds()}-${Math.floor(Math.random() * 10000000)}`;
+  }
+
+  /**
+   * Initializes the comments for the given parent element.
+   * @private
+   * @param {jQuery} $parent The parent element to initialize.
+   * @returns {Void} - Returns nothing
+   */
+  _initializeComments($parent) {
+    $(".add-comment", $parent).each((_i, el) => {
+      const $add = $(el);
+      const $form = $("form", $add);
+      const $opinionButtons = $(".opinion-toggle .button", $add);
+      const $text = $("textarea", $form);
+
+      $opinionButtons.on("click.decidim-comments", this._onToggleOpinion);
+      $text.on("input.decidim-comments", this._onTextInput);
+
+      $(document).trigger("attach-mentions-element", [$text.get(0)]);
+
+      $form.on("submit.decidim-comments", () => {
+        const $submit = $("button[type='submit']", $form);
+
+        $submit.attr("disabled", "disabled");
+        this._stopPolling();
+      });
+
+      if ($text.length && $text.get(0) !== null) {
+        // Attach event to the DOM node, instead of the jQuery object
+        $text.get(0).addEventListener("emoji.added", this._onTextInput);
+      }
+    });
+
+    this._pollComments();
+  }
+
+  /**
+   * Adds the given comment element to the given target element and
+   * initializes it.
+   * @private
+   * @param {jQuery} $target - The target element to add the comment to.
+   * @param {jQuery} $container - The comment container element to add.
+   * @returns {Void} - Returns nothing
+   */
+  _addComment($target, $container) {
+    let $comment = $(".comment", $container);
+    if ($comment.length < 1) {
+      // In case of a reply
+      $comment = $container;
+    }
+    this.lastCommentId = parseInt($comment.data("comment-id"), 10);
+
+    $target.append($container);
+    $container.foundation();
+    this._initializeComments($container);
+    createCharacterCounter($(".add-comment textarea", $container));
+    $container.find('a[target="_blank"]').each((_i, elem) => {
+      const $link = $(elem);
+      $link.data("external-link", new ExternalLink($link));
+    });
+    updateExternalDomainLinks($container)
+  }
+
+  /**
+   * Finalizes the new comment creation after the comment adding finishes
+   * successfully.
+   * @private
+   * @param {jQuery} $parent - The parent comment element to finalize.
+   * @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);
+      const $text = $("textarea", $add);
+      const characterCounter = $text.data("remaining-characters-counter");
+      $text.val("");
+      if (characterCounter) {
+        characterCounter.updateStatus();
+      }
+      if (!$add.parent().is(".comments")) {
+        $add.addClass("hide");
+      }
+    }
+
+    // Restart the polling
+    this._pollComments();
+  }
+
+  /**
+   * Sets a timeout to poll new comments.
+   * @private
+   * @returns {Void} - Returns nothing
+   */
+  _pollComments() {
+    this._stopPolling();
+
+    this.pollTimeout = setTimeout(() => {
+      $.ajax({
+        url: this.commentsUrl,
+        method: "GET",
+        contentType: "application/javascript",
+        data: {
+          "commentable_gid": this.commentableGid,
+          "root_depth": this.rootDepth,
+          order: this.order,
+          after: this.lastCommentId
+        }
+      }).done(() => this._pollComments());
+    }, this.pollingInterval);
+  }
+
+  /**
+   * Stops polling for new comments.
+   * @private
+   * @returns {Void} - Returns nothing
+   */
+  _stopPolling() {
+    if (this.pollTimeout) {
+      clearTimeout(this.pollTimeout);
+    }
+  }
+
+  /**
+   * Sets the loading comments element visible in the view.
+   * @private
+   * @returns {Void} - Returns nothing
+   */
+  _setLoading() {
+    const $container = $("> .comments-container", this.$element);
+    $("> .comments", $container).addClass("hide");
+    $("> .loading-comments", $container).removeClass("hide");
+  }
+
+  /**
+   * Event listener for the ordering links.
+   * @private
+   * @returns {Void} - Returns nothing
+   */
+  _onInitOrder() {
+    this._stopPolling();
+    this._setLoading();
+  }
+
+  /**
+   * Event listener for the opinion toggle buttons.
+   * @private
+   * @param {Event} ev - The event object.
+   * @returns {Void} - Returns nothing
+   */
+  _onToggleOpinion(ev) {
+    let $btn = $(ev.target);
+    if (!$btn.is(".button")) {
+      $btn = $btn.parents(".button");
+    }
+
+    const $add = $btn.closest(".add-comment");
+    const $form = $("form", $add);
+    const $opinionButtons = $(".opinion-toggle .button", $add);
+    const $selectedState = $(".opinion-toggle .selected-state", $add);
+    const $alignment = $(".alignment-input", $form);
+
+    $opinionButtons.removeClass("is-active").attr("aria-pressed", "false");
+    $btn.addClass("is-active").attr("aria-pressed", "true");
+
+    if ($btn.is(".opinion-toggle--ok")) {
+      $alignment.val(1);
+    } else if ($btn.is(".opinion-toggle--meh")) {
+      $alignment.val(0);
+    } else if ($btn.is(".opinion-toggle--ko")) {
+      $alignment.val(-1);
+    }
+
+    // Announce the selected state for the screen reader
+    $selectedState.text($btn.data("selected-label"));
+  }
+
+  /**
+   * Event listener for the comment field text input.
+   * @private
+   * @param {Event} 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");
+    }
+  }
+}