feat(dossier): use turbo on linked lists

app/components/editable_champ/linked_drop_down_list_component.rb

@@ -1,2 +1,15 @@
 class EditableChamp::LinkedDropDownListComponent < EditableChamp::EditableChampBaseComponent
+  private
+
+  def secondary_label
+    secondary_label_text + secondary_label_mandatory
+  end
+
+  def secondary_label_text
+    @champ.drop_down_secondary_libelle.presence || "Valeur secondaire dépendant de la première"
+  end
+
+  def secondary_label_mandatory
+    @champ.mandatory? ? tag.span(' *', class: 'mandatory') : ''
+  end
 end

app/components/editable_champ/linked_drop_down_list_component/linked_drop_down_list_component.html.haml

@@ -1,16 +1,12 @@
 - if @champ.options?
-  = @form.select :primary_value,
+  = @form.select :primary_value, @champ.primary_options, {}, required: @champ.required?, id: @champ.input_id, aria: { describedby: @champ.describedby_id }
-    @champ.primary_options,
+  - if @champ.has_secondary_options_for_primary?
-    {},
+    .secondary
-    { data: { secondary_options: @champ.secondary_options }, required: @champ.required?, id: @champ.input_id, aria: { describedby: @champ.describedby_id } }
-
-  .secondary{ class: @champ.has_secondary_options_for_primary? ? '' : 'hidden' }
       = @form.label :secondary_value, for: "#{@champ.input_id}-secondary" do
-      - sanitize((@champ.drop_down_secondary_libelle.presence || "Valeur secondaire dépendant de la première") + (@champ.mandatory? ? tag.span(' *', class: 'mandatory') : ''))
+        - sanitize(secondary_label)
       - if @champ.drop_down_secondary_description.present?
-      .notice{ id: "#{@champ.describedby_id}-secondary" }= render SimpleFormatComponent.new(@champ.drop_down_secondary_description, allow_a: true)
+        .notice{ id: "#{@champ.describedby_id}-secondary" }
-    = @form.select :secondary_value,
+          = render SimpleFormatComponent.new(@champ.drop_down_secondary_description, allow_a: true)
-      @champ.secondary_options[@champ.primary_value],
+      = @form.select :secondary_value, @champ.secondary_options[@champ.primary_value], {}, required: @champ.required?, id: "#{@champ.input_id}-secondary", aria: { describedby: "#{@champ.describedby_id}-secondary" }
-      {},
+  - else
-      { data: { secondary: true }, disabled: !@champ.has_secondary_options_for_primary?, required: @champ.required?, id: "#{@champ.input_id}-secondary", aria: { describedby: "#{@champ.describedby_id}-secondary" } }
+    = @form.hidden_field :secondary_value, value: ''
-  = @form.hidden_field :secondary_value, value: '', disabled: @champ.has_secondary_options_for_primary?

app/javascript/controllers/champ_dropdown_controller.ts

@@ -2,11 +2,8 @@ import {
   isSelectElement,
   isCheckboxOrRadioInputElement,
   show,
-  hide,
+  hide
-  enable,
-  disable
 } from '@utils';
-import { z } from 'zod';
 
 import { ApplicationController } from './application_controller';
 
@@ -20,7 +17,6 @@ export class ChampDropdownController extends ApplicationController {
     if (!target.disabled) {
       if (isSelectElement(target) || isCheckboxOrRadioInputElement(target)) {
         this.toggleOtherInput(target);
-        this.toggleLinkedSelect(target);
       }
     }
   }
@@ -42,60 +38,4 @@ export class ChampDropdownController extends ApplicationController {
       }
     }
   }
-
-  private toggleLinkedSelect(target: HTMLSelectElement | HTMLInputElement) {
-    const secondaryOptions = target.dataset.secondaryOptions;
-    if (isSelectElement(target) && secondaryOptions) {
-      const parent = target.closest('.editable-champ-linked_drop_down_list');
-      const secondary = parent?.querySelector<HTMLSelectElement>(
-        'select[data-secondary]'
-      );
-      if (secondary) {
-        const options = parseOptions(secondaryOptions);
-        this.setSecondaryOptions(secondary, options[target.value]);
-      }
-    }
-  }
-
-  private setSecondaryOptions(
-    secondarySelectElement: HTMLSelectElement,
-    options: string[]
-  ) {
-    const wrapper = secondarySelectElement.closest('.secondary');
-    const hidden = wrapper?.nextElementSibling as HTMLInputElement | null;
-
-    secondarySelectElement.innerHTML = '';
-
-    if (options.length) {
-      disable(hidden);
-
-      if (secondarySelectElement.required) {
-        secondarySelectElement.appendChild(makeOption(''));
-      }
-      for (const option of options) {
-        secondarySelectElement.appendChild(makeOption(option));
-      }
-
-      secondarySelectElement.selectedIndex = 0;
-      enable(secondarySelectElement);
-      show(wrapper);
-    } else {
-      hide(wrapper);
-      disable(secondarySelectElement);
-      enable(hidden);
-    }
-  }
-}
-
-const SecondaryOptions = z.record(z.string().array());
-
-function parseOptions(options: string) {
-  return SecondaryOptions.parse(JSON.parse(options));
-}
-
-function makeOption(option: string) {
-  const element = document.createElement('option');
-  element.textContent = option;
-  element.value = option;
-  return element;
 }

app/models/type_de_champ.rb

@@ -503,7 +503,8 @@ class TypeDeChamp < ApplicationRecord
     when type_champs.fetch(:epci),
       type_champs.fetch(:communes),
       type_champs.fetch(:multiple_drop_down_list),
-      type_champs.fetch(:dossier_link)
+      type_champs.fetch(:dossier_link),
+      type_champs.fetch(:linked_drop_down_list)
       true
     else
       false