Affiche la section des pièces jointes en haut pour les instructrices …

…et viseuses

api/serializers/declaration.py

@@ -248,6 +248,8 @@ class Meta:
             "type",
             "type_display",
             "name",
+            "size",
+            "extension",
         )
         read_only_fields = ("file",)
 

data/models/declaration.py

@@ -1,12 +1,14 @@
 import json
 import logging
 from datetime import timedelta
+from pathlib import Path
 
 from django.conf import settings
 from django.core.exceptions import ValidationError
 from django.db import models
 from django.db.models import Case, F, Q, Value, When
 from django.db.models.functions import Coalesce
+from django.template.defaultfilters import filesizeformat
 
 from dateutil.relativedelta import relativedelta
 from djangorestframework_camel_case.render import CamelCaseJSONRenderer
@@ -809,6 +811,20 @@ class AttachmentType(models.TextChoices):
     def has_pdf_extension(self):
         return self.file and self.file.url.endswith(".pdf")
 
+    @property
+    def size(self):
+        try:
+            return self.file and self.file.size and filesizeformat(self.file.size)
+        except Exception as _:
+            return ""
+
+    @property
+    def extension(self):
+        try:
+            return self.file and self.file.name and Path(self.file.size).suffix
+        except Exception as _:
+            return ""
+
     @property
     def type_display(self):
         return self.get_type_display() or "Type inconnu"

frontend/src/components/DeclarationSummary/index.vue

@@ -7,6 +7,26 @@
       :allowChange="allowArticleChange"
       class="mb-2"
     />
+    <div v-if="useCompactAttachmentView">
+      <h3 class="fr-h6 !mt-8">
+        Pièces jointes
+        <SummaryModificationButton class="ml-4" v-if="!readonly" @click="router.push(editLink(2))" />
+      </h3>
+      <div class="grid grid-cols-12 gap-3 mb-8">
+        <div
+          class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 overflow-auto"
+          v-for="(file, index) in payload.attachments"
+          :key="`file-download-${index}`"
+        >
+          <DsfrFileDownload
+            :title="`${file.typeDisplay} : ${file.name}`"
+            :href="file.file"
+            :size="file.size"
+            :format="file.extension?.toUpperCase()"
+          />
+        </div>
+      </div>
+    </div>
     <h3 class="fr-h6">
       Informations sur le produit
       <SummaryModificationButton class="ml-4" v-if="!readonly" @click="router.push(editLink(0))" />
@@ -111,18 +131,20 @@
       </h3>
       <AddressLine :payload="payload" />
 
-      <h3 class="fr-h6 !mt-8">
-        Pièces jointes
-        <SummaryModificationButton class="ml-4" v-if="!readonly" @click="router.push(editLink(2))" />
-      </h3>
-      <div class="grid grid-cols-12 gap-3 mb-8">
-        <FilePreview
-          class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3"
-          v-for="(file, index) in payload.attachments"
-          :key="`file-${index}`"
-          :file="file"
-          readonly
-        />
+      <div v-if="!useCompactAttachmentView">
+        <h3 class="fr-h6 !mt-8">
+          Pièces jointes
+          <SummaryModificationButton class="ml-4" v-if="!readonly" @click="router.push(editLink(2))" />
+        </h3>
+        <div class="grid grid-cols-12 gap-3 mb-8">
+          <FilePreview
+            class="col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3"
+            v-for="(file, index) in payload.attachments"
+            :key="`file-${index}`"
+            :file="file"
+            readonly
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -156,6 +178,7 @@ defineProps({
   allowArticleChange: Boolean,
   useAccordions: Boolean,
   showElementAuthorization: Boolean,
+  useCompactAttachmentView: Boolean,
 })
 const unitInfo = computed(() => {
   if (!payload.value.unitQuantity) return null

frontend/src/views/InstructionPage/index.vue

@@ -63,6 +63,7 @@
               :snapshots="snapshots"
               @decision-done="onDecisionDone"
               :allowArticleChange="!declaration.siccrfId"
+              :useCompactAttachmentView="true"
             ></component>
           </DsfrTabContent>
         </DsfrTabs>

frontend/src/views/VisaPage/index.vue

@@ -57,6 +57,7 @@
               :user="declarant"
               :company="company"
               :snapshots="snapshots"
+              :useCompactAttachmentView="true"
               @decision-done="onDecisionDone"
             ></component>
           </DsfrTabContent>