From 886328e457adf1bc5d10a142f4f7eb49b52e5c17 Mon Sep 17 00:00:00 2001
From: YuriBocharov <quesadillaman@gmail.com>
Date: Thu, 29 Feb 2024 18:32:19 -0500
Subject: [PATCH] feat: frontend changes based on feedback

---
 app/components/kebab_menu_component.html.erb  | 12 ++++
 app/components/kebab_menu_component.rb        |  9 +++
 app/components/modal_component.html.erb       | 43 ++++++++++++
 app/components/modal_component.rb             | 17 +++++
 app/helpers/view_helper.rb                    |  4 ++
 app/views/casa_org/_contact_topics.html.erb   | 70 ++++++++++---------
 .../form/_contact_topic_notes.html.erb        |  6 +-
 spec/system/case_contacts/create_spec.rb      | 28 +++++---
 8 files changed, 146 insertions(+), 43 deletions(-)
 create mode 100644 app/components/kebab_menu_component.html.erb
 create mode 100644 app/components/kebab_menu_component.rb
 create mode 100644 app/components/modal_component.html.erb
 create mode 100644 app/components/modal_component.rb
 create mode 100644 app/helpers/view_helper.rb

diff --git a/app/components/kebab_menu_component.html.erb b/app/components/kebab_menu_component.html.erb
new file mode 100644
index 0000000000..9904fd8358
--- /dev/null
+++ b/app/components/kebab_menu_component.html.erb
@@ -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>
diff --git a/app/components/kebab_menu_component.rb b/app/components/kebab_menu_component.rb
new file mode 100644
index 0000000000..52ae5d2a7c
--- /dev/null
+++ b/app/components/kebab_menu_component.rb
@@ -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
diff --git a/app/components/modal_component.html.erb b/app/components/modal_component.html.erb
new file mode 100644
index 0000000000..27c59567f8
--- /dev/null
+++ b/app/components/modal_component.html.erb
@@ -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 %>
diff --git a/app/components/modal_component.rb b/app/components/modal_component.rb
new file mode 100644
index 0000000000..9e51bed1d5
--- /dev/null
+++ b/app/components/modal_component.rb
@@ -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
diff --git a/app/helpers/view_helper.rb b/app/helpers/view_helper.rb
new file mode 100644
index 0000000000..f0d887e54f
--- /dev/null
+++ b/app/helpers/view_helper.rb
@@ -0,0 +1,4 @@
+module ViewHelper
+  def kebab_menu(&block)
+  end
+end
diff --git a/app/views/casa_org/_contact_topics.html.erb b/app/views/casa_org/_contact_topics.html.erb
index 26ff81f7f4..81a7273b2f 100644
--- a/app/views/casa_org/_contact_topics.html.erb
+++ b/app/views/casa_org/_contact_topics.html.erb
@@ -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>
diff --git a/app/views/case_contacts/form/_contact_topic_notes.html.erb b/app/views/case_contacts/form/_contact_topic_notes.html.erb
index 7935cbd290..5670f96c20 100644
--- a/app/views/case_contacts/form/_contact_topic_notes.html.erb
+++ b/app/views/case_contacts/form/_contact_topic_notes.html.erb
@@ -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"
diff --git a/spec/system/case_contacts/create_spec.rb b/spec/system/case_contacts/create_spec.rb
index 935d13ded7..c4e31e363b 100644
--- a/spec/system/case_contacts/create_spec.rb
+++ b/spec/system/case_contacts/create_spec.rb
@@ -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)
@@ -92,17 +103,12 @@
       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")
 
@@ -110,6 +116,12 @@
 
         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