refactor comments, select language
This commit is contained in:
@@ -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 %>
|
||||
<script>
|
||||
document.getElementById('comment_form_modal').classList.add('hidden');
|
||||
</script>
|
||||
<% end %>
|
||||
|
||||
@@ -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) %>
|
||||
<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..." %>
|
||||
<%= 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"
|
||||
} %>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<div>
|
||||
<%= 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..." %>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button type="button" data-action="click->comments#closeWithButton" class="px-4 py-2 text-sm font-medium text-slate-700 hover:text-slate-900 transition">
|
||||
Cancel
|
||||
</button>
|
||||
<%= 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,9 @@
|
||||
<div data-action="click->comments#stopPropagation" class="bg-white rounded-lg shadow-xl p-6 w-full max-w-lg">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h4 class="text-lg font-bold">Add a Comment</h4>
|
||||
<button data-action="click->comments#closeWithButton" class="text-slate-500 hover:text-slate-700 text-2xl leading-none">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<%= render "entries/comment_form", entry: entry %>
|
||||
</div>
|
||||
@@ -1,8 +1,8 @@
|
||||
<% if current_user %>
|
||||
<div class="mt-8" data-controller="comments">
|
||||
<div class="mt-8">
|
||||
<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">
|
||||
<button data-action="click->comments#open" 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>
|
||||
@@ -10,15 +10,7 @@
|
||||
<%= 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">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<%= render "entries/comment_form", entry: entry %>
|
||||
</div>
|
||||
<%= render "entries/comment_modal_content", entry: entry %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -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 %>
|
||||
<div>
|
||||
<%= 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" } %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
<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>
|
||||
@@ -33,41 +33,8 @@
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<%= 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" } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-200 pt-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">Translations (at least one required)</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<% %w[fi en sv no ru de].each do |lang_code| %>
|
||||
<div>
|
||||
<%= 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" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= 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..." %>
|
||||
<div class="space-y-6">
|
||||
<%= render 'entries/form_fields', f: f, category_prompt: false %>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 pt-4">
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="max-w-5xl mx-auto px-4 py-8 space-y-6">
|
||||
<main class="max-w-5xl mx-auto px-4 py-8 space-y-6" data-controller="comments">
|
||||
<div>
|
||||
<%= link_to "← Back to search", entries_path, class: "text-sm text-slate-500 hover:text-indigo-600" %>
|
||||
</div>
|
||||
@@ -39,14 +39,16 @@
|
||||
<% next if translation.blank? %>
|
||||
<div class="space-y-2">
|
||||
<div class="grid grid-cols-2">
|
||||
<div>
|
||||
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-tight"><%= "#{language.name} (#{language.code.upcase})" %></span>
|
||||
<% if current_user %>
|
||||
<button data-action="click->comments#open" data-language-code="<%= language.code %>" class="text-[10px] ml-3 font-bold uppercase text-indigo-400 hover:text-indigo-600 transition">
|
||||
Add Comment
|
||||
</button>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-2xl font-semibold text-slate-800"><%= translation %></p>
|
||||
<% if current_user %>
|
||||
<div id="comment-details-<%= language.code %>">
|
||||
<%= render "entries/language_comment_details", entry: @entry, language_code: language.code %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user