FrontEnd to add New type champs at a procedure.

=> Save into database not implement for the moment

app/assets/javascripts/procedure.js

@@ -0,0 +1,37 @@
+var ready;
+
+ready = function () {
+    $("#add_type_de_champs_procedure").on('click', function (e) {
+        add_new_type_de_champs();
+
+        e.stopPropagation();
+        return false;
+    });
+};
+
+$(document).ready(ready);
+$(document).on('page:load', ready);
+
+function add_new_type_de_champs() {
+    var index_id = "#type_de_champs_" + types_de_champs_index;
+
+    $("#liste_champs").append($(index_id));
+    $("#new_type_de_champs").append($(index_id).clone());
+    types_de_champs_index++;
+
+    $("#new_type_de_champs .form-inline").attr('id', 'type_de_champs_' + types_de_champs_index);
+
+    $("#new_type_de_champs #libelle").attr('name', 'type_de_champs[' + types_de_champs_index + '][libelle]');
+    $("#new_type_de_champs #libelle").val('');
+
+    $("#new_type_de_champs #description").attr('name', 'type_de_champs[' + types_de_champs_index + '][description]');
+    $("#new_type_de_champs #description").val('');
+
+    $("#new_type_de_champs #type_champs").attr('name', 'type_de_champs[' + types_de_champs_index + '][type]');
+
+    $("#new_type_de_champs #order_place").attr('name', 'type_de_champs[' + types_de_champs_index + '][order_place]');
+    $("#new_type_de_champs #order_place").val(types_de_champs_index+1);
+
+    $("#new_type_de_champs #add_type_de_champs_button").remove();
+    $("#new_type_de_champs .form-inline").append($("#add_type_de_champs_button"))
+}

app/views/admin/procedures/_informations.html.haml

@@ -27,12 +27,14 @@
 
 %br
 %br
-%h4
+%h3.text-info
   Liste des champs à remplir pour un dossier
 
+=render partial: 'admin/procedures/types_de_champs/liste', locals: {f: f}
+
 %br
 %br
-%h4
+%h3.text-info
   Liste des pièces justificatives à fournir pour un dossier
 
 

app/views/admin/procedures/new.html.haml

@@ -4,3 +4,5 @@
   = form_for @procedure, url: {controller: 'admin/procedures', action: :create} do |f|
     =render partial: 'informations', locals: {f: f}
     =f.submit 'Valider', class: 'btn btn-info', style: 'float:right'
+%br
+%br

app/views/admin/procedures/show.html.haml

@@ -5,3 +5,5 @@
   = form_for @procedure, url: {controller: 'admin/procedures', action: :update} do |f|
     =render partial: 'informations', locals: {f: f}
     =f.submit 'Editer', class: 'btn btn-success', style: 'float:right'
+%br
+%br

app/views/admin/procedures/types_de_champs/_form.html.haml

@@ -0,0 +1,29 @@
+.form-inline{id:"type_de_champs_#{index}", style: 'padding-bottom:8px'}
+  .form-group{ style: 'padding-right: 2%' }
+    %h4 Libellé
+    %input.form-control#libelle{ type: 'text', placeholder: 'Libelle', name:"type_de_champs[#{index}][libelle]", size: 40, value: ("#{ type_de_champs.libelle }" unless type_de_champs.nil? )  }
+
+  .form-group{ style: 'padding-right: 2%' }
+    %h4 Type
+    %select.form-control#type_champs{ name: "type_de_champs[#{index}][type]" }
+      %option{ value: 'text', selected: (type_de_champs.type_champs == 'text' unless type_de_champs.nil?)}
+        Simple texte
+      %option{ value: 'textarea', selected: (type_de_champs.type_champs == 'textarea' unless type_de_champs.nil?)}
+        Texte multi-lignes
+      %option{ value: 'datetime', selected: (type_de_champs.type_champs == 'datetime' unless type_de_champs.nil?)}
+        Date
+      %option{ value: 'number', selected: (type_de_champs.type_champs == 'number' unless type_de_champs.nil?)}
+        Valeur numérique
+
+  .form-group{ style: 'padding-right: 2%' }
+    %h4
+      Description
+    %textarea.form-control#description{cols: 60, placeholder: 'Description', name: "type_de_champs[#{index}][description]"}
+      =("#{ type_de_champs.description }" unless type_de_champs.nil? )
+
+  %input#order_place{type: 'hidden', name: "type_de_champs[#{index}][order_place]", value: (("#{ type_de_champs.order_place}" unless type_de_champs.nil?) || index+1)}
+
+  -if type_de_champs.nil?
+    .form-group#add_type_de_champs_button
+      %br  
+      %button.form-control.btn.btn-success#add_type_de_champs_procedure Ajouter

app/views/admin/procedures/types_de_champs/_liste.html.haml

@@ -0,0 +1,10 @@
+#liste_champs
+  -if @procedure.types_de_champs.size > 0
+    - @procedure.types_de_champs.order(:order_place).each_with_index do |type_de_champs, index|
+      =render partial: 'admin/procedures/types_de_champs/form', locals:{ type_de_champs: type_de_champs, index: index }
+
+#new_type_de_champs
+  =render partial: 'admin/procedures/types_de_champs/form', locals:{ type_de_champs: nil, index: @procedure.types_de_champs.size }
+
+%script{ type:'text/javascript' }
+  ="var types_de_champs_index = #{@procedure.types_de_champs.size}"

spec/factories/procedure.rb

@@ -4,6 +4,14 @@ FactoryGirl.define do
     libelle 'Demande de subvention'
     description "Demande de subvention à l'intention des associations"
 
+    trait :with_type_de_champs do
+      after(:build) do |procedure, _evaluator|
+        type_de_champs = create(:type_de_champs)
+
+        procedure.type_de_champs << type_de_champs
+      end
+    end
+
     trait :with_two_type_de_piece_justificative do
       after(:build) do |procedure, _evaluator|
         rib = create(:type_de_piece_justificative, :rib)

spec/factories/type_de_champs.rb

@@ -0,0 +1,8 @@
+FactoryGirl.define do
+  factory :type_de_champs do
+    libelle 'Description'
+    description 'description de votre projet'
+    type_champs 'textarea'
+    order_place 1
+  end
+end

spec/features/admin/add_type_de_champs_spec.rb

@@ -0,0 +1,58 @@
+require 'spec_helper'
+
+feature 'add a new type de champs', js: true do
+  let(:administrateur) { create(:administrateur) }
+
+  before do
+    login_as administrateur, scope: :administrateur
+  end
+
+  context 'when create a new procedure' do
+    before do
+      visit new_admin_procedure_path
+    end
+
+    scenario 'page have form to created new type de champs' do
+      expect(page).to have_css('#type_de_champs_0')
+      expect(page).to have_css('input[name="type_de_champs[0][libelle]"]')
+      expect(page).to have_css('select[name="type_de_champs[0][type]"]')
+      expect(page).to have_css('textarea[name="type_de_champs[0][description]"]')
+      expect(page).to have_css('input[name="type_de_champs[0][order_place]"]', visible: false)
+
+      expect(page).to have_css('#new_type_de_champs #add_type_de_champs_button')
+    end
+
+    context 'when user add a new champs type' do
+      before do
+        page.find_by_id('type_de_champs_0').find_by_id('libelle').set 'Libelle de test'
+        page.find_by_id('type_de_champs_0').find_by_id('description').set 'Description de test'
+        page.click_on 'Ajouter'
+      end
+
+      scenario 'a new champs type line is appeared with increment index id' do
+        expect(page).to have_css('#type_de_champs_1')
+        expect(page).to have_css('input[name="type_de_champs[1][libelle]"]')
+        expect(page).to have_css('select[name="type_de_champs[1][type]"]')
+        expect(page).to have_css('textarea[name="type_de_champs[1][description]"]')
+        expect(page).to have_css('input[name="type_de_champs[1][order_place]"]', visible: false)
+      end
+
+      scenario 'the first line is filled' do
+        expect(page.find_by_id('type_de_champs_0').find_by_id('libelle').value).to eq('Libelle de test')
+        expect(page.find_by_id('type_de_champs_0').find_by_id('description').value).to eq('Description de test')
+        expect(page.find_by_id('type_de_champs_0').find_by_id('order_place', visible: false).value).to eq('1')
+      end
+
+      scenario 'the new line is empty' do
+        expect(page.find_by_id('type_de_champs_1').find_by_id('libelle').value).to eq('')
+        expect(page.find_by_id('type_de_champs_1').find_by_id('description').value).to eq('')
+        expect(page.find_by_id('type_de_champs_1').find_by_id('order_place', visible: false).value).to eq('2')
+      end
+
+      scenario 'the button Ajouter is at side new line' do
+        expect(page).to have_css('#new_type_de_champs #type_de_champs_1 #add_type_de_champs_button')
+        expect(page).not_to have_css('#type_de_champs_0 #add_type_de_champs_button')
+      end
+    end
+  end
+end