Améliorer la gestion des fichiers dans la sidebar d’observation #1334

yaaax · 2025-12-09T17:05:17Z

closes #1305

Avant de merger la pull request, s’assurer que :

Les checks GitHub passent (lint...).
Les tests Cypress ont été lancés en local (dans le cas d’une correction de bug ou d’une nouvelle fonctionnalité).

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

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

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

confiture-web-app/src/components/tiptap/image/ImageImportPlugin.ts

confiture-web-app/src/components/ui/FileList.vue

confiture-web-app/src/components/ui/FileUpload.vue

confiture-web-app/src/composables/useFileHandler.ts

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

confiture-web-app/src/composables/useModal.ts

confiture-web-app/src/composables/useFileHandler.ts

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

hissalht · 2026-01-08T10:52:33Z

confiture-web-app/src/enums.ts

+  UPLOAD_ERROR_TIMEOUT = "Importation interrompue, délai d’attente dépassé. Vérifiez votre connexion et réessayez.",
+  UPLOAD_ERROR_UNKNOWN = "Importation échouée, erreur inconnue. Réessayez.",
+  UPLOAD_SUCCESS = "Fichier [FILE] ajouté.",
+  UPLOAD_SUCCESS_IMAGE = "Image [FILE] ajoutée.",


je me demande si c’est pas overkill de tout le temps inclure le nom du fichier dans le message 🤔

Genre si on upload un fichier avec un nom à rallonge Screenshot 2025-12-21 at 19.33.51 ou même 15af6606-81e9-43c4-a804-6e16138b6d6d.jpg (ce qui est pas si déconnant comme nom de fichier sur le web), est-ce que ça annonce "Image un-cinq-a-f-six-six-zérox-... [10 secondes de nom de fichier] ajoutée" ?

En plus, le seul mot qui différencie un ajout d’une suppression ("fichier xx ajouté" / "fichier xx supprimé") est à la fin du message.

Pour info :

le succès d’upload (UPLOAD_SUCCESS) n’est restitué que pour les aides techniques, car on suppose que l’apparition du nouveau fichier suffit à faire comprendre que l’upload a réussi.

le succès de delete (DELETE_SUCCESS) est lui restitué visuellement avec un toast (et aux aides techniques bien sûr), car le fichier disparait donc on pourrait oublier le fichier qui vient d’être supprimé.

C’est sûr que ça peut faire long. Il me semble avoir discuté d’un raccourcissement du genre "début…fin.jpg" (?) Mais je ne sais pas trop…

Qu’en pense @AdrienMuzyczka ?

Pour "fichier xx ajouté" / "fichier xx supprimé") :

« un seul mot qui différencie » : perso ça ne me dérange pas :)

« à la fin du message » : j’entends l’argument. Effectivement ça serait peut-être bien d’inverser la tournure

Qu’en pense @AdrienMuzyczka ?

confiture-web-app/src/enums.ts

confiture-web-app/src/components/ui/FileList.vue

hissalht · 2026-01-08T11:55:12Z

confiture-web-app/src/components/ui/FileList.vue

+) {
+  inlineConfirmPendingRange.value = range;
+  await nextTick();
+  await sleep(1);


on peut vraiment pas se passer de tout les sleep ? 😬

Celui-ci non : il permet d’annoncer le bouton "Supprimer" mis en focus.
Sans ça sur Safari avec VoiceOver on ne l’entends pas 🤷.
Je rajoute un commentaire dans le code 🙏

En revanche j’ai rework les anims en virant les autres sleep 👌

hissalht · 2026-01-08T11:59:30Z

confiture-web-app/src/components/ui/FileList.vue

+});
+
+const emit = defineEmits<{
+  (e: "file-deleted", payload: { resolve: (value: void) => void; flFile: FileListFile }): Promise<void>;


pourquoi value: void plutôt que rien du tout ?

Suggested change

(e: "file-deleted", payload: { resolve: (value: void) => void; flFile: FileListFile }): Promise<void>;

(e: "file-deleted", payload: { resolve: () => void; flFile: FileListFile }): Promise<void>;

Pareil pour toutes définitions de resolve

eslint n’aime pas ça 🤷 :

Argument of type '(resolve: () => void) => void' is not assignable to parameter of type '(resolve: (value: unknown) => void, reject: (reason?: any) => void) => void'. Types of parameters 'resolve' and 'resolve' are incompatible. Target signature provides too few arguments. Expected 1 or more, but got 0.

Le typage du constructeur dans l’interface de Promise (node_modules/typescript/lib/lib.es2015.promise.d.ts) :

new <T>(executor: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void): Promise<T>;

hissalht · 2026-01-08T12:02:34Z

confiture-web-app/src/components/ui/FileUpload.vue


+const notify = useNotifications();
+
+const maxFileSizeHumanReadable = computed(() => (props.maxFileSize / 1000000) + " Mo");


~~On peut mettre des _ dans les litterals de nombre, pratique pour rendre les grands nombres plus faciles à lire~~

Suggested change

const maxFileSizeHumanReadable = computed(() => (props.maxFileSize / 1000000) + " Mo");

const maxFileSizeHumanReadable = computed(() => (props.maxFileSize / 1_000_000) + " Mo");

Il y’a une fonction formatBytes() qui fait déjà ça dans utils.ts

Mmmm… ok pour utiliser la fonction utilitaire, mais je vois qu’il s’agit d’une base 1024 et non 1000…

Je crois qu’il faudrait changer 1024 en 1000. Cf. https://fr.wikipedia.org/wiki/Pr%C3%A9fixe_binaire

ça me va. tant que c’est pareil partout !

yaaax

Merci pour les retours.
J’ai fait pas mal de modifications.
Il y a 1 ou 2 questions en suspend dans les commentaires.

confiture-web-app/src/composables/useModal.ts

yaaax · 2026-01-09T17:08:57Z

confiture-web-app/src/components/ui/FileUpload.vue


+const notify = useNotifications();
+
+const maxFileSizeHumanReadable = computed(() => (props.maxFileSize / 1000000) + " Mo");


Mmmm… ok pour utiliser la fonction utilitaire, mais je vois qu’il s’agit d’une base 1024 et non 1000…

Je crois qu’il faudrait changer 1024 en 1000. Cf. https://fr.wikipedia.org/wiki/Pr%C3%A9fixe_binaire

yaaax · 2026-01-09T20:21:21Z

confiture-web-app/src/enums.ts

+  UPLOAD_ERROR_TIMEOUT = "Importation interrompue, délai d’attente dépassé. Vérifiez votre connexion et réessayez.",
+  UPLOAD_ERROR_UNKNOWN = "Importation échouée, erreur inconnue. Réessayez.",
+  UPLOAD_SUCCESS = "Fichier [FILE] ajouté.",
+  UPLOAD_SUCCESS_IMAGE = "Image [FILE] ajoutée.",


Pour info :

le succès d’upload (UPLOAD_SUCCESS) n’est restitué que pour les aides techniques, car on suppose que l’apparition du nouveau fichier suffit à faire comprendre que l’upload a réussi.

le succès de delete (DELETE_SUCCESS) est lui restitué visuellement avec un toast (et aux aides techniques bien sûr), car le fichier disparait donc on pourrait oublier le fichier qui vient d’être supprimé.

C’est sûr que ça peut faire long. Il me semble avoir discuté d’un raccourcissement du genre "début…fin.jpg" (?) Mais je ne sais pas trop…

Qu’en pense @AdrienMuzyczka ?

Pour "fichier xx ajouté" / "fichier xx supprimé") :

« un seul mot qui différencie » : perso ça ne me dérange pas :)

« à la fin du message » : j’entends l’argument. Effectivement ça serait peut-être bien d’inverser la tournure

Qu’en pense @AdrienMuzyczka ?

confiture-web-app/src/enums.ts

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

yaaax · 2026-01-13T15:11:25Z

confiture-web-app/src/components/ui/FileList.vue

+});
+
+const emit = defineEmits<{
+  (e: "file-deleted", payload: { resolve: (value: void) => void; flFile: FileListFile }): Promise<void>;


eslint n’aime pas ça 🤷 :

Argument of type '(resolve: () => void) => void' is not assignable to parameter of type '(resolve: (value: unknown) => void, reject: (reason?: any) => void) => void'. Types of parameters 'resolve' and 'resolve' are incompatible. Target signature provides too few arguments. Expected 1 or more, but got 0.

Le typage du constructeur dans l’interface de Promise (node_modules/typescript/lib/lib.es2015.promise.d.ts) :

new <T>(executor: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void): Promise<T>;

yaaax · 2026-01-13T15:15:48Z

confiture-web-app/src/components/ui/FileList.vue

+) {
+  inlineConfirmPendingRange.value = range;
+  await nextTick();
+  await sleep(1);


Celui-ci non : il permet d’annoncer le bouton "Supprimer" mis en focus.
Sans ça sur Safari avec VoiceOver on ne l’entends pas 🤷.
Je rajoute un commentaire dans le code 🙏

yaaax · 2026-01-14T15:48:26Z

confiture-web-app/src/components/ui/FileList.vue

+) {
+  inlineConfirmPendingRange.value = range;
+  await nextTick();
+  await sleep(1);


En revanche j’ai rework les anims en virant les autres sleep 👌

And use it in AuditGenerationCriterium.vue and NotesModal.vue

* file deletion: add an inline confirm stage within the NotesModal * convey file upload and file deletion to assistive technologies * remove the visual success message * better handle focus after deletion

* emit events instead of passing callback functions as props * properly handle file upload / delete notifications conveyed to assistive technologies * sleep or nextTick only when needed

* to screen readers only in Notes * with a toast in criteria Make sure it works on Safari with a 500ms delay

+ clarify "all files" label (visually and for assistive technologies)

(removes risky querySelector)

And use this utility function in FileList component

Full deprecated route path is: "/api/audits/{uniqueId}/results/examples"

It’s not a type

… to prevent animating FileList items from overlapping other NotesModal elements

Use getFileMessage everywhere

This function is not used anymore.

Animations: * do not remove <ul> element when file list is empty so that first list item appears/disappears correctly * remove unneeded delays (calls to sleep function) * add a <div class="file-item"> element inside <li> element to allow the <li> absolute position while transitionning Inline delete confirmation panel: * focus "Cancel" button first instead of "Confirm delete" button to prevent unwanted deletes * disable file item Delete button when confirm panel is open

yaaax linked an issue Dec 9, 2025 that may be closed by this pull request

Améliorer la gestion des fichiers dans la sidebar d’observation #1305

Open

5 tasks

yaaax changed the title ~~1305 améliorer la gestion des fichiers dans la sidebar dobservation~~ Améliorer la gestion des fichiers dans la sidebar d’observation Dec 9, 2025

hissalht temporarily deployed to ara-1305-ameliorer-la-g-t6kskh December 9, 2025 17:08 Inactive

hissalht temporarily deployed to ara-1305-ameliorer-la-g-t6kskh December 10, 2025 08:33 Inactive

yaaax requested review from bellangerq and hissalht December 10, 2025 08:34

bellangerq requested changes Dec 10, 2025

View reviewed changes

yaaax mentioned this pull request Dec 11, 2025

Ajout d’une modale générique (utilisée par la modale de confirmation de suppression de fichier) #1332

Merged

yaaax force-pushed the 1305-améliorer-la-gestion-des-fichiers-dans-la-sidebar-dobservation branch from 848e310 to a0860e8 Compare December 16, 2025 10:15

hissalht temporarily deployed to ara-1305-ameliorer-la-g-t6kskh December 16, 2025 10:16 Inactive

hissalht temporarily deployed to ara-1305-ameliorer-la-g-t6kskh December 17, 2025 14:26 Inactive

yaaax force-pushed the 1305-améliorer-la-gestion-des-fichiers-dans-la-sidebar-dobservation branch from 64b7d7e to 1d6e6dc Compare December 17, 2025 14:40

hissalht temporarily deployed to ara-1305-ameliorer-la-g-t6kskh December 17, 2025 14:41 Inactive

yaaax force-pushed the 1305-améliorer-la-gestion-des-fichiers-dans-la-sidebar-dobservation branch from 1d6e6dc to cf5997b Compare December 22, 2025 15:28

hissalht temporarily deployed to ara-1305-ameliorer-la-g-t6kskh December 22, 2025 15:28 Inactive

yaaax force-pushed the 1305-améliorer-la-gestion-des-fichiers-dans-la-sidebar-dobservation branch from cf5997b to 9574f3b Compare December 24, 2025 16:50

hissalht temporarily deployed to ara-1305-ameliorer-la-g-t6kskh December 24, 2025 16:50 Inactive

hissalht temporarily deployed to ara-1305-ameliorer-la-g-t6kskh December 24, 2025 17:54 Inactive

hissalht temporarily deployed to ara-1305-ameliorer-la-g-t6kskh December 24, 2025 18:01 Inactive

hissalht requested changes Jan 8, 2026

View reviewed changes

yaaax force-pushed the 1305-améliorer-la-gestion-des-fichiers-dans-la-sidebar-dobservation branch 2 times, most recently from 24a82bf to b9e4a22 Compare January 12, 2026 18:08

yaaax commented Jan 14, 2026

View reviewed changes

hissalht temporarily deployed to ara-1305-ameliorer-la-g-5gmy3c January 15, 2026 10:05 Inactive

yaaax and others added 6 commits January 29, 2026 17:18

doc: add comments on functions no longer used

92d4173

feat(audit.controller): inverse notes files order

1f7daea

rework: add useFileHandler composable

7b2f765

And use it in AuditGenerationCriterium.vue and NotesModal.vue

feat: improve NotesModal file deletion and more…

b15447f

* file deletion: add an inline confirm stage within the NotesModal * convey file upload and file deletion to assistive technologies * remove the visual success message * better handle focus after deletion

fix: error messages for files (also within editor)

a5813e3

fix(FileUpload): misc fixes

22e91aa

* emit events instead of passing callback functions as props * properly handle file upload / delete notifications conveyed to assistive technologies * sleep or nextTick only when needed

yaaax and others added 16 commits January 29, 2026 18:29

rework: unshift(…) instead of splice(0,0,…)

3cda4db

fix(FileList): add transitions (add / delete)

083ae47

fix: improve upload success notification

91933ff

* to screen readers only in Notes * with a toast in criteria Make sure it works on Safari with a 500ms delay

Remove useless comments

33edeb1

fix(FileList): improve wording

cfcc5ef

+ clarify "all files" label (visually and for assistive technologies)

feat: simplify wording

b3c2369

refactor(FileList): template ref on delete button

e8b902e

(removes risky querySelector)

rework(utils): accept FileListFile in isImage

8aa8c60

And use this utility function in FileList component

rework: use useTemplateRef

47f3fa2

api: mark "examples" route as deprecated

320b4a4

Full deprecated route path is: "/api/audits/{uniqueId}/results/examples"

chore(FileList): improve inline comments

bfd4e4e

chore: export "provide" key from a separate file

003ac8d

It’s not a type

feat(NotesModal): add margin at the bottom

9a9057d

… to prevent animating FileList items from overlapping other NotesModal elements

chore: do not use FileMessage enum directly

24b4471

Use getFileMessage everywhere

chore(useFileHandler): remove uploadCriteriumFile

53b07b9

This function is not used anymore.

bellangerq force-pushed the 1305-améliorer-la-gestion-des-fichiers-dans-la-sidebar-dobservation branch from 8229c83 to 7f0ca1e Compare January 29, 2026 18:06

	(e: "file-deleted", payload: { resolve: (value: void) => void; flFile: FileListFile }): Promise<void>;
	(e: "file-deleted", payload: { resolve: () => void; flFile: FileListFile }): Promise<void>;


		const notify = useNotifications();

		const maxFileSizeHumanReadable = computed(() => (props.maxFileSize / 1000000) + " Mo");

Améliorer la gestion des fichiers dans la sidebar d’observation #1334

Are you sure you want to change the base?

Améliorer la gestion des fichiers dans la sidebar d’observation #1334

Uh oh!

Conversation

yaaax commented Dec 9, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yaaax left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants