From a37b0a96a73f2cb2cb24cbc8252f7bbd230bd142 Mon Sep 17 00:00:00 2001
From: Alejandro MG <alejandro@amguillen.dev>
Date: Tue, 4 Feb 2025 15:51:02 +0100
Subject: [PATCH] =?UTF-8?q?Affiche=20la=20section=20des=20pi=C3=A8ces=20jo?=
 =?UTF-8?q?intes=20en=20haut=20pour=20les=20instructrices=20et=20viseuses?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/serializers/declaration.py                |  2 +
 data/models/declaration.py                    | 16 +++++++
 .../components/DeclarationSummary/index.vue   | 47 ++++++++++++++-----
 frontend/src/views/InstructionPage/index.vue  |  1 +
 frontend/src/views/VisaPage/index.vue         |  1 +
 5 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/api/serializers/declaration.py b/api/serializers/declaration.py
index ab62e1eb..a3744fb1 100644
--- a/api/serializers/declaration.py
+++ b/api/serializers/declaration.py
@@ -248,6 +248,8 @@ class Meta:
             "type",
             "type_display",
             "name",
+            "size",
+            "extension",
         )
         read_only_fields = ("file",)
 
diff --git a/data/models/declaration.py b/data/models/declaration.py
index c976051a..66ec19ca 100644
--- a/data/models/declaration.py
+++ b/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"
diff --git a/frontend/src/components/DeclarationSummary/index.vue b/frontend/src/components/DeclarationSummary/index.vue
index 32249026..4c57d56a 100644
--- a/frontend/src/components/DeclarationSummary/index.vue
+++ b/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
diff --git a/frontend/src/views/InstructionPage/index.vue b/frontend/src/views/InstructionPage/index.vue
index b070ebb5..4998accc 100644
--- a/frontend/src/views/InstructionPage/index.vue
+++ b/frontend/src/views/InstructionPage/index.vue
@@ -63,6 +63,7 @@
               :snapshots="snapshots"
               @decision-done="onDecisionDone"
               :allowArticleChange="!declaration.siccrfId"
+              :useCompactAttachmentView="true"
             ></component>
           </DsfrTabContent>
         </DsfrTabs>
diff --git a/frontend/src/views/VisaPage/index.vue b/frontend/src/views/VisaPage/index.vue
index 25b622fe..a429dd15 100644
--- a/frontend/src/views/VisaPage/index.vue
+++ b/frontend/src/views/VisaPage/index.vue
@@ -57,6 +57,7 @@
               :user="declarant"
               :company="company"
               :snapshots="snapshots"
+              :useCompactAttachmentView="true"
               @decision-done="onDecisionDone"
             ></component>
           </DsfrTabContent>