diff --git a/app/components/types_de_champ_editor/select_champ_position_component/select_champ_position_component.html.haml b/app/components/types_de_champ_editor/select_champ_position_component/select_champ_position_component.html.haml index 6c2635d92..35c2a7e35 100644 --- a/app/components/types_de_champ_editor/select_champ_position_component/select_champ_position_component.html.haml +++ b/app/components/types_de_champ_editor/select_champ_position_component/select_champ_position_component.html.haml @@ -1,3 +1,3 @@ -.fr-ml-3w.flex.select-position += form_with(url: move_and_morph_admin_procedure_type_de_champ_path(@coordinate.revision.procedure, @coordinate.type_de_champ.stable_id), class: 'fr-ml-3w flex', method: :patch, data: { turbo: true }) do |f| = label_tag :target_stable_id, "Déplacer le champ", for: describedby_id, class: 'flex align-center flex-no-shrink fr-mr-3w' - = select_tag :target_stable_id, options_for_select(options), id: describedby_id, class: 'fr-select', aria: { discribedby: describedby_id }, data: { 'select-champ-position-template-target': 'select', action: 'change->type-de-champ-editor#onMoveAndMorphChange', selected: @coordinate.stable_id } \ No newline at end of file + = select_tag :target_stable_id, options_for_select(options), id: describedby_id, class: 'fr-select', aria: { discribedby: describedby_id }, data: { 'select-champ-position-template-target': 'select', selected: @coordinate.stable_id } \ No newline at end of file diff --git a/app/components/types_de_champ_editor/select_champ_template_position_component/select_champ_template_position_component.html.haml b/app/components/types_de_champ_editor/select_champ_template_position_component/select_champ_template_position_component.html.haml index 5615c0dfa..c66ad1fa9 100644 --- a/app/components/types_de_champ_editor/select_champ_template_position_component/select_champ_template_position_component.html.haml +++ b/app/components/types_de_champ_editor/select_champ_template_position_component/select_champ_template_position_component.html.haml @@ -1,5 +1,5 @@ %div{ id: block_id, data: { 'select-champ-position-template-target': 'template', turbo_force: :server } } %select - %option{ selected: :selected } Selectionner une option + %option{ disabled: :disabled } Selectionner une option - @coordinates.each do |coordinate| %option{ value: coordinate.stable_id }= "#{coordinate.position} #{coordinate.libelle}" \ No newline at end of file diff --git a/app/javascript/controllers/select_champ_position_template_controller.ts b/app/javascript/controllers/select_champ_position_template_controller.ts index 73ca19d74..cd0523137 100644 --- a/app/javascript/controllers/select_champ_position_template_controller.ts +++ b/app/javascript/controllers/select_champ_position_template_controller.ts @@ -7,18 +7,14 @@ export class SelectChampPositionTemplateController extends ApplicationController }; // this element is updated via turbostream as the source of truth for all select declare readonly templateIdValue: string; - declare readonly selectTargets: HTMLSelectElement[]; selectTargetConnected(selectElement: HTMLSelectElement) { - selectElement.addEventListener('blur', this); selectElement.addEventListener('focus', this); selectElement.addEventListener('change', this); } selectTargetDisconnected(selectElement: HTMLSelectElement) { - console.log('selectTargetDisconnected'); - selectElement.removeEventListener('blur', this); selectElement.removeEventListener('focus', this); selectElement.removeEventListener('change', this); } @@ -62,9 +58,8 @@ export class SelectChampPositionTemplateController extends ApplicationController const stableIdDidChange = changedSelectTarget.value != this.getStableIdForSelect(changedSelectTarget); - if (!stableIdDidChange) { - // prevent to bulble up - event.stopImmediatePropagation(); + if (stableIdDidChange) { + changedSelectTarget.form?.requestSubmit(); } } diff --git a/app/javascript/controllers/type_de_champ_editor_controller.ts b/app/javascript/controllers/type_de_champ_editor_controller.ts index 465c13632..a813b1de0 100644 --- a/app/javascript/controllers/type_de_champ_editor_controller.ts +++ b/app/javascript/controllers/type_de_champ_editor_controller.ts @@ -17,14 +17,12 @@ export class TypeDeChampEditorController extends ApplicationController { typeDeChampStableId: String, moveUrl: String, moveUpUrl: String, - moveDownUrl: String, - moveAndMorphUrl: String + moveDownUrl: String }; declare readonly moveUrlValue: string; declare readonly moveUpUrlValue: string; declare readonly moveDownUrlValue: string; - declare readonly moveAndMorphUrlValue: string; declare readonly isVisible: boolean; #latestPromise = Promise.resolve(); @@ -56,14 +54,6 @@ export class TypeDeChampEditorController extends ApplicationController { this.requestSubmitForm(form); } - onMoveAndMorphChange(event: ActionEvent) { - const form = createForm(this.moveAndMorphUrlValue, 'patch'); - const target = event.target as HTMLSelectElement; - - createHiddenInput(form, target.name, target.value); - this.requestSubmitForm(form); - } - private onChange(event: Event) { matchInputElement(event.target, { file: (target) => { diff --git a/spec/system/administrateurs/types_de_champ_spec.rb b/spec/system/administrateurs/types_de_champ_spec.rb index 36950c9af..e86b0b775 100644 --- a/spec/system/administrateurs/types_de_champ_spec.rb +++ b/spec/system/administrateurs/types_de_champ_spec.rb @@ -233,4 +233,38 @@ describe 'As an administrateur I can edit types de champ', js: true do expect(page).to have_content("Le titre de section suivant est invalide, veuillez le corriger :") end end + + context 'move and morph champs' do + let(:procedure) { create(:procedure, types_de_champ_public: [{ type: :text, libelle: 'first_tdc' }, { type: :text, libelle: 'middle_tdc' }, { type: :text, libelle: 'last_tdc' }]) } + let!(:initial_first_coordinate) { procedure.draft_revision.revision_types_de_champ[0] } + let!(:initial_second_coordinate) { procedure.draft_revision.revision_types_de_champ[1] } + let!(:initial_third_coordinate) { procedure.draft_revision.revision_types_de_champ[2] } + # TODO: check no select when 1 champs + # TODO: check empty select when 1 champs + # TODO: check select is seeding on focus + # TODO: check select.change move champ and keep order + # TODO: select options are segmented by block + scenario 'root champs' do + initial_order = [initial_first_coordinate, initial_second_coordinate, initial_third_coordinate].map(&:stable_id) + initial_first_coordinate_selector = "##{ActionView::RecordIdentifier.dom_id(initial_first_coordinate, :move_and_morph)}" + # at first, select only contains the current coordinate + expect(page).to have_selector("#{initial_first_coordinate_selector} option", count: 1) + expect(page.find(initial_first_coordinate_selector).all("option").first.value.to_s).to eq(initial_first_coordinate.stable_id.to_s) + + # once clicked, the select is updated other options + page.find(initial_first_coordinate_selector).click + expect(page).to have_selector("#{initial_first_coordinate_selector} option", count: 4) + # also we re-hydrate the selected value + expect(page.find(initial_first_coordinate_selector).find("option[selected]").value.to_s).to eq(initial_first_coordinate.stable_id.to_s) + page.find(initial_first_coordinate_selector).select(initial_third_coordinate.libelle) + wait_until do + procedure.reload.draft_revision.revision_types_de_champ.last.type_de_champ.libelle == initial_first_coordinate.type_de_champ.libelle + end + expect(procedure.reload.draft_revision.revision_types_de_champ.map(&:stable_id)) + .to eq([initial_second_coordinate, initial_third_coordinate, initial_first_coordinate].map(&:stable_id)) + end + + scenario 'repetition champs' do + end + end end