Form: add various champs html and style

app/assets/stylesheets/new_design/common.scss

@@ -6,7 +6,8 @@
 
 body,
 input,
-textarea {
+textarea,
+select {
   @extend %new-type;
   font-size: 16px;
   line-height: 1.42857143;

app/assets/stylesheets/new_design/dossier-link.scss

@@ -0,0 +1,17 @@
+@import "constants";
+@import "colors";
+
+.dossier-link {
+  .help-block > p {
+    margin-top: - $default-padding;
+    margin-bottom: 2 * $default-padding;
+  }
+
+  .text-info {
+    color: $blue;
+  }
+
+  .text-warning {
+    color: $dark-red;
+  }
+}

app/assets/stylesheets/new_design/forms.scss

@@ -17,12 +17,15 @@
   input[type=text],
   input[type=email],
   input[type=password],
-  textarea {
+  input[type=date],
+  input[type=number],
+  input[type=tel],
+  textarea,
+  select {
     display: block;
-    width: 100%;
     border-radius: 4px;
     border: solid 1px $border-grey;
-    margin-bottom: 4 * $default-spacer;
+    margin-bottom: 2 * $default-padding;
     padding: $default-padding;
 
     &:disabled {
@@ -30,6 +33,60 @@
     }
   }
 
+  input[type=text],
+  input[type=email],
+  input[type=password],
+  input[type=date],
+  input[type=number],
+  input[type=tel],
+  textarea {
+    width: 100%;
+  }
+
+  input[type=email],
+  input[type=number],
+  input[type=tel], {
+    max-width: 500px;
+  }
+
+  input[type=checkbox],
+  input[type=radio] {
+    margin-bottom: 2 * $default-padding;
+  }
+
+  input[type=date] {
+    max-width: 180px;
+  }
+
+  .datetime {
+    input[type=date] {
+      display: inline-block;
+    }
+
+    select {
+      display: inline-block;
+    }
+  }
+
+  .header-section {
+    color: #4393F3;
+    font-weight: bold;
+    font-size: 20px;
+    margin-bottom: 2 * $default-padding;
+  }
+
+  .explication-libelle {
+    font-weight: bold;
+    font-size: 20px;
+    margin-bottom: $default-padding;
+  }
+
+  .explication {
+    background-color: $light-grey;
+    padding: $default-padding;
+    margin-bottom: 2 * $default-padding;
+  }
+
   .send {
     float: right;
     margin-bottom: $default-padding;

app/controllers/root_controller.rb

@@ -32,5 +32,41 @@ class RootController < ApplicationController
   end
 
   def patron
+    @all_champs = TypeDeChamp.type_champs
+      .map { |name, _| TypeDeChamp.new(type_champ: name, libelle: name) }
+      .map { |type_de_champ| Champ.new(type_de_champ: type_de_champ) }
+      .map.with_index do |champ, i|
+        champ.id = i
+        champ
+      end
+
+    @all_champs
+      .select { |champ| champ.type_champ == 'header_section' }
+      .each { |champ| champ.type_de_champ.libelle = 'un super titre de section' }
+
+    @all_champs
+      .select { |champ| %w(drop_down_list multiple_drop_down_list).include?(champ.type_champ) }
+      .each do |champ|
+        champ.type_de_champ.drop_down_list = DropDownList.new(type_de_champ: champ.type_de_champ)
+        champ.drop_down_list.value =
+"option A
+option B
+-- avant l'option C --
+option C"
+        champ.value = '["option B", "option C"]'
+      end
+
+    type_champ_values = {
+      'date': '2016-07-26',
+      'datetime': '26/07/2016 07:35',
+      'textarea': 'Une description de mon projet',
+      'explication': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat mauris, faucibus quis pharetra sit amet, pretium ac libero. Etiam vehicula eleifend bibendum. Morbi gravida metus ut sapien condimentum sodales mollis augue sodales. Vestibulum quis quam at sem placerat aliquet',
+    }
+
+    type_champ_values.each do |(type_champ, value)|
+      @all_champs
+        .select { |champ| champ.type_champ == type_champ.to_s }
+        .each { |champ| champ.value = value }
+    end
   end
 end

app/models/drop_down_list.rb

@@ -14,6 +14,10 @@ class DropDownList < ActiveRecord::Base
     champ.object.value.blank? ? [] : multiple ? JSON.parse(champ.object.value) : [champ.object.value]
   end
 
+  def selected_options_without_decorator(champ)
+    champ.value.blank? ? [] : multiple ? JSON.parse(champ.value) : [champ.value]
+  end
+
   def multiple
     type_de_champ.type_champ == 'multiple_drop_down_list'
   end

app/views/new_gestionnaire/dossiers/champs/_address.html.haml

@@ -0,0 +1,7 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%input{ type: 'text',
+  name: "champs['#{champ.id}']",
+  id: "champs_#{champ.id}",
+  placeholder: champ.libelle,
+  value: champ.value }

app/views/new_gestionnaire/dossiers/champs/_champ_label.html.haml

@@ -0,0 +1 @@
+%label{ for: :"champs_#{champ.id}" }>= champ.libelle

app/views/new_gestionnaire/dossiers/champs/_checkbox.html.haml

@@ -0,0 +1,8 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%input{ type: 'checkbox',
+  name: "champs['#{champ.id}']",
+  id: "champs_#{champ.id}",
+  checked: ('checked' if champ.value == 'on') }
+
+%br

app/views/new_gestionnaire/dossiers/champs/_civilite.html.haml

@@ -0,0 +1,10 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%div
+  %label
+    = radio_button_tag "champs['#{champ.id}']", "M.", champ.value == 'Mme' ? false : true
+    Monsieur
+
+  %label
+    = radio_button_tag "champs['#{champ.id}']", "Mme", champ.value == 'Mme'
+    Madame

app/views/new_gestionnaire/dossiers/champs/_date.html.haml

@@ -0,0 +1,7 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%input{ name: "champs['#{champ.id}']",
+  placeholder: "JJ/MM/AAAA",
+  id: "champs_#{champ.id}",
+  value: champ.value,
+  type: "date" }

app/views/new_gestionnaire/dossiers/champs/_datetime.html.haml

@@ -0,0 +1,21 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+.datetime
+  %input{ name: "champs['#{champ.id}']",
+          placeholder: champ.libelle,
+          id: "champs_#{champ.id}",
+          value: (champ.value.split(/[ ][0-9]*:[0-9]*/).first unless champ.value.nil?),
+          type: 'date' }
+
+  %select{ name: "time_hour['#{champ.id}']", id: "time_hour_#{champ.id}" }
+    - (0..23).each do |num|
+      - num = "%.2i" %num
+      %option{ value: num, selected: (:selected if champ.same_hour?(num)) }
+        = num
+  h
+  %select{ name: "time_minute['#{champ.id}']", id: "time_minute_#{champ.id}" }
+    - (0..55).step(5) do |num|
+      - num = "%.2i" %num
+      %option{ value: num, selected: (:selected if champ.same_minute?(num)) }
+        = num
+  min

app/views/new_gestionnaire/dossiers/champs/_departements.html.haml

@@ -0,0 +1,4 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+= select_tag("champs['#{champ.id}']",
+  options_for_select(Champ.departements, selected: champ.value))

app/views/new_gestionnaire/dossiers/champs/_dossier_link.html.haml

@@ -0,0 +1,22 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+- dossier = Dossier.find_by(id: champ.value)
+- show_text_summary = dossier.present?
+- show_warning = !show_text_summary && champ.value.present?
+- text_summary = dossier.try(:text_summary)
+
+.dossier-link
+  %input{ name: "champs['#{ champ.id }']",
+    placeholder: "Numéro de dossier",
+    id: "champs_#{ champ.id }",
+    value: champ.value,
+    type: 'number',
+    'autocomplete' => 'off',
+    'data-type' => 'dossier-link' }
+
+  .help-block
+    %p.text-info{ style: show_text_summary ? nil : 'display: none;' }
+      %span.dossier-text-summary= text_summary
+
+    %p.text-warning{ style: show_warning ? nil : 'display: none;' }
+      Ce dossier est inconnu

app/views/new_gestionnaire/dossiers/champs/_drop_down_list.html.haml

@@ -0,0 +1,8 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+- if champ.drop_down_list && champ.drop_down_list.options.any?
+  = select_tag("champs['#{champ.id}']",
+    options_for_select(champ.drop_down_list.options,
+      selected: champ.drop_down_list.selected_options_without_decorator(champ),
+      disabled: champ.drop_down_list.disabled_options),
+      multiple: false)

app/views/new_gestionnaire/dossiers/champs/_email.html.haml

@@ -0,0 +1,7 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%input{ type: 'email',
+  name: "champs['#{champ.id}']",
+  id: "champs_#{champ.id}",
+  placeholder: champ.libelle,
+  value: champ.value }

app/views/new_gestionnaire/dossiers/champs/_engagement.html.haml

@@ -0,0 +1,8 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%input{ type: 'checkbox',
+  name: "champs['#{champ.id}']",
+  id: "champs_#{champ.id}",
+  checked: ('checked' if champ.value == 'on') }
+
+%br

app/views/new_gestionnaire/dossiers/champs/_explication.html.haml

@@ -0,0 +1,2 @@
+%h2.explication-libelle= champ.libelle
+%p.explication= champ.value

app/views/new_gestionnaire/dossiers/champs/_header_section.html.haml

@@ -0,0 +1,2 @@
+%h2.header-section
+  = champ.libelle

app/views/new_gestionnaire/dossiers/champs/_multiple_drop_down_list.html.haml

@@ -0,0 +1,8 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+- if champ.drop_down_list && champ.drop_down_list.options.any?
+  = select_tag("champs['#{champ.id}']",
+    options_for_select(champ.drop_down_list.options,
+      selected: champ.drop_down_list.selected_options_without_decorator(champ),
+      disabled: champ.drop_down_list.disabled_options),
+      multiple: true)

app/views/new_gestionnaire/dossiers/champs/_number.html.haml

@@ -0,0 +1,7 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%input{ type: 'number',
+  name: "champs['#{champ.id}']",
+  id: "champs_#{champ.id}",
+  placeholder: champ.libelle,
+  value: champ.value }

app/views/new_gestionnaire/dossiers/champs/_pays.html.haml

@@ -0,0 +1,4 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+= select_tag("champs['#{champ.id}']",
+  options_for_select(Champ.pays, selected: champ.value))

app/views/new_gestionnaire/dossiers/champs/_phone.html.haml

@@ -0,0 +1,7 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%input{ type: 'tel',
+  name: "champs['#{champ.id}']",
+  id: "champs_#{champ.id}",
+  placeholder: champ.libelle,
+  value: champ.value }

app/views/new_gestionnaire/dossiers/champs/_regions.html.haml

@@ -0,0 +1,4 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+= select_tag("champs['#{champ.id}']",
+  options_for_select(Champ.regions, selected: champ.value))

app/views/new_gestionnaire/dossiers/champs/_text.html.haml

@@ -0,0 +1,7 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%input{ type: 'text',
+  name: "champs['#{champ.id}']",
+  id: "champs_#{champ.id}",
+  placeholder: champ.libelle,
+  value: champ.value }

app/views/new_gestionnaire/dossiers/champs/_textarea.html.haml

@@ -0,0 +1,7 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%textarea{ name: "champs['#{champ.id}']",
+  placeholder: champ.description,
+  id: "champs_#{champ.id}",
+  row: '6' }
+  = sanitize(champ.value)

app/views/new_gestionnaire/dossiers/champs/_yes_no.html.haml

@@ -0,0 +1,10 @@
+= render partial: 'new_gestionnaire/dossiers/champs/champ_label', locals: { champ: champ }
+
+%div
+  %label
+    = radio_button_tag "champs['#{champ.id}']", "true", champ.value == 'true'
+    Oui
+
+  %label
+    = radio_button_tag "champs['#{champ.id}']", "false", champ.value == 'false'
+    Non

app/views/root/patron.html.haml

@@ -3,10 +3,8 @@
     %h1 Formulaires
 
     %form.form
-      %label Nom
+      - @all_champs.each do |champ|
-      %input{ type: "text" }
+        = render partial: "new_gestionnaire/dossiers/champs/#{champ.type_champ}", locals: { champ: champ }
-      %textarea{ placeholder: "Description de votre projet" }
-      %label Mot de passe
       %input{ type: "password", value: "12345678" }
       %input.button.send{ type: "submit", value: "Envoyer" }