From f02cb19fd4c042c49a332b1466b539caa21ff8a2 Mon Sep 17 00:00:00 2001
From: Eric Leroy-Terquem <eric.leroyterquem@beta.gouv.fr>
Date: Mon, 8 Apr 2024 10:23:07 +0200
Subject: [PATCH] feat(gallery): display pieces jointes in a gallery

---
 app/assets/images/apercu-indisponible.png     | Bin 0 -> 9794 bytes
 app/assets/images/pdf-placeholder.png         | Bin 0 -> 6912 bytes
 app/assets/stylesheets/gallery.scss           |  66 ++++++++++++++++++
 app/assets/stylesheets/icons.scss             |   8 +++
 .../instructeurs/dossiers_controller.rb       |   7 ++
 .../controllers/lightbox_controller.ts        |  36 ++++++++++
 .../dossiers/_header_bottom.html.haml         |   4 ++
 .../dossiers/pieces_jointes.html.haml         |  29 ++++++++
 config/locales/en.yml                         |   1 +
 config/locales/fr.yml                         |   1 +
 config/routes.rb                              |   1 +
 package.json                                  |   1 +
 .../instructeurs/dossiers_controller_spec.rb  |  25 +++++++
 13 files changed, 179 insertions(+)
 create mode 100644 app/assets/images/apercu-indisponible.png
 create mode 100644 app/assets/images/pdf-placeholder.png
 create mode 100644 app/assets/stylesheets/gallery.scss
 create mode 100644 app/javascript/controllers/lightbox_controller.ts
 create mode 100644 app/views/instructeurs/dossiers/pieces_jointes.html.haml

diff --git a/app/assets/images/apercu-indisponible.png b/app/assets/images/apercu-indisponible.png
new file mode 100644
index 0000000000000000000000000000000000000000..11d399fdac14eb080e60113a948d5bf90e99f17a
GIT binary patch
literal 9794
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

literal 0
HcmV?d00001

diff --git a/app/assets/images/pdf-placeholder.png b/app/assets/images/pdf-placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..233d8fb556f631992258659c30c551e2e2632b34
GIT binary patch
literal 6912
zcmeHKc|4SB`yXY`DNEVXF-DRyW*=iLDGZZ6Q&|eLn=)pY8HP$3k)<RRk~&hPWbL3*
z;$$hwUY0B&NjQ~GDAD^2)v3?>{_&pA@Av-Ke4d%PpX<J^?|on2>wDkN{lvOB+5RH0
zDGvgHej(afZv*}tfbRoYY2cUhx_2`OB<&kUa_4U&hk&_390tpu4(5k)>0r8$#Q=eX
z-M#K!$wTWE=9sIlOD@xqd^nKBW5`_pbQ6-#Pud!?VfWnQ;2Ph`q#HYxUC49O1yKjN
zHjfO}wj}Lsl*uQ#9sA{U(60Q_-}sm2dOFmZ+P!5*T$>VN))5}0bR;#s)t=z5;u>h~
z3DV6;*Uae;Y3J9&R*0Nz##L=dFAQ?di*Vlfmn)l%+VDZpFw>|Cqu~#8QqrG9n|5rf
zHSqU2{+bxkxANtHx|)i%5c!*Q;pc77qPKQ8i6W|t$L3c)X;TJGDqJ3uN{_sGWpp&d
zbVq)POzHUHb!Nq<2TcxZTQ+t~vi5;P8|$Oz3A_zVXkXcw*{hmNnZM?k*!T$(sw$Lj
zd9I0gz#*^$o^KVEYb239Z1q+pruo3m9w~40XYwka1U-=(Y?|q({I=;{EP1$j>ALJ2
zTSz2|)`<`*`50z-@O)A~&GqKw^Cd}j+2(<_ySI3;%?X{|@@VHjn(Y(`GtVbXZ_h@s
zD`K(9RH{@tg<nXHMvXWtEY+py=M+oK-_VAQoUY2i)&B}vRXG(OWAvA<%A0j*2p1P`
zN}}bo4G1jS6M?Aq1zpqGu)ggAVuR8lLvT(NU(#jV_mK7A;S&f1lN)I#+Ot3N_alT@
zzvX_m$fYWOoLSXF3IK1^i}>uf;mw70hD7V)oRwEvkt3({My_?8q_{m<NkZrDX}Oxm
zCE9E?^4xkQ>#@5A(QQw@r+r=t=B0mP&l|zLLr=oSd)!i*c^%$i6YR<Z1Wn{*vnyc@
zyY_*~2kMI}*BkIpGo^NVvL4ji@AMF0B6Brl?AIkb=DC*y(<d&yZ<~|e%P&?ncC&CP
zxOQRtdn?IMywZrm;hIF*qq%ONBMFUNuIsa2HkdGNkHyHx!ndVgCpN09JH%(IAK<DD
zM!7Qo^tvtO7;?L&pKgQ`aFEky%9z(2eWGg_<H}LXUsc6ev~^Odw4YpUqR)8Ll@Ir?
z&2epDzmRw$Z7d8vf6_J&v8EKX@ok}=Tr6{y{w<@TRD+$_cywf(yaBa4?aU)#PK2yy
zReaQa&~87kS7VCKoOAP!CEd<FzO|CG`UR0x-tp97&&`t^WAcff{`RML6fW~Keq~v{
z@siZQ^sS7ZlHQl{my7e{HFtNd*e+lPdbKglJ6Io3w^MiIMk?Z1hDmXqwM%w-P47;1
zQU2%}T^H?>Twk22Dch1vNbj0dX6;oitbH=;*_C2I*(j)qJ^C!vuX$1@wl+;#<KiA7
zVrO-?;<e#(H{Y#)a!1vVRO<e;HF<378i~Hd^@P{=2^dJapqU__8^=Gl+TPy1CBo?}
zWSOkda;n~52p7)FV6oceE)U(C%R%=i%->ph$>rK!v=@g|TW{x|yQcC&c`s$zXu}Ks
z{_&FBBTZ{IPM=W7P_-{P)y1@Zk=7Z04Uh3EsJM7rBT0IA6-fy~usVs$fFEr;DjH|J
zNz)M|=w*O>(%0M<EM@alE#>vM-W$<?!%SO)Ymo-dk*IF7RuaL}?AoC}PX~>5X~KQ<
zM815Ts>b1gZMG%t_^CwwakciMo7GO^@#nK*iFw;QFNEiGUF|1K=O2Y0%2_UnD#q<l
z_n%SMFr{u6&E-;|uZApLaDJ89xmsMS=|a+3y+8vqM%f|t;vPvIzf(%ttL*j%EN$;_
zwwP|Db$%#+x_bF)R9)wZ*T@}~*Vbs5Znpth6R^!aD$n*+z8kD@A2of_4(~Aa*6Ix{
zf7G5Bo)}%2lb2LfbV@NdZ<xxjI3evq31RkJDoYX=ZYnTvQnI6Mzg3cdzk`b3C%3#^
ze^9NT@9dFOHTL_45ZIY>43YL7t>V=ydbh4Ek@7k3-n`n08g&9UU^{q3v#c#*|MtGw
zG==i_wzAu_YkZ_<4Oe3-d*f!&Slu@$f5Kac4A|KJU<IZ79ddumR7&)boyppDtXXXD
zy8+&i)yH#PW(bQO$mccB?m;JE5yvgcW?GVOCVXhot{5;2QIWkngm03S?dSitSHt_}
z{7yO9f?c0;&ub@aQYq1_Sbbf)Qs!8+uF7#M>y$Mc2Nc=^w`NuqLD&!#x6h)M0sHG$
zQo3e>&Z;E`8T$Q!yXz~Vv1JXho$LM7>ttC-_x|*fh)2qOOPXe*`wy((ESrfvHsG9Y
zHLtw6)4%JlgKG0D>=+&eY$?MS5J=)M%gV}yXl3>FSpz&_(hr<4x4UPlRpZmPHU4*8
z=jLi1D?u@MN40CN%VGHoJNzD3J#U5iwI*G<fs@adlG&u1yWFVp7XF63=$TB+^~jT%
z@uz0)UTTKaMh=DFE}y=!PewLxLt8_oWX5Rn38G%juJG*&6_7)UkT<$IsOuK`M3yk2
zVBgG4nA(U(-^jd{Qi(6JQeU~L_!e1-11xb*LE~(->yG5@gS^4ONF%#X_XRb>#*KPM
zq|R$#iqC`&t}k+bMb0|n(bXJtIfi;Q+pQvz=P`V{#v>Q&K63t3)PSg>xIvJnYe!bH
zPXuq-ymS?btmBmH6c?*7p>O`_UV;xKWlO%ix{0bwq;%KY$j?=;10GQ*t&Z~g5fy4r
z=hdY|<(B2Fr~P%My%rLmnkrBCz3=d>Y|tNll&@;KM7lI0ek?zGTq4D^ve|7nmS#KI
zwldD<+1$|zgB1#WOXl_laLye_w*Yy(+Hhd0mevxgUcL9UFeIm}>|hiB<E(^<dr;y~
z0dxvD6U?!IXTQ6n1D?uZ8<A-o3f)M^<^pE}5XfwkkV~fSrSriQI+GP(4tZUE7XoI{
z%pp55j&Mh=72S_z7ZyZ!3v(h-!}d~5Xpl`7@@7Ij0Klg6$zUPdKY)i9nnM<F@jzQ_
zhC#p!F8sab5O+rxuoWkW4n`ZHjo?rlAuAXOv5*Iw1<@GzZPtV@5Wt-|#E;MC;$g6m
zkPxE~lo2P02}78en84sj7!nBuJfOVL06tj=4dCgDAr>*L={#x>i_2$m0>ENSGKC}H
zn?oQ#KltnX*jz`)Z}0)UFDw9jz=UKj3}FO^vDvWiBY1q9U;yOHg#Kd$j|3c{VB6?C
zjv$Ciw+W^P@O8h3pi#fYa|J>E3+d3PFuFgT4Y=}vQ4v23X-jl;`4%CjfXQNW7oq^N
zfAHk97=M%X!`#F@3+a465g_~<?hoEyb6;=<yc`|z)*PxpJUybdIYc}@p2nfFX!yk@
z20_M9(G)0^Mlpt>sbmzCf+ka-I1@OH#vs!$CRogOP{aTppBzA?i=hB;BNl*zL1XDi
z3fUNn#ZWO&G=+|Ul8vzdBAJ20VKF!i*@W>OgmVxJP$k*_`&o&hXaE!%$)I9U6b6(*
z!6Kk&Is*%(n9vzeID>{mk!dItf<aw?qEYb#P7s?6l#|6KGwCpH0CS;3OgMhC3(*{c
zG=l$aaq%bf89;zJ#DNtc5dPgkVzKFNe6pBLgfRk%!67hMI0k`4qR@Xk?Vtzo040hs
z5pW~aBCfbBcpw>oSh85B0Kh^7kPF@_h)(8nf=C>Wzd1xaC9pVhLEd1q#iH1;cz{Q!
zSn*#p??w+?yjxrX{;Y*AFnB?>crtZy5FR<0PFolVh+FKU`jG>ebYOjd5!6>Z>pv6=
zLB%nQfdvS~P;gi%8i%4o$tVO0iZNlJQCJj;L1rL-MCWlB{19>weKQlt6vze;&_Xug
z^$S!Q{OBFxM;G%1N1~x{;KGm)#&{$ek3nvPBk^!J1oppA5siRjO;8jpl!2m%MFa=*
zh@#S<##j^<OEoseA!&=1`bOaYDMcI!fx*MEKyp8(Xa*B+TwjZ72K%?NFFJg;(*e{h
z+JGGt*pOl0cH}RdiIws{{Ctty|8N8V`sX13h~J-d{iN$3G4PL^f2!*zUH^!If8_jA
zUH@-%$^ZRMM-KoFdLh6Y8}#Mp6TsV^G{xT58uS<h27${3&~U&a$F=j|fj}Bh#9s;Z
zmih_6D8nZ@+Q__=l>J2-<SvLU0f8iAh}N4)!tRM)duND;`k{e>3>~4q(XLyQYBL?Z
z<x0Cky{;~!I_#3a0P)iyJ)+bmpw6KC{BmB65W~76((_YZr?+M&p&jEveOU}SOE_3v
zQ9)K(a;d0D@>^4)%6-Wft3=fyUqgun2XWI9o(uwf7n@*pd(c8N!#dnu)HP{#JU%|Y
zv%mjybN^X~b%Fc#&DIt8B&}`n$6kEAr>3@+@Vh5eCA+>zOG~Tz@#E7qGnX>gLmn2Z
zD@X?(Jg9xg8y1(T=<wKV)26zC0rD<yZ$dI%+ovaOc<!z+?2h+evj?h3(By!!)t4_{
zR;4a)MIUSNTbp{dx^<L4`22Y_rQrb$89TsT511&$4gC)v+K={KFQ;+L%*_vsVGWyj
z@%W*84-N-10$&!qk%^Og=WJ+eYa19G%s{}&)grlfj?84I%etx#snfr{sS(Lhi+%ry
zky3e4rg@A|N=}708p_sU6{=#SnCeVb2lb*#ZRG|(bllJowaC|=Q4CJyAhnh|s`@|h
zzo&SVtzJrtkIiZut^V-g=0QhE)L297L~xA=dd6Mx=$9*_;mCYlT^-KCLUoxa^!V7=
zm{2H;>Fw=}x;@|6n2;M~*NTQ3-rN5?^jBkJW7R>msi~=Sa^(f>FSWUXUO`e;&~~ZS
z_t!~{(l}nHx*2}kHkqEae=A(%5#wE;=8^0X6ZiJ$Lz8qb>BxvtNNP=*!#exfKA==@
zg<2lTHfh<2b56TGL>|}5%T3Ezfzjg1f))zBsD|%k@bBhjBe@j&ob~hJZv;tem+hOd
zxl`dgQ@EBmFBq8rv!hh+;;ELenv%`7j>~lKTmxtDyh3BQgbpuHmAeN6GHV+}PnxO4
z`(E8hO#1C$#ULg*>`s6y`@vO>`lr4XAIBdNE|OgxQ{!N}@>Ji4_3G?~H>4SrcutJa
z-qM&}NJhFxTxN_}QwpQ_cExWUsY(s4yHX$Cm<uy~U#K^94j8{sFSmPY+%#PEU4P#B
zSe?}RKFOIsp{Jj=ivk(kUjw5J&YCq*k!NPs+QMJYJ)fHO>`XckluI3pl>4gl{r8b`
zs@J_nL>^%UpNEAlJyM^-!&^5Ux0x$4d$>VUMZ9|cOWwlEk>OG#mWWm2nO_)ZFm#s%
zw9%SCn}t0qI+IdTQj+zNK&;62E~u-okMn&&7YHz=rKP)AtBP*k)Bq%swXZ+x<NbiL
zr%FmKucuQ6A69(m*?hM*pl)g^*rfkpT6WgHU;hxAB~<w;HZ?W9ot%W6SGI2bwgj(m
vo}EIfa~JAt2^TNuZx#BQ#(!mQm{L>g|1?<Xyx$+#ra(j+C+qwzzM_8tM%mTu

literal 0
HcmV?d00001

diff --git a/app/assets/stylesheets/gallery.scss b/app/assets/stylesheets/gallery.scss
new file mode 100644
index 000000000..720505ca1
--- /dev/null
+++ b/app/assets/stylesheets/gallery.scss
@@ -0,0 +1,66 @@
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
+
+  .gallery-item {
+    display: block;
+  }
+
+  a {
+    background-image: none;
+  }
+
+  .champ-libelle {
+    margin-top: 0.5rem;
+  }
+
+  img {
+    height: 200px;
+    width: 200px;
+    object-fit: cover;
+  }
+
+  .thumbnail {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      position: relative;
+      z-index: 1;
+    }
+
+    .fr-icon-eye {
+      position: absolute;
+      z-index: 10;
+      background-color: var(--background-default-grey);
+      color: var(--text-active-blue-france);
+      border: 1px solid var(--border-active-blue-france);
+      padding: 0.25rem 0.75rem;
+
+      &:hover {
+        background-color: var(--hover-tint);
+      }
+
+      &:active {
+        background-color: var(--active-tint);
+      }
+    }
+  }
+}
+
+.lg-has-iframe {
+  width: 80% !important;
+  margin-top: 50px;
+}
+
+.lg-icon {
+  --hover-tint: none;
+  --active-tint: none;
+}
+
+.lg-sub-html {
+  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)) !important;
+  padding: 30px 40px 0 40px !important;
+}
diff --git a/app/assets/stylesheets/icons.scss b/app/assets/stylesheets/icons.scss
index aea716925..b363a9172 100644
--- a/app/assets/stylesheets/icons.scss
+++ b/app/assets/stylesheets/icons.scss
@@ -159,6 +159,14 @@
     }
   }
 
+  &-eye {
+    &:before,
+    &:after {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z'%3E%3C/path%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z'%3E%3C/path%3E%3C/svg%3E");
+    }
+  }
+
   &-file-copy-line {
     &:before,
     &:after {
diff --git a/app/controllers/instructeurs/dossiers_controller.rb b/app/controllers/instructeurs/dossiers_controller.rb
index c4d013794..51c45ebe6 100644
--- a/app/controllers/instructeurs/dossiers_controller.rb
+++ b/app/controllers/instructeurs/dossiers_controller.rb
@@ -358,6 +358,13 @@ module Instructeurs
       redirect_to instructeur_procedure_path(procedure)
     end
 
+    def pieces_jointes
+      @dossier = current_instructeur.dossiers.find(params[:dossier_id])
+      @champs_with_pieces_jointes = @dossier
+        .champs
+        .filter { _1.class.in?([Champs::PieceJustificativeChamp, Champs::TitreIdentiteChamp]) }
+    end
+
     private
 
     def dossier_scope
diff --git a/app/javascript/controllers/lightbox_controller.ts b/app/javascript/controllers/lightbox_controller.ts
new file mode 100644
index 000000000..8d4660d70
--- /dev/null
+++ b/app/javascript/controllers/lightbox_controller.ts
@@ -0,0 +1,36 @@
+import { Controller } from '@hotwired/stimulus';
+import lightGallery from 'lightgallery';
+import { LightGallery } from 'lightgallery/lightgallery';
+import lgThumbnail from 'lightgallery/plugins/thumbnail';
+import lgZoom from 'lightgallery/plugins/zoom';
+import lgRotate from 'lightgallery/plugins/rotate';
+import 'lightgallery/css/lightgallery-bundle.css';
+
+export default class extends Controller {
+  lightGallery?: LightGallery;
+
+  connect(): void {
+    const options = {
+      plugins: [lgZoom, lgThumbnail, lgRotate],
+      flipVertical: false,
+      flipHorizontal: false,
+      animateThumb: false,
+      zoomFromOrigin: false,
+      allowMediaOverlap: true,
+      toggleThumb: true,
+      selector: '.gallery-link'
+    };
+
+    this.lightGallery = lightGallery(this.element as HTMLElement, options);
+
+    const downloadIcon = document.querySelector('.lg-download');
+
+    if (downloadIcon != null) {
+      downloadIcon.removeAttribute('target');
+    }
+  }
+
+  disconnect(): void {
+    this.lightGallery?.destroy();
+  }
+}
diff --git a/app/views/instructeurs/dossiers/_header_bottom.html.haml b/app/views/instructeurs/dossiers/_header_bottom.html.haml
index 57ea40455..ce922e524 100644
--- a/app/views/instructeurs/dossiers/_header_bottom.html.haml
+++ b/app/views/instructeurs/dossiers/_header_bottom.html.haml
@@ -7,6 +7,10 @@
         instructeur_dossier_path(dossier.procedure, dossier),
         notification: notifications_summary[:demande])
 
+      - if dossier.revision.types_de_champ.any?(&:piece_justificative?)
+        = dynamic_tab_item(t('views.instructeurs.dossiers.tab_steps.attachments'),
+          pieces_jointes_instructeur_dossier_path(dossier.procedure, dossier))
+
       = dynamic_tab_item(t('views.instructeurs.dossiers.tab_steps.private_annotations'),
         annotations_privees_instructeur_dossier_path(dossier.procedure, dossier),
         notification: notifications_summary[:annotations_privees])
diff --git a/app/views/instructeurs/dossiers/pieces_jointes.html.haml b/app/views/instructeurs/dossiers/pieces_jointes.html.haml
new file mode 100644
index 000000000..0384fbc6b
--- /dev/null
+++ b/app/views/instructeurs/dossiers/pieces_jointes.html.haml
@@ -0,0 +1,29 @@
+- content_for(:title, "Pièces jointes")
+
+= render partial: "header", locals: { dossier: @dossier }
+
+.fr-container
+  .gallery{ "data-controller": "lightbox"}
+    - @champs_with_pieces_jointes.each do |champ|
+      - champ.piece_justificative_file.each do |attachment|
+        .gallery-item
+          - blob = attachment.blob
+          - if blob.content_type == 'application/pdf'
+            = link_to blob.url, id: blob.id, data: { iframe: true, src: blob.url }, class: 'gallery-link', type: "application/pdf", 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
+            .champ-libelle
+              = champ.libelle
+            = render Attachment::ShowComponent.new(attachment: attachment, new_tab: true)
+
+          - else
+            = 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
+            .champ-libelle
+              = champ.libelle
+            = render Attachment::ShowComponent.new(attachment: attachment, new_tab: true)
diff --git a/config/locales/en.yml b/config/locales/en.yml
index d86e72fc9..ef9cb539a 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -379,6 +379,7 @@ en:
           messaging: Messaging
           involved_persons: Involved persons
           reaffectation: reassignment
+          attachments: Attachments
         tab_explainations:
           a_suivre: No instructor is assigned to follow up on these files. Be the first !
           suivis: The folders that are in this tab are only those that you follow. You can exchange with the requester until you can accept them, refuse them or classify them without follow-up.
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
index 8da981b0e..6b5dfe622 100644
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@@ -382,6 +382,7 @@ fr:
           messaging: Messagerie
           involved_persons: Personnes impliquées
           reaffectation: Réaffectation
+          attachments: Pièces jointes
         tab_explainations:
           a_suivre: Aucun instructeur n’est affecté au suivi de ces dossiers. Soyez le premier !
           suivis: Les dossiers qui sont dans cet onglet sont uniquement ceux que vous suivez. Vous pouvez échanger avec le demandeur jusqu’à pouvoir les accepter, les refuser ou les classer sans suite.
diff --git a/config/routes.rb b/config/routes.rb
index 094758d24..0ab8203f2 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -502,6 +502,7 @@ Rails.application.routes.draw do
             get 'print' => 'dossiers#print'
             get 'telecharger_pjs' => 'dossiers#telecharger_pjs'
             get 'reaffectation'
+            get 'pieces_jointes'
             post 'reaffecter'
           end
         end
diff --git a/package.json b/package.json
index 0a2b30333..4186d3462 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "highcharts": "^10.3.3",
     "intersection-observer": "^0.12.2",
     "is-hotkey": "^0.2.0",
+    "lightgallery": "^2.7.2",
     "maplibre-gl": "^1.15.2",
     "match-sorter": "^6.3.4",
     "patch-package": "^7.0.0",
diff --git a/spec/controllers/instructeurs/dossiers_controller_spec.rb b/spec/controllers/instructeurs/dossiers_controller_spec.rb
index f72f52003..108c675ba 100644
--- a/spec/controllers/instructeurs/dossiers_controller_spec.rb
+++ b/spec/controllers/instructeurs/dossiers_controller_spec.rb
@@ -1372,4 +1372,29 @@ describe Instructeurs::DossiersController, type: :controller do
 
     it { expect(subject).to have_http_status(:ok) }
   end
+
+  describe '#pieces_jointes' do
+    let(:procedure) { create(:procedure, :published, types_de_champ_public: [{ type: :piece_justificative }], instructeurs:) }
+    let(:dossier) { create(:dossier, :en_construction, :with_populated_champs, procedure: procedure) }
+
+    before do
+      dossier.champs.first.piece_justificative_file.attach(
+        io: StringIO.new("image file"),
+        filename: "image.jpeg",
+        content_type: "image/jpeg",
+        # we don't want to run virus scanner on this file
+        metadata: { virus_scan_result: ActiveStorage::VirusScanner::SAFE }
+      )
+      get :pieces_jointes, params: {
+        procedure_id: procedure.id,
+        dossier_id: dossier.id
+      }
+    end
+
+    it do
+      expect(response.body).to include('Télécharger le fichier toto.txt')
+      expect(response.body).to include('Télécharger le fichier image.jpeg')
+      expect(response.body).to include('Visualiser')
+    end
+  end
 end