decidim-comments 0.24.0 → 0.25.0.rc1

data/app/cells/decidim/comments/edit_comment_modal_form/show.erb

@@ -0,0 +1,29 @@
+<div class="reveal edit-comment-modal" id="<%= "editCommentModal#{model.id}" %>" data-reveal>
+  <div class="reveal__header">
+    <h3 class="reveal__title"><%= t("decidim.components.edit_comment_modal_form.title") %></h3>
+    <button class="close-button" data-close aria-label="<%= t("decidim.components.edit_comment_modal_form.close") %>" type="button">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <%= form_for(form_object, url: decidim_comments.comment_path(comment), method: :put, remote: true, html: { id: form_id }) do |form| %>
+    <div class="field">
+      <label class="show-for-sr" for="<%= form_id %>">
+        <%= t("decidim.components.edit_comment_modal_form.form.body.label") %>
+      </label>
+      <div class="hashtags__container">
+        <%= form.text_area(
+          :body,
+          id: form_id,
+          rows: 4,
+          maxlength: comments_max_length,
+          required: true,
+          placeholder: t("decidim.components.edit_comment_modal_form.form.body.placeholder"),
+          label: false,
+          data: { remaining_characters: "##{form_id}-remaining-characters" }
+        ) %>
+      </div>
+      <button type="submit" data-close class="button button--sc"><%= t("decidim.components.edit_comment_modal_form.form.submit") %></button>
+      <span id="<%= form_id %>-remaining-characters" class="remaining-character-count"></span>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Comments
+    # A cell to display a form for edditing a comment.
+    class EditCommentModalFormCell < Decidim::ViewModel
+      delegate :current_user, :user_signed_in?, to: :controller
+      alias comment model
+
+      private
+
+      def decidim_comments
+        Decidim::Comments::Engine.routes.url_helpers
+      end
+
+      def form_id
+        "edit_comment_#{comment.id}"
+      end
+
+      def form_object
+        Decidim::Comments::CommentForm.new(
+          body: comment.translated_body
+        )
+      end
+
+      def comments_max_length
+        return 1000 unless model.respond_to?(:component)
+        return component_comments_max_length if component_comments_max_length
+        return organization_comments_max_length if organization_comments_max_length
+
+        1000
+      end
+
+      def component_comments_max_length
+        return unless model.component&.settings.respond_to?(:comments_max_length)
+
+        model.component.settings.comments_max_length if model.component.settings.comments_max_length.positive?
+      end
+
+      def organization_comments_max_length
+        return unless organization
+
+        organization.comments_max_length if organization.comments_max_length.positive?
+      end
+
+      def organization
+        return model.organization if model.respond_to?(:organization)
+
+        model.component.organization if model.component.organization.comments_max_length.positive?
+      end
+    end
+  end
+end

data/app/commands/decidim/comments/delete_comment.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Comments
+    # A command with all the business logic to delete a comment
+    class DeleteComment < Rectify::Command
+      # Public: Initializes the command.
+      #
+      # comment - The comment to delete.
+      # current_user - The user performing the action.
+      def initialize(comment, current_user)
+        @comment = comment
+        @current_user = current_user
+      end
+
+      # Executes the command. Broadcasts these events:
+      #
+      # - :ok when everything is valid.
+      # - :invalid if comment isn't authored by current_user.
+      #
+      # Returns nothing.
+      def call
+        return broadcast(:invalid) unless comment.authored_by?(current_user)
+
+        delete_comment
+
+        broadcast(:ok)
+      end
+
+      private
+
+      attr_reader :comment, :current_user
+
+      def delete_comment
+        Decidim.traceability.perform_action!(
+          :delete,
+          comment,
+          current_user,
+          visibility: "public-only"
+        ) do
+          comment.delete!
+        end
+      end
+    end
+  end
+end

data/app/commands/decidim/comments/update_comment.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Comments
+    # A command with all the business logic to update an existing comment
+    class UpdateComment < Rectify::Command
+      # Public: Initializes the command.
+      #
+      # comment - Decidim::Comments::Comment
+      # current_user - Decidim::User
+      # form - A form object with the params.
+      def initialize(comment, current_user, form)
+        @comment = comment
+        @current_user = current_user
+        @form = form
+      end
+
+      # Executes the command. Broadcasts these events:
+      #
+      # - :ok when everything is valid.
+      # - :invalid if the form wasn't valid and we couldn't proceed.
+      #
+      # Returns nothing.
+      def call
+        return broadcast(:invalid) if form.invalid? || !comment.authored_by?(current_user)
+
+        update_comment
+
+        broadcast(:ok)
+      end
+
+      private
+
+      attr_reader :form, :comment, :current_user
+
+      def update_comment
+        parsed = Decidim::ContentProcessor.parse(form.body, current_organization: form.current_organization)
+
+        params = {
+          body: { I18n.locale => parsed.rewrite }
+        }
+
+        @comment = Decidim.traceability.update!(
+          comment,
+          current_user,
+          params,
+          visibility: "public-only",
+          edit: true
+        )
+
+        mentioned_users = parsed.metadata[:user].users
+        mentioned_groups = parsed.metadata[:user_group].groups
+        CommentCreation.publish(@comment, parsed.metadata)
+        send_notifications(mentioned_users, mentioned_groups)
+      end
+
+      def send_notifications(mentioned_users, mentioned_groups)
+        NewCommentNotificationCreator.new(comment, mentioned_users, mentioned_groups).create
+      end
+    end
+  end
+end

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.component
+          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/forms/decidim/comments/comment_form.rb

@@ -19,7 +19,7 @@ module Decidim
       validate :max_depth
 
       def max_length
-        if current_component&.settings.respond_to?(:comments_max_length)
+        if current_component.try(:settings).respond_to?(:comments_max_length)
           component_length = current_component.try { settings.comments_max_length.positive? }
           return current_component.settings.comments_max_length if component_length
         end

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

@@ -54,6 +54,8 @@ module Decidim
 
       delegate :organization, to: :commentable
 
+      scope :not_deleted, -> { where(deleted_at: nil) }
+
       translatable_fields :body
       searchable_fields({
                           participatory_space: :itself,
@@ -91,6 +93,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,10 +160,12 @@ 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)
+        else
+          []
         end
       end
 
@@ -177,6 +183,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,299 @@
+/* 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.
+   * @returns {Void} - Returns nothing
+   */
+  addThread(threadHtml) {
+    const $parent = $(".comments:first", this.$element);
+    const $comment = $(threadHtml);
+    const $threads = $(".comment-threads", this.$element);
+    this._addComment($threads, $comment);
+    this._finalizeCommentCreation($parent);
+  }
+
+  /**
+   * 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.
+   * @returns {Void} - Returns nothing
+   */
+  addReply(commentId, replyHtml) {
+    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);
+  }
+
+  /**
+   * 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.
+   * @returns {Void} - Returns nothing
+   */
+  _finalizeCommentCreation($parent) {
+    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");
+    }
+  }
+}