change design from table to cards for usager dashboard

app/assets/stylesheets/card.scss

@@ -6,18 +6,18 @@
   border: 1px solid $border-grey;
   margin-bottom: $default-spacer * 2;
   background: #FFFFFF;
-
+  color: $dark-grey;
-  .notice {
-    font-size: 16px;
-    color: #666666;
-    margin-top: -8px;
-    margin-bottom: 16px;
-  }
 
   .card-title {
+    color: $black;
     font-weight: bold;
     font-size: 20px;
+    line-height: 1.5rem;
     margin-bottom: $default-spacer * 2;
+
+    a:not(:hover) {
+      background-image: none; // remove DSFR underline
+    }
   }
 
   &.feedback {

app/assets/stylesheets/flex.scss

@@ -11,6 +11,10 @@
     align-items: flex-start;
   }
 
+  &.align-end {
+    align-items: end;
+  }
+
   &.align-baseline {
     align-items: baseline;
   }

app/components/dsfr/alert_component.rb

@@ -13,20 +13,25 @@ class Dsfr::AlertComponent < ApplicationComponent
   end
 
   def alert_class(state)
-    ["fr-alert fr-alert--#{state}", extra_class_names].compact.flatten
+    if size == 'small'
+      ["fr-alert fr-alert--sm fr-alert--#{state}", extra_class_names].compact.flatten
+    else
+      ["fr-alert fr-alert--#{state}", extra_class_names].compact.flatten
+    end
   end
 
   private
 
-  def initialize(state:, title:, extra_class_names: nil, heading_level: 'h3')
+  def initialize(state:, title: '', size: '', extra_class_names: nil, heading_level: 'h3')
     @state = state
     @title = title
+    @size = size
     @block = block
     @extra_class_names = extra_class_names
     @heading_level = heading_level
   end
 
-  attr_reader :state, :title, :block, :extra_class_names, :heading_level
+  attr_reader :state, :title, :size, :block, :extra_class_names, :heading_level
 
   private
 end

app/components/dsfr/alert_component/alert_component.html.haml

@@ -1,4 +1,5 @@
 %div{ class: alert_class(state) }
-  = content_tag(heading_level, class: 'fr-alert__title') do
+  - if size != 'small'
-    = "#{prefix_for_state}#{title}"
+    = content_tag(heading_level, class: 'fr-alert__title') do
+      = "#{prefix_for_state}#{title}"
   = body

app/views/administrateurs/experts_procedures/index.html.haml

@@ -10,7 +10,7 @@
 
     .card
       .card-title= t('.titles.allow_invite_experts')
-      %p.notice= t('.descriptions.allow_invite_experts')
+      %p= t('.descriptions.allow_invite_experts')
       = form_for @procedure,
         method: :put,
         url: allow_expert_review_admin_procedure_path(@procedure),
@@ -24,7 +24,7 @@
     - if @procedure.allow_expert_review?
       .card
         .card-title= t('.titles.manage_procedure_experts')
-        %p.notice= t('.descriptions.manage_procedure_experts')
+        %p= t('.descriptions.manage_procedure_experts')
         = form_for @procedure,
           method: :put,
           url: experts_require_administrateur_invitation_admin_procedure_path(@procedure),
@@ -37,7 +37,7 @@
 
     .card
       .card-title= t('.titles.allow_expert_messaging')
-      %p.notice= t('.descriptions.allow_expert_messaging')
+      %p= t('.descriptions.allow_expert_messaging')
       = form_for @procedure,
         method: :put,
         url: allow_expert_messaging_admin_procedure_path(@procedure),
@@ -56,8 +56,8 @@
           html: { class: 'form' } do |f|
 
           .instructeur-wrapper
-            %p.notice Pendant l'instruction d’un dossier, les instructeurs peuvent demander leur avis à un ou plusieurs experts.
+            %p Pendant l'instruction d’un dossier, les instructeurs peuvent demander leur avis à un ou plusieurs experts.
-            %p#experts-emails.notice Entrez les adresses email des experts que vous souhaitez affecter à cette démarche
+            %p#experts-emails Entrez les adresses email des experts que vous souhaitez affecter à cette démarche
             = hidden_field_tag :emails, nil
             = react_component("ComboMultiple",
               options: [],

app/views/administrateurs/groupe_instructeurs/_instructeurs.html.haml

@@ -4,7 +4,7 @@
   = form_for :instructeur, url: { action: :add_instructeur, id: groupe_instructeur.id }, html: { class: 'form' } do |f|
     .instructeur-wrapper
       - if !procedure.routing_enabled?
-        %p.notice Entrez les adresses email des instructeurs que vous souhaitez affecter à cette démarche
+        %p Entrez les adresses email des instructeurs que vous souhaitez affecter à cette démarche
 
       - if disabled_as_super_admin
         = f.select :emails, available_instructeur_emails, {}, disabled: disabled_as_super_admin, id: 'instructeur_emails'

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

@@ -5,24 +5,24 @@
         = image_tag procedure.logo, alt: procedure.libelle, width: '100'
       .flex.column.ml-1
         .card-title
-          = link_to procedure.libelle, admin_procedure_path(procedure), style: 'color: black;'
+          = link_to procedure.libelle, admin_procedure_path(procedure)
         = link_to commencer_url(procedure.path), commencer_url(procedure.path), class: 'fr-link fr-mb-1w'
 
       .admin-procedures-list-timestamps
-        %p.notice N° #{procedure.id}
+        %p N° #{procedure.id}
-        %p.notice créée le #{procedure.created_at.strftime('%d/%m/%Y')}
+        %p créée le #{procedure.created_at.strftime('%d/%m/%Y')}
         - if procedure.published_at.present?
-          %p.notice publiée le #{procedure.published_at.strftime('%d/%m/%Y')}
+          %p publiée le #{procedure.published_at.strftime('%d/%m/%Y')}
 
         - if procedure.updated_at.today?
-          %p.notice modifiée à #{procedure.updated_at.strftime('%H:%M')}
+          %p modifiée à #{procedure.updated_at.strftime('%H:%M')}
         - else
-          %p.notice modifiée le #{procedure.updated_at.strftime('%d/%m/%Y %H:%M')}
+          %p modifiée le #{procedure.updated_at.strftime('%d/%m/%Y %H:%M')}
 
         - if procedure.closed_at.present?
-          %p.notice archivée le #{procedure.closed_at.strftime('%d/%m/%Y')}
+          %p archivée le #{procedure.closed_at.strftime('%d/%m/%Y')}
         - elsif procedure.auto_archive_on&.future?
-          %p.notice sera clôturée le #{procedure.auto_archive_on.strftime('%d/%m/%Y')}
+          %p sera clôturée le #{procedure.auto_archive_on.strftime('%d/%m/%Y')}
 
     .admin-procedures-list-row.actions.flex.justify-between
       %div
@@ -80,4 +80,3 @@
                 %span.icon.unarchive
                 .dropdown-description
                   %h4= t('administrateurs.dropdown_actions.restore')
-

app/views/users/dossiers/_dossier_actions.html.haml

@@ -7,23 +7,20 @@
 
 
 - if has_actions
-  = render Dropdown::MenuComponent.new(wrapper: :div, wrapper_options: {class: 'invite-user-actions'}, menu_options: {id: dom_id(dossier, :actions_menu)}, button_options: {class: 'fr-btn--sm'}) do |menu|
+  - if has_edit_action
-    - menu.with_button_inner_html do
+    - if dossier.brouillon?
-      = t('views.users.dossiers.dossier_action.actions')
+      = link_to t('views.users.dossiers.dossier_action.edit_draft'), (url_for_dossier(dossier)), class: 'fr-btn fr-mr-1w'
 
-    - if has_edit_action
+    - else
-      - if dossier.brouillon?
+      = link_to t('views.users.dossiers.dossier_action.edit_dossier'), modifier_dossier_path(dossier), class: 'fr-btn fr-btn--tertiary fr-mr-1w'
-        - menu.with_item do
+
-          = link_to(url_for_dossier(dossier), role: 'menuitem') do
+
-            %span.icon.edit
+  = render Dropdown::MenuComponent.new(wrapper: :div, wrapper_options: {class: 'invite-user-actions'}, menu_options: {id: dom_id(dossier, :actions_menu)}, button_options: {class: 'fr-btn--tertiary'}) do |menu|
-            .dropdown-description
+    - menu.with_button_inner_html do
-              = t('views.users.dossiers.dossier_action.edit_draft')
+      - if has_edit_action
+        = t('views.users.dossiers.dossier_action.other_actions')
       - else
-        - menu.with_item do
+        = t('views.users.dossiers.dossier_action.actions')
-          = link_to(modifier_dossier_path(dossier), role: 'menuitem') do
-            %span.icon.edit
-            .dropdown-description
-              = t('views.users.dossiers.dossier_action.edit_dossier')
 
     - if has_transfer_action
       - menu.with_item do

app/views/users/dossiers/_dossiers_list.html.haml

@@ -1,54 +1,71 @@
 - if dossiers.present?
-  %span.fr-h6.fr-mr-2w
+  .fr-h6.fr-mb-2w
     = page_entries_info dossiers
-  .fr-table.fr-table--bordered.fr-table--no-caption.fr-mt-2w
-    %table.table.dossiers-table.hoverable.hack-to-display-dropdown
-      %caption= t('views.users.dossiers.dossiers_list.caption')
-      %thead
-        %tr
-          %th.number-col{ scope: :col }= t('views.users.dossiers.dossiers_list.n_dossier')
-          %th{ scope: :col }= t('views.users.dossiers.dossiers_list.procedure')
-          - if dossiers.present?
-            %th{ scope: :col }= t('views.users.dossiers.dossiers_list.requester')
-          %th.status-col{ scope: :col }= t('views.users.dossiers.dossiers_list.status')
-          %th.updated-at-col{ scope: :col }= t('views.users.dossiers.dossiers_list.updated')
-          %th.action-col.follow-col{ scope: :col }= t('views.users.dossiers.dossiers_list.actions')
-      %tbody
-        - dossiers.each do |dossier|
-          - if dossier.transfer.present?
-            %tr.fr-background-alt--blue-france.no-border
-              %td.fr-py-2w{ colspan: 100 }
-                .flex.align-center
-                  %p.fr-mb-0
-                    %small
-                      = t('views.users.dossiers.transfers.sender_demande_en_cours', id: dossier.id, email: dossier.transfer.email)
-                  .ml-auto
-                    = link_to t('views.users.dossiers.transfers.revoke'), transfer_path(dossier.transfer), class: 'fr-btn fr-btn--sm fr-btn--tertiary-no-outline', method: :delete
 
-          %tr{ data: { 'dossier-id': dossier.id } }
+  - dossiers.each do |dossier|
-            %th.number-col{ scope: :row }
+    .card
-              = link_to(url_for_dossier(dossier), class: 'cell-link', tabindex: -1) do
+      .flex.justify-between
-                %span.icon.folder
+        %div
-                = dossier.id
+          %h2.card-title
-            %td
+            = link_to(url_for_dossier(dossier), class: 'cell-link') do
-              = link_to(url_for_dossier(dossier), class: 'cell-link') do
+              = procedure_libelle(dossier.procedure)
-                = procedure_libelle(dossier.procedure)
-            - if dossiers.present?
-              %td
-                %span.cell-link= demandeur_dossier(dossier)
-            %td.status-col
-              - if dossier.pending_correction?
-                = pending_correction_badge(:for_user)
-              - else
-                = status_badge(dossier.state)
 
-            %td.updated-at-col.cell-link
+          %p.fr-icon--sm.fr-icon-user-line
-              = try_format_date(dossier.updated_at)
+            = demandeur_dossier(dossier)
-            %td.action-col.follow-col
+
-              = render partial: 'dossier_actions', locals: { dossier: dossier }
+          %p.fr-icon--sm.fr-icon-edit-box-line
+            - if dossier.depose_at.present?
+              %span
+                = t('views.users.dossiers.dossiers_list.depose_at', date: dossier.depose_at.strftime('%d/%m/%Y'))
+            - else
+              %span
+                = t('views.users.dossiers.dossiers_list.created_at', date: dossier.created_at.strftime('%d/%m/%Y'))
+              - if dossier.created_at != dossier.updated_at
+                = t('views.users.dossiers.dossiers_list.updated_at', date: dossier.updated_at.strftime('%d/%m/%Y %H:%M'))
+          - if dossier.invites.present?
+            %p.fr-icon--sm.fr-icon-shield-line
+              = t('views.users.dossiers.dossiers_list.shared_with')
+              = dossier.invites.map(&:email).join(', ')
+
+
+        .text-right
+          %p.fr-mb-0
+            = t('views.users.dossiers.dossiers_list.n_dossier')
+            = dossier.id
+
+          = status_badge(dossier.state, 'fr-mb-1w')
+
+          - if dossier.pending_correction?
+            %br
+            = pending_correction_badge(:for_user)
+
+      - if dossier.procedure.close?
+        = render Dsfr::AlertComponent.new(state: :info, size: 'small', extra_class_names: "fr-mb-2w") do |c|
+          - c.body do
+            %p
+              = t('views.users.dossiers.dossiers_list.procedure_closed')
+
+      - if dossier.pending_correction?
+        = render Dsfr::AlertComponent.new(state: :warning, size: 'small', extra_class_names: "fr-mb-2w") do |c|
+          - c.body do
+            %p
+              = t('views.users.dossiers.dossiers_list.pending_correction')
+
+      - if dossier.transfer.present?
+        = render Dsfr::AlertComponent.new(state: :info, size: 'small', extra_class_names: "fr-mb-2w") do |c|
+          - c.body do
+            %p
+              = t('views.users.dossiers.transfers.sender_demande_en_cours', id: dossier.id, email: dossier.transfer.email)
+            %p
+              = link_to t('views.users.dossiers.transfers.revoke'), transfer_path(dossier.transfer), class: 'fr-link', method: :delete
+
+
+      .flex.justify-end
+        = render partial: 'dossier_actions', locals: { dossier: dossier }
 
     = paginate dossiers, views_prefix: 'shared'
 
+
 - else
   - if filter.filter_params.present?
     .blank-tab

config/locales/en.yml

@@ -463,14 +463,17 @@ en:
           caption: My files
           procedure: "Procedure"
           n_dossier: "File n."
-          requester: "Requester"
           status: "Status"
-          updated: "Updated"
-          actions: "Actions"
           no_result_title: No files
           no_result_text_html: "To fill a procedure, contact your administration asking for the procedure link. <br> It should look like %{app_base}/commencer/xxx."
           no_result_text_with_filter: found with selected filters
           no_result_reset_filter: Reset filters
+          procedure_closed: This procedure has been closed, you will not be able to submit a file again from the procedure link, contact your administration for more information.
+          pending_correction: This procedure is awaiting your corrections. Correct the fields that are notified by an alert message in the form.
+          depose_at: First submission on %{date}
+          created_at: Created at %{date}
+          updated_at: updated at %{date}
+          shared_with: File shared with
         transfers:
           sender_demande_en_cours: "A transfer request is pending on file Nº %{id} to %{email}"
           receiver_demande_en_cours: "Transfer request on file Nº %{id} sent by %{email}"
@@ -483,8 +486,9 @@ en:
           clone: "Duplicate the file"
           delete_dossier: "Delete the file"
           transfer_dossier: "Transfer the file"
-          edit_draft: "Edit the draft"
+          edit_draft: "Keep filling"
           actions: "Actions"
+          other_actions: "Other actions"
       sessions:
         new:
           sign_in: Sign in on %{application_name}

config/locales/fr.yml

@@ -465,22 +465,26 @@ fr:
           caption: Mes dossiers
           procedure: "Démarche"
           n_dossier: "Nº dossier"
-          requester: "Demandeur"
           status: "Statut"
-          updated: "Mis à jour"
-          actions: "Actions"
           no_result_title: Aucun dossier
           no_result_text_html: "Pour remplir une démarche, contactez votre administration en lui demandant le lien de la démarche. <br> Celui ci doit ressembler à %{app_base}/commencer/xxx."
           no_result_text_with_filter: ne correspond aux filtres sélectionnés
           no_result_reset_filter: Réinitialiser les filtres
+          procedure_closed: Cette démarche a été clôturée, vous ne pourrez pas redéposer de dossier à partir du lien de la démarche, contactez votre administration pour plus d’information.
+          pending_correction: Cette démarche est en attente de vos corrections. Corriger les champs qui sont notifiés par un message d’alerte dans le formulaire.
+          depose_at: Déposé le %{date}
+          created_at: Créé le %{date}
+          updated_at: modifié le %{date}
+          shared_with: Dossier partagé avec
         dossier_action:
           edit_dossier: "Modifier le dossier"
           start_other_dossier: "Commencer un autre dossier vide"
           clone: "Dupliquer ce dossier"
           delete_dossier: "Supprimer le dossier"
           transfer_dossier: "Transférer le dossier"
-          edit_draft: "Modifier le brouillon"
+          edit_draft: "Continuer à remplir"
           actions: "Actions"
+          other_actions: "Autres actions"
         transfers:
           sender_demande_en_cours: "Une demande de transfert est en cours sur le dossier Nº %{id} pour %{email}"
           receiver_demande_en_cours: "Demande de transfert pour le dossier Nº %{id} envoyé par %{email}"