feat(gallery): add gallery to demande page

app/assets/stylesheets/gallery.scss

@@ -1,11 +1,4 @@
 .gallery {
-  display: flex;
-  flex-wrap: wrap;
-
-  .gallery-item {
-    display: block;
-  }
-
   a {
     background-image: none;
   }
@@ -50,6 +43,40 @@
   }
 }
 
+.gallery-pieces-jointes {
+  display: flex;
+  flex-wrap: wrap;
+
+  .gallery-item {
+    margin: 1.5rem 2rem;
+  }
+
+  img {
+    height: 200px;
+    width: 200px;
+  }
+}
+
+.gallery-demande {
+  img {
+    height: 150px;
+    width: 150px;
+  }
+
+  .gallery-item {
+    margin-bottom: 2rem;
+  }
+
+  .fr-download {
+    margin-bottom: 0.5rem;
+  }
+
+  .thumbnail {
+    width: fit-content;
+    margin-bottom: 1rem;
+  }
+}
+
 .lg-has-iframe {
   width: 80% !important;
   margin-top: 50px;

app/views/instructeurs/dossiers/pieces_jointes.html.haml

@@ -3,7 +3,11 @@
 = render partial: "header", locals: { dossier: @dossier }
 
 .fr-container
-  .gallery{ "data-controller": "lightbox"}
+  - if @champs_with_pieces_jointes.map(&:piece_justificative_file).flatten.none?
+    .empty-text
+      Ce dossier ne contient pas de pièces jointes
+  - else
+    .gallery.gallery-pieces-jointes{ "data-controller": "lightbox" }
       - @champs_with_pieces_jointes.each do |champ|
         - champ.piece_justificative_file.each do |attachment|
           .gallery-item
@@ -16,7 +20,7 @@
                     Visualiser
               .champ-libelle
                 = champ.libelle.truncate(25)
-            = render Attachment::ShowComponent.new(attachment: attachment, new_tab: true, truncate: true)
+              = render Attachment::ShowComponent.new(attachment: attachment, truncate: true)
 
             - elsif blob.content_type.in?(AUTHORIZED_IMAGE_TYPES)
               = link_to image_url(blob.url), title: "#{champ.libelle} -- #{blob.filename}", data: { src: blob.url }, class: 'gallery-link' do

app/views/shared/champs/piece_justificative/_show.html.haml

@@ -1,4 +1,19 @@
 .fr-downloads-group
-  %ul
   - champ.piece_justificative_file.attachments.each do |attachment|
-      %li= render Attachment::ShowComponent.new(attachment:, new_tab: true)
+    %ul
+      %li= render Attachment::ShowComponent.new(attachment:, new_tab: true, truncate: true)
+    .gallery-item
+      - blob = attachment.blob
+      - if blob.content_type.in?(AUTHORIZED_PDF_TYPES)
+        = link_to blob.url, id: blob.id, data: { iframe: true, src: blob.url }, class: 'gallery-link', type: blob.content_type, title: "#{champ.libelle} -- #{blob.filename}" do
+          .thumbnail
+            = image_tag("pdf-placeholder.png")
+            .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button }
+              = 'Visualiser'
+
+      - elsif blob.content_type.in?(AUTHORIZED_IMAGE_TYPES)
+        = link_to image_url(blob.url), title: "#{champ.libelle} -- #{blob.filename}", data: { src: blob.url }, class: 'gallery-link' do
+          .thumbnail
+            = image_tag(blob.url)
+            .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button }
+              = 'Visualiser'

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

@@ -2,7 +2,7 @@
   - content_for(:notice_info) do
     = render partial: "shared/dossiers/france_connect_informations_notice", locals: { user_information: dossier.user.france_connect_informations.first }
 
-.fr-container.counter-start-header-section.dossier-show{ class: class_names("dossier-show-instructeur" => profile =="instructeur") }
+.fr-container.counter-start-header-section.dossier-show.gallery.gallery-demande{ class: class_names("dossier-show-instructeur" => profile =="instructeur"), "data-controller": "lightbox" }
   .fr-grid-row.fr-grid-row--center
     .fr-col-12.fr-col-xl-8
       - if profile == 'instructeur' && dossier.termine_and_accuse_lecture?