Merge pull request #104 from cs169/feature/datatable-sort-indicators

Sortable DataTable column headers had no visual indication of sort direction or clickability.

Author: kienthuynh

app/javascript/styles/_datatable_sorting.scss

@@ -0,0 +1,49 @@
+table.dataTable > thead > tr > th {
+  position: relative;
+  padding-right: 26px;
+
+  &.sorting,
+  &.sorting_asc,
+  &.sorting_desc {
+    cursor: pointer;
+
+    &::after {
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      opacity: 0.5;
+      font-size: 0.65em;
+    }
+  }
+
+  &.sorting::after {
+    content: "▲\a▼";
+    white-space: pre;
+    line-height: 0.9;
+  }
+
+  &.sorting_asc::after {
+    content: "▲";
+    opacity: 1;
+  }
+
+  &.sorting_desc::after {
+    content: "▼";
+    opacity: 1;
+  }
+
+  &.sorting_disabled {
+    cursor: default;
+
+    &::after {
+      content: none;
+    }
+  }
+}
+
+.thead-dark th.sorting::after,
+.thead-dark th.sorting_asc::after,
+.thead-dark th.sorting_desc::after {
+  color: #fff;
+}

app/javascript/styles/application.scss

@@ -27,6 +27,7 @@ $fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
 @import 'merge_modal';
 @import './sidebar.scss';
 @import "./selectize.scss";
+@import "datatable_sorting";
 
 html {
   min-height: 100%;

features/datatable_sort_indicators.feature

@@ -0,0 +1,21 @@
+Feature: DataTables sort indicators
+  As an admin
+  So that I can tell which column is sorted and in which direction
+  Table headers show sort indicator arrows and a pointer cursor
+
+  Background:
+    Given the following schools exist:
+      | name        | country | city     | state | website                  | grade_level | school_type |
+      | UC Berkeley | US      | Berkeley | CA    | https://www.berkeley.edu | university  | public      |
+    And the following teachers exist:
+      | first_name | last_name | admin | primary_email              | school      | application_status |
+      | Admin      | User      | true  | testadminuser@berkeley.edu | UC Berkeley | Validated          |
+    Given I am on the BJC home page
+    And I have an admin email
+    And I follow "Log In"
+    Then I can log in with Google
+
+  Scenario: Teachers table headers show sort indicators and pointer cursor
+    When I go to the teachers page
+    Then sortable table headers should have sort indicators
+    And sortable table headers should have a pointer cursor

features/step_definitions/sort_indicator_steps.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+Then("sortable table headers should have sort indicators") do
+  headers = page.all("th.sorting, th.sorting_asc, th.sorting_desc")
+  expect(headers.length).to be > 0, "Expected DataTables sorting classes on <th> elements"
+  headers.each do |th|
+    pseudo_content = page.evaluate_script(
+      "window.getComputedStyle(document.querySelector('th.#{th[:class].split.first}'), '::after').getPropertyValue('content')"
+    )
+    expect(pseudo_content).not_to eq("none"),
+      "Expected ::after pseudo-element on th.#{th[:class]} but got content: #{pseudo_content}"
+  end
+end
+
+Then("sortable table headers should have a pointer cursor") do
+  header = page.first("th.sorting, th.sorting_asc, th.sorting_desc")
+  expect(header).not_to be_nil, "No sortable headers found"
+  cursor = page.evaluate_script(
+    "window.getComputedStyle(document.querySelector('th.sorting, th.sorting_asc, th.sorting_desc')).cursor"
+  )
+  expect(cursor).to eq("pointer"), "Expected cursor: pointer on sortable headers but got: #{cursor}"
+end