Skip to content

Commit

Permalink
feat: frontend changes based on feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@elasticspoon
elasticspoon committed Mar 1, 2024
1 parent 646dea4 commit 886328e
Show file tree
Hide file tree
Showing 8 changed files with 146 additions and 43 deletions.
12 changes: 12 additions & 0 deletions app/components/kebab_menu_component.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="sr-only"><%= @menu_title %></span>
<svg width="5" height="20" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<title><%= @menu_title %></title>
<path d="M2.5 0.9375C1.82292 0.9375 1.23698 1.17188 0.742187 1.64063C0.247396 2.10938 -7.68364e-08 2.69531 -1.07571e-07 3.39844C-1.38306e-07 4.10156 0.247396 4.70052 0.742187 5.19531C1.23698 5.6901 1.82292 5.9375 2.5 5.9375C3.17708 5.9375 3.76302 5.6901 4.25781 5.19531C4.7526 4.70052 5 4.10156 5 3.39844C5 2.69531 4.7526 2.10938 4.25781 1.64063C3.76302 1.17188 3.17708 0.9375 2.5 0.9375ZM2.5 7.5C1.82292 7.5 1.23698 7.7474 0.742187 8.24219C0.247395 8.73698 -3.66538e-07 9.32292 -3.96134e-07 10C-4.25731e-07 10.6771 0.247395 11.263 0.742187 11.7578C1.23698 12.2526 1.82292 12.5 2.5 12.5C3.17708 12.5 3.76302 12.2526 4.25781 11.7578C4.7526 11.263 5 10.6771 5 10C5 9.32292 4.7526 8.73698 4.25781 8.24219C3.76302 7.7474 3.17708 7.5 2.5 7.5ZM2.5 14.0625C1.82292 14.0625 1.23698 14.3099 0.742187 14.8047C0.247395 15.2995 -6.53963e-07 15.8984 -6.84698e-07 16.6016C-7.15432e-07 17.3047 0.247395 17.8906 0.742187 18.3594C1.23698 18.8281 1.82292 19.0625 2.5 19.0625C3.17708 19.0625 3.76302 18.8281 4.25781 18.3594C4.7526 17.8906 5 17.3047 5 16.6016C5 15.8984 4.7526 15.2995 4.25781 14.8047C3.76302 14.3099 3.17708 14.0625 2.5 14.0625Z" fill="#5D657B"/>
</svg>
</button>
<ul class="dropdown-menu">
<%= content %>
</ul>
</div>
9 changes: 9 additions & 0 deletions app/components/kebab_menu_component.rb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# frozen_string_literal: true

class KebabMenuComponent < ViewComponent::Base
renders_one :menu_content

def initialize(menu_title: "Menu")
@menu_title = menu_title
end
end
43 changes: 43 additions & 0 deletions app/components/modal_component.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<% if @has_button %>
<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="<%= "##{@id}" %>" style="width: 100%; text-align: left;">
<% if open_button %>
<%= open_button %>
<% elsif @button_value %>
<%= @button_value %>
<% else %>
Open Modal
<% end %>
</button>
<% end %>

<% if @has_modal %>
<div class="modal fade" id="<%= @id %>" tabindex="-1" aria-labelledby="<%= @id %>Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="<%= @id %>Label">
<% if @header_text %>
<%= @header_text %>
<% end %>
<% if modal_header %>
<%= modal_header %>
<% end %>
</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<% if @body_text %>
<p><%= @body_text %></p>
<% end %>
<% if modal_content %>
<%= modal_content %>
<% end %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<% if modal_footer? %><%= modal_footer %><% end %>
</div>
</div>
</div>
</div>
<% end %>
17 changes: 17 additions & 0 deletions app/components/modal_component.rb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# frozen_string_literal: true

class ModalComponent < ViewComponent::Base
renders_one :open_button
renders_one :modal_header
renders_one :modal_content
renders_one :modal_footer

def initialize(button: true, modal: true, button_value: nil, header_text: nil, body_text: nil, id: Digest::UUID.uuid_v4)
@has_button = button
@has_modal = modal
@button_value = button_value
@header_text = header_text
@body_text = body_text
@id = id
end
end
4 changes: 4 additions & 0 deletions app/helpers/view_helper.rb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
module ViewHelper
def kebab_menu(&block)
end
end
70 changes: 38 additions & 32 deletions app/views/casa_org/_contact_topics.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,42 +19,48 @@
<div class="table-wrapper table-responsive">
<table class="table striped-table" id="contact-topics">
<thead>
<tr>
<th>Question</th>
<th>Details</th>
<th>Active?</th>
<th>Actions</th>
</tr>
<tr>
<th>Question</th>
<th>Details</th>
<th>Active?</th>
</tr>
</thead>
<tbody>
<% @contact_topics.each do |contact_topic| %>
<tr id="contact_topic-<%= contact_topic.id %>">
<td scope="row" class="min-width">
<%= contact_topic.question %>
</td>
<td scope="row" class="min-width pre-line"><%= contact_topic.details %></td>
<td scope="row" class="min-width">
<%= contact_topic.active ? "Yes" : "No" %>
</td>
<td>
<%= link_to edit_contact_topic_path(contact_topic) do %>
<div class="action">
<button class="text-danger">
<i class="lni lni-pencil-alt"></i> Edit
</button>
</div>
<% @contact_topics.each do |contact_topic| %>
<tr id="contact_topic-<%= contact_topic.id %>">
<td scope="row" class="min-width">
<%= contact_topic.question %>
</td>
<td scope="row" class="min-width pre-line"><%= contact_topic.details %></td>
<td scope="row" class="min-width">
<%= contact_topic.active ? "Yes" : "No" %>
</td>
<td>
<%= render(KebabMenuComponent.new(menu_title: "Actions Menu")) do %>
<li><%= link_to "Edit", edit_contact_topic_path(contact_topic), class: "dropdown-item" %></li>
<li><%= render(ModalComponent.new( id: "contact_topic-#{contact_topic.id}", modal: false, button_value: "Delete")) %></li>
<% end %>
</td>
</tr>
<%= render(ModalComponent.new(
id: "contact_topic-#{contact_topic.id}",
button: false,
header_text: "Delete Court Report Topic?"
)) do |component| %>
<% component.with_modal_footer do %>
<%= link_to soft_delete_contact_topic_path(contact_topic), method: :delete,
class: "btn-sm main-btn danger-btn btn-hover ms-auto" do %>
<i class="lni lni-trash-can mr-10"></i>
Delete Court Report Topic
<% end %>
<% end %>
<%= link_to soft_delete_contact_topic_path(contact_topic),
method: :delete, data: { confirm: "Are you sure that you want to delete this court topic item?" } do %>
<div class="action">
<button class="text-danger">
<i class="lni lni-trash-can"></i> Delete
</button>
</div>
<% component.with_modal_content do %>
<p>This topic and its related questions will be deleted and will no longer be presented while filling out case contacts.</p>
<br>
<p>This will not affect case contacts that have already been created.</p>
<% end %>
</td>
</tr>
<% end %>
<% end %>
<% end %>
</tbody>
</table>
</div>
Expand Down
6 changes: 3 additions & 3 deletions app/views/case_contacts/form/_contact_topic_notes.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,15 @@
<div class="topic-questions collapse <%= f.object.selected ? "show" : nil %>"
id="<%= answer_id %>">
<span class="content-2">Court report questions:
<span class="content-3 collapse read-more <%= answer_id %>_details">
<span class="content-3 collapse show read-more <%= answer_id %>_details">
... <a class="content-2"
href=".<%= answer_id %>_details"
data-bs-toggle="collapse"
role="button">[read more]</a>
</span>
</span>
<p class="pre-line content-3 collapse show <%= answer_id %>_details"><%= topic.details %></p>
<span class="content-2 collapse show <%= answer_id %>_details">
<p class="pre-line content-3 collapse <%= answer_id %>_details"><%= topic.details %></p>
<span class="content-2 collapse <%= answer_id %>_details">
<a class="content-2"
data-bs-toggle="collapse"
data-bs-parent=".topic-questions"
Expand Down
28 changes: 20 additions & 8 deletions spec/system/case_contacts/create_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,14 +64,25 @@
)
end

it "has selected topics expanded" do
it "has selected topics expanded but no details expanded" do
topic_one_id = contact_topics.first.question.parameterize.underscore
topic_two_id = contact_topics.last.question.parameterize.underscore

expect(page).to have_text contact_topics.first.question
expect(page).to have_text contact_topics.first.details
expect(page).to_not have_text contact_topics.first.details

within("##{topic_one_id}") do
expect(page).to have_text("read more")
expect(page).to have_selector("##{topic_one_id} textarea")
end

expect(page).to have_text contact_topics.last.question
expect(page).to_not have_text contact_topics.last.details
expect(page).to_not have_selector("##{topic_two_id}")
end

it "expands to show and hide the text field and details", js: true do
click_on "read more"
topic_id = contact_topics.first.question.parameterize.underscore

expect(page).to have_text(contact_topics.first.question)
Expand All @@ -92,24 +103,25 @@
expect(page).to have_selector("##{topic_id} textarea")
end

it "expands to show/hide details", js: true do
it "expands to show/hide details", js: true, debug: true do
topic_id = contact_topics.first.question.parameterize.underscore

expect(page).to have_text(contact_topics.first.question)

within("##{topic_id}") do
expect(page).to have_text(contact_topics.first.details)
expect(page).to have_selector("##{topic_id} textarea")

click_on "read less"

expect(page).to_not have_text(contact_topics.first.details)
expect(page).to have_selector("##{topic_id} textarea")

click_on "read more"

expect(page).to have_text(contact_topics.first.details)
expect(page).to have_selector("##{topic_id} textarea")

sleep 0.4 # BUG: have to wait for the animation to finish
click_on "read less"

expect(page).to_not have_text(contact_topics.first.details)
expect(page).to have_selector("##{topic_id} textarea")
end
end
end
Expand Down

0 comments on commit 886328e

Please sign in to comment.