diff --git a/app/components/editable_champ/linked_drop_down_list_component.rb b/app/components/editable_champ/linked_drop_down_list_component.rb index a8d5a89a0..d59781329 100644 --- a/app/components/editable_champ/linked_drop_down_list_component.rb +++ b/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 diff --git a/app/components/editable_champ/linked_drop_down_list_component/linked_drop_down_list_component.html.haml b/app/components/editable_champ/linked_drop_down_list_component/linked_drop_down_list_component.html.haml index 21c23d0d6..4ed612278 100644 --- a/app/components/editable_champ/linked_drop_down_list_component/linked_drop_down_list_component.html.haml +++ b/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, - @champ.primary_options, - {}, - { 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') : '')) - - if @champ.drop_down_secondary_description.present? - .notice{ id: "#{@champ.describedby_id}-secondary" }= render SimpleFormatComponent.new(@champ.drop_down_secondary_description, allow_a: true) - = @form.select :secondary_value, - @champ.secondary_options[@champ.primary_value], - {}, - { 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: '', disabled: @champ.has_secondary_options_for_primary? + = @form.select :primary_value, @champ.primary_options, {}, required: @champ.required?, id: @champ.input_id, aria: { describedby: @champ.describedby_id } + - if @champ.has_secondary_options_for_primary? + .secondary + = @form.label :secondary_value, for: "#{@champ.input_id}-secondary" do + - 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) + = @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 + = @form.hidden_field :secondary_value, value: '' diff --git a/app/javascript/controllers/champ_dropdown_controller.ts b/app/javascript/controllers/champ_dropdown_controller.ts index b9dbfe1e4..c65b7dd95 100644 --- a/app/javascript/controllers/champ_dropdown_controller.ts +++ b/app/javascript/controllers/champ_dropdown_controller.ts @@ -2,11 +2,8 @@ import { isSelectElement, isCheckboxOrRadioInputElement, show, - hide, - enable, - disable + hide } 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( - '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; } diff --git a/app/models/type_de_champ.rb b/app/models/type_de_champ.rb index badf1f6e3..b3ec31428 100644 --- a/app/models/type_de_champ.rb +++ b/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