add up and down button to order place TypeDeChamps Procedure

app/assets/javascripts/procedure.js

@@ -1,12 +1,10 @@
 var ready = function () {
     $("#add_type_de_champs_procedure").on('click', function (e) {
         add_new_type_de('champs');
-        return stop_event(e);
     });
 
     $("#add_type_de_piece_justificative_procedure").on('click', function (e) {
         add_new_type_de('piece_justificative');
-        return stop_event(e);
     });
 
     add_delete_listener_on_click_for_type_de("champs", "#liste_champs .btn-danger");
@@ -14,24 +12,21 @@ var ready = function () {
 
     add_delete_listener_on_click_for_type_de("piece_justificative", "#liste_piece_justificative .btn-danger");
     add_delete_listener_on_click_for_type_de("piece_justificative", "#new_type_de_piece_justificative .btn-danger");
+
+    config_up_and_down_button();
+
+    add_action_listener_on_click_for_button_up(".button_up");
+    add_action_listener_on_click_for_button_down(".button_down");
 };
 
 $(document).ready(ready);
 $(document).on('page:load', ready);
 
-function stop_event(e) {
-    e.stopPropagation();
-    e.preventDefault();
-    return false;
-}
-
 function add_delete_listener_on_click_for_type_de(type_libelle, node_id) {
     $(node_id).on('click', function (e) {
         var index = (e.target.id).replace('delete_type_de_' + type_libelle + '_', '').replace('_procedure', '');
 
         delete_type_de(type_libelle, index);
-
-        return stop_event(e);
     });
 }
 
@@ -84,6 +79,11 @@ function add_new_type_de(type_libelle) {
 
     $("#new_type_de_" + type_libelle + " #add_type_de_" + type_libelle + "_button").remove();
     $("#new_type_de_" + type_libelle + " .form-inline").append($("#add_type_de_" + type_libelle + "_button"))
+
+    add_action_listener_on_click_for_button_up("#new_type_de_" + type_libelle + " .button_up")
+    add_action_listener_on_click_for_button_down("#new_type_de_" + type_libelle + " .button_down")
+
+    config_up_and_down_button();
 }
 
 function add_new_type_de_champs_params() {
@@ -95,8 +95,12 @@ function add_new_type_de_champs_params() {
 
     $("#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").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 .order_place").val(parseInt($("#liste_champs .order_place").last().val()) + 1);
+
+    $("#new_type_de_champs .order_type_de_champs_button").attr('id', 'order_type_de_champs_' + types_de_champs_index + '_button')
+    $("#new_type_de_champs .order_type_de_champs_button .button_up").attr('id', 'order_type_de_champs_' + types_de_champs_index + '_up_procedure')
+    $("#new_type_de_champs .order_type_de_champs_button .button_down").attr('id', 'order_type_de_champs_' + types_de_champs_index + '_down_procedure')
 }
 
 function add_new_type_de_piece_justificative_params() {
@@ -108,6 +112,83 @@ function add_new_type_de_piece_justificative_params() {
 }
 
 function delete_type_de(type_libelle, index) {
-    $("#type_de_" + type_libelle + "_" + index).hide();
+    var delete_node = $("#type_de_" + type_libelle + "_" + index).hide();
+
+    $("#liste_delete_" + type_libelle).append(delete_node);
     $("#type_de_" + type_libelle + "_" + index + " #delete").val('true');
-}
+
+    if (type_libelle == 'champs') {
+        var next_order_place = parseInt($("#type_de_" + type_libelle + "_" + index + " .order_place").val());
+        var type_de_champs_to_change_order_place = $("#liste_champs .order_place");
+
+        type_de_champs_to_change_order_place.each(function () {
+            if ($(this).val() > next_order_place) {
+                $(this).val(next_order_place++);
+            }
+        });
+        $("#new_type_de_champs .order_place").val(next_order_place);
+
+        config_up_and_down_button();
+    }
+}
+
+function config_up_and_down_button() {
+    if ($("#liste_champs .order_place").size() > 0) {
+        var first_index = $("#liste_champs .order_place").first()
+            .attr('name')
+            .replace('type_de_champs[', '')
+            .replace('][order_place]', '');
+
+        var last_index = $("#liste_champs .order_place").last()
+            .attr('name')
+            .replace('type_de_champs[', '')
+            .replace('][order_place]', '');
+
+        $(".button_up").show();
+        $(".button_down").show();
+        $("#liste_champs .order_type_de_champs_button").show();
+
+        $("#order_type_de_champs_" + first_index + "_up_procedure").hide();
+        $("#order_type_de_champs_" + last_index + "_down_procedure").hide();
+    }
+}
+
+function add_action_listener_on_click_for_button_up(node_id) {
+    $(node_id).on('click', function (e) {
+        var index = (e.target.id).replace('order_type_de_champs_', '').replace('_up_procedure', '');
+        var order_place = parseInt($("#type_de_champs_" + index + " .order_place").val());
+        var order_place_before = order_place - 1;
+
+        var node_before = $("input[class='order_place'][value='" + order_place_before + "']").parent();
+
+        var index_before = (node_before.attr('id')).replace('type_de_champs_', '');
+
+        $("#type_de_champs_" + index).insertBefore("#type_de_champs_" + index_before);
+        $("#type_de_champs_" + index_before);
+
+        $("#type_de_champs_" + index_before + " .order_place").val(order_place);
+        $("#type_de_champs_" + index + " .order_place").val(order_place_before);
+
+        config_up_and_down_button();
+    });
+}
+
+function add_action_listener_on_click_for_button_down(node_id) {
+    $(node_id).on('click', function (e) {
+        var index = (e.target.id).replace('order_type_de_champs_', '').replace('_down_procedure', '');
+        var order_place = parseInt($("#type_de_champs_" + index + " .order_place").val());
+        var order_place_after = order_place + 1;
+
+        var node_after = $("input[class='order_place'][value='" + order_place_after + "']").parent();
+
+        var index_after = (node_after.attr('id')).replace('type_de_champs_', '');
+
+        $("#type_de_champs_" + index).insertAfter("#type_de_champs_" + index_after);
+        $("#type_de_champs_" + index_after);
+
+        $("#type_de_champs_" + index_after + " .order_place").val(order_place);
+        $("#type_de_champs_" + index + " .order_place").val(order_place_after);
+
+        config_up_and_down_button();
+    });
+}

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

@@ -21,15 +21,20 @@
     %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)}
+  %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)}
   %input#id_type_de_champs{type: 'hidden', name: "type_de_champs[#{index}][id_type_de_champs]", value: (("#{ type_de_champs.id}" unless type_de_champs.nil?))}
   %input#delete{type: 'hidden', name: "type_de_champs[#{index}][delete]", value: 'false'}
 
   -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
+      %button.form-control.btn.btn-success#add_type_de_champs_procedure{type: 'button'} Ajouter
+
+  .form-group.order_type_de_champs_button{id: "order_type_de_champs_#{index}_button", style: ("display:none" if type_de_champs.nil?)}
+    %br  
+    %button.form-control.btn.btn-default.button_up.fa.fa-chevron-up{type: 'button', id: "order_type_de_champs_#{index}_up_procedure"}
+    %button.form-control.btn.btn-default.button_down.fa.fa-chevron-down{type: 'button', id: "order_type_de_champs_#{index}_down_procedure"}
 
   .form-group{id: "delete_type_de_champs_#{index}_button", style: ("display:none" if type_de_champs.nil?)}
     %br  
-    %button.form-control.btn.btn-danger{id: "delete_type_de_champs_#{index}_procedure"} X
+    %button.form-control.btn.btn-danger.fa.fa-trash-o{type: 'button', id: "delete_type_de_champs_#{index}_procedure"}

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

@@ -3,6 +3,8 @@
     - @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 }
 
+#liste_delete_champs
+
 #new_type_de_champs
   =render partial: 'admin/procedures/types_de_champs/form', locals:{ type_de_champs: nil, index: @procedure.types_de_champs.size }
 

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

@@ -15,8 +15,8 @@
   -if type_de_piece_justificative.nil?
     .form-group#add_type_de_piece_justificative_button
       %br  
-      %button.form-control.btn.btn-success#add_type_de_piece_justificative_procedure Ajouter
+      %button.form-control.btn.btn-success#add_type_de_piece_justificative_procedure{type: 'button'} Ajouter
 
   .form-group{id: "delete_type_de_piece_justificative_#{index}_button", style: ("display:none" if type_de_piece_justificative.nil?)}
     %br  
-    %button.form-control.btn.btn-danger{id: "delete_type_de_piece_justificative_#{index}_procedure"} X
+    %button.form-control.btn.btn-danger.fa.fa-trash-o{type: 'button', id: "delete_type_de_piece_justificative_#{index}_procedure"}

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

@@ -3,6 +3,8 @@
     - @procedure.types_de_piece_justificative.order(:libelle).each_with_index do |type_de_piece_justificative, index|
       =render partial: 'admin/procedures/types_de_piece_justificative/form', locals:{ type_de_piece_justificative: type_de_piece_justificative, index: index }
 
+#liste_delete_piece_justificative
+
 #new_type_de_piece_justificative
   =render partial: 'admin/procedures/types_de_piece_justificative/form', locals:{ type_de_piece_justificative: nil, index: @procedure.types_de_piece_justificative.size }
 

spec/features/admin/add_type_de_champs_spec.rb

@@ -21,6 +21,10 @@ feature 'add a new type de champs', js: true do
       expect(page).to have_css('input[name="type_de_champs[0][id_type_de_champs]"]', visible: false)
       expect(page).to have_css('input[name="type_de_champs[0][delete]"]', visible: false)
 
+      expect(page).to have_css('#order_type_de_champs_0_button', visible: false);
+      expect(page).to have_css('#order_type_de_champs_0_up_procedure', visible: false);
+      expect(page).to have_css('#order_type_de_champs_0_down_procedure', visible: false);
+
       expect(page).to have_css('#new_type_de_champs #add_type_de_champs_button')
     end
 
@@ -39,12 +43,16 @@ feature 'add a new type de champs', js: true do
         expect(page).to have_css('input[name="type_de_champs[1][order_place]"]', visible: false)
         expect(page).to have_css('input[name="type_de_champs[1][id_type_de_champs]"]', visible: false)
         expect(page).to have_css('input[name="type_de_champs[1][delete]"]', visible: false)
+
+        expect(page).to have_css('#order_type_de_champs_1_button', visible: false);
+        expect(page).to have_css('#order_type_de_champs_1_up_procedure', visible: false);
+        expect(page).to have_css('#order_type_de_champs_1_down_procedure', 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')
+        expect(page.find_by_id('type_de_champs_0').find('input[class="order_place"]', visible: false).value).to eq('1')
       end
 
       scenario 'the first line have new button delete' do
@@ -55,7 +63,7 @@ feature 'add a new type de champs', js: true do
       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')
+        expect(page.find_by_id('type_de_champs_1').find('input[class="order_place"]', visible: false).value).to eq('2')
         expect(page.find_by_id('type_de_champs_1').find_by_id('id_type_de_champs', visible: false).value).to eq('')
         expect(page.find_by_id('type_de_champs_1').find_by_id('delete', visible: false).value).to eq('false')
       end

spec/features/admin/config_up_and_down_button_spec.rb

@@ -0,0 +1,125 @@
+require 'spec_helper'
+
+feature 'config up and down button display', js: true do
+  let(:administrateur) { create(:administrateur) }
+
+  before do
+    login_as administrateur, scope: :administrateur
+  end
+
+  context 'when procedure have not type de champs' do
+    let!(:procedure) { create(:procedure) }
+
+    before do
+      visit admin_procedure_path id: procedure.id
+    end
+
+    scenario 'type_de_champs_0 have not up and down button visible' do
+      expect(page.find_by_id('order_type_de_champs_0_up_procedure', visible: false).visible?).to be_falsey
+      expect(page.find_by_id('order_type_de_champs_0_down_procedure', visible: false).visible?).to be_falsey
+    end
+  end
+
+  context 'when procedure have one type de champs' do
+    let!(:procedure) { create(:procedure, :with_type_de_champs) }
+
+    before do
+      visit admin_procedure_path id: procedure.id
+    end
+
+    scenario 'type_de_champs_0 have not up and down button visible' do
+      expect(page.find_by_id('order_type_de_champs_0_up_procedure', visible: false).visible?).to be_falsey
+      expect(page.find_by_id('order_type_de_champs_0_down_procedure', visible: false).visible?).to be_falsey
+    end
+
+    scenario 'type_de_champs_1 have not up and down button visible' do
+      expect(page.find_by_id('order_type_de_champs_1_up_procedure', visible: false).visible?).to be_falsey
+      expect(page.find_by_id('order_type_de_champs_1_down_procedure', visible: false).visible?).to be_falsey
+    end
+  end
+
+  context 'when procedure have two type de champs' do
+    let!(:procedure) { create(:procedure, :with_type_de_champs) }
+    let!(:type_de_champs) { create(:type_de_champs, procedure: procedure, order_place: 2) }
+
+    before do
+      visit admin_procedure_path id: procedure.id
+    end
+
+    scenario 'type_de_champs_0 have not up visible and down button visible' do
+      expect(page.find_by_id('order_type_de_champs_0_up_procedure', visible: false).visible?).to be_falsey
+      expect(page.find_by_id('order_type_de_champs_0_down_procedure').visible?).to be_truthy
+    end
+
+    scenario 'type_de_champs_1 have up button visible and down button not visible' do
+      expect(page.find_by_id('order_type_de_champs_1_up_procedure').visible?).to be_truthy
+      expect(page.find_by_id('order_type_de_champs_1_down_procedure', visible: false).visible?).to be_falsey
+    end
+
+    scenario 'type_de_champs_2 have not up and down button visible' do
+      expect(page.find_by_id('order_type_de_champs_2_up_procedure', visible: false).visible?).to be_falsey
+      expect(page.find_by_id('order_type_de_champs_2_down_procedure', visible: false).visible?).to be_falsey
+    end
+  end
+
+  context 'when procedure have two type de champs into database and one type de champs add to form' do
+    let!(:procedure) { create(:procedure, :with_type_de_champs) }
+    let!(:type_de_champs) { create(:type_de_champs, procedure: procedure, order_place: 2) }
+
+    before do
+      visit admin_procedure_path id: procedure.id
+      page.click_on 'add_type_de_champs_procedure'
+    end
+
+    scenario 'type_de_champs_0 have not up visible and down button visible' do
+      expect(page.find_by_id('order_type_de_champs_0_up_procedure', visible: false).visible?).to be_falsey
+      expect(page.find_by_id('order_type_de_champs_0_down_procedure').visible?).to be_truthy
+    end
+
+    scenario 'type_de_champs_1 have up button and down button visible' do
+      expect(page.find_by_id('order_type_de_champs_1_up_procedure').visible?).to be_truthy
+      expect(page.find_by_id('order_type_de_champs_1_down_procedure').visible?).to be_truthy
+    end
+
+    scenario 'type_de_champs_2 have up visible and down button not visible' do
+      expect(page.find_by_id('order_type_de_champs_2_up_procedure').visible?).to be_truthy
+      expect(page.find_by_id('order_type_de_champs_2_down_procedure', visible: false).visible?).to be_falsey
+    end
+
+    scenario 'type_de_champs_3 have not up and down button visible' do
+      expect(page.find_by_id('order_type_de_champs_3_up_procedure', visible: false).visible?).to be_falsey
+      expect(page.find_by_id('order_type_de_champs_3_down_procedure', visible: false).visible?).to be_falsey
+    end
+  end
+
+  context 'when procedure have two type de champs into database and one type de champs add to form and delete one type_de_champs' do
+    let!(:procedure) { create(:procedure, :with_type_de_champs) }
+    let!(:type_de_champs) { create(:type_de_champs, procedure: procedure, order_place: 2) }
+
+    before do
+      visit admin_procedure_path id: procedure.id
+      page.click_on 'add_type_de_champs_procedure'
+      page.click_on 'delete_type_de_champs_2_procedure'
+    end
+
+    scenario 'type_de_champs_0 have not up visible and down button visible' do
+      expect(page.find_by_id('order_type_de_champs_0_up_procedure', visible: false).visible?).to be_falsey
+      expect(page.find_by_id('order_type_de_champs_0_down_procedure').visible?).to be_truthy
+    end
+
+    scenario 'type_de_champs_1 have up button visible and down button not visible' do
+      expect(page.find_by_id('order_type_de_champs_1_up_procedure').visible?).to be_truthy
+      expect(page.find_by_id('order_type_de_champs_1_down_procedure', visible: false).visible?).to be_falsey
+    end
+
+    scenario 'type_de_champs_2 have up and down button not visible' do
+      expect(page.find_by_id('order_type_de_champs_2_up_procedure', visible: false).visible?).to be_falsey
+      expect(page.find_by_id('order_type_de_champs_2_down_procedure', visible: false).visible?).to be_falsey
+    end
+
+    scenario 'type_de_champs_3 have not up and down button visible' do
+      expect(page.find_by_id('order_type_de_champs_3_up_procedure', visible: false).visible?).to be_falsey
+      expect(page.find_by_id('order_type_de_champs_3_down_procedure', visible: false).visible?).to be_falsey
+    end
+  end
+end

spec/features/admin/delete_type_de_champs_spec.rb

@@ -7,7 +7,7 @@ feature 'delete a type de champs form', js: true do
     login_as administrateur, scope: :administrateur
   end
 
-  context 'when user click on type de champs red X button' do
+  context 'when user click on type de trash button' do
     let!(:procedure) { create(:procedure, :with_type_de_champs) }
 
     before do
@@ -28,10 +28,17 @@ feature 'delete a type de champs form', js: true do
       scenario 'delete attribut of type de champs is turn to true' do
         expect(page.find_by_id('type_de_champs_0', visible: false).find_by_id('delete', visible: false).value).to eq('true')
       end
+
+      scenario 'attribut node is to move into div liste_delete_champs' do
+        expect(page).to have_css('#liste_delete_champs #type_de_champs_0', visible: false)
+      end
     end
 
     context 'when user edit a type de champs just add on the form page' do
       before do
+        page.click_on 'add_type_de_champs_procedure'
+        page.click_on 'add_type_de_champs_procedure'
+        page.click_on 'add_type_de_champs_procedure'
         page.click_on 'add_type_de_champs_procedure'
         page.click_on 'add_type_de_champs_procedure'
         page.click_on 'delete_type_de_champs_1_procedure'
@@ -47,6 +54,27 @@ feature 'delete a type de champs form', js: true do
         expect(page.find_by_id('type_de_champs_1', visible: false).find_by_id('delete', visible: false).value).to eq('true')
         expect(page.find_by_id('type_de_champs_2', visible: false).find_by_id('delete', visible: false).value).to eq('true')
       end
+
+      scenario 'attribut node is to move into div liste_delete_champs' do
+        expect(page).to have_css('#liste_delete_champs #type_de_champs_1', visible: false)
+        expect(page).to have_css('#liste_delete_champs #type_de_champs_2', visible: false)
+      end
+
+      scenario 'order_place type_de_champs_0_procedure is 1' do
+        expect(page.find_by_id('type_de_champs_0').find("input[class='order_place']", visible: false).value).to eq('1')
+      end
+
+      scenario 'order_place type_de_champs_3_procedure is 2' do
+        expect(page.find_by_id('type_de_champs_3').find("input[class='order_place']", visible: false).value).to eq('2')
+      end
+
+      scenario 'order_place type_de_champs_4_procedure is 3' do
+        expect(page.find_by_id('type_de_champs_4').find("input[class='order_place']", visible: false).value).to eq('3')
+      end
+
+      scenario 'order_place type_de_champs_5_procedure is 4' do
+        expect(page.find_by_id('type_de_champs_5').find("input[class='order_place']", visible: false).value).to eq('4')
+      end
     end
   end
 end

spec/features/admin/move_down_type_de_champs_spec.rb

@@ -0,0 +1,79 @@
+require 'spec_helper'
+
+feature 'move down button type de champs', js: true do
+  let(:administrateur) { create(:administrateur) }
+
+  before do
+    login_as administrateur, scope: :administrateur
+  end
+
+  context 'when click on move down type de champs button' do
+    let!(:procedure) { create(:procedure, :with_type_de_champs) }
+    let!(:type_de_champs) { create(:type_de_champs, procedure: procedure, order_place: 2) }
+
+    before do
+      visit admin_procedure_path id: procedure.id
+    end
+
+    context 'when procedure have two type de champs' do
+      before do
+        page.click_on 'order_type_de_champs_0_down_procedure'
+      end
+
+      scenario 'it inverse the twice type de champs' do
+        expect(page.find_by_id('type_de_champs_0').find('input[class="order_place"]', visible: false).value).to eq('2');
+        expect(page.find_by_id('type_de_champs_1').find('input[class="order_place"]', visible: false).value).to eq('1');
+      end
+    end
+
+    context 'when procedure have two type de champs in database and 3 type de champs add on the page' do
+      before do
+        page.click_on 'add_type_de_champs_procedure'
+        page.click_on 'add_type_de_champs_procedure'
+        page.click_on 'add_type_de_champs_procedure'
+      end
+
+      context 'when to click on down_button type_de_champs_1' do
+        before do
+          page.click_on 'order_type_de_champs_1_down_procedure'
+        end
+
+        scenario 'type_de_champs_1 and type_de_champs_2 is reversed' do
+          expect(page.find_by_id('type_de_champs_0').find('input[class="order_place"]', visible: false).value).to eq('1');
+          expect(page.find_by_id('type_de_champs_2').find('input[class="order_place"]', visible: false).value).to eq('2');
+          expect(page.find_by_id('type_de_champs_1').find('input[class="order_place"]', visible: false).value).to eq('3');
+          expect(page.find_by_id('type_de_champs_3').find('input[class="order_place"]', visible: false).value).to eq('4');
+          expect(page.find_by_id('type_de_champs_4').find('input[class="order_place"]', visible: false).value).to eq('5');
+        end
+
+        context 'when to click on up_button type_de_champs_3' do
+          before do
+            page.click_on 'order_type_de_champs_3_down_procedure'
+          end
+
+          scenario 'type_de_champs_3 and type_de_champs_4 is reversed' do
+            expect(page.find_by_id('type_de_champs_0').find('input[class="order_place"]', visible: false).value).to eq('1');
+            expect(page.find_by_id('type_de_champs_2').find('input[class="order_place"]', visible: false).value).to eq('2');
+            expect(page.find_by_id('type_de_champs_1').find('input[class="order_place"]', visible: false).value).to eq('3');
+            expect(page.find_by_id('type_de_champs_4').find('input[class="order_place"]', visible: false).value).to eq('4');
+            expect(page.find_by_id('type_de_champs_3').find('input[class="order_place"]', visible: false).value).to eq('5');
+          end
+
+          context 'when to click on up_button type_de_champs_0' do
+            before do
+              page.click_on 'order_type_de_champs_0_down_procedure'
+            end
+
+            scenario 'type_de_champs_0 and type_de_champs_2 is reversed' do
+              expect(page.find_by_id('type_de_champs_2').find('input[class="order_place"]', visible: false).value).to eq('1');
+              expect(page.find_by_id('type_de_champs_0').find('input[class="order_place"]', visible: false).value).to eq('2');
+              expect(page.find_by_id('type_de_champs_1').find('input[class="order_place"]', visible: false).value).to eq('3');
+              expect(page.find_by_id('type_de_champs_4').find('input[class="order_place"]', visible: false).value).to eq('4');
+              expect(page.find_by_id('type_de_champs_3').find('input[class="order_place"]', visible: false).value).to eq('5');
+            end
+          end
+        end
+      end
+    end
+  end
+end

spec/features/admin/move_up_and_down_type_de_champs_spec.rb

@@ -0,0 +1,72 @@
+require 'spec_helper'
+
+feature 'move up and down button type de champs', js: true do
+  let(:administrateur) { create(:administrateur) }
+
+  before do
+    login_as administrateur, scope: :administrateur
+  end
+
+  context 'when click on move up and down type de champs button' do
+    let!(:procedure) { create(:procedure, :with_type_de_champs) }
+    let!(:type_de_champs) { create(:type_de_champs, procedure: procedure, order_place: 2) }
+
+    before do
+      visit admin_procedure_path id: procedure.id
+    end
+
+    context 'when procedure have two type de champs in database and 3 type de champs add on the page' do
+      before do
+        page.click_on 'add_type_de_champs_procedure'
+        page.click_on 'add_type_de_champs_procedure'
+        page.click_on 'add_type_de_champs_procedure'
+      end
+  #
+      context 'when to click on up_button type_de_champs_1 and down_button type_de_champs_0' do
+        before do
+          page.click_on 'order_type_de_champs_1_up_procedure'
+          page.click_on 'order_type_de_champs_0_down_procedure'
+        end
+
+        scenario 'type_de_champs_0 is at order place 3 and type_de_champs_1 is at order place 1 ' do
+          expect(page.find_by_id('type_de_champs_1').find('input[class="order_place"]', visible: false).value).to eq('1');
+          expect(page.find_by_id('type_de_champs_2').find('input[class="order_place"]', visible: false).value).to eq('2');
+          expect(page.find_by_id('type_de_champs_0').find('input[class="order_place"]', visible: false).value).to eq('3');
+          expect(page.find_by_id('type_de_champs_3').find('input[class="order_place"]', visible: false).value).to eq('4');
+          expect(page.find_by_id('type_de_champs_4').find('input[class="order_place"]', visible: false).value).to eq('5');
+        end
+
+        context 'when to click on down_button type_de_champs_3 and up_button type_de_champs_4' do
+          before do
+            page.click_on 'order_type_de_champs_3_down_procedure'
+            page.click_on 'order_type_de_champs_4_up_procedure'
+          end
+
+          scenario 'type_de_champs_2 and type_de_champs_3 is reversed' do
+            expect(page.find_by_id('type_de_champs_1').find('input[class="order_place"]', visible: false).value).to eq('1');
+            expect(page.find_by_id('type_de_champs_2').find('input[class="order_place"]', visible: false).value).to eq('2');
+            expect(page.find_by_id('type_de_champs_4').find('input[class="order_place"]', visible: false).value).to eq('3');
+            expect(page.find_by_id('type_de_champs_0').find('input[class="order_place"]', visible: false).value).to eq('4');
+            expect(page.find_by_id('type_de_champs_3').find('input[class="order_place"]', visible: false).value).to eq('5');
+          end
+
+          context 'when to click on up_button type_de_champs_2 and down_button type_de_champs_0 and up_button type_de_champs_4' do
+            before do
+              page.click_on 'order_type_de_champs_2_up_procedure'
+              page.click_on 'order_type_de_champs_0_down_procedure'
+              page.click_on 'order_type_de_champs_4_up_procedure'
+            end
+
+            scenario 'type_de_champs_2 and type_de_champs_4 is reversed' do
+              expect(page.find_by_id('type_de_champs_2').find('input[class="order_place"]', visible: false).value).to eq('1');
+              expect(page.find_by_id('type_de_champs_4').find('input[class="order_place"]', visible: false).value).to eq('2');
+              expect(page.find_by_id('type_de_champs_1').find('input[class="order_place"]', visible: false).value).to eq('3');
+              expect(page.find_by_id('type_de_champs_3').find('input[class="order_place"]', visible: false).value).to eq('4');
+              expect(page.find_by_id('type_de_champs_0').find('input[class="order_place"]', visible: false).value).to eq('5');
+            end
+          end
+        end
+      end
+    end
+  end
+end

spec/features/admin/move_up_type_de_champs_spec.rb

@@ -0,0 +1,80 @@
+require 'spec_helper'
+
+feature 'move up button type de champs', js: true do
+
+  let(:administrateur) { create(:administrateur) }
+
+  before do
+    login_as administrateur, scope: :administrateur
+  end
+
+  context 'when click on move up type de champs button' do
+    let!(:procedure) { create(:procedure, :with_type_de_champs) }
+    let!(:type_de_champs) { create(:type_de_champs, procedure: procedure, order_place: 2) }
+
+    before do
+      visit admin_procedure_path id: procedure.id
+    end
+
+    context 'when procedure have two type de champs' do
+      before do
+        page.click_on 'order_type_de_champs_1_up_procedure'
+      end
+
+      scenario 'it inverse the twice type de champs' do
+        expect(page.find_by_id('type_de_champs_0').find('input[class="order_place"]', visible: false).value).to eq('2');
+        expect(page.find_by_id('type_de_champs_1').find('input[class="order_place"]', visible: false).value).to eq('1');
+      end
+    end
+
+    context 'when procedure have two type de champs in database and 3 type de champs add on the page' do
+      before do
+        page.click_on 'add_type_de_champs_procedure'
+        page.click_on 'add_type_de_champs_procedure'
+        page.click_on 'add_type_de_champs_procedure'
+      end
+
+      context 'when to click on up_button type_de_champs_1' do
+        before do
+          page.click_on 'order_type_de_champs_1_up_procedure'
+        end
+
+        scenario 'type_de_champs_0 and type_de_champs_1 is reversed' do
+          expect(page.find_by_id('type_de_champs_1').find('input[class="order_place"]', visible: false).value).to eq('1');
+          expect(page.find_by_id('type_de_champs_0').find('input[class="order_place"]', visible: false).value).to eq('2');
+          expect(page.find_by_id('type_de_champs_2').find('input[class="order_place"]', visible: false).value).to eq('3');
+          expect(page.find_by_id('type_de_champs_3').find('input[class="order_place"]', visible: false).value).to eq('4');
+          expect(page.find_by_id('type_de_champs_4').find('input[class="order_place"]', visible: false).value).to eq('5');
+        end
+
+        context 'when to click on up_button type_de_champs_3' do
+          before do
+            page.click_on 'order_type_de_champs_3_up_procedure'
+          end
+
+          scenario 'type_de_champs_2 and type_de_champs_3 is reversed' do
+            expect(page.find_by_id('type_de_champs_1').find('input[class="order_place"]', visible: false).value).to eq('1');
+            expect(page.find_by_id('type_de_champs_0').find('input[class="order_place"]', visible: false).value).to eq('2');
+            expect(page.find_by_id('type_de_champs_3').find('input[class="order_place"]', visible: false).value).to eq('3');
+            expect(page.find_by_id('type_de_champs_2').find('input[class="order_place"]', visible: false).value).to eq('4');
+            expect(page.find_by_id('type_de_champs_4').find('input[class="order_place"]', visible: false).value).to eq('5');
+          end
+
+          context 'when to click on up_button type_de_champs_4' do
+            before do
+              page.click_on 'order_type_de_champs_4_up_procedure'
+            end
+
+            scenario 'type_de_champs_2 and type_de_champs_4 is reversed' do
+              expect(page.find_by_id('type_de_champs_1').find('input[class="order_place"]', visible: false).value).to eq('1');
+              expect(page.find_by_id('type_de_champs_0').find('input[class="order_place"]', visible: false).value).to eq('2');
+              expect(page.find_by_id('type_de_champs_3').find('input[class="order_place"]', visible: false).value).to eq('3');
+              expect(page.find_by_id('type_de_champs_4').find('input[class="order_place"]', visible: false).value).to eq('4');
+              expect(page.find_by_id('type_de_champs_2').find('input[class="order_place"]', visible: false).value).to eq('5');
+            end
+          end
+        end
+      end
+    end
+  end
+end