feat: Responsive Filtering Implementation

Gemfile

@@ -88,7 +88,7 @@ gem "dockerfile-rails", ">= 1.2", group: :development
 gem "litestack"
 gem "inline_svg", "~> 1.9"
 gem "net-http", "~> 0.3.2"
-gem "meilisearch-rails", "~> 0.9.1"
+gem "meilisearch-rails", "~> 0.10.2"
 gem "ahoy_matey", "~> 4.2"
 gem "vite_rails", "~> 3.0"
 gem "meta-tags", "~> 2.18"

Gemfile.lock

@@ -206,10 +206,10 @@ GEM
       net-smtp
     marcel (1.0.2)
     matrix (0.4.2)
-    meilisearch (0.23.0)
+    meilisearch (0.26.0)
       httparty (>= 0.17.1, < 0.22.0)
-    meilisearch-rails (0.9.1)
-      meilisearch (~> 0.23.0)
+    meilisearch-rails (0.10.2)
+      meilisearch (~> 0.26.0)
     meta-tags (2.19.0)
       actionpack (>= 3.2.0, < 7.2)
     method_source (1.0.0)
@@ -441,7 +441,7 @@ DEPENDENCIES
   inline_svg (~> 1.9)
   jbuilder
   litestack
-  meilisearch-rails (~> 0.9.1)
+  meilisearch-rails (~> 0.10.2)
   meta-tags (~> 2.18)
   net-http (~> 0.3.2)
   pagy (~> 6.0)

app/controllers/talks_controller.rb

@@ -6,12 +6,20 @@ class TalksController < ApplicationController
   # GET /talks
   def index
     session[:talks_page] = params[:page] || 1
-    if params[:q].present?
-      talks = Talk.includes(:speakers, :event).pagy_search(params[:q])
-      @pagy, @talks = pagy_meilisearch(talks, items: 9, page: session[:talks_page]&.to_i || 1)
-    else
-      @pagy, @talks = pagy(Talk.all.order(date: :desc).includes(:speakers, :event), items: 9, page: session[:talks_page]&.to_i || 1)
-    end
+    @pagy, @talks = pagy(Talk.all.order(date: :desc).includes(:speakers, :event), items: 9, page: session[:talks_page]&.to_i || 1)
+  end
+
+  # GET /talks/search
+  def search
+    session[:talks_page] = params[:page] || 1
+    talks = Talk.includes(:speakers, :event).pagy_search(params[:q], filter: filtered_params, sort: ["date:desc"])
+    @pagy, @talks = pagy_meilisearch(talks, items: 9, page: session[:talks_page]&.to_i || 1)
+
+    render turbo_stream: turbo_stream.replace(
+      "talks",
+      partial: "talks/talks",
+      locals: {pagy: @pagy, talks: @talks}
+    )
   end
 
   # GET /talks/1
@@ -37,6 +45,19 @@ def update
 
   private
 
+  # Generates filters for talks based on non-empty 'years' and 'event_ids' parameters.
+  #
+  # @return [Array<String>] Array of filters.
+  def filtered_params
+    years = params[:years].reject(&:empty?)
+    event_ids = params[:event_ids].reject(&:empty?)
+
+    filters = []
+    filters += ["year IN #{years}"] unless years.empty?
+    filters += ["event_id IN #{event_ids}"] unless event_ids.empty?
+    filters
+  end
+
   # Use callbacks to share common setup or constraints between actions.
   def set_talk
     @talk = Talk.includes(:speakers, :event).find_by(slug: params[:slug])

app/javascript/controllers/auto_submit_controller.js

@@ -7,15 +7,25 @@ export default class extends Controller {
   initialize () {
     useDebounce(this)
 
+    this.element.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => {
+      checkbox.addEventListener('change', () => this.submit())
+    })
     this.element.addEventListener('keydown', () => this.submit())
     this.element.addEventListener('search', () => this.submit())
   }
 
   disconnect () {
+    this.element.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => {
+      checkbox.removeEventListener('change', () => this.submit())
+    })
     this.element.removeEventListener('keydown', () => this.submit())
     this.element.removeEventListener('search', () => this.submit())
   }
 
+  handleCheckbox (event) {
+    event.preventDefault()
+  }
+
   submit () {
     this.element.requestSubmit()
   }

app/javascript/controllers/filters_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['overlay', 'menu']
+
+  connect () {
+    this.overlayTarget.classList.remove('hidden')
+    this.menuTarget.classList.remove('hidden')
+  }
+
+  closeVisibility () {
+    this.overlayTarget.classList.add('hidden')
+    this.menuTarget.classList.add('hidden')
+  }
+
+  toggleVisibility () {
+    this.overlayTarget.classList.toggle('hidden')
+    this.menuTarget.classList.toggle('hidden')
+  }
+
+  syncCheckboxes (event) {
+    const responsiveCheckbox = event.target
+    let responsiveCheckboxId = responsiveCheckbox.id
+
+    // change the id of the checkbox to match the other one
+    if (responsiveCheckboxId.includes('mobile-')) {
+      responsiveCheckboxId = responsiveCheckboxId.replace('filter-mobile-', 'filter-')
+    } else {
+      responsiveCheckboxId = responsiveCheckboxId.replace('filter-', 'filter-mobile-')
+    }
+
+    document.getElementById(responsiveCheckboxId).checked = responsiveCheckbox.checked
+  }
+}

app/javascript/controllers/section_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['content', 'plus', 'minus']
+
+  toggleVisibility () {
+    this.contentTarget.classList.toggle('hidden')
+    this.toggleIcons()
+  }
+
+  toggleIcons () {
+    if (this.contentTarget.classList.contains('hidden')) {
+      this.showPlusIcon()
+    } else {
+      this.showMinusIcon()
+    }
+  }
+
+  showPlusIcon () {
+    this.plusTarget.classList.remove('hidden')
+    this.minusTarget.classList.add('hidden')
+  }
+
+  showMinusIcon () {
+    this.plusTarget.classList.add('hidden')
+    this.minusTarget.classList.remove('hidden')
+  }
+}

app/models/talk.rb

@@ -52,14 +52,20 @@ class Talk < ApplicationRecord
     attribute :thumbnail_sm
     attribute :thumbnail_md
     attribute :thumbnail_lg
+    attribute :year
+    attribute :date
     attribute :speaker_names do
       speakers.pluck(:name)
     end
     attribute :event_name do
       event_name
     end
-    searchable_attributes [:title, :description, :speaker_names, :event_name]
-    sortable_attributes [:title]
+    attribute :event_id do
+      event_id
+    end
+    filterable_attributes [:year, :event_id, :event_name]
+    searchable_attributes [:title, :description, :speaker_names, :year, :event_name]
+    sortable_attributes [:title, :date]
 
     attributes_to_highlight ["*"]
   end

app/views/talks/_filters_section.html.erb

@@ -0,0 +1,124 @@
+<div class="bg-white" data-controller="filters">
+  <div>
+    <div class="relative z-40 lg:hidden" role="dialog">
+      <%= ui_button(class: "mt-3 mb-3", data: {action: "click->filters#toggleVisibility"}) do %>
+        <%= heroicon :funnel %>
+      <% end %>
+      <div class="fixed inset-0 bg-black bg-opacity-25" data-filters-target="overlay" data-action="click->filters#closeVisibility"></div>
+      <div class="fixed top-0 right-0 bottom-0 z-40 flex w-64" data-filters-target="menu">
+        <div class="relative ml-auto flex h-full w-full max-w-xs flex-col overflow-y-auto bg-white py-4 pb-12 shadow-xl">
+          <div class="flex items-center justify-between px-4">
+            <h2 class="text-lg font-medium text-gray-900">Filters</h2>
+            <button type="button" data-action="click->filters#closeVisibility" class="-mr-2 flex h-10 w-10 items-center justify-center rounded-md bg-white p-2 text-gray-400">
+              <span class="sr-only">Close filters</span>
+              <%= heroicon :x_mark %>
+            </button>
+          </div>
+
+          <div class="border-t border-gray-200 px-4 py-6" data-controller="section">
+            <h3 class="-mx-2 -my-3 flow-root">
+              <button type="button" data-action="click->section#toggleVisibility" class="flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500">
+                  <span class="font-medium text-gray-900">Year</span>
+                  <span class="font-medium text-gray-900 hidden" data-section-target="plus">
+                    <%= heroicon :plus %>
+                  </span>
+                  <span class="font-medium text-gray-900" data-section-target="minus">
+                    <%= heroicon :minus %>
+                  </span>
+                </button>
+            </h3>
+            <div class="" data-section-target="content">
+              <div class="space-y-6">
+                <%= form.collection_check_boxes(:year, Talk.pluck(:year).compact.uniq.sort, :to_s, :to_s) do |year| %>
+                  <div class="flex items-center">
+                    <%= year.check_box(data: {action: "change->filters#syncCheckboxes"}, id: "filter-year-#{year.value}", class: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500") %>
+                    <%= label_tag "filter-mobile-year-#{year.value}", year.text, class: "ml-3 min-w-0 flex-1 text-gray-500" %>
+                  </div>
+                <% end %>
+              </div>
+            </div>
+          </div>
+
+          <div class="border-t border-gray-200 px-4 py-6" data-controller="section">
+            <h3 class="-mx-2 -my-3 flow-root">
+              <button type="button" data-action="click->section#toggleVisibility" class="flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500">
+                  <span class="font-medium text-gray-900">Event name</span>
+                  <span class="font-medium text-gray-900 hidden" data-section-target="plus">
+                    <%= heroicon :plus %>
+                  </span>
+                  <span class="font-medium text-gray-900" data-section-target="minus">
+                    <%= heroicon :minus %>
+                  </span>
+                </button>
+            </h3>
+            <div class="" data-section-target="content">
+              <div class="space-y-6">
+                <% confs = Talk.includes(:event).pluck("events.id", "events.name").uniq %>
+                <%= form.collection_check_boxes(:event_ids, confs, :first, :second) do |talk| %>
+                  <div class="flex items-center">
+                    <%= talk.check_box(class: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500") %>
+                    <%= label_tag talk.value, talk.text, class: "ml-3 min-w-0 flex-1 text-gray-500" %>
+                  </div>
+                <% end %>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <main class="mx-auto hidden lg:block">
+      <section class="pt-6">
+        <div class="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-4">
+          <div class="border-t border-gray-200 px-4 py-6" data-controller="section">
+            <h3 class="-mx-2 -my-3 flow-root">
+              <button type="button" data-action="click->section#toggleVisibility" class="flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500">
+                <span class="font-medium text-gray-900">Year</span>
+                <span class="font-medium text-gray-900" data-section-target="plus">
+                  <%= heroicon :plus %>
+                </span>
+                <span class="font-medium text-gray-900 hidden" data-section-target="minus">
+                  <%= heroicon :minus %>
+                </span>
+              </button>
+            </h3>
+            <div class="hidden" data-section-target="content">
+              <div class="space-y-6">
+                <%= form.collection_check_boxes(:years, Talk.pluck(:year).compact.uniq.sort, :to_s, :to_s) do |year| %>
+                  <div class="flex items-center">
+                    <%= year.check_box(data: {action: "change->filters#syncCheckboxes"}, id: "filter-mobile-year-#{year.value}", class: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500") %>
+                    <%= label_tag "filter-mobile-year-#{year.value}", year.text, class: "ml-3 min-w-0 flex-1 text-gray-500" %>
+                  </div>
+                <% end %>
+              </div>
+            </div>
+          </div>
+
+          <div class="border-t border-gray-200 px-4 py-6" data-controller="section">
+            <h3 class="-mx-2 -my-3 flow-root">
+              <button type="button" data-action="click->section#toggleVisibility" class="flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500">
+                <span class="font-medium text-gray-900">Event name</span>
+                <span class="font-medium text-gray-900" data-section-target="plus">
+                  <%= heroicon :plus %>
+                </span>
+                <span class="font-medium text-gray-900 hidden" data-section-target="minus">
+                  <%= heroicon :minus %>
+                </span>
+              </button>
+            </h3>
+            <div class="hidden" data-section-target="content">
+              <div class="space-y-6">
+                <%= form.collection_check_boxes(:event_ids, confs, :first, :second) do |talk| %>
+                  <div class="flex items-center">
+                    <%= talk.check_box(class: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500") %>
+                    <%= label_tag talk.value, talk.text, class: "ml-3 min-w-0 flex-1 text-gray-500" %>
+                  </div>
+                <% end %>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+</div>

app/views/talks/_talks.html.erb

@@ -0,0 +1,9 @@
+
+<%= turbo_frame_tag "talks", target: "_top" do %>
+  <div id="talks" class="grid min-w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 gallery">
+    <%= render partial: "talks/card", collection: talks, as: :talk, cache: true %>
+  </div>
+  <div class="flex mt-4 w-full">
+    <%== pagy_nav(pagy) if pagy.pages > 1 %>
+  </div>
+<% end %>

app/views/talks/index.html.erb

@@ -1,16 +1,16 @@
 <div class="container flex flex-col w-full gap-4 my-8">
   <h1 class="title">Talks</h1>
 
-  <%= form_with url: talks_path, method: :get, data: {controller: "auto-submit", turbo_frame: "talks", turbo_action: "advance"} do |form| %>
+  <%= form_with url: search_talks_path,
+        method: :get,
+        id: "search_talks",
+        data: {turbo_permanent: true,
+               controller: "auto-submit",
+               turbo_frame: "search_talks",
+               turbo_action: "replace"} do |form| %>
     <%= form.search_field :q, placeholder: "Search a talk (experimental)", class: "w-full" %>
+    <%= render partial: "filters_section", locals: {form: form} %>
   <% end %>
 
-  <%= turbo_frame_tag "talks", target: "_top" do %>
-    <div id="talks" class="grid min-w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 gallery">
-      <%= render partial: "talks/card", collection: @talks, as: :talk, cache: true %>
-    </div>
-    <div class="flex mt-4 w-full">
-      <%== pagy_nav(@pagy) if @pagy.pages > 1 %>
-    </div>
-  <% end %>
+  <%= render "talks/talks", talks: @talks, pagy: @pagy %>
 </div>

config/routes.rb

@@ -32,6 +32,9 @@
     end
   end
   resources :talks, param: :slug, only: [:index, :show, :update, :edit] do
+    collection do
+      get "search"
+    end
     scope module: :talks do
       resources :recommendations, only: [:index]
     end

tailwind.config.js

@@ -73,6 +73,8 @@ module.exports = {
     ]
   },
   plugins: [
-    require('@tailwindcss/forms'), require('daisyui')
+    require('@tailwindcss/forms'),
+    require('daisyui'),
+    require('@tailwindcss/forms')
   ]
 }