Add display field for uploads

(ATTACHMENT or EDITOR)

confiture-rest-api/prisma/migrations/20240906161141_add_display_field_on_files_attachment_or_editor/migration.sql

@@ -0,0 +1,8 @@
+-- CreateEnum
+CREATE TYPE "FileDisplay" AS ENUM ('EDITOR', 'ATTACHMENT');
+
+-- AlterTable
+ALTER TABLE "AuditFile" ADD COLUMN     "display" "FileDisplay" NOT NULL DEFAULT 'ATTACHMENT';
+
+-- AlterTable
+ALTER TABLE "StoredFile" ADD COLUMN     "display" "FileDisplay" NOT NULL DEFAULT 'ATTACHMENT';

confiture-rest-api/prisma/schema.prisma

@@ -163,6 +163,10 @@ model AuditTrace {
   Audit                Audit?
 }
 
+enum FileDisplay {
+  EDITOR
+  ATTACHMENT
+}
 model StoredFile {
   id               Int    @id @default(autoincrement())
   originalFilename String
@@ -178,6 +182,9 @@ model StoredFile {
   key String
   thumbnailKey String
 
+  // Inside TipTap editor (EDITOR) or added as an attachment (ATTACHMENT)?
+  display  					FileDisplay @default(ATTACHMENT)
+
   criterionResult   CriterionResult? @relation(fields: [criterionResultId], references: [id], onDelete: Cascade, onUpdate: Cascade)
   criterionResultId Int?
 }
@@ -197,6 +204,9 @@ model AuditFile {
   key String
   thumbnailKey String?
 
+  // Inside TipTap editor (EDITOR) or added as an attachment (ATTACHMENT)?
+  display  					FileDisplay @default(ATTACHMENT)
+
   audit				 Audit? @relation(fields: [auditUniqueId], references: [editUniqueId], onDelete: Cascade)
   auditUniqueId String?
 }

confiture-rest-api/src/audits/audit.service.ts

@@ -1,11 +1,12 @@
 import { Injectable } from "@nestjs/common";
 import {
   Audit,
+  AuditFile,
   AuditedPage,
   CriterionResult,
   CriterionResultStatus,
   CriterionResultUserImpact,
-  AuditFile,
+  FileDisplay,
   Prisma,
   StoredFile,
   TestEnvironment
@@ -445,7 +446,8 @@ export class AuditService {
     pageId: number,
     topic: number,
     criterium: number,
-    file: Express.Multer.File
+    file: Express.Multer.File,
+    display?: FileDisplay
   ) {
     const { key, thumbnailKey } = await this.uploadFileToStorage(
       editUniqueId,
@@ -469,7 +471,8 @@ export class AuditService {
         originalFilename: file.originalname,
         mimetype: file.mimetype,
         size: file.size,
-        thumbnailKey
+        thumbnailKey,
+        display
       }
     });
 
@@ -510,7 +513,11 @@ export class AuditService {
     return true;
   }
 
-  async saveNotesFile(editUniqueId: string, file: Express.Multer.File) {
+  async saveNotesFile(
+    editUniqueId: string,
+    file: Express.Multer.File,
+    display: FileDisplay = FileDisplay.ATTACHMENT
+  ) {
     const { key, thumbnailKey } = await this.uploadFileToStorage(
       editUniqueId,
       file,
@@ -531,6 +538,7 @@ export class AuditService {
         size: file.size,
 
         thumbnailKey,
+        display
       }
     });
 
@@ -842,7 +850,8 @@ export class AuditService {
         key: file.key,
         thumbnailKey: file.thumbnailKey,
         size: file.size,
-        mimetype: file.mimetype
+        mimetype: file.mimetype,
+        display: file.display
       })),
 
       criteriaCount: {
@@ -1006,7 +1015,8 @@ export class AuditService {
         exampleImages: r.exampleImages.map((img) => ({
           filename: img.originalFilename,
           key: img.key,
-          thumbnailKey: img.thumbnailKey
+          thumbnailKey: img.thumbnailKey,
+          display: img.display
         }))
       }))
     };

confiture-rest-api/src/audits/audits.controller.ts

@@ -28,6 +28,7 @@ import {
 import { Audit } from "src/generated/nestjs-dto/audit.entity";
 import { CriterionResult } from "src/generated/nestjs-dto/criterionResult.entity";
 import { MailService } from "../mail/mail.service";
+import { NotesFileDto } from "./dto/notes-file.dto";
 import { AuditExportService } from "./audit-export.service";
 import { AuditService } from "./audit.service";
 import { CreateAuditDto } from "./dto/create-audit.dto";
@@ -173,7 +174,8 @@ export class AuditsController {
       body.pageId,
       body.topic,
       body.criterium,
-      file
+      file,
+      body.display
     );
   }
 
@@ -190,15 +192,16 @@ export class AuditsController {
           errorHttpStatusCode: HttpStatus.UNPROCESSABLE_ENTITY
         })
     )
-    file: Express.Multer.File
+    file: Express.Multer.File,
+    @Body() body: NotesFileDto
   ) {
     const audit = await this.auditService.getAuditWithEditUniqueId(uniqueId);
 
     if (!audit) {
       return this.sendAuditNotFoundStatus(uniqueId);
     }
 
-    return await this.auditService.saveNotesFile(uniqueId, file);
+    return await this.auditService.saveNotesFile(uniqueId, file, body.display);
   }
 
   @Delete("/:uniqueId/results/examples/:exampleId")

confiture-rest-api/src/audits/dto/audit-report.dto.ts

@@ -2,7 +2,8 @@ import { ApiProperty } from "@nestjs/swagger";
 import {
   AuditType,
   CriterionResultStatus,
-  CriterionResultUserImpact
+  CriterionResultUserImpact,
+  FileDisplay
 } from "@prisma/client";
 
 export class AuditReportDto {
@@ -192,18 +193,27 @@ class ReportCriterionResult {
 }
 
 class ExampleImage {
-  /** @example "mon-image.jpg" */
+  /** @example "my-image.jpg" */
   filename: string;
-  /** @example "audit/xxxx/my-image.jpg" */
+  /** @example "audit/EWIsM6sYI2cC0lI7Ok2PE/3gnCTQ5ztOdEnKRraIMYG/my-image.jpg" */
   key: string;
-  /** @example "audit/xxxx/my-image_thumbnail.jpg" */
+  /** @example "audit/EWIsM6sYI2cC0lI7Ok2PE/3gnCTQ5ztOdEnKRraIMYG/my-image_thumbnail.jpg" */
   thumbnailKey: string;
+  /** @example "ATTACHMENT" */
+  display: FileDisplay;
 }
 
 class NotesFile {
+  /** @example "screenshot_001.png" */
   originalFilename: string;
+  /** @example "audits/EWIsM6sYI2cC0lI7Ok2PE/uqoOes4QqhFyKV8v0s2AQ/screenshot_001.png" */
   key: string;
+  /** @example "audits/EWIsM6sYI2cC0lI7Ok2PE/uqoOes4QqhFyKV8v0s2AQ/thumbnail_screenshot_001.png" */
   thumbnailKey: string;
+  /** @example 4631 */
   size: number;
+  /** @example "image/png" */
   mimetype: string;
+  /** @example "ATTACHMENT" */
+  display: FileDisplay;
 }

confiture-rest-api/src/audits/dto/notes-file.dto.ts

@@ -0,0 +1,9 @@
+import { FileDisplay } from "@prisma/client";
+import { IsIn, IsOptional, IsString } from "class-validator";
+
+export class NotesFileDto {
+  @IsOptional()
+  @IsString()
+  @IsIn(Object.values(FileDisplay))
+  display?: FileDisplay;
+}

confiture-rest-api/src/audits/dto/upload-image.dto.ts

@@ -1,6 +1,7 @@
 import { Type } from "class-transformer";
 import { IsInt, IsNumber, IsPositive, Max, Min } from "class-validator";
 import { IsRgaaCriterium } from "./update-results.dto";
+import { FileDisplay } from "@prisma/client";
 
 /*
 The `@Type(() => Number)` decorator is required to correctly parse strings into numbers
@@ -34,4 +35,6 @@ export class UploadImageDto {
       "topic and criterium numbers must be a valid RGAA criterium combination"
   })
   criterium: number;
+
+  display: FileDisplay;
 }

confiture-web-app/src/components/audit/NotesModal.vue

@@ -6,7 +6,7 @@ import { useRoute } from "vue-router";
 import { useIsOffline } from "../../composables/useIsOffline";
 import { FileErrorMessage } from "../../enums";
 import { useAuditStore } from "../../store/audit";
-import { AuditFile, StoreName } from "../../types";
+import { AuditFile, FileDisplay, StoreName } from "../../types";
 import { handleFileDeleteError, handleFileUploadError } from "../../utils";
 import DsfrModal from "../ui/DsfrModal.vue";
 import FileUpload from "../ui/FileUpload.vue";
@@ -40,7 +40,12 @@ const isOffline = useIsOffline();
 const notes = ref(auditStore.currentAudit?.notes || "");
 
 const uniqueId = computed(() => route.params.uniqueId as string);
-const files = computed(() => auditStore.currentAudit?.notesFiles || []);
+const files = computed(
+  () =>
+    auditStore.currentAudit?.notesFiles?.filter(
+      (e) => e.display === FileDisplay.ATTACHMENT
+    ) || []
+);
 
 const handleNotesChange = debounce(() => emit("confirm", notes.value), 500);
 

confiture-web-app/src/store/audit.ts

@@ -5,6 +5,7 @@ import {
   Audit,
   AuditFile,
   CreateAuditRequestData,
+  FileDisplay,
   UpdateAuditRequestData
 } from "../types";
 import { AccountAudit } from "../types/account";
@@ -126,10 +127,17 @@ export const useAuditStore = defineStore("audit", {
       }
     },
 
-    async uploadAuditFile(uniqueId: string, file: File) {
+    async uploadAuditFile(
+      uniqueId: string,
+      file: File,
+      display?: FileDisplay
+    ): Promise<AuditFile> {
       const formData = new FormData();
       // To handle non-ascii characters, we encode the filename here and decode it on the back
       formData.set("file", file, encodeURI(file.name));
+      if (display) {
+        formData.set("display", display.toString());
+      }
 
       this.increaseCurrentRequestCount();
       const notesFile = (await ky

confiture-web-app/src/store/results.ts

@@ -6,7 +6,8 @@ import {
   AuditFile,
   CriterionResultUserImpact,
   CriteriumResult,
-  CriteriumResultStatus
+  CriteriumResultStatus,
+  FileDisplay
 } from "../types";
 import { useAuditStore } from "./audit";
 import { useFiltersStore } from "./filters";
@@ -363,14 +364,18 @@ export const useResultsStore = defineStore("results", {
       pageId: number,
       topic: number,
       criterium: number,
-      file: File
+      file: File,
+      display?: FileDisplay
     ) {
       const formData = new FormData();
       formData.set("pageId", pageId.toString());
       formData.set("topic", topic.toString());
       formData.set("criterium", criterium.toString());
       // To handle non-ascii characters, we encode the filename here and decode it on the back
       formData.set("image", file, encodeURI(file.name));
+      if (display) {
+        formData.set("display", display.toString());
+      }
 
       this.increaseCurrentRequestCount();
 

confiture-web-app/src/types/types.ts

@@ -112,6 +112,12 @@ export interface AuditFile {
   key: string;
   mimetype: string;
   thumbnailKey: string;
+  display: FileDisplay;
+}
+
+export enum FileDisplay {
+  ATTACHMENT = "ATTACHMENT",
+  EDITOR = "EDITOR"
 }
 
 export interface CriteriumResult {