Feature/755 make links and dropdowns turbo 8 friendly

app/assets/stylesheets/styles.scss

@@ -310,6 +310,18 @@ pzsh-topbar {
   opacity: 1;
 }
 
+.dropdown-option-link {
+  width: 100%;
+  display: block;
+  text-decoration: none;
+  color: black;
+  padding: 5px 7px;
+}
+
+.ss-main .dropdown-option-link {
+  padding: 0;
+}
+
 .dropdown-option-highlighted {
   background-color: #2c97a6;
 }
@@ -374,4 +386,8 @@ a > img {
 
 .x-img {
   cursor: pointer;
+}
+
+.language-selector {
+  width: 20rem;
 }

app/helpers/auth_helper.rb

@@ -26,7 +26,13 @@ def devise?
   def language_selector
     languages = I18n.available_locales.map { |e| e.to_s }.map do |lang_code|
       language = I18nData.languages(lang_code)[lang_code.upcase]
-      [language.capitalize, url_for(locale: lang_code)]
+      [
+        language.capitalize, url_for(locale: lang_code),
+        {
+          'data-html': "<a href='#{url_for(locale: lang_code)}' class='dropdown-option-link'>#{language}</a>",
+          class: 'p-0'
+        }
+      ]
     end
     options_for_select(languages, url_for(locale: I18n.locale))
   end

app/helpers/person_helper.rb

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

app/javascript/controllers/dropdown_controller.js

@@ -9,11 +9,18 @@ export default class extends Controller {
       return;
 
     new SlimSelect({
-          select: this.dropdownTarget
-    });
-  }
+      select: this.dropdownTarget,
+      events: {
+        beforeChange: (newVal) => {
+          newVal = newVal[0];
 
-  handleChange(event) {
-    window.location.href = event.target.value;
+          // Check if dropdown element is a link
+          if(newVal.html.startsWith("<a")) {
+            Turbo.visit(newVal.value);
+            return false;
+          }
+        }
+      },
+    });
   }
 }

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"}/
@@ -20,11 +19,11 @@
             %div.d-flex
               %div.mb-1.mt-1
                 %img{:src=> "/assets/logo.svg",:height=>"32"}
-              %text.d-flex.align-items-end.ms-2.small= "5.0.0"
+              %text.d-flex.align-items-end.ms-2.small= "5.1.0"
           %ul.navbar.text-gray
             -# Language selector
-            %li.d-flex.align-items-center.cursor-pointer.border-start.border-end.h-100.ps-2.pe-2{"data-controller": "dropdown"}
-              = select :i18n, :language, language_selector, {}, class: "form-control", data:{action: "change->dropdown#handleChange"}
+            %li.d-flex.align-items-center.cursor-pointer.border-start.border-end.h-100.ps-2.pe-2.language-selector{"data-controller": "dropdown"}
+              = select :i18n, :language, language_selector, {}, class: "form-control", data:{"dropdown-target": "dropdown"}
             -# Devise/Mockdata
             - if Rails.env.development?
               %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.border-end.h-100

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

spec/support/slimselect_helpers.rb

@@ -1,7 +1,7 @@
 module SlimselectHelpers
   def select_from_slim_select(selector, option_text, create_if_missing=false)
     ss_open(selector)
-    if(create_if_missing)
+    if create_if_missing
       ss_create(selector, option_text)
     else
       ss_select_text(selector, option_text)
@@ -51,6 +51,13 @@ def ss_select_text(selector, option_text)
 
   def ss_select(selector, option_value)
     call(selector, "setSelected", option_value)
+
+    # Manually call the beforeChange event because we manually update the slim select object, which doesn't trigger the event callback
+
+    # Check if option_value is a path
+    if option_value.starts_with? '/'
+      evaluate_script("document.querySelector('#person_id_person').slim.events.beforeChange([{value: '#{option_value}', html: '<a></a>'}])")
+    end
   end
 
   def ss_search(selector, text)