basic sort for stories

Gemfile

@@ -26,6 +26,7 @@ gem 'thredded', '~> 1.0'
 gem "simple_form" , "5.1.0"
 gem "simple_form_tailwind_css"
 gem 'kaminari'
+gem 'ransack'
 
 gem "passenger" , "6.0.15" ,  require: "phusion_passenger/rack_handler"
 gem "bootsnap", require: false

Gemfile.lock

@@ -306,6 +306,10 @@ GEM
       thor (~> 1.0)
       zeitwerk (~> 2.5)
     rake (13.0.6)
+    ransack (3.2.1)
+      activerecord (>= 6.1.5)
+      activesupport (>= 6.1.5)
+      i18n
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
@@ -429,6 +433,7 @@ DEPENDENCIES
   pg (~> 1.1)
   pundit (~> 2.3)
   rails (~> 7.0)
+  ransack
   ruby2js!
   sassc-rails
   selenium-webdriver

app/controllers/stories_controller.rb

@@ -2,7 +2,9 @@ class StoriesController < ApplicationController
   before_action :set_story, only: %i[ show edit update destroy ]
 
   def index
-    @stories = Story.all.page params[:page]
+    @q = Story.ransack(params[:q])
+    @q.sorts = 'created_at desc' if @q.sorts.empty?
+    @stories = @q.result(distinct: true).page( params[:page])
   end
 
   def show

app/views/stories/index.html.haml

@@ -1,4 +1,10 @@
 = paginate @stories
+
+.flex.justify-end
+  = sort_link(@q, :happened ,class: 'flex flex-nowrap text-md')
+  .border-r-4.mx-4
+  = sort_link(@q, :created_at , class: 'flex flex-nowrap text-md')
+
 - @stories.each do |story|
   = render_story(story)
 

config/initializers/ransack.rb

@@ -0,0 +1,18 @@
+require "ransack"
+
+Ransack.configure do |config|
+
+  config.custom_arrows = {
+    up_arrow: '<div class="mt-1 ml-1 h-0 w-0 border-x-8 border-x-transparent border-b-[16px] border-b-blue-600"></div>',
+    down_arrow: '<div class="mt-1 ml-1 h-0 w-0 border-x-8 border-x-transparent border-t-[16px] border-t-blue-600"></div>',
+  }
+  # Change default search parameter key name.
+  # Default key name is :q
+  config.search_key = :q
+
+  # Raise errors if a query contains an unknown predicate or attribute.
+  # Default is true (do not raise error on unknown conditions).
+  config.ignore_unknown_conditions = false
+
+  config.hide_sort_order_indicators = false
+end

config/tailwind.config.js

@@ -11,6 +11,7 @@ module.exports = {
   content: [
     './public/*.html',
     './app/helpers/**/*.rb',
+    './config/initializers/**/*.rb',
     './app/javascript/**/*.js',
     './app/views/**/*.{erb,haml,html,slim}' ,
     fullname , fullname2