Add header section on procédure champ

app/assets/javascripts/admin.js

@@ -1,5 +1,10 @@
-$(document).on('page:load', destroy_action);
-$(document).ready(destroy_action);
+$(document).on('page:load', init_admin);
+$(document).ready(init_admin);
+
+function init_admin(){
+    destroy_action();
+    on_change_type_de_champ_select();
+}
 
 function destroy_action(){
     $(".delete").on('click', function(){
@@ -16,3 +21,18 @@ function destroy_action(){
         setTimeout(destroy_action, 500);
     });
 }
+
+function on_change_type_de_champ_select (){
+
+    $("select.form-control.type_champ").on('change', function(e){
+
+        parent = $(this).parent().parent()
+
+        if (this.value === 'header_section') {
+            parent.addClass('header_section')
+        }
+        else {
+            parent.removeClass('header_section')
+        }
+    })
+}

app/assets/stylesheets/admin_type_de_champ.scss

@@ -0,0 +1,18 @@
+.header_section{
+  background-color: rgb(245,245,245);
+  margin-top: 20px;
+  margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 0;
+  text-align:center;
+  padding-bottom: 8px;
+
+  .form-group.description {
+    display: none;
+  }
+
+  .form-group.mandatory {
+    display: none;
+  }
+
+}

app/assets/stylesheets/description.scss

@@ -7,6 +7,10 @@
   }
 }
 
+.page-header{
+  border-bottom: 1px solid #CCCCCC !important;
+}
+
 .input-error {
   color: darkred !important;
   border-color: darkred !important
@@ -21,6 +25,13 @@
   }
 }
 
+.type_champ-header_section {
+  @extend .col-md-12;
+  @extend .col-lg-12;
+
+  margin-bottom: -25px;
+}
+
 .type_champ-address {
   @extend .col-md-6;
   @extend .col-lg-6;

app/models/type_de_champ.rb

@@ -10,7 +10,8 @@ class TypeDeChamp < ActiveRecord::Base
            email: 'email',
            phone: 'phone',
            address: 'address',
-           yes_no: 'yes_no'
+           yes_no: 'yes_no',
+           header_section: 'header_section'
        }
 
   belongs_to :procedure

app/views/admin/types_de_champ/_fields.html.haml

@@ -1,15 +1,18 @@
 = f.fields_for :types_de_champ, types_de_champ, remote: true do |ff|
-  .form-inline
-    .form-group
+  .form-inline{class:"#{ff.object.object.type_champ == 'header_section' ? 'header_section' : ''}"}
+    .form-group.libelle
       %h4 Libellé
       = ff.text_field :libelle, class: 'form-control libelle', placeholder: 'Libellé'
-    .form-group
+
+    .form-group.type
       %h4 Type
       = ff.select :type_champ, TypeDeChamp.type_champs, {}, {class: 'form-control type_champ'}
-    .form-group
+
+    .form-group.description
       %h4 Description
       = ff.text_area :description, class: 'form-control description', placeholder: 'Description'
-    .form-group
+
+    .form-group.mandatory
       %h4 Obligatoire ?
       .center
         = ff.check_box :mandatory, placeholder: 'Obligatoire ?'

app/views/admin/types_de_champ/show.js.erb

@@ -2,3 +2,4 @@
 $("#flash_message").html("<div class=\"alert alert-success move_up\" style=\"display: block:\"> <%= message.html_safe %></div>").children().fadeOut(5000)
 <%  end %>
 $('#liste_champ').html("<%= escape_javascript(render partial: 'form', locals: { procedure: @procedure, types_de_champ: @types_de_champ } ) %>");
+on_change_type_de_champ_select ();

app/views/users/description/_champs.html.haml

@@ -8,6 +8,10 @@
             = '*'
           %input{type: 'hidden', name:"champs['#{champ.id}']", id: "champs_#{champ.id}", value: ''}
           %input{type: 'checkbox', style:'margin-left: 15px;', name:"champs['#{champ.id}']", id: "champs_#{champ.id}", checked: ('checked' if champ.value == 'on')}
+
+      - elsif champ.type_champ == 'header_section'
+        =render partial: 'users/description/champs/header_section', locals: {champ: champ}
+
       -else
         %h4
           = champ.libelle

app/views/users/description/champs/_header_section.html.haml

@@ -0,0 +1,2 @@
+%h3.text-primary.page-header
+  =champ.libelle