|
3 | 3 | <h3 class="text-lg font-medium text-violet-700 mb-4">Comments</h3>
|
4 | 4 |
|
5 | 5 | <% if @job_application.application_comments.any? %>
|
6 |
| - <ul role="list" class="space-y-6"> |
7 |
| - <% @job_application.application_comments.order(created_at: :desc).each do |comment| %> |
8 |
| - <li class="relative flex gap-x-4" data-comment-target="comment" data-comment-id="<%= comment.id %>"> |
9 |
| - <div class="absolute top-0 -bottom-6 left-0 flex w-6 justify-center"> |
10 |
| - <div class="w-px bg-gray-200"></div> |
11 |
| - </div> |
12 |
| - <div class="relative mt-3 size-6 flex-none rounded-full bg-violet-100 flex items-center justify-center"> |
13 |
| - <%= inline_svg_tag "user_icon.svg", class: "h-4 w-4 text-violet-600" %> |
14 |
| - </div> |
15 |
| - <div class="flex-auto rounded-md p-3 ring-1 ring-gray-200 ring-inset"> |
16 |
| - <div class="flex justify-between gap-x-4"> |
17 |
| - <div class="py-0.5 text-xs/5 text-gray-500"> |
18 |
| - <span class="font-medium text-gray-900"><%= comment.user.first_name %></span> commented |
19 |
| - </div> |
20 |
| - <div class="flex items-center gap-x-2"> |
21 |
| - <time datetime="<%= comment.created_at.iso8601 %>" class="flex-none py-0.5 text-xs/5 text-gray-500"> |
22 |
| - <%= time_ago_in_words(comment.created_at) %> ago |
23 |
| - </time> |
24 |
| - <% if comment.user == Current.user %> |
25 |
| - <div class="flex items-center gap-x-1"> |
26 |
| - <button type="button" |
27 |
| - class="text-gray-400 hover:text-gray-500" |
28 |
| - data-action="comment#edit" |
29 |
| - data-comment-id="<%= comment.id %>"> |
30 |
| - <%= inline_svg_tag "edit_icon.svg", class: "h-4 w-4" %> |
31 |
| - </button> |
32 |
| - <%= button_to employer_job_post_job_application_application_comment_path(@job_post, @job_application, comment), |
33 |
| - method: :delete, |
34 |
| - class: "text-gray-400 hover:text-gray-500", |
35 |
| - form: { class: "inline-block" }, |
36 |
| - data: { turbo: false } do %> |
37 |
| - <%= inline_svg_tag "delete_icon.svg", class: "h-4 w-4" %> |
38 |
| - <% end %> |
39 |
| - </div> |
40 |
| - <% end %> |
41 |
| - </div> |
42 |
| - </div> |
43 |
| - <div data-comment-target="content"> |
44 |
| - <p class="text-sm/6 text-gray-500"><%= comment.comment %></p> |
45 |
| - </div> |
46 |
| - <div class="hidden" data-comment-target="form"> |
47 |
| - <%= form_with(model: [:employer, @job_post, @job_application, comment], |
48 |
| - local: true, |
49 |
| - class: "mt-2") do |f| %> |
50 |
| - <%= f.text_area :comment, |
51 |
| - rows: 2, |
52 |
| - value: comment.comment, |
53 |
| - class: "block w-full rounded-md border-0 px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-violet-600 sm:text-sm sm:leading-6", |
54 |
| - data: { comment_target: "textarea" } %> |
55 |
| - <div class="mt-2 flex justify-end gap-x-2"> |
56 |
| - <button type="button" |
57 |
| - class="rounded px-2 py-1 text-sm text-gray-600 hover:text-gray-800" |
58 |
| - data-action="comment#cancelEdit"> |
59 |
| - Cancel |
60 |
| - </button> |
61 |
| - <%= f.submit "Update", |
62 |
| - class: "rounded-md bg-violet-600 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-violet-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600" %> |
63 |
| - </div> |
64 |
| - <% end %> |
65 |
| - </div> |
66 |
| - </div> |
67 |
| - </li> |
68 |
| - <% end %> |
69 |
| - </ul> |
| 6 | + <%= render "comment_item" %> |
70 | 7 | <% else %>
|
71 | 8 | <p class="text-gray-500 text-sm">No comments yet.</p>
|
72 | 9 | <% end %>
|
73 | 10 |
|
74 | 11 | <!-- New comment form -->
|
75 |
| - <div class="mt-6 flex gap-x-3"> |
76 |
| - <div class="size-6 flex-none rounded-full bg-violet-100 flex items-center justify-center"> |
77 |
| - <%= inline_svg_tag "user_icon.svg", class: "h-4 w-4 text-violet-600" %> |
78 |
| - </div> |
79 |
| - <%= form_with(model: [:employer, @job_post, @job_application, ApplicationComment.new], local: true, class: "relative flex-auto") do |f| %> |
80 |
| - <div class="overflow-hidden rounded-lg pb-12 outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600"> |
81 |
| - <%= f.label :comment, "Add your comment", class: "sr-only" %> |
82 |
| - <%= f.text_area :comment, rows: 2, |
83 |
| - class: "block w-full resize-none bg-transparent px-3 py-1.5 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6", |
84 |
| - placeholder: "Add your comment..." %> |
85 |
| - </div> |
86 |
| - |
87 |
| - <div class="absolute inset-x-0 bottom-0 flex justify-between py-2 pr-2 pl-3"> |
88 |
| - <div class="flex items-center space-x-5"> |
89 |
| - <%= f.submit "Post", class: "rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %> |
90 |
| - </div> |
91 |
| - </div> |
92 |
| - <% end %> |
93 |
| - </div> |
| 12 | + <%= render "comment_form" %> |
94 | 13 | </div>
|
0 commit comments