From 9b6d64bda603995d438ddd6dfacc4320c30bfc4c Mon Sep 17 00:00:00 2001
From: Ryan Vasios <rvasios@wrapbook.com>
Date: Wed, 18 Feb 2026 18:23:37 -0500
Subject: [PATCH] Add sortable Created At and Updated columns to Commmunity
 News

---
 app/controllers/community_news_controller.rb  |  3 ++
 .../_community_news_results.html.erb          | 30 +++++++++++++++++--
 .../community_news/_results_skeleton.html.erb |  9 ++++++
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/app/controllers/community_news_controller.rb b/app/controllers/community_news_controller.rb
index 3b0a922a4..4fe6d7f8d 100644
--- a/app/controllers/community_news_controller.rb
+++ b/app/controllers/community_news_controller.rb
@@ -10,6 +10,9 @@ def index
       base_scope = authorized_scope(CommunityNews.includes([ :bookmarks, :primary_asset,
                                                              :author, :organization, author: :person ]))
       filtered = base_scope.search_by_params(params)
+      @sort = %w[created_at updated_at].include?(params[:sort]) ? params[:sort] : "updated_at"
+      @sort_direction = params[:direction] == "asc" ? "asc" : "desc"
+      filtered = filtered.reorder(@sort => @sort_direction)
       @community_news = filtered.paginate(page: params[:page], per_page: per_page).decorate
       @count_display = filtered.count == base_scope.count ? base_scope.count : "#{filtered.count}/#{base_scope.count}"
 
diff --git a/app/views/community_news/_community_news_results.html.erb b/app/views/community_news/_community_news_results.html.erb
index f23a09d5f..15566e8af 100644
--- a/app/views/community_news/_community_news_results.html.erb
+++ b/app/views/community_news/_community_news_results.html.erb
@@ -1,5 +1,15 @@
 <%= turbo_stream.replace("community_news_count", partial: "community_news_count") %>
 <% if @community_news.any? %>
+  <%
+    sort_base = params.permit(:title, :query, :published, :number_of_items_per_page).to_h.symbolize_keys
+    sort_icon = ->(column) {
+      if @sort == column
+        @sort_direction == "asc" ? "fa-arrow-up" : "fa-arrow-down"
+      else
+        "fa-sort"
+      end
+    }
+  %>
   <div class="overflow-x-auto bg-white border border-gray-200 rounded-xl shadow-sm animate-fade blur-on-submit">
     <table class="min-w-full divide-y divide-gray-200">
       <thead class="bg-gray-50">
@@ -7,7 +17,22 @@
           <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">Title</th>
           <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">Author</th>
           <th class="px-6 py-3 text-left text-sm font-semibold text-gray-700">Organization</th>
-          <th class="px-6 py-3 text-center text-sm font-semibold text-gray-700">Updated</th>
+          <th class="px-6 py-3 text-center text-sm font-semibold text-gray-700 whitespace-nowrap min-w-[7rem]">
+            <%= link_to community_news_index_path(sort_base.merge(sort: "created_at", direction: (@sort == "created_at" && @sort_direction == "desc") ? "asc" : "desc", page: nil)),
+                        data: { turbo_frame: "community_news_results" },
+                        class: "inline-flex items-center justify-center gap-1 text-gray-700 hover:text-gray-900" do %>
+              Created At
+              <i class="fa-solid <%= sort_icon.call("created_at") %> text-xs opacity-70"></i>
+            <% end %>
+          </th>
+          <th class="px-6 py-3 text-center text-sm font-semibold text-gray-700 whitespace-nowrap min-w-[7rem]">
+            <%= link_to community_news_index_path(sort_base.merge(sort: "updated_at", direction: (@sort == "updated_at" && @sort_direction == "desc") ? "asc" : "desc", page: nil)),
+                        data: { turbo_frame: "community_news_results" },
+                        class: "inline-flex items-center justify-center gap-1 text-gray-700 hover:text-gray-900" do %>
+              Updated
+              <i class="fa-solid <%= sort_icon.call("updated_at") %> text-xs opacity-70"></i>
+            <% end %>
+          </th>
           <th class="px-6 py-3 text-center text-sm font-semibold text-gray-700">Actions</th>
         </tr>
       </thead>
@@ -43,7 +68,8 @@
 
             <td class="px-6 py-4 text-gray-600"><%= news.organization&.name || "—" %></td>
 
-            <td class="px-6 py-4 text-center text-sm text-gray-500"><%= news.updated_at.strftime("%b %d, %Y") %></td>
+            <td class="px-6 py-4 text-center text-sm text-gray-500 whitespace-nowrap"><%= news.created_at.strftime("%b %d, %Y") %></td>
+            <td class="px-6 py-4 text-center text-sm text-gray-500 whitespace-nowrap"><%= news.updated_at.strftime("%b %d, %Y") %></td>
 
             <td class="px-6 py-4 text-right">
               <div class="inline-flex gap-2">
diff --git a/app/views/community_news/_results_skeleton.html.erb b/app/views/community_news/_results_skeleton.html.erb
index 6b23fda73..851384f32 100644
--- a/app/views/community_news/_results_skeleton.html.erb
+++ b/app/views/community_news/_results_skeleton.html.erb
@@ -19,6 +19,10 @@
           <div class="h-4 w-16 mx-auto rounded bg-gray-200"></div>
         </th>
 
+        <th class="px-6 py-3 text-center">
+          <div class="h-4 w-16 mx-auto rounded bg-gray-200"></div>
+        </th>
+
         <th class="px-6 py-3 text-right">
           <div class="h-4 w-20 ml-auto rounded bg-gray-200"></div>
         </th>
@@ -55,6 +59,11 @@
             <div class="h-4 w-52 rounded bg-gray-200"></div>
           </td>
 
+          <!-- Created At -->
+          <td class="px-6 py-4 text-center">
+            <div class="h-4 w-20 mx-auto rounded bg-gray-200"></div>
+          </td>
+
           <!-- Updated -->
           <td class="px-6 py-4 text-center">
             <div class="h-4 w-20 mx-auto rounded bg-gray-200"></div>