style(demande): layout with 2 columns

app/assets/stylesheets/demande.scss

@@ -2,25 +2,48 @@
 @import "constants";
 
 .dossier-show {
-  @media (max-width: 48em) {
-    .d-block-sm {
-      display: block;
+  .champ-row {
+    @media (min-width: 48em) {
+      display: flex;
     }
   }
 
   .champ-label {
     font-weight: 600;
     margin-bottom: 0;
-    color: var(--text-action-high-grey);
+
+    @media (min-width: 48em) {
+      flex: 3;
+      margin-right: 1rem;
+    }
   }
 
   .champ-content {
     padding: 0 0 0.5rem;
+    color: var(--text-action-high--grey);
+
+    @media (min-width: 48em) {
+      flex: 4;
+    }
 
     p {
       padding: 0;
       margin: 0;
     }
+
+    ul {
+      margin-block-start: 0;
+    }
+  }
+
+  .champ-updated {
+    float: right;
+  }
+
+  .champ-repetition {
+    .champ-updated {
+      margin-right: -1rem; // align with non repetition contents and badges
+    }
   }
 
   .top-bordered {

app/components/dossiers/champ_row_show_component.rb

@@ -30,29 +30,16 @@ class Dossiers::ChampRowShowComponent < ApplicationComponent
   end
 
   def each_champ(&block)
-    @champs.filter { show_champ?(_1) && _1.visible? && !_1.exclude_from_view? }.each(&block)
+    @champs.filter { _1.visible? && !_1.exclude_from_view? && !_1.header_section? }.each(&block)
   end
 
   private
 
-  # champ.blank? is overloaded, disable the cop
-  # rubocop:disable Rails/Present
-  def show_champ?(champ)
-    if view_usager?
-      true
-    elsif champ.blank? && updated_after_deposer?(champ)
-      true
-    else
-      !champ.blank?
-    end
-  end
-  # rubocop:enable Rails/Present
-
-  def view_usager?
+  def usager?
     @profile == 'usager'
   end
 
-  def view_instructeur?
+  def instructeur?
     @profile == 'instructeur'
   end
 end

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

@@ -1,27 +1,29 @@
 - each_champ do |champ|
-  .fr-px-4v.fr-my-2v
-    - if champ.repetition?
-      - champ.rows.each.with_index do |row, i|
-        .fr-background-alt--grey.fr-p-3v.fr-my-3w
-          %p.champ-label= "#{champ.libelle}  #{i +1}:"
+  - if champ.repetition?
+    - champ.rows.each.with_index do |row, i|
+      .fr-background-alt--grey.fr-p-2w.fr-my-3w.fr-ml-2w.champ-repetition
+        %p.font-weight-bold= "#{champ.libelle} #{i + 1} :"
 
-          = render Dossiers::ChampRowShowComponent.new(champs: row, demande_seen_at: @demande_seen_at, profile: @profile, repetition: true)
+        = render Dossiers::ChampRowShowComponent.new(champs: row, demande_seen_at: @demande_seen_at, profile: @profile, repetition: true)
 
-    - elsif !champ.header_section?
-      .flex.d-block-sm
-        %p.champ-label.flex-grow= "#{champ.libelle} :"
-
-        - if updated_after_deposer?(champ)
-          %p.fr-mb-0.fr-text--sm
-            %span.fr-badge.fr-badge--sm{ class: badge_class_if_unseen(@demande_seen_at, champ.updated_at) }
-              = t(:updated_at, scope: [:views, :shared, :dossiers, :form], datetime: try_format_datetime(champ.updated_at))
+  - else
+    .fr-px-2w.fr-my-2w.champ-row
+      %p.champ-label= "#{champ.libelle} :"
 
       - if champ.blank?
-        .champ-content.fr-text-mention--grey{ class: [highlight_if_unseen_class(@demande_seen_at, champ.updated_at), champ.type_champ] }
-          %p
-            %em= t(blank_key(champ))
+        .champ-content.fr-text-mention--grey{ class: champ.type_champ }
+          - if usager?
+            %p
+              %em= t(blank_key(champ))
+
       - else
-        .champ-content{ class: [highlight_if_unseen_class(@demande_seen_at, champ.updated_at), champ.type_champ] }
+        .champ-content{ class: champ.type_champ }
+
+          - if updated_after_deposer?(champ)
+            %p.fr-mb-1v.fr-ml-3v.champ-updated
+              %span.fr-badge.fr-badge--sm{ class: badge_class_if_unseen(@demande_seen_at, champ.updated_at) }
+                = t(:updated_at, scope: [:views, :shared, :dossiers, :form], datetime: try_format_datetime(champ.updated_at, format: :veryshort))
+
           - case champ.type_champ
           - when TypeDeChamp.type_champs.fetch(:carte)
             = render partial: "shared/champs/carte/show", locals: { champ: champ }
@@ -61,8 +63,8 @@
             %p= champ.to_s
           - when TypeDeChamp.type_champs.fetch(:datetime)
             %p= champ.to_s
-          - when TypeDeChamp.type_champs.fetch(:number)
+          - when TypeDeChamp.type_champs.fetch(:number), TypeDeChamp.type_champs.fetch(:integer_number), TypeDeChamp.type_champs.fetch(:decimal_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
+            = format_text_value(champ.to_s.strip) # format already wrap in p
+

app/helpers/application_helper.rb

@@ -90,8 +90,8 @@ module ApplicationHelper
     date.present? ? I18n.l(date, format: :long) : ''
   end
 
-  def try_format_datetime(datetime)
-    datetime.present? ? I18n.l(datetime) : ''
+  def try_format_datetime(datetime, format: nil)
+    datetime.present? ? I18n.l(datetime, format:) : ''
   end
 
   def try_format_mois_effectif(etablissement)

app/views/shared/dossiers/_demande.html.haml

@@ -4,7 +4,7 @@
 
 .fr-container.counter-start-header-section.dossier-show
   .fr-grid-row.fr-grid-row--center
-    .fr-col-xl-10
+    .fr-col-12
       %h2.fr-h6.fr-background-alt--grey.fr-mb-0
         .flex-grow.fr-py-3v.fr-px-4v= t('views.shared.dossiers.demande.en_construction')
 

app/views/shared/dossiers/_identite_entreprise.html.haml

@@ -6,21 +6,21 @@
         - if profile == "instructeur"
           %p
             Il nʼest pas possible dʼaccepter ou de refuser un dossier sans cette étape.
-    .fr-my-2v
+    .fr-my-2v.champ-row
       %p.champ-label SIRET :
       .champ-content
         %p= etablissement.siret
   - else
     - if etablissement.diffusable_commercialement == false && profile != 'instructeur'
-      .fr-my-2v
+      .fr-my-2v.champ-row
         .champ-content
           %p= t('warning_for_private_info', scope: 'views.shared.dossiers.identite_entreprise', siret: pretty_siret(etablissement.siret))
     - else
-      .fr-my-2v
+      .fr-my-2v.champ-row
         %p.champ-label Dénomination :
         .champ-content
           %p= raison_sociale_or_name(etablissement)
-      .fr-my-2v
+      .fr-my-2v.champ-row
         %p.champ-label SIRET :
         .champ-content
           %p #{pretty_siret(etablissement.siret)} #{ render Dsfr::CopyButtonComponent.new(text: etablissement.siret, title: "Copier le siret dans le presse-papier", success: "Le siret a été copié dans le presse-papier") }
@@ -28,23 +28,23 @@
 
       - unless local_assigns[:short_identity]
         - if etablissement.siret != etablissement.entreprise.siret_siege_social
-          .fr-my-2v
+          .fr-my-2v.champ-row
             %p.champ-label SIRET du siège social:
             .champ-content
               %p= etablissement.entreprise.siret_siege_social
-        .fr-my-2v
+        .fr-my-2v.champ-row
           %p.champ-label Forme juridique :
           .champ-content
             %p= sanitize(etablissement.entreprise.forme_juridique)
-        .fr-my-2v
+        .fr-my-2v.champ-row
           %p.champ-label Libellé NAF :
           .champ-content
             %p= etablissement.libelle_naf
-        .fr-my-2v
+        .fr-my-2v.champ-row
           %p.champ-label Code NAF :
           .champ-content
             %p= etablissement.naf
-        .fr-my-2v
+        .fr-my-2v.champ-row
           %p.champ-label Date de création :
           .champ-content
             %p
@@ -54,41 +54,41 @@
               %span.label= humanized_entreprise_etat_administratif(etablissement)
 
         - if profile == 'instructeur'
-          .fr-my-2v
+          .fr-my-2v.champ-row
             %p.champ-label
               Effectif mensuel
               = try_format_mois_effectif(etablissement)
               (URSSAF) :
             .champ-content
               %p= etablissement.entreprise_effectif_mensuel
-          .fr-my-2v
+          .fr-my-2v.champ-row
             %p.champ-label
               Effectif moyen annuel
               = etablissement.entreprise_effectif_annuel_annee
               (URSSAF) :
             .champ-content
               %p= etablissement.entreprise_effectif_annuel
-        .fr-my-2v
+        .fr-my-2v.champ-row
           %p.champ-label Effectif de l'organisation (INSEE) :
           .champ-content
             %p
             = effectif(etablissement)
-        .fr-my-2v
+        .fr-my-2v.champ-row
           %p.champ-label Numéro de TVA intracommunautaire :
           .champ-content
             %p= etablissement.entreprise.numero_tva_intracommunautaire
-        .fr-my-2v
+        .fr-my-2v.champ-row
           %p.champ-label Adresse :
           .champ-content
             %p
             - etablissement.adresse.split("\n").each do |line|
               = line
               %br
-        .fr-my-2v
+        .fr-my-2v.champ-row
           %p.champ-label Capital social :
           .champ-content
             %p= pretty_currency(etablissement.entreprise.capital_social)
-        .fr-my-2v
+        .fr-my-2v.champ-row
           %p.champ-label Chiffre d’affaires :
           .champ-content
             %p
@@ -115,7 +115,7 @@
 
             = render partial: 'shared/dossiers/identite_entreprise_bilan_detail',
               locals: { libelle: 'Besoin en fonds de roulement', key: 'besoin_en_fonds_de_roulement', etablissement: etablissement }
-            .fr-my-2v
+            .fr-my-2v.champ-row
               %p.champ-label
                 Chiffres financiers clés (Banque de France)
                 = "en #{pretty_currency_unit(etablissement.entreprise_bilans_bdf_monnaie)} :"
@@ -139,13 +139,13 @@
                   ou
                   = link_to "au format ods", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'ods')
           - else
-            .fr-my-2v
+            .fr-my-2v.champ-row
               %p.champ-label
                 Bilans Banque de France :
               .champ-content
                 %p Les 3 derniers bilans connus de votre entreprise par la Banque de France ont été joints à votre dossier.
         - if etablissement.entreprise_attestation_sociale.attached?
-          .fr-my-2v
+          .fr-my-2v.champ-row
             %p.champ-label Attestation sociale :
             - if profile == 'instructeur'
               .champ-content
@@ -155,7 +155,7 @@
                 %p Une attestation de vigilance délivrée par l'ACOSS a été jointe à votre dossier.
 
         - if etablissement.entreprise_attestation_fiscale.attached?
-          .fr-my-2v
+          .fr-my-2v.champ-row
             %p.champ-label Attestation fiscale :
             - if profile == 'instructeur'
               .champ-content
@@ -165,27 +165,27 @@
                 %p Une attestation fiscale délivrée par l'URSSAF a été jointe à votre dossier.
 
         - if etablissement.association?
-          .fr-my-2v
+          .fr-my-2v.champ-row
             %p.champ-label Numéro RNA :
             .champ-content
               %p= etablissement.association_rna
-          .fr-my-2v
+          .fr-my-2v.champ-row
             %p.champ-label Titre :
             .champ-content
               %p= etablissement.association_titre
-          .fr-my-2v
+          .fr-my-2v.champ-row
             %p.champ-label Objet :
             .champ-content
               %p= etablissement.association_objet
-          .fr-my-2v
+          .fr-my-2v.champ-row
             %p.champ-label Date de création :
             .champ-content
               %p= try_format_date(etablissement.association_date_creation)
-          .fr-my-2v
+          .fr-my-2v.champ-row
             %p.champ-label Date de publication :
             .champ-content
               %p= try_format_date(etablissement.association_date_publication)
-          .fr-my-2v
+          .fr-my-2v.champ-row
             %p.champ-label Date de déclaration :
             .champ-content
               %p= try_format_date(etablissement.association_date_declaration)

app/views/shared/dossiers/_identite_entreprise_bilan_detail.html.haml

@@ -1,7 +1,6 @@
-%tr
-  %td.libelle
-    = "#{libelle} :"
-  %td
+.fr-my-2v.champ-row
+  %p.champ-label= "#{libelle} :"
+  .champ-content
     %details
       - etablissement.entreprise_bilans_bdf.each do |bilan|
         = "#{pretty_date_exercice(bilan["date_arret_exercice"])} : "

app/views/shared/dossiers/_identite_individual.html.haml

@@ -1,18 +1,17 @@
-
-.fr-my-2v
+.fr-my-2v.champ-row
   %p.champ-label= t('views.users.dossiers.identite.civility')
   .champ-content
     %p= individual.gender
-.fr-my-2v
+.fr-my-2v.champ-row
   %p.champ-label= t('views.users.dossiers.identite.first_name')
   .champ-content
     %p= individual.prenom
-.fr-my-2v
+.fr-my-2v.champ-row
   %p.champ-label= t('views.users.dossiers.identite.last_name')
   .champ-content
     %p= individual.nom
 - if individual.birthdate.present?
-  .fr-my-2v
+  .fr-my-2v.champ-row
     %p.champ-label= t('views.users.dossiers.identite.birthdate')
     .champ-content
       %p= try_format_date(individual.birthdate)

app/views/shared/dossiers/_infos_generales.html.haml

@@ -12,22 +12,22 @@
 
   - if dossier.justificatif_motivation.attached?
     -# download component already has margin bottom
-    %div
-      %p.champ-label Justificatif :
+    %div.champ-row
+      %p.champ-label Justificatif :
       .champ-content
         .action
           = render Attachment::ShowComponent.new(attachment: dossier.justificatif_motivation.attachment)
 
   - if dossier.motivation.present?
-    .fr-mb-2w
-      %p.champ-label Motivation :
+    .fr-mb-2w.champ-row
+      %p.champ-label Motivation :
       .champ-content
         .action
           = dossier.motivation
 
   - if dossier.attestation.present?
-    .fr-mb-2w
-      %p.champ-label Attestation :
+    .fr-mb-2w.champ-row
+      %p.champ-label Attestation :
       .champ-content
         .action
           = link_to('Voir l’attestation', attestation_instructeur_dossier_path(dossier.procedure, dossier), target: '_blank', rel: 'noopener')

app/views/shared/dossiers/_user_infos.html.haml

@@ -1,4 +1,4 @@
-.fr-my-2v
+.fr-my-2w.champ-row
   %p.champ-label Email :
   .champ-content
     %p= user_deleted ? "#{email} (l’usager a supprimé son compte)" : email

config/locales/time_format.fr.rb

@@ -2,6 +2,13 @@
   :fr => {
     :time => {
       :formats => {
+        veryshort: lambda { |time, _|
+          if time.year == Date.current.year
+            "%d/%m %H:%M"
+          else
+            "%d/%m/%Y %H:%M"
+          end
+        },
         :message_date => lambda { |time, _| "le #{time.day == 1 ? '1er' : time.day} %B à %H h %M" },
         :message_date_with_year => lambda { |time, _| "le #{time.day == 1 ? '1er' : time.day} %B %Y à %H h %M" },
         :message_date_without_time => lambda { |_time, _| "%d/%m/%Y" }

spec/views/shared/dossiers/_champs.html.haml_spec.rb

@@ -127,20 +127,27 @@ describe 'shared/dossiers/champs', type: :view do
   end
 
   context "with seen_at" do
-    let(:dossier) { create(:dossier) }
+    let(:dossier) { create(:dossier, :en_construction, depose_at: 1.day.ago) }
     let(:champ1) { create(:champ_checkbox, dossier: dossier, value: 'true') }
     let(:champs) { [champ1] }
 
     context "with a demande_seen_at after champ updated_at" do
       let(:demande_seen_at) { champ1.updated_at + 1.hour }
 
-      it { is_expected.not_to have_css(".highlighted") }
+      it { is_expected.not_to have_css(".fr-badge--new") }
+    end
+
+    context "with champ updated_at at depose_at" do
+      let(:champ1) { create(:champ_checkbox, dossier: dossier, value: 'true', updated_at: dossier.depose_at) }
+      let(:demande_seen_at) { champ1.updated_at - 1.hour }
+
+      it { is_expected.not_to have_css(".fr-badge--new") }
     end
 
     context "with a demande_seen_at after champ updated_at" do
       let(:demande_seen_at) { champ1.updated_at - 1.hour }
 
-      it { is_expected.to have_css(".highlighted") }
+      it { is_expected.to have_css(".fr-badge--new") }
     end
   end
 end