New UI for description dossier in user view

app/assets/javascripts/description.js

@@ -27,7 +27,6 @@ function action_type_de_champs() {
     });
 
     address_type_init();
-    toggle_header_section_composents();
 }
 
 function toggleErrorClass(node, boolean) {
@@ -55,21 +54,3 @@ function validateNumber(number) {
 function validateInput(input, regex) {
     return regex.test(input);
 }
-
-function toggle_header_section_composents() {
-    $("a.mask_section_button").on('click', function (e) {
-        target = e.currentTarget;
-
-        header_section_id = target.id.split('mask_button_')[1];
-        header_section_composents = $(".header_section_" + header_section_id);
-
-        header_section_composents.slideToggle(200, function () {
-            if (header_section_composents.css('display') == 'none') {
-                $(target).html('Afficher la section <i class="fa fa-chevron-down" />')
-            }
-            else {
-                $(target).html('Masquer la section <i class="fa fa-chevron-up" />')
-            }
-        });
-    });
-}

app/assets/stylesheets/description.scss

@@ -2,8 +2,21 @@
 @import "bootstrap-datepicker3";
 
 #description_page #liste_champs {
+
+  .default_data_block {
+    .show-block {
+      width: 90%;
+      .body{
+        padding-left: 35px;
+        padding-right: 35px;
+        padding-bottom: 35px;
+      }
+    }
+  }
+
   h4 {
-    margin-top: 35px;
+    padding-top: 35px;
+    margin: 0;
   }
 }
 

app/controllers/users/description_controller.rb

@@ -12,6 +12,11 @@ class Users::DescriptionController < UsersController
     @procedure = @dossier.procedure
     @champs = @dossier.ordered_champs
 
+    @headers = @champs.inject([]) do |acc, champ|
+      acc.push(champ) if champ.type_champ == 'header_section'
+      acc
+    end
+
   rescue ActiveRecord::RecordNotFound
     flash.alert = t('errors.messages.dossier_not_found')
     redirect_to url_for(root_path)
@@ -34,16 +39,16 @@ class Users::DescriptionController < UsersController
     unless @dossier.update_attributes(create_params)
       @dossier = @dossier.decorate
 
-      flash.now.alert = @dossier.errors.full_messages.join('<br />').html_safe
+      flash.alert = @dossier.errors.full_messages.join('<br />').html_safe
-      return render 'show'
+      return redirect_to users_dossier_description_path(dossier_id: @dossier.id)
     end
 
     unless params[:champs].nil?
       champs_service_errors = ChampsService.save_formulaire @dossier.champs, params, mandatory
 
       unless champs_service_errors.empty?
-        flash.now.alert = (champs_service_errors.inject('') { |acc, error| acc+= error[:message]+'<br>' }).html_safe
+        flash.alert = (champs_service_errors.inject('') { |acc, error| acc+= error[:message]+'<br>' }).html_safe
-        return render 'show'
+        return redirect_to users_dossier_description_path(dossier_id: @dossier.id)
       end
     end
 
@@ -51,15 +56,15 @@ class Users::DescriptionController < UsersController
       unless params[:cerfa_pdf].nil?
         cerfa = Cerfa.new(content: params[:cerfa_pdf], dossier: @dossier, user: current_user)
         unless cerfa.save
-          flash.now.alert = cerfa.errors.full_messages.join('<br />').html_safe
+          flash.alert = cerfa.errors.full_messages.join('<br />').html_safe
-          return render 'show'
+          return redirect_to users_dossier_description_path(dossier_id: @dossier.id)
         end
       end
     end
 
     unless (errors_upload = PiecesJustificativesService.upload!(@dossier, current_user, params)).empty?
       flash.alert = errors_upload.html_safe
-      return render 'show'
+      return redirect_to users_dossier_description_path(dossier_id: @dossier.id)
     end
 
 

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

@@ -70,7 +70,7 @@
         Champs
         .badge.progress-bar-info
           = @facade.procedure.types_de_champ.size
-      - @facade.procedure.types_de_champ.each do |champ|
+      - @facade.procedure.types_de_champ.order(:order_place).each do |champ|
         = champ.libelle
         %br
 

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

@@ -1,59 +1,8 @@
--actual_header_section = nil
+- if @headers.nil?
--@champs.each do |champ|
+  -@headers.each do |header|
-  .row{class: (actual_header_section.nil? || champ.type_champ == 'header_section' ? '' : "header_section_"+actual_header_section.to_s)}
-    %div{class: "type_champ-#{champ.type_champ}"}
-
-      - if champ.type_champ == 'header_section'
-        =render partial: 'users/description/champs/header_section', locals: {champ: champ}
-        -actual_header_section = champ.id
-
-      -else
-        - unless champ.type_champ == 'checkbox' || champ.type_champ == 'engagement'
-          %h4
-            = champ.libelle
-            - if champ.mandatory?
-              = '*'
-
-        -if champ.type_champ == 'textarea'
-          =render partial: 'users/description/champs/textarea', locals: {champ: champ}
-
-        -elsif champ.type_champ == 'checkbox'
-          = render partial: 'users/description/champs/checkbox', locals: {champ: champ}
-
-        -elsif champ.type_champ == 'civilite'
-          =render partial: 'users/description/champs/civilite', locals: {champ: champ}
-
-        - elsif champ.type_champ == 'datetime'
-          =render partial: 'users/description/champs/datetime', locals: {champ: champ}
-
-        - elsif champ.type_champ == 'yes_no'
-          =render partial: 'users/description/champs/yes_no', locals: {champ: champ}
-
-        - elsif champ.type_champ == 'drop_down_list'
-          =render partial: 'users/description/champs/drop_down_list', locals: {champ: champ}
-
-        - elsif champ.type_champ == 'pays'
-          =render partial: 'users/description/champs/pays', locals: {champ: champ}
-
-        - elsif champ.type_champ == 'regions'
-          =render partial: 'users/description/champs/regions', locals: {champ: champ}
-
-        - elsif champ.type_champ == 'engagement'
-          =render partial: 'users/description/champs/engagement', locals: {champ: champ}
-
-        - elsif champ.type_champ == 'departements'
-          =render partial: 'users/description/champs/departements', locals: {champ: champ}
-
-        -else
-          %input.form-control{name:"champs['#{champ.id}']",
-                  placeholder: champ.libelle,
-                  id: "champs_#{champ.id}",
-                  value: champ.value,
-                  type: champ.type_champ,
-                  'data-provide' => champ.data_provide,
-                  'data-date-format' => champ.data_date_format}
-
-  - unless champ.description.empty? || champ.type_champ == 'engagement'
     .row
-      .col-lg-8.col-md-8{class: 'description_div', id:"description_champs_#{champ.id}"}
+      %div{class: "type_champ-#{header.type_champ}"}
-        = champ.description
+        =render partial: 'users/description/champs/header_section', locals: {libelle: header.libelle, order_place: header.order_place, champs: @champs}
+- else
+  .row
+    =render partial: 'users/description/champs/header_section', locals: {libelle: 'Dossier', order_place: -1, champs: @champs}

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

@@ -1,6 +1,6 @@
 .container#description_page
   - unless @dossier.procedure.lien_notice.blank?
-    #lien_notice_panel.row{style:'width: 280px; position: fixed; background-color: white; right: 5%; top: 80px;'}
+    #lien_notice_panel.row{style:'width: 280px; position: fixed; background-color: white; right: 5%; top: 80px; z-index: 200'}
       .panel.panel-info{style:'margin-bottom:0'}
         .panel-body.center
           .row
@@ -14,9 +14,6 @@
   %h2.text-info
     = @dossier.procedure.libelle
 
-  - unless Features.opensimplif
-    %h3 Votre dossier
-
   -#TODO use form_for
   = form_tag(url_for({controller: 'users/description', action: :create, dossier_id: @dossier.id}), class: 'form-inline', method: 'POST', multipart: true) do
 

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

@@ -1,6 +1,64 @@
-%h3.text-primary.page-header
+.default_data_block.default_visible
-  =champ.libelle
+  %div.row.show-block#infos
-  %span.mask_section{style:'float: right'}
+    %div.header
-    %a.mask_section_button.btn.btn-xs.btn-info{id: "mask_button_"+champ.id.to_s}
+      %div.col-lg-12.col-md-12.title
-      Masquer la section
+        %div.carret-right
-      %i.fa.fa-chevron-up
+        %div.carret-down
+        =libelle
+    %div.body
+      -champs.each do |champ|
+        - if champ.order_place > order_place
+          - if champ.type_champ == 'header_section'
+            - break
+
+          - unless champ.type_champ == 'checkbox' || champ.type_champ == 'engagement'
+            %h4
+              = champ.libelle
+              - if champ.mandatory?
+                = '*'
+
+          -if champ.type_champ == 'textarea'
+            =render partial: 'users/description/champs/textarea', locals: {champ: champ}
+
+          -elsif champ.type_champ == 'checkbox'
+            = render partial: 'users/description/champs/checkbox', locals: {champ: champ}
+
+          -elsif champ.type_champ == 'civilite'
+            =render partial: 'users/description/champs/civilite', locals: {champ: champ}
+
+          - elsif champ.type_champ == 'datetime'
+            =render partial: 'users/description/champs/datetime', locals: {champ: champ}
+
+          - elsif champ.type_champ == 'yes_no'
+            =render partial: 'users/description/champs/yes_no', locals: {champ: champ}
+
+          - elsif champ.type_champ == 'drop_down_list'
+            =render partial: 'users/description/champs/drop_down_list', locals: {champ: champ}
+
+          - elsif champ.type_champ == 'pays'
+            =render partial: 'users/description/champs/pays', locals: {champ: champ}
+
+          - elsif champ.type_champ == 'regions'
+            =render partial: 'users/description/champs/regions', locals: {champ: champ}
+
+          - elsif champ.type_champ == 'engagement'
+            =render partial: 'users/description/champs/engagement', locals: {champ: champ}
+
+          - elsif champ.type_champ == 'departements'
+            =render partial: 'users/description/champs/departements', locals: {champ: champ}
+
+          -else
+            %input.form-control{name:"champs['#{champ.id}']",
+                    placeholder: champ.libelle,
+                    id: "champs_#{champ.id}",
+                    value: champ.value,
+                    type: champ.type_champ,
+                    'data-provide' => champ.data_provide,
+                    'data-date-format' => champ.data_date_format}
+
+        - unless champ.description.empty? || champ.type_champ == 'engagement'
+          .row
+            .col-lg-8.col-md-8{class: 'description_div', id:"description_champs_#{champ.id}"}
+              = champ.description
+
+