diff --git a/app/javascript/controllers/comments_controller.js b/app/javascript/controllers/comments_controller.js index 73b8d44..24fe6c6 100644 --- a/app/javascript/controllers/comments_controller.js +++ b/app/javascript/controllers/comments_controller.js @@ -1,25 +1,46 @@ import { Controller } from "@hotwired/stimulus" export default class extends Controller { - static targets = ["modal", "button"] + static targets = ["modal", "languageSelect", "form"] connect() { this.modalTarget.classList.add("hidden") - this.buttonTarget.classList.remove("hidden") } open(event) { event.preventDefault() + + // Get the language code from the button that was clicked + const languageCode = event.currentTarget.dataset.languageCode + + // Set the language select value if provided + if (languageCode && this.hasLanguageSelectTarget) { + this.languageSelectTarget.value = languageCode + } + this.modalTarget.classList.remove("hidden") } close(event) { if (event.target === this.modalTarget) { this.modalTarget.classList.add("hidden") + this.resetForm() } } - closeWithButton() { + closeWithButton(event) { + event.preventDefault() this.modalTarget.classList.add("hidden") + this.resetForm() + } + + stopPropagation(event) { + event.stopPropagation() + } + + resetForm() { + if (this.hasFormTarget) { + this.formTarget.reset() + } } } diff --git a/app/views/comments/create.turbo_stream.erb b/app/views/comments/create.turbo_stream.erb index a3bacc3..5f43e0e 100644 --- a/app/views/comments/create.turbo_stream.erb +++ b/app/views/comments/create.turbo_stream.erb @@ -2,12 +2,16 @@ <%= 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 %> + +<%= turbo_stream.update "comment_form_modal" do %> + <%= render "entries/comment_modal_content", entry: @commentable %> +<% end %> + +<%= turbo_stream.append "comment_form_modal", target: "comment_form_modal" do %> + +<% end %> diff --git a/app/views/entries/_comment_form.html.erb b/app/views/entries/_comment_form.html.erb index e1864c2..518687e 100644 --- a/app/views/entries/_comment_form.html.erb +++ b/app/views/entries/_comment_form.html.erb @@ -1,12 +1,27 @@ <%= form_with(model: [entry, Comment.new(commentable: entry)], - data: { turbo_stream: true }, + data: { turbo_stream: true, comments_target: "form" }, html: { class: "space-y-4" }) do |form| %> - <%= form.hidden_field :language_code, value: (local_assigns[:language_code].presence || nil) %>
- <%= 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..." %> + <%= form.label :language_code, "Language", class: "block text-sm font-medium text-slate-700 mb-2" %> + <%= form.select :language_code, + options_for_select( + [["All languages", nil]] + supported_languages.map { |lang| ["#{lang.name} (#{lang.code.upcase})", lang.code] }, + local_assigns[:language_code].presence + ), + {}, + { + data: { comments_target: "languageSelect" }, + class: "block w-full px-3 py-2 border border-slate-300 rounded-lg shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" + } %>
-
+
+ <%= form.label :body, "Comment", class: "block text-sm font-medium text-slate-700 mb-2" %> + <%= form.text_area :body, rows: 4, class: "block w-full border-slate-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", placeholder: "Add your comment..." %> +
+
+ <%= 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" %>
<% end %> diff --git a/app/views/entries/_comment_modal_content.html.erb b/app/views/entries/_comment_modal_content.html.erb new file mode 100644 index 0000000..f70914b --- /dev/null +++ b/app/views/entries/_comment_modal_content.html.erb @@ -0,0 +1,9 @@ +
+
+

Add a Comment

+ +
+ <%= render "entries/comment_form", entry: entry %> +
diff --git a/app/views/entries/_comments_section.html.erb b/app/views/entries/_comments_section.html.erb index 3f8003d..9682b26 100644 --- a/app/views/entries/_comments_section.html.erb +++ b/app/views/entries/_comments_section.html.erb @@ -1,8 +1,8 @@ <% if current_user %> -
+

Discussion

-
@@ -10,15 +10,7 @@ <%= render "entries/comment_tabs", entry: entry %>
diff --git a/app/views/entries/_form_fields.html.erb b/app/views/entries/_form_fields.html.erb index 7073af4..45045af 100644 --- a/app/views/entries/_form_fields.html.erb +++ b/app/views/entries/_form_fields.html.erb @@ -2,15 +2,20 @@ # - f: form builder object # - show_category: boolean (default: true) - whether to show category field # - show_notes: boolean (default: true) - whether to show notes field + # - category_prompt: string or false (default: "Select a category") - prompt for category select, or false for no prompt %> <% show_category = local_assigns.fetch(:show_category, true) %> <% show_notes = local_assigns.fetch(:show_notes, true) %> +<% category_prompt = local_assigns.fetch(:category_prompt, "Select a category") %> <% if show_category %>
<%= f.label :category, "Category", class: "block text-sm font-semibold text-gray-700 mb-2" %> - <%= f.select :category, Entry.categories.keys.map { |cat| [cat.humanize, cat] }, { prompt: "Select a category" }, { required: true, class: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition" } %> + <%= f.select :category, + Entry.categories.keys.map { |cat| [cat.humanize, cat] }, + category_prompt ? { prompt: category_prompt } : {}, + { required: category_prompt.present?, class: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition" } %>
<% end %> diff --git a/app/views/entries/_language_comment_details.html.erb b/app/views/entries/_language_comment_details.html.erb deleted file mode 100644 index ea99160..0000000 --- a/app/views/entries/_language_comment_details.html.erb +++ /dev/null @@ -1,8 +0,0 @@ -
- - Add comment - -
- <%= render "entries/comment_form", entry: entry, language_code: language_code %> -
-
diff --git a/app/views/entries/edit.html.erb b/app/views/entries/edit.html.erb index e03004c..02cfd5c 100644 --- a/app/views/entries/edit.html.erb +++ b/app/views/entries/edit.html.erb @@ -33,41 +33,8 @@
<% end %> -
-
- <%= f.label :category, "Category", class: "block text-sm font-semibold text-gray-700 mb-2" %> - <%= f.select :category, - Entry.categories.keys.map { |key| [key.tr("_", " ").capitalize, key] }, - {}, - { class: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition" } %> -
-
- -
-

Translations (at least one required)

-
- <% %w[fi en sv no ru de].each do |lang_code| %> -
- <%= f.label lang_code.to_sym, - case lang_code - when 'fi' then '🇫🇮 Finnish' - when 'en' then '🇬🇧 English' - when 'sv' then '🇸🇪 Swedish' - when 'no' then '🇳🇴 Norwegian' - when 'ru' then '🇷🇺 Russian' - when 'de' then '🇩🇪 German' - end, - class: "block text-sm font-medium text-gray-700 mb-2" %> - <%= f.text_field lang_code.to_sym, - class: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition" %> -
- <% end %> -
-
- -
- <%= f.label :notes, "Additional Notes (optional)", class: "block text-sm font-semibold text-gray-700 mb-2" %> - <%= f.text_area :notes, rows: 4, class: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition", placeholder: "Any additional context or information about this entry..." %> +
+ <%= render 'entries/form_fields', f: f, category_prompt: false %>
diff --git a/app/views/entries/show.html.erb b/app/views/entries/show.html.erb index c3a6216..63ff525 100644 --- a/app/views/entries/show.html.erb +++ b/app/views/entries/show.html.erb @@ -13,7 +13,7 @@
-
+
<%= link_to "← Back to search", entries_path, class: "text-sm text-slate-500 hover:text-indigo-600" %>
@@ -39,14 +39,16 @@ <% next if translation.blank? %>
+
<%= "#{language.name} (#{language.code.upcase})" %> + <% if current_user %> + + <% end %> +

<%= translation %>

- <% if current_user %> -
- <%= render "entries/language_comment_details", entry: @entry, language_code: language.code %> -
- <% end %>
<% end %>