add clickable summary in champ editor view for admin

app/assets/stylesheets/01_common.scss

@@ -3,6 +3,7 @@
 html,
 body {
   min-height: 100vh;
+  scroll-behavior: smooth;
 }
 
 .page-wrapper {

app/assets/stylesheets/02_utils.scss

@@ -85,6 +85,11 @@
   position: relative;
 }
 
+.sticky {
+  position: sticky;
+  top: 2em;
+}
+
 // display
 .hidden {
   display: none !important;

app/assets/stylesheets/dsfr.scss

@@ -136,6 +136,11 @@ button.fr-tag-bug {
   }
 }
 
+// on veut ajouter un gris plus clair dans le side_menu
+.fr-sidemenu__item .fr-sidemenu__link.custom-link-grey {
+  color: var(--text-disabled-grey);
+}
+
 // on veut ferrer à droite le dropdown de sélecteur de langue
 @media (min-width: 62em) {
   .fr-nav__item.custom-fr-translate-flex-end {
@@ -143,7 +148,6 @@ button.fr-tag-bug {
   }
 }
 
-
 // improve readability in Windows High Contrast Mode
 @media screen and (forced-colors: active) {
   .fr-input,

app/assets/stylesheets/procedure_champs_editor.scss

@@ -118,3 +118,8 @@
     }
   }
 }
+
+#summary nav ul {
+  height: 80vh;
+  overflow: auto;
+}

app/components/conditions/champs_conditions_component/champs_conditions_component.html.haml

@@ -1,6 +1,6 @@
 .flex.justify-start.section{ id: dom_id(@tdc.stable_self, :condition) }
-  = form_tag admin_procedure_condition_path(@procedure_id, @tdc.stable_id), method: :patch, class: 'form width-100' do
-    .conditionnel.mt-2.width-100
+  = form_tag admin_procedure_condition_path(@procedure_id, @tdc.stable_id), method: :patch, class: 'form' do
+    .conditionnel.mt-2
       .flex
         %p
           Logique conditionnelle
@@ -9,7 +9,7 @@
       = render Conditions::ConditionsErrorsComponent.new(conditions: condition_per_row, source_tdcs: @source_tdcs)
 
       - if @condition.present?
-        %table.condition-table.mt-2.width-100
+        %table.condition-table.mt-2
           %thead
             %tr
               %th.far-left

app/components/types_de_champ_editor/block_component/block_component.html.haml

@@ -1,6 +1,5 @@
 - c = TypesDeChampEditor::SelectChampTemplatePositionComponent.new(block: @block, coordinates: @coordinates)
-%ul.types-de-champ-block{ id: block_id, data: { controller: 'select-champ-position-template', 'select-champ-position-template-template-id-value': c.block_id } }
+%ul.fr-mt-0.types-de-champ-block{ id: block_id, data: { controller: 'select-champ-position-template', 'select-champ-position-template-template-id-value': c.block_id } }
   - @coordinates.each do |coordinate|
     = render TypesDeChampEditor::ChampComponent.new(coordinate:, upper_coordinates: coordinate.upper_coordinates)
   %li.hidden= render c
-

app/components/types_de_champ_editor/editor_component/editor_component.html.haml

@@ -1,4 +1,4 @@
-.fr-container.fr-pb-12w{ 'data-turbo': 'true', id: dom_id(@revision, :types_de_champ_editor) }
+.fr-pb-12w{ 'data-turbo': 'true', id: dom_id(@revision, :types_de_champ_editor) }
   .types-de-champ-editor.editor-root
     = render TypesDeChampEditor::ErrorsSummary.new(revision: @revision)
     = render TypesDeChampEditor::BlockComponent.new(block: @revision, coordinates: coordinates)

app/models/procedure.rb

@@ -967,6 +967,10 @@ class Procedure < ApplicationRecord
     lien_dpo.present? && lien_dpo.match?(/@/)
   end
 
+  def header_sections
+    draft_revision.revision_types_de_champ_public.filter { _1.type_de_champ.header_section? }
+  end
+
   private
 
   def pieces_jointes_list

app/views/administrateurs/procedures/_champs_summary.html.haml

@@ -0,0 +1,11 @@
+#summary{ class: @procedure.header_sections.present? ? 'fr-col-12 fr-col-md-3' : '' }
+  - if @procedure.header_sections.present?
+    %nav.fr-sidemenu.sticky.fr-hidden.fr-unhidden-md{ "aria-labelledby" => "fr-summary-title", role: "navigation" }
+      %ul.fr-sidemenu__list
+        - @procedure.header_sections.each do |header|
+          %li.fr-sidemenu__item
+            - level = header.type_de_champ.header_section_level_value.to_i
+            - if level == 1
+              %a.fr-sidemenu__link{ href: "##{dom_id(header, :type_de_champ_editor)}" }= header.libelle
+            - else
+              %a.fr-sidemenu__link{ class: level == 3 ? 'custom-link-grey': '', href: "##{dom_id(header, :type_de_champ_editor)}" }= "-- #{header.libelle}"

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

@@ -6,7 +6,10 @@
 .fr-container
   %h1 Configuration des champs
   = render NestedForms::FormOwnerComponent.new
-= render TypesDeChampEditor::EditorComponent.new(revision: @procedure.draft_revision)
+  .fr-grid-row
+    = render partial: 'champs_summary'
+    .fr-col
+      = render TypesDeChampEditor::EditorComponent.new(revision: @procedure.draft_revision)
 
 .padded-fixed-footer
   .fixed-footer

app/views/administrateurs/types_de_champ/_insert.turbo_stream.haml

@@ -14,6 +14,8 @@
 
 = turbo_stream.replace 'errors-summary', render(TypesDeChampEditor::ErrorsSummary.new(revision: @procedure.draft_revision))
 
+= turbo_stream.replace 'summary', render(partial: 'administrateurs/procedures/champs_summary')
+
 - unless flash.alert
   = turbo_stream.show 'autosave-notice'
   = turbo_stream.replace 'autosave-notice', render(partial: 'administrateurs/autosave_notice')