feat: Add the ability to filter items in Super Admin panel (#11020)

Gemfile.lock

@@ -799,7 +799,7 @@ GEM
     unf_ext (0.0.8.2)
     unicode-display_width (2.4.2)
     uniform_notifier (1.16.0)
-    uri (0.13.0)
+    uri (1.0.3)
     uri_template (0.7.0)
     valid_email2 (5.2.6)
       activemodel (>= 3.2)

app/assets/stylesheets/administrate/custom_styles.scss

@@ -10,7 +10,6 @@
 
   .icon-container {
     margin-right: 2px;
-
   }
 
   .value-container {

app/dashboards/account_dashboard.rb

@@ -78,7 +78,11 @@ class AccountDashboard < Administrate::BaseDashboard
   #   COLLECTION_FILTERS = {
   #     open: ->(resources) { resources.where(open: true) }
   #   }.freeze
-  COLLECTION_FILTERS = {}.freeze
+  COLLECTION_FILTERS = {
+    active: ->(resources) { resources.where(status: :active) },
+    suspended: ->(resources) { resources.where(status: :suspended) },
+    recent: ->(resources) { resources.where('created_at > ?', 30.days.ago) }
+  }.freeze
 
   # Overwrite this method to customize how accounts are displayed
   # across all pages of the admin dashboard.

app/dashboards/user_dashboard.rb

@@ -94,7 +94,12 @@ class UserDashboard < Administrate::BaseDashboard
   #   COLLECTION_FILTERS = {
   #     open: ->(resources) { resources.where(open: true) }
   #   }.freeze
-  COLLECTION_FILTERS = {}.freeze
+  COLLECTION_FILTERS = {
+    super_admin: ->(resources) { resources.where(type: 'SuperAdmin') },
+    confirmed: ->(resources) { resources.where.not(confirmed_at: nil) },
+    unconfirmed: ->(resources) { resources.where(confirmed_at: nil) },
+    recent: ->(resources) { resources.where('created_at > ?', 30.days.ago) }
+  }.freeze
 
   # Overwrite this method to customize how users are displayed
   # across all pages of the admin dashboard.

app/views/super_admin/application/_filters.html.erb

@@ -0,0 +1,63 @@
+<%#
+# Filters
+
+This partial is used on the `index` page to display available filters
+for a collection of resources.
+
+## Local variables:
+
+- `page`:
+  An instance of [Administrate::Page::Collection][1].
+  Contains helper methods to help display a table,
+  and knows which attributes should be displayed in the resource's table.
+
+[1]: http://www.rubydoc.info/gems/administrate/Administrate/Page/Collection
+%>
+
+<% 
+  # Get the dashboard class name from the resource name
+  resource_name = page.resource_name.classify
+  dashboard_class_name = "#{resource_name}Dashboard"
+  dashboard_class = dashboard_class_name.constantize
+  
+  # Get the current filter if any
+  current_filter = nil
+  if params[:search] && params[:search].include?(':')
+    current_filter = params[:search].split(':').first
+  end
+%>
+
+<% if dashboard_class.const_defined?(:COLLECTION_FILTERS) && !dashboard_class::COLLECTION_FILTERS.empty? %>
+  <div class="flex items-center bg-gray-100 border-0 rounded-md shadow-none relative w-[260px]">
+    <div class="flex items-center h-10 px-2 w-full">
+      <div class="flex items-center justify-center flex-shrink-0 mr-2 text-gray-500" title="Filter by">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
+        </svg>
+      </div>
+      <div class="flex-1 h-full min-w-0 relative">
+        <select id="filter-select" class="appearance-none bg-gray-100 border-0 text-gray-700 cursor-pointer text-sm h-full overflow-hidden truncate whitespace-nowrap w-full pr-7 pl-0 py-2 focus:outline-none bg-[url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%23293f54%27 d=%27M6 9L1 4h10z%27/%3E%3C/svg%3E')] bg-[right_0.25rem_center] bg-no-repeat bg-[length:0.75rem]" onchange="applyFilter(this.value)">
+          <option value="">All records</option>
+          <% dashboard_class::COLLECTION_FILTERS.each do |filter_name, _| %>
+            <option value="<%= filter_name %>" <%= 'selected' if filter_name.to_s == current_filter %>>
+              <%= filter_name.to_s.titleize %>
+            </option>
+          <% end %>
+        </select>
+        <% if current_filter %>
+          <a href="?" class="flex items-center justify-center rounded-full text-gray-500 text-xl font-bold h-[18px] w-[18px] leading-none absolute right-5 top-1/2 -translate-y-1/2 no-underline z-2 hover:text-gray-900" title="Clear filter">×</a>
+        <% end %>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    function applyFilter(filterName) {
+      if (filterName) {
+        window.location.href = "?search=" + encodeURIComponent(filterName) + "%3A";
+      } else {
+        window.location.href = "?";
+      }
+    }
+  </script>
+<% end %> 

app/views/super_admin/application/_search.html.erb

@@ -0,0 +1,24 @@
+<form class="search" role="search">
+  <label class="search__label" for="search">
+    <svg class="search__eyeglass-icon" role="img">
+      <title>
+        <%= t("administrate.search.label", resource: resource_name) %>
+      </title>
+      <use xlink:href="#icon-eyeglass" />
+    </svg>
+  </label>
+
+  <input class="search__input"
+         id="search"
+         type="search"
+         name="search"
+         placeholder="<%= t("administrate.search.label", resource: resource_name) %>"
+         value="<%= search_term %>">
+
+  <%= link_to clear_search_params, class: "search__clear-link" do %>
+    <svg class="search__clear-icon" role="img">
+      <title><%= t("administrate.search.clear") %></title>
+      <use xlink:href="#icon-cancel" />
+    </svg>
+  <% end %>
+</form> 

app/views/super_admin/application/index.html.erb

@@ -28,19 +28,26 @@ It renders the `_table` partial to display details about the resources.
 <% end %>
 
 <header class="main-content__header" role="banner">
-  <h1 class="main-content__page-title" id="page-title">
+  <div class="flex items-center justify-between w-full">
+    <h1 class="main-content__page-title m-0 mr-6" id="page-title">
       <%= content_for(:title) %>
     </h1>
 
+    <div class="flex items-center">
       <% if show_search_bar %>
+        <div class="flex items-center">
+          <%= render("filters", page: page) %>
+          <div class="ml-3">
             <%= render(
               "search",
               search_term: search_term,
               resource_name: display_resource_name(page.resource_name)
             ) %>
+          </div>
+        </div>
       <% end %>
 
-  <div>
+      <div class="whitespace-nowrap ml-4">
         <%= link_to(
           t(
             "administrate.actions.new_resource",
@@ -50,6 +57,8 @@ It renders the `_table` partial to display details about the resources.
           class: "button",
         ) if accessible_action?(new_resource, :new) %>
       </div>
+    </div>
+  </div>
 </header>
 
 <section class="main-content__body main-content__body--flush">