Use links in people dropdown and make them work with prefetch

Author: RandomTannenbaum

app/assets/stylesheets/styles.scss

@@ -310,6 +310,13 @@ pzsh-topbar {
   opacity: 1;
 }
 
+.dropdown-option {
+  width: 100%;
+  display: block;
+  text-decoration: none;
+  color: black;
+}
+
 .dropdown-option-highlighted {
   background-color: #2c97a6;
 }

app/helpers/person_helper.rb

@@ -82,6 +82,6 @@ def sorted_people
   end
 
   def people_for_select
-    Person.all.map { |p| [p.name, person_path(p)] }
+    Person.all.map { |p| [p.name, person_path(p), {'data-html': "<a href='#{person_path(p)}' class='dropdown-option'>#{p.name}</a>" }] }
   end
 end

app/javascript/controllers/dropdown_controller.js

@@ -9,11 +9,13 @@ export default class extends Controller {
       return;
 
     new SlimSelect({
-          select: this.dropdownTarget
+      select: this.dropdownTarget,
+      events: {
+        beforeChange: (newVal) => {
+          Turbo.visit(newVal[0].value)
+          return false
+        }
+      },
     });
   }
-
-  handleChange(event) {
-    window.location.href = event.target.value;
-  }
 }

app/views/layouts/application.html.haml

@@ -2,8 +2,7 @@
 %html
   %head
     // This disables the Turbo prefetch in development as it gets quite annoying when debugging
-    - if Rails.env.development?
-      %meta{:name => "turbo-prefetch", :content => "false"}/
+    %meta{:name => "turbo-prefetch", :content => "true"}/
     %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
     %title PuzzleSkills
     %meta{:content => "width=device-width,initial-scale=1", :name => "viewport"}/

app/views/people/_search.html.haml

@@ -2,7 +2,7 @@
   %div.d-flex.col-9.gap-3
     %span.col-6{"data-controller": "dropdown"}
       - selected_path = model_path_or_nil(person)
-      = select :person_id, :person, options_for_select(sorted_people, select_when_available(selected_path)), {prompt: person.nil?}, {data:{"dropdown-target": "dropdown" , action: "change->dropdown#handleChange"}}
+      = select :person_id, :person, options_for_select(sorted_people, select_when_available(selected_path)), {prompt: person.nil?}, {data:{"dropdown-target": "dropdown"}}
     %div.d-flex.align-items-center.text-gray
       = "#{t '.updated_at'}: #{@person&.last_updated_at.strftime("%d.%m.%Y")}" if @person&.last_updated_at
   %a.d-flex.justify-content-between#new-person-button