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

api/serializers/declaration.py

@@ -248,6 +248,7 @@ class Meta:
             "type",
             "type_display",
             "name",
+            "size",
         )
         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
@@ -812,6 +814,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="`${truncateMiddle(file.name, 22)}`"
+            :href="file.file"
+            :size="file.size"
+            :format="file.typeDisplay"
+          />
+        </div>
+      </div>
+    </div>
     <h3 class="fr-h6">
       Informations sur le produit
       <SummaryModificationButton class="ml-4" v-if="!readonly" @click="router.push(editLink(0))" />
@@ -110,7 +130,8 @@
           <SummaryModificationButton class="ml-4" v-if="!readonly" @click="router.push(editLink(1))" />
         </h3>
         <AddressLine :payload="payload" />
-
+      </div>
+      <div v-if="!useCompactAttachmentView & !payload.siccrfId">
         <h3 class="fr-h6 !mt-8">
           Pièces jointes
           <SummaryModificationButton class="ml-4" v-if="!readonly" @click="router.push(editLink(2))" />
@@ -147,6 +168,7 @@ import { storeToRefs } from "pinia"
 import { useRouter } from "vue-router"
 import SummaryModificationButton from "./SummaryModificationButton"
 import HistoryBadge from "../History/HistoryBadge.vue"
+import { truncateMiddle } from "@/utils/string"
 
 const router = useRouter()
 const { units, populations, conditions, effects, galenicFormulations } = storeToRefs(useRootStore())
@@ -157,6 +179,7 @@ defineProps({
   allowArticleChange: Boolean,
   useAccordions: Boolean,
   showElementAuthorization: Boolean,
+  useCompactAttachmentView: Boolean,
 })
 const unitInfo = computed(() => {
   if (!payload.value.unitQuantity) return null

frontend/src/utils/string.js

@@ -0,0 +1,14 @@
+export const truncateMiddle = (str, maxLength) => {
+  // Cette fonction permet d'assurer qu'une chaîne de caractères ne dépasse pas une longeur
+  // choisie en insérant « … » au milieu de la chaîne en remplacement des caractères qui
+  // la font dépasser. Par exemple, la chaîne "Issy-les-Moulineaux" en longeur 5 deviendrait
+  // "Is…ux"
+
+  if (str.length <= maxLength) return str
+
+  const charsToKeep = Math.floor((maxLength - 1) / 2)
+  const start = str.slice(0, charsToKeep)
+  const end = str.slice(-charsToKeep)
+
+  return `${start}…${end}`
+}

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>