Render contact topics as pill badges in case contacts table

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>

Author: cliftonmcintosh

app/datatables/case_contact_datatable.rb

@@ -29,7 +29,7 @@ def data
         },
         contact_made: case_contact.contact_made,
         duration_minutes: case_contact.duration_minutes,
-        contact_topics: case_contact.contact_topics.map(&:question).join(" | "),
+        contact_topics: case_contact.contact_topics.map(&:question),
         contact_topic_answers: case_contact.contact_topic_answers
                                .reject { |a| a.value.blank? }
                                .map { |a| { question: a.contact_topic&.question, value: a.value } },

app/javascript/__tests__/dashboard.test.js

@@ -309,9 +309,33 @@ describe('defineCaseContactsTable', () => {
         expect(columns[8].orderable).toBe(false)
       })
 
-      it('renders contact topics string', () => {
-        expect(columns[8].render('Topic 1 | Topic 2')).toBe('Topic 1 | Topic 2')
+      it('renders each topic as a pill badge', () => {
+        const rendered = columns[8].render(['Topic 1', 'Topic 2'])
+        expect(rendered).toContain('<span class="badge badge-pill light-bg text-black">Topic 1</span>')
+        expect(rendered).toContain('<span class="badge badge-pill light-bg text-black">Topic 2</span>')
+      })
+
+      it('renders empty string when there are no topics', () => {
         expect(columns[8].render(null)).toBe('')
+        expect(columns[8].render([])).toBe('')
+      })
+
+      it('shows only the first two topics when there are more than two', () => {
+        const rendered = columns[8].render(['A', 'B', 'C', 'D'])
+        expect(rendered).toContain('>A<')
+        expect(rendered).toContain('>B<')
+        expect(rendered).not.toContain('>C<')
+        expect(rendered).not.toContain('>D<')
+      })
+
+      it('shows a +N More badge for overflow topics', () => {
+        const rendered = columns[8].render(['A', 'B', 'C', 'D'])
+        expect(rendered).toContain('+2 More')
+      })
+
+      it('does not show an overflow badge when there are two or fewer topics', () => {
+        expect(columns[8].render(['A', 'B'])).not.toContain('More')
+        expect(columns[8].render(['A'])).not.toContain('More')
       })
     })
 

app/javascript/src/dashboard.js

@@ -3,6 +3,21 @@
 const { Notifier } = require('./notifier')
 let pageNotifier
 
+const MAX_VISIBLE_TOPIC_PILLS = 2
+
+function buildTopicPills (topics) {
+  if (!topics || topics.length === 0) return ''
+  const visible = topics.slice(0, MAX_VISIBLE_TOPIC_PILLS)
+  const overflowCount = topics.length - visible.length
+  const pills = visible
+    .map(topic => `<span class="badge badge-pill light-bg text-black">${topic}</span>`)
+    .join(' ')
+  const overflowPill = overflowCount > 0
+    ? ` <span class="badge badge-pill light-bg text-black">+${overflowCount} More</span>`
+    : ''
+  return pills + overflowPill
+}
+
 function buildExpandedContent (data) {
   const answers = (data.contact_topic_answers || [])
     .map(answer => `<div class="expanded-topic"><strong>${answer.question}</strong><p>${answer.value}</p></div>`)
@@ -120,7 +135,7 @@ const defineCaseContactsTable = function () {
       { // Topics column (index 8)
         data: 'contact_topics',
         orderable: false,
-        render: (data) => data || ''
+        render: (data) => buildTopicPills(data)
       },
       { // Draft column (index 9)
         data: 'is_draft',

spec/requests/case_contacts/case_contacts_new_design_spec.rb

@@ -239,6 +239,31 @@
           expect(record[:notes]).to be_blank
         end
       end
+
+      context "contact_topics field" do
+        let(:contact_topic) { create(:contact_topic, casa_org: organization) }
+        let(:case_contact_with_topics) { create(:case_contact, :active, casa_case: casa_case) }
+
+        before do
+          case_contact_with_topics.contact_topics << contact_topic
+        end
+
+        it "returns contact_topics as an array of strings" do
+          post datatable_case_contacts_new_design_path, params: datatable_params, as: :json
+
+          json = JSON.parse(response.body, symbolize_names: true)
+          record = json[:data].find { |d| d[:id] == case_contact_with_topics.id.to_s }
+          expect(record[:contact_topics]).to be_an(Array)
+        end
+
+        it "includes the topic question in the array" do
+          post datatable_case_contacts_new_design_path, params: datatable_params, as: :json
+
+          json = JSON.parse(response.body, symbolize_names: true)
+          record = json[:data].find { |d| d[:id] == case_contact_with_topics.id.to_s }
+          expect(record[:contact_topics]).to include(contact_topic.question)
+        end
+      end
     end
   end
 end