Merge pull request #3360 from tchak/better-champs-editor

Des améliorations sur le nouvel éditeur de champs

app/helpers/procedure_helper.rb

@@ -89,6 +89,9 @@ module ProcedureHelper
     .merge(include: TYPES_DE_CHAMP_INCLUDE.merge(types_de_champ: TYPES_DE_CHAMP_BASE))
 
   def types_de_champ_as_json(types_de_champ)
-    types_de_champ.as_json(TYPES_DE_CHAMP)
+    types_de_champ.includes(:drop_down_list,
+      piece_justificative_template_attachment: :blob,
+      types_de_champ: [:drop_down_list, piece_justificative_template_attachment: :blob])
+      .as_json(TYPES_DE_CHAMP)
   end
 end

app/javascript/new_design/administrateur/DraggableItem.js

@@ -130,9 +130,7 @@ export default {
     addChamp() {
       this.typesDeChamp.push({
         type_champ: 'text',
-        drop_down_list: {},
-        types_de_champ: [],
-        options: {}
+        types_de_champ: []
       });
     }
   }

app/javascript/new_design/administrateur/champs-editor.js

@@ -53,6 +53,14 @@ function initEditor(el) {
 
       this.update = update;
       this.updateAll = updateAll;
+
+      // We add an initial type de champ here if form is empty
+      if (this.state.typesDeChamp.length === 0) {
+        this.state.typesDeChamp.push({
+          type_champ: 'text',
+          types_de_champ: []
+        });
+      }
     }
   });
 }

app/javascript/new_design/champs/linked-drop-down-list.js

@@ -1,29 +1,28 @@
-addEventListener('turbolinks:load', () => {
-  const primaries = document.querySelectorAll('select[data-secondary-options]');
+import { delegate } from '@utils';
 
-  for (let primary of primaries) {
-    let secondary = document.querySelector(
-      `select[data-secondary-id="${primary.dataset.primaryId}"]`
-    );
-    let secondaryOptions = JSON.parse(primary.dataset.secondaryOptions);
+const PRIMARY_SELECTOR = 'select[data-secondary-options]';
+const SECONDARY_SELECTOR = 'select[data-secondary]';
+const CHAMP_SELECTOR = '.editable-champ';
 
-    primary.addEventListener('change', e => {
-      let option, options, element;
+delegate('change', PRIMARY_SELECTOR, evt => {
+  const primary = evt.target;
+  const secondary = primary
+    .closest(CHAMP_SELECTOR)
+    .querySelector(SECONDARY_SELECTOR);
+  const options = JSON.parse(primary.dataset.secondaryOptions);
 
-      while ((option = secondary.firstChild)) {
-        secondary.removeChild(option);
-      }
-
-      options = secondaryOptions[e.target.value];
-
-      for (let option of options) {
-        element = document.createElement('option');
-        element.textContent = option;
-        element.value = option;
-        secondary.appendChild(element);
-      }
-
-      secondary.selectedIndex = 0;
-    });
-  }
+  selectOptions(secondary, options[primary.value]);
 });
+
+function selectOptions(selectElement, options) {
+  selectElement.innerHTML = '';
+
+  for (let option of options) {
+    let element = document.createElement('option');
+    element.textContent = option;
+    element.value = option;
+    selectElement.appendChild(element);
+  }
+
+  selectElement.selectedIndex = 0;
+}

app/javascript/new_design/champs/repetition.js

@@ -4,21 +4,19 @@ const BUTTON_SELECTOR = '.button.remove-row';
 const DESTROY_INPUT_SELECTOR = 'input[type=hidden][name*=_destroy]';
 const CHAMP_SELECTOR = '.editable-champ';
 
-addEventListener('turbolinks:load', () => {
-  delegate('click', BUTTON_SELECTOR, evt => {
-    evt.preventDefault();
+delegate('click', BUTTON_SELECTOR, evt => {
+  evt.preventDefault();
 
-    const row = evt.target.closest('.row');
+  const row = evt.target.closest('.row');
 
-    for (let input of row.querySelectorAll(DESTROY_INPUT_SELECTOR)) {
-      input.disabled = false;
-      input.value = true;
-    }
-    for (let champ of row.querySelectorAll(CHAMP_SELECTOR)) {
-      champ.remove();
-    }
+  for (let input of row.querySelectorAll(DESTROY_INPUT_SELECTOR)) {
+    input.disabled = false;
+    input.value = true;
+  }
+  for (let champ of row.querySelectorAll(CHAMP_SELECTOR)) {
+    champ.remove();
+  }
 
-    evt.target.remove();
-    row.classList.remove('row');
-  });
+  evt.target.remove();
+  row.classList.remove('row');
 });

app/views/shared/dossiers/editable_champs/_linked_drop_down_list.html.haml

@@ -1,10 +1,9 @@
 - if champ.drop_down_list && champ.drop_down_list.options.any?
-  - champ_id = champ.object_id
   = form.select :primary_value,
     champ.primary_options,
     { required: champ.mandatory? },
-    { data: { "secondary-options" => champ.secondary_options, "primary-id" => champ_id } }
+    { data: { secondary_options: champ.secondary_options } }
   = form.select :secondary_value,
     champ.secondary_options[champ.primary_value],
     { required: champ.mandatory? },
-    { data: { "secondary-id" => champ_id } }
+    { data: { secondary: true } }

spec/features/admin/procedure_creation_spec.rb

@@ -100,9 +100,6 @@ feature 'As an administrateur I wanna create a new procedure', js: true do
         page.refresh
         expect(page).to have_current_path(champs_procedure_path(Procedure.last))
 
-        within '.footer' do
-          click_on 'Ajouter un champ'
-        end
         expect(page).to have_selector('#procedure_types_de_champ_attributes_0_libelle')
         fill_in 'procedure_types_de_champ_attributes_0_libelle', with: 'libelle de champ'
         expect(page).to have_content('Formulaire mis à jour')
@@ -131,9 +128,6 @@ feature 'As an administrateur I wanna create a new procedure', js: true do
       scenario 'After adding champ and file, make publication' do
         page.refresh
 
-        within '.footer' do
-          click_on 'Ajouter un champ'
-        end
         fill_in 'procedure_types_de_champ_attributes_0_libelle', with: 'libelle de champ'
         expect(page).to have_content('Formulaire mis à jour')
 

spec/features/new_administrateur/procedures_spec.rb

@@ -11,6 +11,8 @@ feature 'As an administrateur I edit procedure', js: true do
   end
 
   it "Add a new champ" do
+    click_on 'Supprimer'
+
     within '.footer' do
       click_on 'Ajouter un champ'
     end
@@ -31,7 +33,6 @@ feature 'As an administrateur I edit procedure', js: true do
       click_on 'Ajouter un champ'
       click_on 'Ajouter un champ'
       click_on 'Ajouter un champ'
-      click_on 'Ajouter un champ'
     end
     expect(page).not_to have_content('Le libellé doit être rempli.')
     expect(page).not_to have_content('Modifications non sauvegardées.')
@@ -66,9 +67,6 @@ feature 'As an administrateur I edit procedure', js: true do
   end
 
   it "Remove champs" do
-    within '.footer' do
-      click_on 'Ajouter un champ'
-    end
     fill_in 'procedure_types_de_champ_attributes_0_libelle', with: 'libellé de champ'
     expect(page).to have_content('Formulaire mis à jour')
     page.refresh
@@ -78,13 +76,10 @@ feature 'As an administrateur I edit procedure', js: true do
     expect(page).not_to have_content('Supprimer')
     page.refresh
 
-    expect(page).not_to have_content('Supprimer')
+    expect(page).to have_content('Supprimer', count: 1)
   end
 
   it "Only add valid champs" do
-    within '.footer' do
-      click_on 'Ajouter un champ'
-    end
     expect(page).to have_selector('#procedure_types_de_champ_attributes_0_description')
     fill_in 'procedure_types_de_champ_attributes_0_description', with: 'déscription du champ'
     expect(page).to have_content('Le libellé doit être rempli.')
@@ -95,9 +90,6 @@ feature 'As an administrateur I edit procedure', js: true do
   end
 
   it "Add repetition champ" do
-    within '.footer' do
-      click_on 'Ajouter un champ'
-    end
     expect(page).to have_selector('#procedure_types_de_champ_attributes_0_libelle')
     select('Bloc répétable', from: 'procedure_types_de_champ_attributes_0_type_champ')
     fill_in 'procedure_types_de_champ_attributes_0_libelle', with: 'libellé de champ'

spec/features/new_user/linked_dropdown_spec.rb

@@ -74,7 +74,8 @@ feature 'linked dropdown lists' do
 
   def secondary_id_for(libelle)
     primary_id = primary_id_for(libelle)
-    link = find("\##{primary_id}")['data-primary-id']
-    find("[data-secondary-id=\"#{link}\"]")['id']
+    find("\##{primary_id}")
+      .ancestor('.editable-champ')
+      .find("[data-secondary]")['id']
   end
 end