Use new editor

app/assets/stylesheets/new_design/breadcrumb.scss

@@ -11,6 +11,7 @@
 
     a {
       color: $black;
+      text-decoration: underline;
     }
 
     &::after {

app/assets/stylesheets/new_design/new_alert.scss

@@ -20,3 +20,12 @@
   border-color: $light-green;
   color: $dark-green;
 }
+
+.alert-fixed {
+  position: fixed;
+  left: 50%;
+  margin-left: -100px;
+  width: 200px;
+  top: 10px;
+  border-radius: 10px;
+}

app/controllers/admin/procedures_controller.rb

@@ -79,7 +79,12 @@ class Admin::ProceduresController < AdminController
       if gestionnaire
         gestionnaire.assign_to_procedure(@procedure)
       end
-      redirect_to admin_procedure_types_de_champ_path(procedure_id: @procedure.id)
+
+      if Flipflop.new_champs_editor?
+        redirect_to champs_procedure_path(@procedure)
+      else
+        redirect_to admin_procedure_types_de_champ_path(procedure_id: @procedure.id)
+      end
     end
   end
 

app/controllers/new_administrateur/procedures_controller.rb

@@ -1,7 +1,7 @@
 module NewAdministrateur
   class ProceduresController < AdministrateurController
-    before_action :retrieve_procedure, only: [:update]
-    before_action :procedure_locked?, only: [:update]
+    before_action :retrieve_procedure, only: [:champs, :annotations, :update]
+    before_action :procedure_locked?, only: [:champs, :annotations, :update]
 
     TYPE_DE_CHAMP_ATTRIBUTES = [
       :_destroy,
@@ -25,7 +25,14 @@ module NewAdministrateur
 
     def update
       if @procedure.update(procedure_params)
-        flash.now.notice = 'Démarche enregistrée.'
+        flash.now.notice = if params[:procedure][:types_de_champ_attributes].present?
+          'Champs enregistrés'
+        elsif params[:procedure][:types_de_champ_private_attributes].present?
+          'Annotations enregistrés'
+        else
+          'Démarche enregistrée.'
+        end
+
         reset_procedure
       else
         flash.now.alert = @procedure.errors.full_messages

app/helpers/application_helper.rb

@@ -7,11 +7,20 @@ module ApplicationHelper
     end
   end
 
-  def flash_class(level, sticky = false)
-    case level
-    when "notice" then "alert-success#{sticky ? ' sticky' : ''}"
-    when "alert" then "alert-danger#{sticky ? ' sticky' : ''}"
+  def flash_class(level, sticky: false, fixed: false)
+    class_names = case level
+    when 'notice'
+      ['alert-success']
+    when 'alert'
+      ['alert-danger']
     end
+    if sticky
+      class_names << 'sticky'
+    end
+    if fixed
+      class_names << 'alert-fixed'
+    end
+    class_names.join(' ')
   end
 
   def render_to_element(selector, partial:, outer: false, locals: {})
@@ -22,9 +31,9 @@ module ApplicationHelper
     # rubocop:enable Rails/OutputSafety
   end
 
-  def render_flash(timeout: false, sticky: false)
+  def render_flash(timeout: false, sticky: false, fixed: false)
     if flash.any?
-      html = render_to_element('#flash_messages', partial: 'layouts/flash_messages', locals: { sticky: sticky }, outer: true)
+      html = render_to_element('#flash_messages', partial: 'layouts/flash_messages', locals: { sticky: sticky, fixed: fixed }, outer: true)
       flash.clear
       if timeout
         html += remove_element('#flash_messages', timeout: timeout, inner: true)
@@ -56,6 +65,12 @@ module ApplicationHelper
     # rubocop:enable Rails/OutputSafety
   end
 
+  def fire_event(event_name, data)
+    # rubocop:disable Rails/OutputSafety
+    raw("DS.fire('#{event_name}', #{raw(data)});")
+    # rubocop:enable Rails/OutputSafety
+  end
+
   def current_email
     current_user&.email ||
       current_gestionnaire&.email ||

app/helpers/procedure_helper.rb

@@ -33,4 +33,56 @@ module ProcedureHelper
       end
     end
   end
+
+  def types_de_champ_data(procedure)
+    {
+      type: "champ",
+      types_de_champ_options: types_de_champ_options.to_json,
+      types_de_champ: types_de_champ_as_json(procedure.types_de_champ).to_json,
+      direct_uploads_url: rails_direct_uploads_url,
+      drag_icon_url: image_url("icons/drag.svg")
+    }
+  end
+
+  def types_de_champ_private_data(procedure)
+    {
+      type: "annotation",
+      types_de_champ_options: types_de_champ_options.to_json,
+      types_de_champ: types_de_champ_as_json(procedure.types_de_champ_private).to_json,
+      direct_uploads_url: rails_direct_uploads_url,
+      drag_icon_url: image_url("icons/drag.svg")
+    }
+  end
+
+  def procedure_data(procedure)
+    {
+      types_de_champ: types_de_champ_as_json(procedure.types_de_champ),
+      types_de_champ_private: types_de_champ_as_json(procedure.types_de_champ_private)
+    }.to_json
+  end
+
+  private
+
+  TOGGLES = {
+    TypeDeChamp.type_champs.fetch(:siret)           => :champ_siret?,
+    TypeDeChamp.type_champs.fetch(:integer_number)  => :champ_integer_number?,
+    TypeDeChamp.type_champs.fetch(:repetition)      => :champ_repetition?
+  }
+
+  def types_de_champ_options
+    types_de_champ = TypeDeChamp.type_de_champs_list_fr
+
+    types_de_champ.select! do |tdc|
+      toggle = TOGGLES[tdc.last]
+      toggle.blank? || Flipflop.send(toggle)
+    end
+
+    types_de_champ
+  end
+
+  def types_de_champ_as_json(types_de_champ)
+    types_de_champ.as_json(except: [:created_at, :updated_at],
+      methods: [:piece_justificative_template_filename, :piece_justificative_template_url],
+      include: { drop_down_list: { only: :value } })
+  end
 end

app/javascript/packs/application.js

@@ -32,6 +32,7 @@ import { replaceSemicolonByComma } from '../new_design/avis';
 
 // This is the global application namespace where we expose helpers used from rails views
 const DS = {
+  fire: (eventName, data) => Rails.fire(document, eventName, data),
   toggleCondidentielExplanation,
   scrollMessagerie,
   showMotivation,

app/models/type_de_champ.rb

@@ -161,6 +161,18 @@ class TypeDeChamp < ApplicationRecord
     "TypesDeChamp::#{type_champ.classify}TypeDeChamp"
   end
 
+  def piece_justificative_template_url
+    if piece_justificative_template.attached?
+      Rails.application.routes.url_helpers.url_for(piece_justificative_template)
+    end
+  end
+
+  def piece_justificative_template_filename
+    if piece_justificative_template.attached?
+      piece_justificative_template.filename
+    end
+  end
+
   private
 
   def setup_procedure

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

@@ -1,9 +1,10 @@
+- champs_editor_path = Flipflop.new_champs_editor? ? champs_procedure_path(@procedure) : admin_procedure_types_de_champ_path(@procedure)
 .row.white-back
   .alert.alert-info
     .form-group
       %p
         Pour vos nouveaux besoins de pièces jointes, nous vous invitons à
-        = link_to(admin_procedure_types_de_champ_path(@procedure)) do
+        = link_to(champs_editor_path) do
           rajouter des champs
         \ <em>pièce justificative</em> à votre formulaire.
 
@@ -17,7 +18,7 @@
         %li Support des pièces de grande taille (jusqu’à 200 Mo par pièce)
         %li Pas de limite de soumission simultanée de plusieurs pièces, pour une expérience usager plus confortable
 
-    = link_to(admin_procedure_types_de_champ_path(@procedure), class: 'btn btn-success') do
+    = link_to(champs_editor_path, class: 'btn btn-success') do
       Ajouter un champ PJ
 
   - if @procedure.has_old_pjs?

app/views/layouts/_flash_messages.html.haml

@@ -3,11 +3,12 @@
     #flash_message.center
       - flash.each do |key, value|
         - sticky = defined?(sticky) ? sticky : false
+        - fixed = defined?(fixed) ? fixed : false
         - if value.class == Array
-          .alert{ class: flash_class(key, sticky) }
+          .alert{ class: flash_class(key, sticky: sticky, fixed: fixed) }
             - value.each do |message|
               = sanitize(message)
               %br
         - else
-          .alert{ class: flash_class(key, sticky) }
+          .alert{ class: flash_class(key, sticky: sticky, fixed: fixed) }
             = sanitize(value)

app/views/layouts/left_panels/_left_panel_admin_procedurescontroller_navbar.html.haml

@@ -31,7 +31,8 @@
           %p.missing-steps (à compléter)
 
     - if !@procedure.locked?
-      %a#onglet-champs{ href: url_for(admin_procedure_types_de_champ_path(@procedure)) }
+      - champs_editor_path = Flipflop.new_champs_editor? ? champs_procedure_path(@procedure) : admin_procedure_types_de_champ_path(@procedure)
+      %a#onglet-champs{ href: champs_editor_path }
         .procedure-list-element{ class: ('active' if active == 'Champs') }
           Champs
 
@@ -41,7 +42,8 @@
           Pièces jointes
 
     - if !@procedure.locked?
-      %a#onglet-private-champs{ href: url_for(admin_procedure_types_de_champ_private_path(@procedure)) }
+      - annotations_editor_path = Flipflop.new_champs_editor? ? annotations_procedure_path(@procedure) : admin_procedure_types_de_champ_private_path(@procedure)
+      %a#onglet-private-champs{ href: annotations_editor_path }
         .procedure-list-element{ class: ('active' if active == 'Annotations privées') }
           Annotations privées
 

app/views/new_administrateur/_breadcrumbs.html.haml

@@ -1,5 +1,7 @@
 .sub-header
-  .container
+  .container.flex.justify-between.align-baseline
     %ul.breadcrumbs
       - steps.each do |step|
         %li= step
+    - if defined?(preview) && preview
+      = link_to "Prévisualiser le formulaire", apercu_procedure_path(@procedure), target: "_blank", class: 'button'

app/views/new_administrateur/procedures/annotations.html.haml

@@ -0,0 +1,12 @@
+= render partial: 'new_administrateur/breadcrumbs',
+  locals: { steps: [link_to('Démarches', admin_procedures_path),
+                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    'Configuration des annotations privées'], preview: true }
+
+.container
+  %h1 Configuration des annotations privées
+  %br
+
+  = form_for @procedure, remote: true, html: { class: 'form' } do |form|
+    #champs-editor{ data: types_de_champ_private_data(@procedure) }
+      .spinner

app/views/new_administrateur/procedures/champs.html.haml

@@ -0,0 +1,12 @@
+= render partial: 'new_administrateur/breadcrumbs',
+  locals: { steps: [link_to('Démarches', admin_procedures_path),
+                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    'Configuration des champs'], preview: true }
+
+.container
+  %h1 Configuration des champs
+  %br
+
+  = form_for @procedure, remote: true, html: { class: 'form' } do |form|
+    #champs-editor{ data: types_de_champ_data(@procedure) }
+      .spinner

app/views/new_administrateur/procedures/update.js.erb

@@ -1 +1,3 @@
-<%= render_flash timeout: 2000 %>
+<%= render_flash timeout: 6000, fixed: true %>
+
+<%= fire_event(:ProcedureUpdated, procedure_data(@procedure)) %>

config/features.rb

@@ -19,6 +19,7 @@ Flipflop.configure do
   feature :publish_draft
   feature :support_form
   feature :enable_email_login_token
+  feature :new_champs_editor
 
   group :production do
     feature :remote_storage,

config/routes.rb

@@ -360,6 +360,8 @@ Rails.application.routes.draw do
     resources :procedures, only: [:update] do
       member do
         get 'apercu'
+        get 'champs'
+        get 'annotations'
       end
     end
 

spec/controllers/admin/procedures_controller_spec.rb

@@ -182,6 +182,7 @@ describe Admin::ProceduresController, type: :controller do
 
       context 'when procedure is correctly save' do
         before do
+          Flipflop::FeatureSet.current.test!.switch!(:new_champs_editor, true)
           post :create, params: { procedure: procedure_params }
         end
 
@@ -197,8 +198,7 @@ describe Admin::ProceduresController, type: :controller do
           it { expect(subject.duree_conservation_dossiers_hors_ds).to eq(duree_conservation_dossiers_hors_ds) }
         end
 
-        it { is_expected.to redirect_to(admin_procedure_types_de_champ_path(procedure_id: Procedure.last.id)) }
-
+        it { is_expected.to redirect_to(champs_procedure_path(Procedure.last)) }
         it { expect(flash[:notice]).to be_present }
       end
 

spec/features/admin/procedure_creation_spec.rb

@@ -5,9 +5,11 @@ feature 'As an administrateur I wanna create a new procedure', js: true do
   include ProcedureSpecHelper
 
   let(:administrateur) { create(:administrateur, :with_procedure) }
+  let(:test_strategy) { Flipflop::FeatureSet.current.test! }
 
   before do
-    Flipflop::FeatureSet.current.test!.switch!(:publish_draft, true)
+    test_strategy.switch!(:publish_draft, true)
+    test_strategy.switch!(:new_champs_editor, true)
     login_as administrateur, scope: :administrateur
     visit root_path
   end
@@ -45,13 +47,13 @@ feature 'As an administrateur I wanna create a new procedure', js: true do
         fill_in_dummy_procedure_details
         click_on 'save-procedure'
 
-        expect(page).to have_current_path(admin_procedure_types_de_champ_path(Procedure.last))
+        expect(page).to have_current_path(champs_procedure_path(Procedure.last))
       end
     end
 
     context "when publish_draft disabled" do
       before do
-        Flipflop::FeatureSet.current.test!.switch!(:publish_draft, false)
+        test_strategy.switch!(:publish_draft, false)
       end
 
       scenario 'Finding save button for new procedure, libelle, description and cadre_juridique required' do
@@ -68,7 +70,7 @@ feature 'As an administrateur I wanna create a new procedure', js: true do
         fill_in_dummy_procedure_details(fill_path: false)
         click_on 'save-procedure'
 
-        expect(page).to have_current_path(admin_procedure_types_de_champ_path(Procedure.last))
+        expect(page).to have_current_path(champs_procedure_path(Procedure.last))
       end
     end
   end
@@ -95,12 +97,22 @@ feature 'As an administrateur I wanna create a new procedure', js: true do
       end
 
       scenario 'Add champ, add file, visualize them in procedure preview' do
-        fill_in 'procedure_types_de_champ_attributes_0_libelle', with: 'libelle de champ'
-        click_on 'add_type_de_champ'
-        expect(page).to have_current_path(admin_procedure_types_de_champ_path(Procedure.last))
-        expect(page).to have_selector('#procedure_types_de_champ_attributes_1_libelle')
-        expect(Procedure.last.types_de_champ.first.libelle).to eq('libelle de champ')
+        page.refresh
+        expect(page).to have_current_path(champs_procedure_path(Procedure.last))
 
+        within '.footer' do
+          click_on 'Ajouter un champ'
+        end
+        expect(page).to have_selector('#procedure_types_de_champ_attributes_0_libelle')
+        fill_in 'procedure_types_de_champ_attributes_0_libelle', with: 'libelle de champ'
+        expect(page).to have_content('Champs enregistrés')
+
+        within '.footer' do
+          click_on 'Ajouter un champ'
+        end
+        expect(page).to have_selector('#procedure_types_de_champ_attributes_1_libelle')
+
+        click_on Procedure.last.libelle
         click_on 'onglet-pieces'
         expect(page).to have_current_path(admin_procedure_pieces_justificatives_path(Procedure.last))
         fill_in 'procedure_types_de_piece_justificative_attributes_0_libelle', with: 'libelle de piece'
@@ -117,8 +129,15 @@ feature 'As an administrateur I wanna create a new procedure', js: true do
       end
 
       scenario 'After adding champ and file, make publication' do
+        page.refresh
+
+        within '.footer' do
+          click_on 'Ajouter un champ'
+        end
         fill_in 'procedure_types_de_champ_attributes_0_libelle', with: 'libelle de champ'
-        click_on 'add_type_de_champ'
+        expect(page).to have_content('Champs enregistrés')
+
+        click_on Procedure.last.libelle
         click_on 'onglet-pieces'
 
         expect(page).to have_current_path(admin_procedure_pieces_justificatives_path(Procedure.last))