Merge pull request #2146 from betagouv/improve-new-dossiers-list

Usager : amélioration de la liste des dossiers

Gemfile

@@ -32,6 +32,9 @@ gem 'haml-rails'
 # bootstrap saas
 gem 'bootstrap-sass', '~> 3.3.5'
 
+# Automatically set a class on active links
+gem 'active_link_to'
+
 # Pagination
 gem 'kaminari'
 

Gemfile.lock

@@ -44,6 +44,9 @@ GEM
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.0.3)
+    active_link_to (1.0.5)
+      actionpack
+      addressable
     active_model_serializers (0.10.7)
       actionpack (>= 4.1, < 6)
       activemodel (>= 4.1, < 6)
@@ -785,6 +788,7 @@ PLATFORMS
 
 DEPENDENCIES
   aasm
+  active_link_to
   active_model_serializers
   administrate
   apipie-rails
@@ -877,4 +881,4 @@ DEPENDENCIES
   xray-rails
 
 BUNDLED WITH
-   1.16.1
+   1.16.2

app/assets/stylesheets/new_design/_colors.scss

@@ -14,3 +14,4 @@ $light-green: lighten($green, 25%);
 $dark-green: darken($green, 20%);
 $orange: #F28900;
 $orange-bg: lighten($orange, 35%);
+$light-yellow: #FFFFDE;

app/assets/stylesheets/new_design/card.scss

@@ -6,6 +6,12 @@
   border: 1px solid $border-grey;
   margin-bottom: $default-spacer * 2;
 
+  .card-title {
+    font-weight: bold;
+    font-size: 20px;
+    margin-bottom: $default-spacer * 2;
+  }
+
   &.featured {
     border-top: 8px solid $blue;
 
@@ -14,9 +20,16 @@
     }
   }
 
-  .card-title {
-    font-weight: bold;
-    font-size: 20px;
-    margin-bottom: $default-spacer * 2;
+  &.feedback {
+    max-width: 600px;
+    margin: 30px auto;
+    padding: ($default-spacer * 2) ($default-spacer * 4);
+    font-size: small;
+    border: 1px dashed $border-grey;
+    background: $light-yellow;
+
+    .card-title {
+      margin-bottom: $default-spacer;
+    }
   }
 }

app/assets/stylesheets/new_design/dossiers_headers.scss

@@ -0,0 +1,5 @@
+.dossiers-headers {
+  .new-demarche {
+    float: right;
+  }
+}

app/assets/stylesheets/new_design/dossiers_table.scss

@@ -77,3 +77,7 @@
     padding-right: $default-spacer;
   }
 }
+
+.dossiers-table-empty {
+  text-align: center;
+}

app/assets/stylesheets/new_design/new_header.scss

@@ -26,7 +26,7 @@ $landing-breakpoint: 1040px;
   margin-right: 4 * $default-spacer;
 
   img {
-    height: 36px;
+    height: 34px;
 
     @media (max-width: $landing-breakpoint) {
       height: 18px;

app/controllers/new_user/dossiers_controller.rb

@@ -1,5 +1,7 @@
 module NewUser
   class DossiersController < UserController
+    helper_method :new_demarche_url
+
     before_action :ensure_ownership!, except: [:index, :modifier, :update]
     before_action :ensure_ownership_or_invitation!, only: [:modifier, :update]
     before_action :ensure_dossier_can_be_updated, only: [:update_identite, :update]
@@ -112,6 +114,10 @@ module NewUser
       end
     end
 
+    def new_demarche_url
+      "https://doc.demarches-simplifiees.fr/listes-des-demarches"
+    end
+
     private
 
     def ensure_dossier_can_be_updated

app/views/layouts/_new_header.haml

@@ -13,10 +13,10 @@
         %ul.header-tabs
           - if current_gestionnaire.visible_procedures.count > 0
             %li
-              = link_to "Procédures", gestionnaire_procedures_path, class: (controller_name != 'avis') ? "tab-link active" : 'tab-link'
+              = active_link_to "Procédures", gestionnaire_procedures_path, active: :inclusive, class: 'tab-link'
           - if current_gestionnaire.avis.count > 0
             %li
-              = link_to gestionnaire_avis_index_path, class: (controller_name == 'avis') ? "tab-link active" : 'tab-link' do
+              = active_link_to gestionnaire_avis_index_path, active: :inclusive, class: 'tab-link' do
                 Avis
                 - avis_counter = current_gestionnaire.avis.without_answer.count
                 - if avis_counter > 0
@@ -36,7 +36,7 @@
       - if nav_bar_profile == :user
         %ul.header-tabs
           %li
-            = link_to "Mes dossiers", users_dossiers_path, class: 'tab-link'
+            = active_link_to "Dossiers", dossiers_path, active: :inclusive, class: 'tab-link'
 
     %ul.header-right-content
       - if nav_bar_profile == :gestionnaire && gestionnaire_signed_in?

app/views/new_user/dossiers/index.html.haml

@@ -1,43 +1,59 @@
 .dossiers-headers.sub-header
   .container
-    %h1.page-title Les dossiers
+    = link_to "Commencer une nouvelle démarche", new_demarche_url, class: "button secondary new-demarche"
 
-    %ul.tabs
-      - if @user_dossiers.count > 0
+    - if @dossiers_invites.count == 0
+      %h1.page-title Mes dossiers
+
+    - else
+      %h1.page-title Dossiers
+      %ul.tabs
         %li{ class: (@current_tab == 'mes-dossiers') ? 'active' : nil }>
           = link_to(dossiers_path(current_tab: 'mes-dossiers')) do
             mes dossiers
-      - if @dossiers_invites.count > 0
         %li{ class: (@current_tab == 'dossiers-invites') ? 'active' : nil }>
           = link_to(dossiers_path(current_tab: 'dossiers-invites')) do
             dossiers invités
 
 .container
-  %table.table.dossiers-table.hoverable
-    %thead
-      %tr
-        %th.notification-col
-        %th.number-col Nº dossier
-        %th Procédure
-        %th.status-col Statut
-        %th.updated-at-col Mis à jour
-      %tbody
-        - @dossiers.each do |dossier|
-          %tr
-            %td.folder-col
-              = link_to(modifier_dossier_path(dossier), class: 'cell-link') do
-                %span.icon.folder
-            %td.number-col
-              = link_to(modifier_dossier_path(dossier), class: 'cell-link') do
-                = dossier.id
-            %td
-              = link_to(modifier_dossier_path(dossier), class: 'cell-link') do
-                = dossier.procedure.libelle
-            %td.status-col
-              = link_to(modifier_dossier_path(dossier), class: 'cell-link') do
-                = render partial: 'shared/dossiers/status', locals: { dossier: dossier }
-            %td.updated-at-col
-              = link_to(modifier_dossier_path(dossier), class: 'cell-link') do
-                = dossier.updated_at.localtime.strftime("%d/%m/%Y")
+  - if @dossiers.present?
+    - if @dossiers.total_pages >= 2
+      .card.feedback
+        .card-title Nous avons redesigné la liste des dossiers.
+        %p
+          Une suggestion pour améliorer cette page ? Votre avis nous intéresse ! Écrivez-nous à
+          = mail_to CONTACT_EMAIL, CONTACT_EMAIL, subject: "Amélioration de la liste des dossiers"
+          \.
 
-  = paginate(@dossiers)
+    %table.table.dossiers-table.hoverable
+      %thead
+        %tr
+          %th.notification-col
+          %th.number-col Nº dossier
+          %th Procédure
+          %th.status-col Statut
+          %th.updated-at-col Mis à jour
+        %tbody
+          - @dossiers.each do |dossier|
+            %tr
+              %td.folder-col
+                = link_to(users_dossier_recapitulatif_path(dossier), class: 'cell-link') do
+                  %span.icon.folder
+              %td.number-col
+                = link_to(users_dossier_recapitulatif_path(dossier), class: 'cell-link') do
+                  = dossier.id
+              %td
+                = link_to(users_dossier_recapitulatif_path(dossier), class: 'cell-link') do
+                  = dossier.procedure.libelle
+              %td.status-col
+                = link_to(users_dossier_recapitulatif_path(dossier), class: 'cell-link') do
+                  = render partial: 'shared/dossiers/status', locals: { dossier: dossier }
+              %td.updated-at-col
+                = link_to(users_dossier_recapitulatif_path(dossier), class: 'cell-link') do
+                  = dossier.updated_at.localtime.strftime("%d/%m/%Y")
+    = paginate(@dossiers)
+
+  - else
+    .dossiers-table-empty
+      %h2.empty-text Aucun dossier.
+      = link_to "Commencer une nouvelle démarche", new_demarche_url, class: "button primary"

app/views/root/patron.html.haml

@@ -84,6 +84,11 @@
         Titre de la carte mise en avant
       Et voici le contenu de la carte
 
+    .card.feedback
+      .card-title
+        Titre de la carte pour demander un avis
+      Utilisez cette carte pour informer d’une nouveauté produit ou demander l’avis des utilisateurs.
+
     %h1 Table
 
     %table.table

spec/views/layouts/_new_header_spec.rb

@@ -15,6 +15,7 @@ describe 'layouts/_new_header.html.haml', type: :view do
       let(:profile) { :user }
 
       it { is_expected.to have_css("a.header-logo[href=\"#{users_dossiers_path}\"]") }
+      it { is_expected.to have_link("Dossiers", href: dossiers_path) }
     end
 
     context 'when rendering for gestionnaire' do

spec/views/new_user/dossiers/index.html.haml_spec.rb

@@ -0,0 +1,67 @@
+require 'spec_helper'
+
+describe 'new_user/dossiers/index.html.haml', type: :view do
+  let(:user) { create(:user) }
+  let(:user_dossiers) { create_list(:dossier, 2, state: 'brouillon', user: user) }
+  let(:dossiers_invites) { [] }
+  let(:current_tab) { 'mes-dossiers' }
+
+  before do
+    allow(view).to receive(:new_demarche_url).and_return('#')
+    assign(:user_dossiers, Kaminari.paginate_array(user_dossiers).page(1))
+    assign(:dossiers_invites, Kaminari.paginate_array(dossiers_invites).page(1))
+    assign(:dossiers, Kaminari.paginate_array(user_dossiers).page(1))
+    assign(:current_tab, current_tab)
+    render
+  end
+
+  it 'affiche la liste des dossiers' do
+    expect(rendered).to have_selector('.dossiers-table tbody tr', count: 2)
+  end
+
+  it 'affiche les informations des dossiers' do
+    dossier = user_dossiers.first
+    expect(rendered).to have_text(dossier.id)
+    expect(rendered).to have_text(dossier.procedure.libelle)
+    expect(rendered).to have_link(dossier.id, href: users_dossier_recapitulatif_path(dossier))
+  end
+
+  context 'quand il n’y a aucun dossier' do
+    let(:user_dossiers)    { [] }
+    let(:dossiers_invites) { [] }
+
+    it 'n’affiche pas la table' do
+      expect(rendered).not_to have_selector('.dossiers-table')
+    end
+
+    it 'affiche un message' do
+      expect(rendered).to have_text('Aucun dossier')
+    end
+  end
+
+  context 'quand il n’y a pas de dossiers invités' do
+    let(:dossiers_invites) { [] }
+
+    it 'affiche un titre adapté' do
+      expect(rendered).to have_selector('h1', text: 'Mes dossiers')
+    end
+
+    it 'n’affiche pas la barre d’onglets' do
+      expect(rendered).not_to have_selector('ul.tabs')
+    end
+  end
+
+  context 'quand il y a des dossiers invités' do
+    let(:dossiers_invites) { create_list(:dossier, 1) }
+
+    it 'affiche un titre adapté' do
+      expect(rendered).to have_selector('h1', text: 'Dossiers')
+    end
+
+    it 'affiche la barre d’onglets' do
+      expect(rendered).to have_selector('ul.tabs')
+      expect(rendered).to have_selector('ul.tabs li', count: 2)
+      expect(rendered).to have_selector('ul.tabs li.active', count: 1)
+    end
+  end
+end

spec/views/users/dossiers/index_html.haml_spec.rb

@@ -27,14 +27,16 @@ describe 'users/dossiers/index.html.haml', type: :view do
 
     subject { rendered }
 
-    describe 'columns' do
-      it { is_expected.to have_content(decorate_dossier_at_check.id) }
-      it { is_expected.to have_content(decorate_dossier_at_check.procedure.libelle) }
-      it { is_expected.to have_content(decorate_dossier_at_check.display_state) }
-      it { is_expected.to have_content(decorate_dossier_at_check.last_update) }
+    it 'displays the total count' do
+      expect(dossiers_to_display.count).to eq total_dossiers
     end
 
-    it { expect(dossiers_to_display.count).to eq total_dossiers }
+    it 'displays data in columns' do
+      expect(rendered).to have_content(decorate_dossier_at_check.id)
+      expect(rendered).to have_content(decorate_dossier_at_check.procedure.libelle)
+      expect(rendered).to have_content(decorate_dossier_at_check.display_state)
+      expect(rendered).to have_content(decorate_dossier_at_check.last_update)
+    end
   end
 
   describe 'on tab en construction' do