#(feat): 6503 New case contacts table column visibility (#6945)

cliftonmcintosh · claude · web-flow · commit 2e140613c149 · 2026-05-14T12:38:07.000-07:00
* feat(#6503): add Columns button and panel HTML for case contact table Adds the Columns toolbar button with a (6/6) badge, the slide-down panel with Bootstrap toggle switches for the 6 user-configurable columns, and the CaseContact::TOGGLEABLE_COLUMNS constant that drives the panel. Date and Case columns are intentionally fixed (always visible). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(#6503): wire up Columns panel toggle Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(#6503): implement column visibility toggle and badge count Update View applies current toggle state and updates the (X/6) badge. Show All restores all columns, resets the badge, and closes the panel. Removes DataTables scrollX in favour of CSS overflow-x on the wrapper, which fixes header/body misalignment when columns are hidden. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(#6503): persist column visibility across page reloads Adds DataTables stateSave with server-side callbacks posting to PreferenceSet#table_state under key "case_contacts_table". The initComplete callback syncs toggle switch state and the badge count from the loaded state, since stateLoadCallback is async. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(tests): update dashboard jest tests to reflect removal of scrollX * fix: render filter panel above columns panel to match toolbar order * Make Medium not orderable (for now) --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
diff --git a/app/javascript/__tests__/dashboard.test.js b/app/javascript/__tests__/dashboard.test.js
@@ -69,12 +69,13 @@ describe('defineCaseContactsTable', () => {
       expect(config.searching).toBe(true)
     })
 
-    it('configures scrollX for horizontal scrolling', () => {
+    it('disables autoWidth so columns do not expand to oversized fixed widths', () => {
       defineCaseContactsTable()
 
       const config = mockDataTable.mock.calls[0][0]
 
-      expect(config.scrollX).toBe(true)
+      expect(config.autoWidth).toBe(false)
+      expect(config.scrollX).toBeUndefined()
     })
 
     it('sets default sort to Date column descending', () => {
@@ -674,7 +675,7 @@ describe('defineCaseContactsTable', () => {
       const config = mockDataTable.mock.calls[0][0]
 
       // Verify all critical config options are present
-      expect(config).toHaveProperty('scrollX')
+      expect(config).toHaveProperty('autoWidth')
       expect(config).toHaveProperty('searching')
       expect(config).toHaveProperty('processing')
       expect(config).toHaveProperty('serverSide')
diff --git a/app/javascript/src/dashboard.js b/app/javascript/src/dashboard.js
@@ -36,7 +36,37 @@ function buildExpandedContent (data) {
 
 const defineCaseContactsTable = function () {
   const table = $('table#case_contacts').DataTable({
-    scrollX: true,
+    autoWidth: false,
+    stateSave: true,
+    stateSaveCallback: function (settings, data) {
+      $.ajax({
+        url: '/preference_sets/table_state_update/' + settings.nTable.id + '_table',
+        data: { table_state: JSON.stringify(data) },
+        dataType: 'json',
+        type: 'POST',
+        error: function (jqXHR, textStatus, errorMessage) {
+          console.error(errorMessage)
+        }
+      })
+    },
+    stateSaveParams: function (settings, data) {
+      data.search.search = ''
+      return data
+    },
+    stateLoadCallback: function (settings, callback) {
+      $.ajax({
+        url: '/preference_sets/table_state/' + settings.nTable.id + '_table',
+        dataType: 'json',
+        type: 'GET',
+        success: function (json) { callback(json) }
+      })
+    },
+    initComplete: function () {
+      $('.cc-column-toggle').each(function () {
+        $(this).prop('checked', table.column($(this).data('column-index')).visible())
+      })
+      updateColumnsButtonBadge()
+    },
     searching: true,
     processing: true,
     serverSide: true,
@@ -99,6 +129,7 @@ const defineCaseContactsTable = function () {
       },
       { // Medium column (index 5)
         data: 'medium_type',
+        orderable: false,
         render: (data) => data || ''
       },
       { // Created By column (index 6)
@@ -256,6 +287,33 @@ const defineCaseContactsTable = function () {
     })
   })
 
+  function updateColumnsButtonBadge () {
+    const total = $('.cc-column-toggle').length
+    const visible = $('.cc-column-toggle:checked').length
+    $('#cc-columns-count').text(`(${visible}/${total})`).css('visibility', 'visible')
+  }
+
+  $('#cc-columns-toggle').on('click', function () {
+    $('#cc-columns-panel').toggle()
+  })
+
+  $('#cc-columns-update').on('click', function () {
+    $('.cc-column-toggle').each(function () {
+      table.column($(this).data('column-index')).visible($(this).is(':checked'))
+    })
+    updateColumnsButtonBadge()
+    $('#cc-columns-panel').hide()
+  })
+
+  $('#cc-columns-show-all').on('click', function () {
+    $('.cc-column-toggle').prop('checked', true)
+    $('.cc-column-toggle').each(function () {
+      table.column($(this).data('column-index')).visible(true)
+    })
+    updateColumnsButtonBadge()
+    $('#cc-columns-panel').hide()
+  })
+
   $('#cc-filter-toggle').on('click', function () {
     $('#cc-filter-panel').toggle()
   })
diff --git a/app/models/case_contact.rb b/app/models/case_contact.rb
@@ -191,6 +191,15 @@ def active_or_notes?
   LETTER = "letter".freeze
   CONTACT_MEDIUMS = [IN_PERSON, TEXT_EMAIL, VIDEO, VOICE_ONLY, LETTER].freeze
 
+  TOGGLEABLE_COLUMNS = [
+    {key: "relationship", label: "Relationship", index: 4},
+    {key: "medium", label: "Medium", index: 5},
+    {key: "created_by", label: "Created By", index: 6},
+    {key: "contacted", label: "Contacted", index: 7},
+    {key: "topics", label: "Topics", index: 8},
+    {key: "draft", label: "Draft", index: 9}
+  ].freeze
+
   def update_cleaning_contact_types(args)
     transaction do
       contact_types.clear
diff --git a/app/views/case_contacts/case_contacts_new_design/index.html.erb b/app/views/case_contacts/case_contacts_new_design/index.html.erb
@@ -2,10 +2,17 @@
   <h1 class="mb-20">Case Contacts</h1>
 
   <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3" id="cc-filter-toolbar">
-    <button type="button" id="cc-filter-toggle" class="main-btn secondary-btn btn-sm btn-hover">
-      <i class="lni lni-funnel mr-5" aria-hidden="true"></i>
-      Filter
-    </button>
+    <div class="d-flex gap-2">
+      <button type="button" id="cc-filter-toggle" class="main-btn secondary-btn btn-sm btn-hover">
+        <i class="lni lni-funnel mr-5" aria-hidden="true"></i>
+        Filter
+      </button>
+
+      <button type="button" id="cc-columns-toggle" class="main-btn secondary-btn btn-sm btn-hover">
+        <i class="lni lni-list mr-5" aria-hidden="true"></i>
+        Columns <span id="cc-columns-count" style="visibility: hidden">(<%= CaseContact::TOGGLEABLE_COLUMNS.length %>/<%= CaseContact::TOGGLEABLE_COLUMNS.length %>)</span>
+      </button>
+    </div>
 
     <%= link_to new_case_contact_path, class: "main-btn primary-btn btn-sm btn-hover" do %>
       <i class="lni lni-plus mr-10" aria-hidden="true"></i>
@@ -100,10 +107,36 @@
       </div>
     </div>
   </div>
+
+  <div id="cc-columns-panel" class="card-style mb-3" style="display: none;">
+    <div class="card-content">
+      <div class="row mb-3">
+        <% CaseContact::TOGGLEABLE_COLUMNS.each do |col| %>
+          <div class="col-md-4">
+            <div class="form-check form-switch">
+              <input type="checkbox"
+                     class="form-check-input cc-column-toggle"
+                     id="cc-col-<%= col[:key] %>"
+                     data-column-index="<%= col[:index] %>"
+                     role="switch"
+                     checked>
+              <label class="form-check-label" for="cc-col-<%= col[:key] %>">
+                <%= col[:label] %>
+              </label>
+            </div>
+          </div>
+        <% end %>
+      </div>
+      <div class="d-flex gap-2">
+        <button type="button" id="cc-columns-update" class="main-btn primary-btn btn-sm btn-hover">Update View</button>
+        <button type="button" id="cc-columns-show-all" class="main-btn dark-btn-outline btn-sm btn-hover">Show All</button>
+      </div>
+    </div>
+  </div>
 </div>
 
 <div class="card-style mb-30">
-  <div class="table-wrapper">
+  <div class="table-wrapper" style="overflow-x: auto">
     <table
       id="case_contacts"
       class="table"
diff --git a/spec/system/case_contacts/case_contacts_new_design_spec.rb b/spec/system/case_contacts/case_contacts_new_design_spec.rb
@@ -25,6 +25,96 @@
     end
   end
 
+  describe "columns panel" do
+    include_context "signed in as admin"
+
+    it "shows a Columns button in the toolbar" do
+      expect(page).to have_button("Columns")
+    end
+
+    it "shows a visible count badge on the Columns button" do
+      expect(page).to have_button(text: /Columns\s*\(6\/6\)/)
+    end
+
+    it "hides the columns panel by default" do
+      expect(page).not_to have_css("#cc-columns-panel", visible: true)
+    end
+
+    it "opens the columns panel when the Columns button is clicked" do
+      click_button "Columns"
+      expect(page).to have_css("#cc-columns-panel", visible: true)
+    end
+
+    it "closes the columns panel when the Columns button is clicked again" do
+      click_button "Columns"
+      click_button "Columns"
+      expect(page).not_to have_css("#cc-columns-panel", visible: true)
+    end
+
+    it "hides a column when its toggle is switched off and Update View is clicked" do
+      click_button "Columns"
+      uncheck "Medium"
+      click_button "Update View"
+
+      expect(page).not_to have_css("th", text: "Medium")
+    end
+
+    it "shows a column again when its toggle is switched back on and Update View is clicked" do
+      click_button "Columns"
+      uncheck "Medium"
+      click_button "Update View"
+
+      click_button "Columns"
+      check "Medium"
+      click_button "Update View"
+
+      expect(page).to have_css("th", text: "Medium")
+    end
+
+    it "updates the badge count when a column is hidden" do
+      click_button "Columns"
+      uncheck "Medium"
+      click_button "Update View"
+
+      expect(page).to have_button(text: /Columns\s*\(5\/6\)/)
+    end
+
+    it "shows all columns and closes the panel when Show All is clicked" do
+      click_button "Columns"
+      uncheck "Medium"
+      uncheck "Topics"
+      click_button "Update View"
+
+      click_button "Columns"
+      click_button "Show All"
+
+      expect(page).to have_css("th", text: "Medium")
+      expect(page).to have_css("th", text: "Topics")
+      expect(page).to have_button(text: /Columns\s*\(6\/6\)/)
+      expect(page).not_to have_css("#cc-columns-panel", visible: true)
+    end
+
+    it "persists hidden columns across page reloads" do
+      click_button "Columns"
+      uncheck "Medium"
+      click_button "Update View"
+
+      visit case_contacts_new_design_path
+
+      expect(page).not_to have_css("th", text: "Medium")
+      expect(page).to have_button(text: /Columns\s*\(5\/6\)/)
+    end
+
+    it "lists all 6 toggleable columns with toggle switches, all on by default" do
+      %w[Relationship Medium Contacted Topics Draft].each do |label|
+        expect(page).to have_css("#cc-columns-panel .form-switch", text: label, visible: :all)
+        expect(page).to have_field(label, checked: true, visible: :all)
+      end
+      expect(page).to have_css("#cc-columns-panel .form-switch", text: "Created By", visible: :all)
+      expect(page).to have_field("Created By", checked: true, visible: :all)
+    end
+  end
+
   describe "filter panel" do
     let!(:in_person_contact) do
       create(:case_contact, :active, casa_case: casa_case,
