ransack + pagy but no UI yet

Gemfile

@@ -10,6 +10,7 @@ gem 'puma'
 gem 'rackup'
 gem 'rails'
 gem 'rails_semantic_logger'
+gem 'ransack'
 gem 'sprockets-rails'
 gem 'stimulus-rails'
 gem 'tailwindcss-rails'

Gemfile.lock

@@ -206,6 +206,10 @@ GEM
       zeitwerk (~> 2.6)
     rainbow (3.1.1)
     rake (13.2.1)
+    ransack (4.2.1)
+      activerecord (>= 6.1.5)
+      activesupport (>= 6.1.5)
+      i18n
     rb-fsevent (0.11.2)
     rb-inotify (0.11.1)
       ffi (~> 1.0)
@@ -318,6 +322,7 @@ DEPENDENCIES
   rails_live_reload
   rails_semantic_logger
   rainbow
+  ransack
   rubocop
   rubocop-packaging
   rubocop-performance

app/controllers/scores_controller.rb

@@ -5,7 +5,8 @@ class ScoresController < ApplicationController
   before_action :set_score, only: %i[show edit update destroy]
 
   def index
-    @pagy, @scores = pagy(Score.all)
+    @q = Score.all.ransack
+    @pagy, @scores = pagy(@q.result)
   end
 
   def show; end

app/helpers/pagy_helper.rb

@@ -1,3 +1,55 @@
 module PagyHelper
   include Pagy::Frontend
+
+  # preferable to sort_link, prepend page=1 as second args (options like) automatically
+  def pagy_sort_link(search_object, attribute, *args, &)
+    prepend_args_with_common_pagy_options(args)
+    sort_link(search_object, attribute, *args, &)
+  end
+
+  # TODO: needs some refactoring
+  def pagy_toggle_link(search_object, attribute, *args, &)
+    params = preserve_q
+    state = params.dig(:q, attribute).to_s == 'true'
+    params[:q] = params[:q].merge(archived: !state)
+
+    url = url_for(params:)
+
+    # build_toggle_field_tag("q[#{attribute}]", t("actions.#{attribute}"), state, on_change: "Turbo.visit('#{url}')")
+    build_toggle_field_tag("q[#{attribute}]", '', state, on_change: "Turbo.visit('#{url}')")
+  end
+
+  # TODO: needs some refactoring
+  def pagy_search_field(search_object, attribute, *args)
+    params = preserve_q
+    value = params.dig(:q, attribute)
+
+    args << {} unless args.last.is_a?(Hash)
+    url = url_for(params:)
+    url += url.include?('?') ? '&' : '?'
+    url += "q[#{attribute}]="
+    args.last.merge!({ onkeypress: "if (event.key === \"Enter\") {Turbo.visit('#{url}'+event.target.value)}" })
+
+    search_field_tag("q[#{attribute}]", value, *args)
+  end
+
+  # preserve ransack search parameters from default parameter 'q'
+  def preserve_q(search_object = nil)
+    { q: request.params[:q] || {} }
+  end
+
+  # in case q exists and q[:sym] exists, its content is returned else nil
+  def optional_q(sym) = request.params.fetch(:q, nil)&.fetch(sym, nil)
+
+  private
+
+  def prepend_args_with_common_pagy_options(args)
+    args << {} unless args.last.is_a?(Hash)
+    args.last.merge!(
+      { page: 1,
+        data: {
+          'turbo-action': 'advance'
+        } }
+    )
+  end
 end

app/views/scores/_score.html.erb

@@ -1,18 +1,18 @@
-<tr id="<%= dom_id score %>" class=''>
-  <td class="my-5">
+<tr class="text-sm even:bg-gray-100 dark:even:bg-gray-900 dark:text-gray-200">
+  <td class="px-2 w-full md:w-1/4">
     <%= score.name %>
   </td>
-
-  <td class="my-5">
+  <td class="px-2 hidden lg:table-cell w-full">
     <%= score.grade %>
   </td>
-
-  <td class=''>
-    <% if action_name != "show" %>
+  <td class="px-2 hidden lg:table-cell w-full">
+    <%= score.created_at %>
+  </td>
+  <td class="">
+    <div class="flex flex-row flex-nowrap mr-2">
       <%= link_to score, 'data-tooltip': 'show',class: 'mr-1 border rounded-lg border-purple-800 p-2 bg-white' do %><%=fa_icon :eye %><% end %>
       <%= link_to edit_score_path(score), 'data-tooltip': 'edit', class: 'mr-1 border rounded-lg border-purple-800 p-2 bg-white' do %><%=fa_icon :edit %><% end %>
       <%= link_to score, 'data-tooltip': 'delete', data:{ turbo_method: :delete}, class: 'border rounded-lg border-purple-800 mr-1 p-2 bg-white' do %><%=fa_icon :trash %><% end %>
-      <hr class="mt-6">
-    <% end %>
+    </div>
   </td>
 </tr>

app/views/scores/_scores.html.erb

@@ -0,0 +1,38 @@
+<%= turbo_frame_tag :scores do %>
+  <table class="min-w-full divide-gray-300 dark:divide-gray-500 divide-y-4 border-gray-200 dark:border-gray-600 border-2">
+    <thead>
+      <tr class="whitespace-nowrap text-md text-left font-semibold text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-700">
+        <th scope="col" class="p-2">
+          <%= pagy_sort_link(@q, :name, t('modules.etherpad.padname')) %>
+        </th>
+        <th scope="col" class="p-2">
+          <%= pagy_sort_link(@q, :grade, t('modules.etherpad.comment')) %>
+        </th>
+        <th scope="col" class="p-2">
+          <%= pagy_sort_link(@q, :created_at, t('modules.etherpad.created_at')) %>
+        </th>
+        <th scope="col" class="p-2">
+          Actions
+        </th>
+      </tr>
+      <tr class="text-gray-800 bg-gray-100 dark:bg-gray-600 dark:text-gray-200">
+        <th class='p-1'>
+          <%= pagy_search_field(@q, :name_cont, class: "text-sm w-full h-8 text-gray-800 dark:text-gray-400 bg-gray-200 dark:bg-gray-700") %>
+        </th>
+        <th class='p-1 hidden lg:table-cell'>
+        </th>
+        <th>
+        </th>
+        <th class='p-1 hidden sm:table-cell'>
+        </th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+      <%= render @scores %>
+    </tbody>
+  </table>
+  <div class="flex flex-col items-center justify-center text-sm text-gray-500 my-5 gap-2">
+    <%== pagy_nav @pagy %>
+    <%== pagy_info @pagy %>
+  </div>
+<%end%>

app/views/scores/index.html.erb

@@ -1,20 +1,8 @@
-<div class="w-full bg-cyan-200 p-4">
-
-  <div class="flex justify-between items-center">
+<div class="m-5 flex justify-end">
   <h1 class="font-bold text-4xl">List of Scores</h1>
   <%= link_to "New score", new_score_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
-  </div>
-
-  <table class="table-auto w-full">
-    <thead>
-      <tr class=''>
-        <th class=''>Name</th>
-        <th class=''>Grade</th>
-        <th class=''>Actions</th>
-      </tr>
-    </thead>
-    <%= render @scores %>
-  </table>
+</div>
 
-  <%== pagy_nav(@pagy) %>
+<div class="p-4 inline-block min-w-full align-middle ">
+  <%= render 'scores' %>
 </div>