Merge branch 'feature/import-2023-06-26'

app/assets/stylesheets/02_utils.scss

@@ -133,10 +133,12 @@
   }
 }
 
+
 // who known
 .highlighted {
-  background: $orange-bg;
-  color: $black;
+  background-color: var(--background-contrast-yellow-moutarde); // from fr-badge--new
+  color: var(--text-action-high-grey);
+  background-clip: content-box;
 }
 
 .overflow-y-visible {

app/assets/stylesheets/demande.scss

@@ -1,27 +1,29 @@
 @import "colors";
 @import "constants";
 
-.demande {
-  padding-top: 3 * $default-padding;
-  padding-bottom: 3 * $default-padding;
-
-  h1 {
-    margin-bottom: $default-padding;
+.dossier-show {
+  @media (max-width: 48em) {
+    .d-block-sm {
+      display: block;
+    }
   }
 
-  .intro {
-    margin: $default-padding 0;
+  .champ-label {
+    font-weight: 600;
+    margin-bottom: 0;
+    color: var(--text-action-high-grey);
   }
 
-  b {
-    font-weight: bold;
+  .champ-content {
+    padding: 0 0 0.5rem;
+
+    p {
+      padding: 0;
+      margin: 0;
+    }
   }
 
-  hr {
-    border: none;
-    height: 1px;
-    background-color: $grey;
-    margin-top: 2 * $default-padding;
-    margin-bottom: 2 * $default-padding;
+  .top-bordered {
+    border-top: 1px solid var(--border-default-grey);
   }
 }

app/assets/stylesheets/sections.scss

@@ -29,32 +29,32 @@
     counter-reset: h7;
   }
 
-  .header-section.fr-h2::before {
+  .header-section.section-2::before {
     counter-increment: h2;
     content: counter(h2) ". ";
   }
 
-  .header-section.fr-h3::before {
+  .header-section.section-3::before {
     counter-increment: h3;
     content: counter(h2) "." counter(h3) ". ";
   }
 
-  .header-section.fr-h4::before {
+  .header-section.section-4::before {
     counter-increment: h4;
     content: counter(h2) "." counter(h3) "." counter(h4) ". ";
   }
 
-  .header-section.fr-h5::before {
+  .header-section.section-5::before {
     counter-increment: h5;
     content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
   }
 
-  .header-section.fr-h6::before {
+  .header-section.section-6::before {
     counter-increment: h6;
     content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
   }
 
-  .header-section.fr-h7::before {
+  .header-section.section-7::before {
     counter-increment: h7;
     content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) "." counter(h7) ". ";
   }

app/components/dossiers/champ_row_show_component.rb

@@ -0,0 +1,21 @@
+class Dossiers::ChampRowShowComponent < ApplicationComponent
+  include ChampHelper
+  include DossierHelper
+  include ApplicationHelper
+  def initialize(champs:, demande_seen_at:, profile:, repetition:)
+    @repetition = repetition
+    @champs = champs
+    @demande_seen_at = demande_seen_at
+    @profile = profile
+  end
+
+  def updated_after_deposer?(champ)
+    return false if champ.dossier.depose_at.blank?
+    champ.updated_at > champ.dossier.depose_at
+  end
+
+  def number_with_html_delimiter(num)
+    # we are using the span delimiter that doesn't insert spaces when copying and pasting the number
+    number_with_delimiter(num, delimiter: tag.span(class: 'numbers-delimiter'))
+  end
+end

app/components/dossiers/champ_row_show_component/champ_row_show_component.en.yml

@@ -0,0 +1,3 @@
+---
+en:
+  blank: "blank (optional)"

app/components/dossiers/champ_row_show_component/champ_row_show_component.fr.yml

@@ -0,0 +1,3 @@
+---
+fr:
+  blank: "non saisi (facultatif)"

app/components/dossiers/champ_row_show_component/champ_row_show_component.html.haml

@@ -0,0 +1,66 @@
+- @champs.each do |champ|
+  .fr-px-4v.fr-my-2v
+    - if champ.repetition?
+      %p.champ-label= "#{champ.libelle} :"
+      - champ.rows.each do |row|
+        = render Dossiers::ChampRowShowComponent.new(champs: row, demande_seen_at: @demande_seen_at, profile: @profile, repetition: true)
+
+    - else
+      .flex.d-block-sm
+        %p.champ-label.flex-grow= "#{champ.libelle} :"
+
+        - if updated_after_deposer?(champ)
+          %p.fr-mb-0.fr-text--sm
+            %span{ class: highlight_if_unseen_class(@demande_seen_at, champ.updated_at) }
+              = t(:updated_at, scope: [:views, :shared, :dossiers, :form], datetime: try_format_datetime(champ.updated_at))
+
+      - if champ.blank? && ![TypeDeChamp.type_champs.fetch(:piece_justificative), TypeDeChamp.type_champs.fetch(:titre_identite)].include?(champ.type_champ)
+        .champ-content.fr-text-mention--grey{ class: [highlight_if_unseen_class(@demande_seen_at, champ.updated_at), champ.type_champ] }
+          %p
+            %em= t('.blank')
+      - else
+        .champ-content{ class: [highlight_if_unseen_class(@demande_seen_at, champ.updated_at), champ.type_champ] }
+          - case champ.type_champ
+          - when TypeDeChamp.type_champs.fetch(:carte)
+            = render partial: "shared/champs/carte/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:dossier_link)
+            = render partial: "shared/champs/dossier_link/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:multiple_drop_down_list)
+            = render partial: "shared/champs/multiple_drop_down_list/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:piece_justificative), TypeDeChamp.type_champs.fetch(:titre_identite)
+            = render partial: "shared/champs/piece_justificative/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:siret)
+            = render partial: "shared/champs/siret/show", locals: { champ: champ, profile: @profile }
+          - when TypeDeChamp.type_champs.fetch(:iban)
+            = render partial: "shared/champs/iban/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:textarea)
+            = render partial: "shared/champs/textarea/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:annuaire_education)
+            = render partial: "shared/champs/annuaire_education/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:cnaf)
+            = render partial: "shared/champs/cnaf/show", locals: { champ: champ, profile: @profile }
+          - when TypeDeChamp.type_champs.fetch(:dgfip)
+            = render partial: "shared/champs/dgfip/show", locals: { champ: champ, profile: @profile }
+          - when TypeDeChamp.type_champs.fetch(:pole_emploi)
+            = render partial: "shared/champs/pole_emploi/show", locals: { champ: champ, profile: @profile }
+          - when TypeDeChamp.type_champs.fetch(:mesri)
+            = render partial: "shared/champs/mesri/show", locals: { champ: champ, profile: @profile }
+          - when TypeDeChamp.type_champs.fetch(:address)
+            = render partial: "shared/champs/address/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:communes)
+            = render partial: "shared/champs/communes/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:regions)
+            = render partial: "shared/champs/regions/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:rna)
+            = render partial: "shared/champs/rna/show", locals: { champ: champ, profile: @profile }
+          - when TypeDeChamp.type_champs.fetch(:epci)
+            = render partial: "shared/champs/epci/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:date)
+            %p= champ.to_s
+          - when TypeDeChamp.type_champs.fetch(:datetime)
+            %p= champ.to_s
+          - when TypeDeChamp.type_champs.fetch(:number)
+            %p= number_with_html_delimiter(champ.to_s)
+          - else
+            - if champ.present?
+              = format_text_value(champ.to_s.strip) # format already wrap in p

app/components/editable_champ/header_section_component.rb

@@ -1,21 +1,28 @@
 class EditableChamp::HeaderSectionComponent < ApplicationComponent
-  def initialize(form: nil, champ:, seen_at: nil)
+  def initialize(form: nil, champ:, seen_at: nil, html_class: {})
     @champ = champ
+    @html_class = html_class
   end
 
   def level
     @champ.level + 1 # skip one heading level
   end
 
+  def collapsible?
+    @champ.level == 1
+  end
+
   def libelle
     @champ.libelle
   end
 
   def header_section_classnames
     class_names(
-      "fr-h#{level}": true,
-      'header-section': @champ.dossier.auto_numbering_section_headers_for?(@champ),
-      'hidden': !@champ.visible?
+      {
+        "section-#{level}": true,
+        'header-section': @champ.dossier.auto_numbering_section_headers_for?(@champ),
+        'hidden': !@champ.visible?
+      }.merge(@html_class)
     )
   end
 

app/components/editable_champ/section_component.rb

@@ -3,9 +3,7 @@ class EditableChamp::SectionComponent < ApplicationComponent
   include TreeableConcern
 
   def initialize(nodes: nil, champs: nil)
-    if (nodes.nil?)
-      nodes = to_tree(champs:)
-    end
+    nodes ||= to_tree(champs:)
     @nodes = to_fieldset(nodes:)
   end
 

app/components/viewable_champ/section_component.rb

@@ -0,0 +1,49 @@
+class ViewableChamp::SectionComponent < ApplicationComponent
+  include ApplicationHelper
+  include TreeableConcern
+
+  def initialize(champs: nil, nodes: nil, demande_seen_at:, profile:)
+    @demande_seen_at, @profile, @repetition = demande_seen_at, profile
+    nodes ||= to_tree(champs:)
+    @nodes = to_sections(nodes:)
+  end
+
+  def section_id
+    @section_id ||= header_section ? dom_id(header_section, :content) : SecureRandom.uuid
+  end
+
+  def header_section
+    if @nodes.first.is_a?(Champs::HeaderSectionChamp)
+      @nodes.first
+    end
+  end
+
+  def champs
+    tail.filter { _1.is_a?(Champ) && _1.visible? && !_1.exclude_from_view? }
+  end
+
+  def sections
+    tail.filter { !_1.is_a?(Champ) }
+  end
+
+  def tail
+    return @nodes if header_section.blank?
+    _, *rest_of_champ = @nodes
+
+    rest_of_champ
+  end
+
+  def tag_for_depth
+    "h#{header_section.level + 1}" if header_section
+  end
+
+  def first_level?
+    header_section.level == 1
+  end
+
+  private
+
+  def to_sections(nodes:)
+    nodes.map { _1.is_a?(Array) ? ViewableChamp::SectionComponent.new(nodes: _1, demande_seen_at: @demande_seen_at, profile: @profile) : _1 }
+  end
+end

app/components/viewable_champ/section_component/section_component.en.yml

@@ -0,0 +1,3 @@
+---
+en:
+  toggle_section: "Show/hide fields of « %{section} »"

app/components/viewable_champ/section_component/section_component.fr.yml

@@ -0,0 +1,3 @@
+---
+fr:
+  toggle_section: "Afficher/Cacher les champs de la section « %{section} »"

app/components/viewable_champ/section_component/section_component.html.haml

@@ -0,0 +1,14 @@
+= tag.div(class: "reset-#{tag_for_depth} fr-mt-4v", 'data-controller': 'expand') do
+  - if header_section
+    %div{ class: class_names(flex: true, "top-bordered" => header_section.level == 1) }
+      = render EditableChamp::HeaderSectionComponent.new(champ:  header_section, html_class: {' fr-m-0 fr-text--md fr-px-4v flex-grow' => true, "fr-text-action-high--blue-france" => header_section.level == 1, 'fr-py-3v' => header_section.level == 1, 'fr-pt-3v' => header_section.level == 1})
+      - if ![champs, sections].map(&:empty?).all? && header_section.level == 1
+        %button{ type: "button", aria: { controls: section_id, "expanded": "true", label: t('.toggle_section', section: header_section.libelle) }, href: section_id, 'data-action': 'click->expand#toggle', class: "fr-btn fr-btn--tertiary-no-outline" }
+          %i.fr-icon-arrow-up-s-line{ 'aria-hidden': 'true', 'data-expand-target': 'icon' }
+
+  %div{ id: section_id, 'data-expand-target': 'content' }
+    - if !champs.empty?
+      = render Dossiers::ChampRowShowComponent.new(champs: champs, demande_seen_at: @demande_seen_at, profile: @profile, repetition: false)
+
+    - sections.each do |section|
+      = render section

app/graphql/mutations/groupe_instructeur_ajouter_instructeurs.rb

@@ -13,7 +13,12 @@ def resolve(groupe_instructeur:, instructeurs:)
       ids, emails = partition_instructeurs_by(instructeurs)
       _, invalid_emails = groupe_instructeur.add_instructeurs(ids:, emails:)
 
-      groupe_instructeur.reload
+      if instructeurs.present?
+        groupe_instructeur.reload
+        GroupeInstructeurMailer
+          .notify_added_instructeurs(groupe_instructeur, instructeurs, current_administrateur.email)
+          .deliver_later
+      end
 
       result = { groupe_instructeur: }
 

app/graphql/mutations/groupe_instructeur_supprimer_instructeurs.rb

@@ -12,8 +12,18 @@ def resolve(groupe_instructeur:, instructeurs:)
       ids, emails = partition_instructeurs_by(instructeurs)
       instructeurs = groupe_instructeur.instructeurs.find_all_by_identifier(ids:, emails:)
 
-      instructeurs.each { groupe_instructeur.remove(_1) }
-      groupe_instructeur.reload
+      if instructeurs.present?
+        instructeurs.each { groupe_instructeur.remove(_1) }
+
+        groupe_instructeur.reload
+
+        instructeurs.each do |instructeur|
+          GroupeInstructeurMailer
+            .notify_removed_instructeur(groupe_instructeur, instructeur, current_administrateur.email)
+            .deliver_later
+        end
+      end
+
       { groupe_instructeur: }
     end
   end

app/javascript/controllers/expand_controller.ts

@@ -8,8 +8,15 @@ export class ExpandController extends ApplicationController {
   declare readonly iconTarget: HTMLElement;
 
   toggle(event: Event) {
+    const target = event.currentTarget as HTMLButtonElement;
+
     event.preventDefault();
     toggle(this.contentTarget);
     toggleExpandIcon(this.iconTarget);
+    if (this.contentTarget.classList.contains('hidden')) {
+      target.setAttribute('aria-expanded', 'false');
+    } else {
+      target.setAttribute('aria-expanded', 'true');
+    }
   }
 }

app/javascript/shared/utils.test.ts

@@ -37,14 +37,14 @@ suite('@utils', () => {
 
   test('toggleExpandIcon', () => {
     const icon = document.createElement('icon');
-    icon.classList.add('fr-icon-add-line');
+    icon.classList.add('fr-icon-arrow-down-s-line');
 
     toggleExpandIcon(icon);
-    expect(icon.classList.contains('fr-icon-subtract-line')).toBeTruthy();
-    expect(icon.classList.contains('fr-icon-add-line')).toBeFalsy();
+    expect(icon.classList.contains('fr-icon-arrow-up-s-line')).toBeTruthy();
+    expect(icon.classList.contains('fr-icon-arrow-down-s-line')).toBeFalsy();
     toggleExpandIcon(icon);
-    expect(icon.classList.contains('fr-icon-add-line')).toBeTruthy();
-    expect(icon.classList.contains('fr-icon-subtract-line')).toBeFalsy();
+    expect(icon.classList.contains('fr-icon-arrow-down-s-line')).toBeTruthy();
+    expect(icon.classList.contains('fr-icon-arrow-up-s-line')).toBeFalsy();
   });
 
   test('isSelectElement', () => {

app/javascript/shared/utils.ts

@@ -88,8 +88,8 @@ export function toggle(el: Element | null, force?: boolean) {
 }
 
 export function toggleExpandIcon(icon: Element | null) {
-  icon?.classList.toggle('fr-icon-add-line');
-  icon?.classList?.toggle('fr-icon-subtract-line');
+  icon?.classList.toggle('fr-icon-arrow-down-s-line');
+  icon?.classList?.toggle('fr-icon-arrow-up-s-line');
 }
 
 export function enable(