From 6dc87f330349c36f4bb355a4ece1f3699d3e731a Mon Sep 17 00:00:00 2001 From: sebastienbinda Date: Mon, 17 Aug 2026 08:15:53 +0200 Subject: [PATCH 1/6] Amelioration de la page d'import --- .../components/ImportConfigurationFields.jsx | 191 +++++++++--------- .../ImportCsvConfigurationFields.jsx | 138 ++++++++----- frontend/src/components/ImportFieldHelp.jsx | 146 +++++++++++++ .../src/components/ImportGlobalOptions.jsx | 74 +++++++ .../src/components/ImportLayoutFields.jsx | 51 +++-- frontend/src/components/ImportSummary.jsx | 8 +- .../UserCollectionOnboardingView.jsx | 155 ++++++++------ .../csvImportConfigurationBuilder.js | 9 +- .../collection/importConfigurationBuilder.js | 10 +- .../importGlobalOptionsVisibility.js | 67 ++++++ .../collection/useUserCollectionOnboarding.js | 2 +- frontend/src/styles/collection-onboarding.css | 113 ++++++++++- frontend/tests/importConfiguration.test.js | 114 +++++++++++ .../tests/userImportSummaryNotice.test.js | 4 +- .../import_onboarding.md | 11 + .../import_unboarding.md | 3 - 16 files changed, 859 insertions(+), 237 deletions(-) create mode 100644 frontend/src/components/ImportFieldHelp.jsx create mode 100644 frontend/src/components/ImportGlobalOptions.jsx create mode 100644 frontend/src/hooks/collection/importGlobalOptionsVisibility.js create mode 100644 tasks/0.4.2/improve_import_onboarding/import_onboarding.md delete mode 100644 tasks/0.4.2/improve_import_unboarding/import_unboarding.md diff --git a/frontend/src/components/ImportConfigurationFields.jsx b/frontend/src/components/ImportConfigurationFields.jsx index 1785e81..c7c2a19 100644 --- a/frontend/src/components/ImportConfigurationFields.jsx +++ b/frontend/src/components/ImportConfigurationFields.jsx @@ -14,10 +14,12 @@ */ import ImportLayoutFields from "./ImportLayoutFields"; import ImportCsvConfigurationFields from "./ImportCsvConfigurationFields"; +import { ImportGlobalOptions } from "./ImportGlobalOptions"; import { collectionColumnFields, wishlistSheetColumnFields, } from "../hooks/collection/importConfigurationBuilder"; +import { hasSpreadsheetImportColumn } from "../hooks/collection/importGlobalOptionsVisibility"; /** * Affiche les champs frontend de configuration d'import. @@ -58,93 +60,88 @@ function ImportConfigurationFields({ const columnFields = collectionColumnFields(configuration, !configuration.multipleSheets); return ( -
- Configuration du fichier -

* Champs obligatoires

- - + <> +
+ Configuration du fichier +

+ Configurez la lecture de votre classeur. Les colonnes marquées avec un + astérisque sont indispensables pour créer votre collection. +

- +
+ Votre fichier contient-il plusieurs onglets à importer ? + + +

+ Choisissez Oui si vos jeux sont répartis sur plusieurs onglets. Choisissez Non si tous + les jeux à importer se trouvent dans un seul tableau. +

+
+ {!configuration.multipleSheets ? ( + onLayoutChange( + "singleSheetLayout", + fieldName, + value + )} + onLayoutColumnChange={(fieldName, value) => onLayoutColumnChange( + "singleSheetLayout", + fieldName, + value + )} + /> + ) : ( + + )} +
- -
- Multiple onglets - - -
- - {!configuration.multipleSheets ? ( - onLayoutChange( - "singleSheetLayout", - fieldName, - value - )} - onLayoutColumnChange={(fieldName, value) => onLayoutColumnChange( - "singleSheetLayout", - fieldName, - value - )} - /> - ) : ( - - )} -
+ + ); } @@ -157,14 +154,21 @@ function ImportConfigurationFields({ function WishlistFields({ configuration, availableSheetNames, + disabled, onWishlistConfigurationChange, onWishlistLayoutChange, onWishlistLayoutColumnChange, }) { return ( -
-
- Wishlist +
+ Liste de souhaits +

+ Indiquez comment reconnaître les jeux qui doivent aller dans votre liste + de souhaits. Sans source dédiée, toutes les lignes importées sont ajoutées + à votre collection. +

+
+ Source {["none", "sheet", "column"].map((mode) => (
+ ); } const modeLabels = Object.freeze({ none: "Aucune", - sheet: "Onglet dedie", - column: "Colonne", + sheet: "Onglet dédié", + column: "Colonne dédiée", }); /** @@ -216,7 +220,7 @@ function SheetNameField({ value, availableSheetNames, onChange }) { if (availableSheetNames.length) { return ( + + Utilisez ce mode quand chaque onglet regroupe les jeux d'une plateforme, par exemple + un onglet Switch et un onglet PlayStation 2. +
- Memes plages sur chaque onglet + Mêmes plages sur chaque onglet