add comments on entries

2026-01-23 21:55:54 +01:00
parent b3726e0777
commit 9a814f1aa1
15 changed files with 270 additions and 2 deletions
@@ -0,0 +1,31 @@
+class CommentsController < ApplicationController
+  before_action :require_login
+  before_action :set_commentable
+
+  def create
+    @comment = @commentable.comments.build(comment_params)
+    @comment.user = current_user
+
+    if @comment.save
+      respond_to do |format|
+        format.turbo_stream
+        format.html { redirect_to @commentable }
+      end
+    else
+      # Handle validation errors
+      redirect_to @commentable, alert: "Comment could not be created: #{@comment.errors.full_messages.to_sentence}"
+    end
+  end
+
+  private
+
+  def set_commentable
+    if params[:entry_id]
+      @commentable = Entry.find(params[:entry_id])
+    end
+  end
+
+  def comment_params
+    params.require(:comment).permit(:body, :language_code)
+  end
+end
@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["modal", "button"]
+
+  connect() {
+    this.modalTarget.classList.add("hidden")
+    this.buttonTarget.classList.remove("hidden")
+  }
+
+  open(event) {
+    event.preventDefault()
+    this.modalTarget.classList.remove("hidden")
+  }
+
+  close(event) {
+    if (event.target === this.modalTarget) {
+      this.modalTarget.classList.add("hidden")
+    }
+  }
+
+  closeWithButton() {
+    this.modalTarget.classList.add("hidden")
+  }
+}
@@ -1,6 +1,23 @@
 class Comment < ApplicationRecord
  belongs_to :user
  belongs_to :commentable, polymorphic: true
+  belongs_to :language,
+             class_name: "SupportedLanguage",
+             foreign_key: :language_code,
+             primary_key: :code,
+             optional: true

  validates :body, presence: true
+
+  after_create_commit :notify_users
+
+  private
+
+  def notify_users
+    return if language_code.blank?
+
+    # Placeholder for notification logic once we decide delivery channels.
+    users_to_notify = User.where(primary_language: language_code).where.not(id: user_id)
+    # puts "Notifying users: #{users_to_notify.pluck(:email).join(", ")}"
+  end
 end
@@ -0,0 +1,13 @@
+<%= turbo_stream.append "comments-#{@comment.language_code.presence || 'all'}" do %>
+  <%= render "entries/comment", comment: @comment %>
+<% end %>
+
+<% if @comment.language_code.present? %>
+  <%= turbo_stream.replace "comment-details-#{@comment.language_code}" do %>
+    <%= render "entries/language_comment_details", entry: @commentable, language_code: @comment.language_code %>
+  <% end %>
+<% end %>
+
+<%= turbo_stream.replace "comment_tabs" do %>
+  <%= render "entries/comment_tabs", entry: @commentable %>
+<% end %>
@@ -0,0 +1,24 @@
+<div class="flex items-start space-x-4">
+  <div class="flex-shrink-0">
+    <%# Add user avatars here if you have them %>
+    <div class="h-10 w-10 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 font-bold">
+      <%= comment.user&.name&.first || 'A' %>
+    </div>
+  </div>
+  <div class="flex-1">
+    <div class="bg-slate-100 rounded-lg p-3">
+      <div class="flex items-center justify-between">
+        <p class="text-sm text-slate-900">
+          <span class="font-semibold "><%= comment.user&.name || "Anonymous" %></span>
+          <% unless comment.language_code.blank? %>
+            <span class="italic">on the <%= language_name(comment.language_code) %> translation</span>
+          <% end -%>
+        </p>
+        <p class="text-xs text-slate-500">
+        <%= comment.created_at ? "#{time_ago_in_words(comment.created_at)} ago" : "just now" %>
+        </p>
+      </div>
+      <p class="text-sm text-slate-800 mt-1"><%= comment.body %></p>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,12 @@
+<%= form_with(model: [entry, Comment.new(commentable: entry)],
+              data: { turbo_stream: true },
+              html: { class: "space-y-4" }) do |form| %>
+  <%= form.hidden_field :language_code, value: (local_assigns[:language_code].presence || nil) %>
+  <div>
+    <%= form.label :body, "Comment", class: "sr-only" %>
+    <%= form.text_area :body, rows: 4, class: "block w-full border-slate-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", placeholder: "Add your comment..." %>
+  </div>
+  <div class="flex justify-end">
+    <%= form.submit "Submit", class: "bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-indigo-700 transition cursor-pointer" %>
+  </div>
+<% end %>
@@ -0,0 +1,30 @@
+<div id="comment_tabs" class="border-b border-slate-200">
+  <nav class="-mb-px flex space-x-6" aria-label="Tabs">
+    <% grouped_comments = entry.comments.group_by(&:language) %>
+    <% language_groups = supported_languages.map { |language| [language, grouped_comments[language] || []] } %>
+    <% language_groups.unshift([:all, entry.comments]) %>
+    <% language_groups.each do |language, comments| %>
+      <% language_label = language == :all ? "All languages" : language&.name %>
+      <% language_code = language == :all ? "all" : language&.code %>
+      <a href="#"
+         class="comment-tab border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
+         data-lang="<%= language_code %>">
+        <%= language_label %> <span class="bg-slate-100 text-slate-600 ml-2 py-0.5 px-2.5 rounded-full text-xs font-medium"><%= comments.count %></span>
+      </a>
+    <% end %>
+  </nav>
+</div>
+
+<div class="mt-4">
+  <% if entry.comments.empty? %>
+    <p class="text-slate-500">No comments yet. Be the first to add one!</p>
+  <% end %>
+  <% language_groups.each do |language, comments| %>
+    <% language_code = language == :all ? "all" : language&.code %>
+    <div id="comments-<%= language_code %>" class="comment-group space-y-4 hidden">
+      <% comments.each do |comment| %>
+        <%= render "entries/comment", comment: comment %>
+      <% end %>
+    </div>
+  <% end %>
+</div>
@@ -0,0 +1,57 @@
+<% if current_user %>
+<div class="mt-8" data-controller="comments">
+  <div class="flex items-center justify-between mb-4">
+    <h3 class="text-lg font-bold text-slate-900">Discussion</h3>
+    <button id="add_comment_button" data-action="click->comments#open" data-comments-target="button" class="bg-indigo-600 text-white px-4 py-2 rounded-full shadow hover:bg-indigo-700 transition text-sm font-semibold">
+      Add Comment
+    </button>
+  </div>
+
+  <%= render "entries/comment_tabs", entry: entry %>
+
+  <div id="comment_form_modal" data-comments-target="modal" data-action="click->comments#close" class="hidden fixed inset-0 bg-slate-900 bg-opacity-50 z-40 flex items-center justify-center">
+    <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-lg">
+      <div class="flex justify-between items-center">
+        <h4 class="text-lg font-bold">Add a Comment</h4>
+        <button id="close_comment_form" data-action="click->comments#closeWithButton" class="text-slate-500 hover:text-slate-700 text-2xl leading-none">
+          &times;
+        </button>
+      </div>
+      <%= render "entries/comment_form", entry: entry %>
+    </div>
+  </div>
+</div>
+
+<script>
+  function activateCommentTab(targetLanguageCode) {
+    const commentGroups = document.querySelectorAll(".comment-group");
+    commentGroups.forEach((group) => {
+      const isTarget = group.id === `comments-${targetLanguageCode}`;
+      group.classList.toggle("hidden", !isTarget);
+    });
+
+    const tabs = document.querySelectorAll(".comment-tab");
+    tabs.forEach((tab) => {
+      const isActive = tab.dataset.lang === targetLanguageCode;
+      tab.classList.toggle("text-slate-900", isActive);
+      tab.classList.toggle("border-indigo-600", isActive);
+      tab.classList.toggle("text-slate-500", !isActive);
+      tab.classList.toggle("border-transparent", !isActive);
+    });
+  }
+
+  document.addEventListener("click", (event) => {
+    const tab = event.target.closest(".comment-tab");
+    if (!tab) {
+      return;
+    }
+
+    event.preventDefault();
+    activateCommentTab(tab.dataset.lang);
+  });
+
+  document.addEventListener("turbo:load", () => {
+    activateCommentTab("all");
+  });
+</script>
+<% end %>
@@ -0,0 +1,8 @@
+<details class="text-xs">
+  <summary class="inline-flex items-center gap-1 text-indigo-600 font-semibold cursor-pointer">
+    Add comment
+  </summary>
+  <div class="mt-3">
+    <%= render "entries/comment_form", entry: entry, language_code: language_code %>
+  </div>
+</details>
@@ -58,4 +58,6 @@
      <% end %>
    </div>
  </div>
+
+  <%= render "entries/comments_section", entry: @entry %>
 </main>
@@ -94,7 +94,7 @@
        The <strong>Sanasto Wiki</strong> let you search and compare, or download, translations across languages used all over the living Christianity.
      </p>

-      <p>You are invited to contribute to this work.</p>
+      <p>With a login account, you can contribute to this work.</p>

      <div class="info-box">
        <p style="margin: 0;"><strong>Your Account Details:</strong></p>
@@ -34,6 +34,7 @@ Rails.application.routes.draw do
  end

  resources :entries do
+    resources :comments, only: [:create]
    collection do
      get :download
    end
@@ -0,0 +1,5 @@
+class AddLanguageCodeToComments < ActiveRecord::Migration[8.1]
+  def change
+    add_column :comments, :language_code, :string
+  end
+end
@@ -10,7 +10,7 @@ FOREIGN KEY ("updated_by_id")
 CREATE INDEX "index_entries_on_created_by_id" ON "entries" ("created_by_id") /*application='SanastoWiki'*/;
 CREATE INDEX "index_entries_on_updated_by_id" ON "entries" ("updated_by_id") /*application='SanastoWiki'*/;
 CREATE INDEX "index_entries_on_category" ON "entries" ("category") /*application='SanastoWiki'*/;
-CREATE TABLE IF NOT EXISTS "comments" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "user_id" integer NOT NULL, "commentable_type" varchar NOT NULL, "commentable_id" integer NOT NULL, "body" text NOT NULL, "created_at" datetime(6) NOT NULL, "updated_at" datetime(6) NOT NULL, CONSTRAINT "fk_rails_03de2dc08c"
+CREATE TABLE IF NOT EXISTS "comments" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "user_id" integer NOT NULL, "commentable_type" varchar NOT NULL, "commentable_id" integer NOT NULL, "body" text NOT NULL, "created_at" datetime(6) NOT NULL, "updated_at" datetime(6) NOT NULL, "language_code" varchar /*application='SanastoWiki'*/, CONSTRAINT "fk_rails_03de2dc08c"
 FOREIGN KEY ("user_id")
  REFERENCES "users" ("id")
 );
@@ -81,6 +81,7 @@ BEGIN
 END;
 CREATE TABLE IF NOT EXISTS "setup_states" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "installed" boolean DEFAULT FALSE NOT NULL, "installed_at" datetime(6), "created_at" datetime(6) NOT NULL, "updated_at" datetime(6) NOT NULL);
 INSERT INTO "schema_migrations" (version) VALUES
+('20260123130957'),
 ('20260123125325'),
 ('20260122131000'),
 ('20260122130000'),
@@ -0,0 +1,42 @@
+require "test_helper"
+
+class CommentsControllerTest < ActionDispatch::IntegrationTest
+  setup do
+    @user = users(:contributor_user)
+    @entry = entries(:one)
+    @supported_language = supported_languages(:one)
+  end
+
+  test "should not create comment if not logged in" do
+    assert_no_difference("Comment.count") do
+      post entry_comments_url(@entry), params: { comment: { body: "Test comment", language_code: @supported_language.code } }
+    end
+    assert_redirected_to new_user_session_url
+  end
+
+  test "should create comment if logged in" do
+    login_as @user
+    assert_difference("Comment.count", 1) do
+      post entry_comments_url(@entry), params: { comment: { body: "Test comment", language_code: @supported_language.code } }
+    end
+    assert_redirected_to @entry
+    assert_equal "Test comment", Comment.last.body
+    assert_equal @supported_language.code, Comment.last.language_code
+    assert_equal @user, Comment.last.user
+  end
+
+  # Assuming you want to test turbo stream responses as well
+  test "should create comment and respond with turbo stream" do
+    login_as @user
+    post entry_comments_url(@entry), params: { comment: { body: "Test turbo comment", language_code: @supported_language.code } }, as: :turbo_stream
+    assert_response :success
+    assert_match(/turbo-stream action=\"append\" target=\"comments-#{@supported_language.code}\"/, response.body)
+    assert_match(/Test turbo comment/, response.body)
+  end
+
+  private
+
+  def new_user_session_url
+    login_path
+  end
+end