Skip to content

feat(add-data): Add modal to import data via file upload#189

Open
david-bretaud-dev wants to merge 3 commits into
david-bretaud-dev/refactor-remove-spacing-tokensfrom
david-bretaud-dev/feat-add-modal-to-import-new-data
Open

feat(add-data): Add modal to import data via file upload#189
david-bretaud-dev wants to merge 3 commits into
david-bretaud-dev/refactor-remove-spacing-tokensfrom
david-bretaud-dev/feat-add-modal-to-import-new-data

Conversation

@david-bretaud-dev

@david-bretaud-dev david-bretaud-dev commented Jul 12, 2026

Copy link
Copy Markdown
Collaborator

Highlights

  1. Add "add-data" feature slice.
  2. Add Dialog from shadcn CLI
  3. I had an issue with some container breakpoints used by shadcn (max-w-lg) => the dialog sized was wronged. Why ? because of the spacing custom tokens added in the style. I removed it (and their usage) to be sure we don't have conflicts with native containers token.

Demos

UI only

demo-upload-file-data-ui.mp4

Full flow

Waiting for backend

@david-bretaud-dev david-bretaud-dev self-assigned this Jul 12, 2026
@david-bretaud-dev david-bretaud-dev linked an issue Jul 12, 2026 that may be closed by this pull request
@david-bretaud-dev
david-bretaud-dev force-pushed the david-bretaud-dev/feat-add-modal-to-import-new-data branch from beffea5 to 04316e3 Compare July 19, 2026 08:23
Comment on lines +23 to 33
layerOptions: [
{
translation: t("filters.categories.actions.forestInventary"),
value: LAYERS.INVENTARY,
},
{
translation: t("filters.categories.actions.socioEco"),
value: LAYERS.ENQUETE,
},
],
logoSrc: "/logo_all4trees.png",

@david-bretaud-dev david-bretaud-dev Jul 19, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NB: this is a tenant config that drilled to the Add data dialog in the header.. I have plan to move away from props drilling and provide a new react context for these tenant configurations that are used in agnostic pages

cf #196

@david-bretaud-dev
david-bretaud-dev force-pushed the david-bretaud-dev/feat-add-modal-to-import-new-data branch from 04316e3 to 54560ef Compare July 19, 2026 08:33
@david-bretaud-dev
david-bretaud-dev changed the base branch from main to david-bretaud-dev/refactor-remove-spacing-tokens July 19, 2026 08:33
@david-bretaud-dev
david-bretaud-dev force-pushed the david-bretaud-dev/refactor-remove-spacing-tokens branch from cf98511 to 9976ad4 Compare July 19, 2026 08:35
@david-bretaud-dev
david-bretaud-dev force-pushed the david-bretaud-dev/feat-add-modal-to-import-new-data branch from 54560ef to db3ec55 Compare July 19, 2026 08:35
hasDashboard: true,
layerOptions: [
{
translation: t("filters.categories.actions.forestInventary"),

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be updated to forestInventOry with an 'o', also the layer name will have to be updated after #182 merge

{
translation: t("filters.categories.actions.socioEco"),
value: LAYERS.ENQUETE,
},

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New layer inventory_bio will need to be added after #182 merge

// Accepted upload extensions per kind (coordo's file / kobotoolbox loaders).
// Form data is the multi-sheet KoboToolbox answers workbook (.xlsx).
export const ACCEPTED_EXTENSIONS_BY_KIND = {
[RESOURCE_KINDS.ExternalData]: ".csv,.xls,.xlsx",

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why it is not a table ? Also there is more supported extensions (see here and here

Suggested change
[RESOURCE_KINDS.ExternalData]: ".csv,.xls,.xlsx",
[RESOURCE_KINDS.ExternalData]: [
".csv",
".tsv",
".tab",
".xlsx",
".xls",
".xlsm",
".xlsb",
".odf",
".ods",
".odt",
],

// Form data is the multi-sheet KoboToolbox answers workbook (.xlsx).
export const ACCEPTED_EXTENSIONS_BY_KIND = {
[RESOURCE_KINDS.ExternalData]: ".csv,.xls,.xlsx",
[RESOURCE_KINDS.FormData]: ".xlsx",

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here, csv are supported too : https://github.com/dataforgoodfr/Coordonnees/blob/c6a65de3db142e9b1a7505224cce794c4d1ef7a2/coordo-py/coordo/loaders/kobotoolbox_loader.py#L216

Suggested change
[RESOURCE_KINDS.FormData]: ".xlsx",
[RESOURCE_KINDS.FormData]: [".csv", ".xlsx"],

"field": {
"file": "File to upload",
"form": "Layer / Form to update",
"formPlaceholder": "Select a layer",

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"formPlaceholder": "Select a layer",
"formPlaceholder": "Select a data source",

"pending": "Envoi en cours...",
"submit": "Ajouter les données"
},
"description": "Importez un fichier pour ajouter des données à une couche de la carte.",

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"description": "Importez un fichier pour ajouter des données à une couche de la carte.",
"description": "Importez un fichier pour ajouter des données à la carte.",

"error": {
"generic": "Upload failed. Please try again.",
"missingFile": "Please choose a file to upload.",
"missingForm": "Please select a layer to update."

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"missingForm": "Please select a layer to update."
"missingForm": "Please select a data source to update."

},
"field": {
"file": "File to upload",
"form": "Layer / Form to update",

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"form": "Layer / Form to update",
"form": "Data source to update",

"pending": "Uploading...",
"submit": "Add data"
},
"description": "Upload a file to add data to a map layer.",

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"description": "Upload a file to add data to a map layer.",
"description": "Upload a file to add data to the map.",

},
"field": {
"file": "Fichier à importer",
"form": "Couche / Formulaire à mettre à jour",

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"form": "Couche / Formulaire à mettre à jour",
"form": "Source de données à mettre à jour",

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature: Add Button and Modal to import DataFile

2 participants