diff --git a/app/components/editable_champ/checkbox_component/checkbox_component.html.haml b/app/components/editable_champ/checkbox_component/checkbox_component.html.haml index a1e3b5e94..9d56f000b 100644 --- a/app/components/editable_champ/checkbox_component/checkbox_component.html.haml +++ b/app/components/editable_champ/checkbox_component/checkbox_component.html.haml @@ -1,4 +1,4 @@ = @form.check_box :value, - { required: @champ.required?, id: @champ.input_id, checked: @champ.true?, aria: { describedby: @champ.describedby_id } }, + { required: @champ.required?, id: @champ.input_id, checked: @champ.true?, aria: { describedby: @champ.describedby_id }, data: data_dependent_conditions }, 'true', 'false' diff --git a/app/components/editable_champ/decimal_number_component/decimal_number_component.html.haml b/app/components/editable_champ/decimal_number_component/decimal_number_component.html.haml index f0cd272a5..989a62cca 100644 --- a/app/components/editable_champ/decimal_number_component/decimal_number_component.html.haml +++ b/app/components/editable_champ/decimal_number_component/decimal_number_component.html.haml @@ -3,4 +3,5 @@ aria: { describedby: @champ.describedby_id }, step: :any, placeholder: "3.14", - required: @champ.required? + required: @champ.required?, + data: data_dependent_conditions diff --git a/app/components/editable_champ/drop_down_list_component/drop_down_list_component.html.haml b/app/components/editable_champ/drop_down_list_component/drop_down_list_component.html.haml index 612c6ba58..12ac97efd 100644 --- a/app/components/editable_champ/drop_down_list_component/drop_down_list_component.html.haml +++ b/app/components/editable_champ/drop_down_list_component/drop_down_list_component.html.haml @@ -1,6 +1,6 @@ - if @champ.options? - if @champ.render_as_radios? - %fieldset.radios + %fieldset.radios{ data: data_dependent_conditions } - @champ.enabled_non_empty_options.each do |option| %label = @form.radio_button :value, option @@ -16,7 +16,7 @@ = @form.radio_button :value, Champs::DropDownListChamp::OTHER, checked: @champ.other_value_present? Autre - else - = @form.select :value, @champ.options_without_empty_value_when_mandatory(@champ.options), { selected: @champ.selected }, required: @champ.mandatory?, id: @champ.input_id, aria: { describedby: @champ.describedby_id } + = @form.select :value, @champ.options_without_empty_value_when_mandatory(@champ.options), { selected: @champ.selected }, required: @champ.mandatory?, id: @champ.input_id, aria: { describedby: @champ.describedby_id }, data: data_dependent_conditions - if @champ.drop_down_other? = render EditableChamp::DropDownOtherInputComponent.new(form: @form, champ: @champ) diff --git a/app/components/editable_champ/drop_down_other_input_component/drop_down_other_input_component.html.haml b/app/components/editable_champ/drop_down_other_input_component/drop_down_other_input_component.html.haml index e41e1a435..e4bbc1698 100644 --- a/app/components/editable_champ/drop_down_other_input_component/drop_down_other_input_component.html.haml +++ b/app/components/editable_champ/drop_down_other_input_component/drop_down_other_input_component.html.haml @@ -1,4 +1,4 @@ .drop_down_other{ class: @champ.other_value_present? ? '' : 'hidden' } .notice %p Veuillez saisir votre autre choix - = @form.text_field :value_other, maxlength: 200, size: nil, disabled: !@champ.other_value_present? + = @form.text_field :value_other, maxlength: 200, size: nil, disabled: !@champ.other_value_present?, data: data_dependent_conditions diff --git a/app/components/editable_champ/multiple_drop_down_list_component/multiple_drop_down_list_component.html.haml b/app/components/editable_champ/multiple_drop_down_list_component/multiple_drop_down_list_component.html.haml index d088fb045..2b037daa7 100644 --- a/app/components/editable_champ/multiple_drop_down_list_component/multiple_drop_down_list_component.html.haml +++ b/app/components/editable_champ/multiple_drop_down_list_component/multiple_drop_down_list_component.html.haml @@ -1,6 +1,6 @@ - if @champ.options? - if @champ.render_as_checkboxes? - = @form.collection_check_boxes(:value, @champ.enabled_non_empty_options, :to_s, :to_s) do |b| + = @form.collection_check_boxes(:value, @champ.enabled_non_empty_options, :to_s, :to_s, data: data_dependent_conditions) do |b| - tag.div(class: 'editable-champ editable-champ-checkbox') do - b.label do - b.check_box({ multiple: true, checked: @champ&.selected_options&.include?(b.value), aria: { describedby: @champ.describedby_id } }) + b.text diff --git a/app/components/editable_champ/yes_no_component/yes_no_component.html.haml b/app/components/editable_champ/yes_no_component/yes_no_component.html.haml index 9fbd8d857..cde9421c4 100644 --- a/app/components/editable_champ/yes_no_component/yes_no_component.html.haml +++ b/app/components/editable_champ/yes_no_component/yes_no_component.html.haml @@ -1,4 +1,4 @@ -%fieldset.radios +%fieldset.radios{ data: data_dependent_conditions } %label = @form.radio_button :value, true Oui diff --git a/app/javascript/controllers/autosave_controller.ts b/app/javascript/controllers/autosave_controller.ts index 6580f26db..5026a525e 100644 --- a/app/javascript/controllers/autosave_controller.ts +++ b/app/javascript/controllers/autosave_controller.ts @@ -21,6 +21,7 @@ const { const AUTOSAVE_DEBOUNCE_DELAY = debounce_delay; const AUTOSAVE_TIMEOUT_DELAY = 60000; +const AUTOSAVE_CONDITIONAL_SPINNER_DEBOUNCE_DELAY = 200; // This is a controller we attach to each "champ" in the main form. It performs // the save and dispatches a few events that allow `AutosaveStatusController` to @@ -114,19 +115,26 @@ export class AutosaveController extends ApplicationController { this.showSpinner(target); return; } + + // for some champs, like checkbox, spinner is attached on fieldset + const parentFieldset = target.closest('fieldset'); + + if (parentFieldset?.dataset?.dependentConditions) { + this.showSpinner(parentFieldset); + } } private showSpinner(champElement: HTMLElement) { this.#spinnerTimeoutId = setTimeout(() => { - // do not do anything if there is already a spinner + // do not do anything if there is already a spinner for this champ, like SIRET champ if (!champElement.nextElementSibling?.classList.contains('spinner')) { const spinner = document.createElement('div'); - spinner.classList.add('spinner'); + spinner.classList.add('spinner', 'spinner-removable'); spinner.setAttribute('aria-live', 'live'); spinner.setAttribute('aria-label', 'Chargement en cours…'); champElement.after(spinner); } - }, 200); + }, AUTOSAVE_CONDITIONAL_SPINNER_DEBOUNCE_DELAY); } private get saveOnInput() { diff --git a/app/views/users/dossiers/update.turbo_stream.haml b/app/views/users/dossiers/update.turbo_stream.haml index c2f60b4a4..4963c0c17 100644 --- a/app/views/users/dossiers/update.turbo_stream.haml +++ b/app/views/users/dossiers/update.turbo_stream.haml @@ -7,4 +7,5 @@ = turbo_stream.morph champ.input_group_id do = render EditableChamp::EditableChampComponent.new champ:, form: -= turbo_stream.remove_all(".editable-champ .spinner"); += turbo_stream.remove_all(".editable-champ .spinner-removable"); += turbo_stream.hide_all(".editable-champ .spinner");